The font size on your site plays a critical role, impacting the way that people understand and interact with your content. After all, if someone can’t read the text on your pages and posts, you can’t expect them to stick around — much less sign up for your email list or make a purchase.
There are several ways that you can change the font size in WordPress. Let’s explore each one!
Understanding font size in WordPress
Before you begin making changes, it’s helpful to understand how font sizes work in WordPress and how they impact your site.
Why font size matters
Font size plays a critical role in both design and accessibility. Here’s why:
- It affects readability, especially for visitors using mobile devices.
- It impacts readability, especially for visitors with visual impairments.
- It helps create a clear visual hierarchy, allowing visitors to navigate and understand your content.
Units of measurement for font size
In WordPress, you can set font sizes using different units. Here are the most common:
- Pixels (px): A fixed size that does not scale based on the viewer’s screen size.
- Ems (em): A relative unit based on the parent element’s font size.
- Rems (rem): A relative unit based on the root element’s font size.
- Percentages (%): Similar to ems, these are relative to the parent element’s font size.
4 Ways to Change WordPress Font Sizes
Depending on your theme, tools, and level of expertise, there are several methods to adjust font size in WordPress.
| Method | Best For | Ease of Use | Control Level |
| Site Editor | Block theme users who want global changes. | Easy | Medium |
| Theme Customizer | Classic theme users with supportive themes. | Easy | Low to Medium |
| Plugin | Beginners who want to change specific text without code. | Very Easy | Low |
| Custom CSS | Developers & advanced users needing precise control. | Difficult | High |
Method 1: The Site Editor (for block themes)
If you’re using a block theme, the Site Editor offers a user-friendly way to modify font sizes without any coding knowledge. In your WordPress dashboard, go to Appearance → Editor and choose Styles. In the panel that appears, click the Edit Styles icon, which resembles a pencil. This will open up the Styles panel.
A list will appear with several visual elements you can edit on a global basis. Select Typography.
Here, you’ll see a list of fonts and individual elements — like links and headers — that you can modify. Choose an element to modify the font size for that particular type of text. In this example, we’ll choose Text, which refers to body or paragraph text. Expand the Size dropdown to see the default size options that you can choose from. Select a new size if you’d like.
If you want to stray from the default options and set a custom size, simply click the icon to the right of the Size title. There, you can either enter a specific number or drag the slider until you’re happy with the way your text looks.
If you want to use a different unit of measure, click the current one — in this case, “rem” — and choose the one you’d like.
Once you’re happy with your font sizes, click the blue Save button at the top right.
Method 2: The Theme Customizer (for classic themes)
If you’re not using a block theme, the theme customizer provides global typography settings for your entire site. Note that this can vary based on the theme you’re using — some have a custom settings panel with typography options, while others may not offer them at all.
In your WordPress dashboard, go to Appearance → Customize. Click on “Typography” or “Fonts.” This can vary depending on your theme.
Then, adjust the font sizes and settings as you’d like. Once you’re done, click the Publish button. Again, not all themes support font size customization through the customizer. If this is the case, consider using a plugin or custom CSS.
Method 3: Using a plugin for advanced control
WordPress plugins are ideal for those who want advanced control over their typography without working with code. Here are a couple of plugins that provide this functionality:
- WP Typography: Offers granular control over text size and style.
- Advanced Editor Tools: Adds advanced font options and a Classic Paragraph block.
The exact steps you’ll take to change font size will vary based on the plugin you choose. Refer to their documentation for a detailed walkthrough.
Method 4: Using custom CSS for precision
If you’re comfortable with code, custom CSS allows for precise control over font sizes. There are several ways you can work with CSS, depending on the theme you’re using and your experience level. We’ll walk you through one of them now.
In the WordPress dashboard, go to Appearance → Editor. Choose Styles, then click the Edit Styles icon, which resembles a pencil. Select the vertical ellipses in the top-right corner of the Styles panel, then click Additional CSS.
There, you can add any CSS that you’d like. Below is an example of code that changes the website’s body font and H1 heading sizes:
p {
font-size: 16px;
}
h1 {
font-size: 32px;
}You can use classes or IDs to target any specific text that you’d like. Then, click the blue Save button to publish your changes.
Changing font size for specific areas
In many cases, you’ll want to customize specific types of text, which you can do using CSS (or using one of the other methods above). Here are some examples:
Headings (H1, H2, H3, etc.)
Headings create a visual hierarchy that guides readers through your content. Larger font sizes emphasize more important sections. Here’s an example of resizing the H2 element:
h2 {
font-size: 36px;
}Body text
Body text should be easy to read across all devices. A font size between 16px and 18px is generally recommended for desktop screens, though this can vary based on the font family you’re using. In the example below, we’re setting the body font to 16px:
body {
font-size: 16px;
}Menus
Menus are key navigation tools and should be legible at all times. You can change their font size using this code snippet:
.menu-item {
font-size: 14px;
}Best practices for changing font size
Adjusting font size is easy, but making the right adjustments requires strategy. Follow these guidelines for a professional and accessible result.
Establish a Typographic Scale: Don’t pick sizes randomly. Use a modular scale (such as 1.25x) to create harmony. If your body text is 16px (1rem), your H3 might be 1.25rem, your H2 1.563rem, and so on. This ensures a consistent visual hierarchy.
Prioritize Readability with rem Units: While px (pixels) are fixed and easy to understand, rem units are best for accessibility. A rem is relative to the root font size, allowing users to scale text size in their browser settings for better readability, which is a key UX signal.
Check Your Contrast: Perfect font size is useless with poor color contrast. Use a tool like the WebAIM Contrast Checker to ensure your text meets WCAG AA or AAA standards against its background.
Troubleshooting common issues
If your font size changes aren’t working as expected, here are some common problems and solutions:
Fonts not updating
- Caching: Clear your site cache and browser cache.
- Theme restrictions: Some themes may limit font customization.
- Plugin conflicts: Disable other plugins to identify potential conflicts.
Poor readability
- Ensure proper contrast between your text and background colors.
- Avoid using overly small or excessively large font sizes.
Mobile font sizes not responsive
- Use relative units like em, rem, or percentages in your settings or custom CSS.
- Test your site on multiple devices using browser developer tools.
Refine your content with an AI assistant and writing partner
Font customization is just one aspect of building and maintaining a high-quality WordPress site. For even greater efficiency, particularly when creating and refining content, consider using tools designed to streamline your workflow. One such tool is Jetpack AI Assistant.
Jetpack AI Assistant is more than just a WordPress plugin. It’s an advanced tool designed to simplify and accelerate content creation. Seamlessly integrated with the WordPress editor, it acts as your intelligent collaborator, helping you produce high-quality content in less time.
Here’s how Jetpack AI Assistant can transform the way you work:
- Create content faster: Whether you’re drafting a blog post, writing detailed page copy, or developing structured lists, Jetpack AI Assistant helps you generate ideas and content with just a few prompts.
- Refine and adjust tone effortlessly: Jetpack AI Assistant allows you to adjust the tone of your text to fit your needs — formal, conversational, or anything in between.
- Generate titles and summaries: Struggling with the perfect headline? Jetpack AI Assistant can suggest compelling titles and concise summaries to make your content shine.
- Overcome writer’s block: With AI-powered suggestions, you can keep the momentum going, even when you’re unsure of how to proceed.
Learn more about Jetpack AI Assistant here.
Frequently asked questions
What is the best font size for website readability?
For the main body text on a website, the best size is between 16 and 18 pixels. This range is large enough for most people to read comfortably on a computer screen without causing eye strain. Anything smaller than 16 pixels can be difficult to read, especially for users with visual impairments. For headings, you should use larger sizes to show a clear structure. This helps people scan your page and find what they need quickly.
It is important to remember that readability also depends on other factors. These include the font type you choose, the amount of space between lines of text, and the color contrast between the text and the background. For mobile devices, some designers even recommend a slightly larger font size, up to 20 pixels, to make reading on a smaller screen easier.
Does changing font size affect my website’s SEO?
Changing your font size does not directly tell Google how to rank your site. However, it has a strong indirect effect. When your font is easy to read, people will stay on your page longer and are less likely to leave right away.
This user behavior signals to Google that your content is valuable. Over time, these positive signals can help improve your position in search results. So, choosing a readable font size is a key part of good on-page SEO because it improves the user experience.
How can I change the font size on mobile devices only?
To change font size just for mobile, you need to use custom CSS with a media query. A media query applies CSS rules only when the screen is a certain size.
For example, you can add code that makes the body text smaller or larger on screens narrower than 600 pixels. This lets you set a perfect font size for desktop users and a different, optimized size for mobile users. This makes your site responsive and ensures it is easy to read on any device.
Why are my font size changes not working or showing up?
There are a few common reasons for this problem. The most frequent cause is caching. Your browser or a WordPress caching plugin might be showing you an old, saved version of your site. Try clearing your browser cache and your website’s cache first.
Another reason could be that your WordPress theme’s CSS is overriding your changes. You may need to use a more specific CSS selector or add !important to your rule, but use this second option with caution as it can create other issues.
How do I find the correct CSS selector to change a font’s size?
You can find the right CSS selector using your browser’s developer tools. In Chrome or Firefox, right-click on the text you want to change and select “Inspect.”
This will open a panel showing the HTML code for that element. You can see its HTML tag, such as p or h2, and any CSS classes or IDs it has, like .entry-title. You can then use these to write a specific CSS rule, such as h2.entry-title { font-size: 28px; }, to target that element precisely.
How do I change the font size of just one word or sentence?
The easiest way is to use the WordPress block editor. Inside a paragraph block, you can highlight the specific word or sentence you want to change. Then, look in the block settings on the right side of the screen. Under the Typography section, you can select a preset size or enter a custom size for only the highlighted text.
This method gives you precise control without needing to write any custom code, making it simple to add emphasis to specific parts of your text.
What is the difference between px, em, and rem for font sizes?
px stands for pixels, which is a fixed-size unit. A font set to 16px will always be 16 pixels tall. em and rem are flexible units. em is based on the font size of its parent element. rem stands for root em and is based on the font size of the whole HTML document.
For websites, rem is often the best choice. It allows visitors to change the font size in their browser settings for accessibility, and your whole site’s typography will scale correctly.
Can I change font size in WordPress without CSS?
Yes, you can easily change the font size in WordPress without using any CSS code. If you are using a modern block theme, you can use the Site Editor. Just go to Appearance and then Editor. From there, you can adjust the font sizes for your entire website or for specific blocks like paragraphs and headings.
If you are using an older, classic theme, the Theme Customizer often has options for typography under Appearance and then Customize. Finally, you can use a plugin. Plugins like Advanced Editor Tools add a simple font size dropdown menu to the editor, letting you change the size of any text you select.
How do I make my website’s fonts accessible to everyone?
Making fonts accessible involves two main things. First, choose a body font size of at least 16px. This ensures it is large enough for most users. Second, ensure there is enough color contrast between your text and its background.
You can use an online contrast checker tool to verify that your colors meet WCAG guidelines. Using rem units for font sizes is also very helpful, as it respects a user’s browser settings if they need to make text larger for better readability.
Jetpack 
