The Complete Guide to Changing Font Sizes in WordPress (2023)

Are you struggling to get your font sizes right on your WordPress website? With so many devices, screen sizes, and user preferences to consider, it can be tough to find the perfect balance. But getting your typography right is crucial for user experience, accessibility, and conversion rates.

Consider these statistics:

• 60% of web users will not revisit a site if the content is hard to read on mobile (SearchEngineJournal)
• 66% of users are more likely to engage with content that is well-formatted and visually appealing (Adobe)
• Websites with good typography and readability have 35% lower bounce rates than average (CrazyEgg)

Clearly, font size matters a lot to your audience. The good news is, WordPress makes it easy to customize your font sizes to create the best possible reading experience.

In this expert guide, I‘ll show you four simple methods to change font sizes in WordPress:

1. Changing sizes in the block editor
2. Using the theme customizer
3. Installing a typography plugin
4. Adding custom CSS

Whether you‘re a total beginner or an experienced developer, you‘ll find a method that works for you. Let‘s dive in!

Method 1: Changing Sizes in the Block Editor

The WordPress block editor (Gutenberg) provides several ways to adjust font sizes as you create your content:

Using Heading Blocks

The easiest way to apply larger font sizes is by using heading blocks:

1. Click the + icon to add a new block
2. Search for "heading" and insert the Heading block
3. Select the heading level (H1-H6) from the toolbar
4. Enter your heading text and it will automatically apply the larger font size

Heading block sizes are preset by your theme but are typically in this range:

For SEO and usability, reserve H1 for page titles and use H2s for main section headings.

Customizing Font Sizes in Blocks

You can also customize font sizes in any text-based block:

1. Click inside the block to select it
2. Go to the Block settings sidebar on the right
3. Look for the Typography settings
4. Choose a preset size (e.g. Small, Normal, Large) or enter a custom pixel value

This works in paragraph, list, quote, and button blocks too! Just look for the typography options.

Expert tip: For more advanced font controls in the block editor, try the EditorsKit plugin. It adds inline font sizing, typography presets, and more.

Method 2: Using the Theme Customizer

Many WordPress themes include font options in the built-in customizer:

1. Go to Appearance > Customize
2. Look for a "Typography" section
3. Expand the section to view the font size options
4. Adjust the sliders or enter size values
5. Preview the changes and click Publish when satisfied

The exact options will vary by theme. Some only allow you to set a global base size, while others provide granular control over headings and body text separately.

If you don‘t see a Typography section in the customizer, your theme may not have built-in font options. In that case, try one of the other methods below.

Method 3: Installing a Typography Plugin

For even more control over your fonts, you can install a dedicated typography plugin. These plugins work with any theme and give you detailed font settings, including:

• Custom font sizes for specific elements (headings, body, lists, etc.)
• Mobile-specific font sizes for responsive typography
• Font family, color, weight, transform, and spacing options
• Custom font upload
• Presets and Google Font integration

Some of the best typography plugins for WordPress are:

• Easy Google Fonts – Easily add and customize Google Fonts, including font sizes.
• WP Google Fonts – Another popular Google Font plugin with granular controls.
• Zeno Font Resizer – Allows visitors to adjust font sizes themselves for better accessibility.
• TK Google Fonts – Powerful plugin for customizing Google Fonts and saving your own typography presets.

After installing a font plugin, you‘ll typically find the settings under Appearance or a new top-level menu item. Look for the font size controls and start customizing!

Method 4: Adding Custom CSS

If you‘re comfortable with a bit of code, you can also change font sizes with custom CSS. This gives you total control over your typography without relying on a plugin.

There are two ways to add custom CSS in WordPress:

1. With the customizer (Appearance > Customize > Additional CSS)
2. In your child theme‘s style.css file

Either way, you‘ll use the font-size property to set sizes for different HTML elements. For example:

body {
  font-size: 18px;
}

h1 {
  font-size: 36px;  
}

h2 {
  font-size: 28px;
}

This would set the global body font size to 18px, H1 headings to 36px, and H2 headings to 28px.

To apply font sizes to specific pages or sections, you can use CSS classes:

.blog-post {
  font-size: 20px;
}

.sidebar {
  font-size: 16px;
}

Now any element with the blog-post class will have 20px text, while sidebar content will be 16px.

If you‘re not sure what selectors to use, right-click on the element in the browser and choose "Inspect". This will show you the HTML and any existing CSS classes you can target.

Expert tip: Always use a child theme or CSS plugin instead of editing your main theme files directly. This ensures your custom CSS won‘t get overwritten when the theme is updated.

Frequently Asked Questions

What is the best font size for the web?
Most experts recommend a minimum body font size of 16px. This is large enough to be easily readable on all screen sizes but not so large that it looks clunky. For headings, aim for sizes at least 1.5-2 times larger than the body text for good visual hierarchy.

What are the default font sizes in WordPress?
The default font sizes in WordPress depend on your theme. Most themes use a 16px body size and headings ranging from 18-36px. You can check your theme‘s stylesheet (style.css) to see the exact default sizes.

How do I change font sizes for mobile devices?
The best way to set font sizes for mobile is by using CSS media queries. This allows you to define different font sizes for different screen widths. Here‘s an example:

body {
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

This CSS sets the base font size to 18px but reduces it to 16px on screens smaller than 768px wide (i.e. most smartphones).

Some typography plugins also provide mobile-specific font size options so you don‘t have to write the media queries yourself.

What is the difference between pixels, ems, and rems?
Pixels (px), ems, and rems are all units used to define font sizes in CSS:

• Pixels (px) – An absolute size that will appear the same regardless of screen size or user settings. Easy to understand but less flexible.
• Ems (em) – A relative size based on the font size of the parent element. Can create compounding size effects if not careful.
• Rems (rem) – A relative size based on the root font size (set on the html element). Often easier to work with than ems.

Generally, pixels or rems are the best choice for web typography. I recommend pixels for beginners and rems for more advanced developers who want to create scalable, responsive type systems.

What other factors affect readability besides font size?
Font size is just one aspect of typography that impacts readability. Other key factors include:

• Line height – The spacing between lines of text. Aim for around 1.5 times the font size.
• Line width – The number of characters per line. Keep lines to 50-75 characters for optimal readability.
• Paragraph spacing – The margin or padding between paragraphs. Add enough space to visually separate text blocks.
• Font family – The specific font used. Sans-serif fonts like Arial or Open Sans are generally best for screens.
• Color contrast – The difference in brightness between text and background. Use dark text on light backgrounds for maximum contrast.

By optimizing all of these elements, you can create a pleasant, easy-to-read experience for your visitors.

Conclusion

As you can see, WordPress provides plenty of flexibility when it comes to customizing your website‘s typography. Whether you‘re a code-savvy designer or a non-technical business owner, you have the power to optimize your font sizes for maximum readability and engagement.

To recap, here are the four main methods you can use to change font sizes in WordPress:

1. Use the built-in block editor settings to resize text in headings, paragraphs, and more.
2. Install a theme that includes font customization options in the WordPress customizer.
3. Add a dedicated typography plugin for advanced font control, including size, family, and spacing.
4. Insert custom CSS to set pixel- or percentage-based font sizes for any element.

Ultimately, the "right" font sizes will depend on your unique content, audience, and design. But by using the techniques and best practices outlined in this guide, you‘ll be well on your way to creating a beautiful, readable WordPress site.

Remember, for body text, 16px is generally a good minimum size. But don‘t be afraid to go larger (18-20px) for improved usability, especially on mobile devices. For headings, use sizes at least 1.5 times larger than your body text to establish a clear visual hierarchy.

Above all, keep testing and iterating until you find the perfect typography for your users. And if you ever have questions or get stuck, don‘t hesitate to reach out to the helpful WordPress community or consult with a professional designer.

Your font sizes may seem like a small detail, but they can have a huge impact on how people perceive and interact with your website. So take the time to get them right — your readers will thank you!