How to change the font size in WordPress

Font size is one of the first things people want to adjust on a new WordPress site. The default body text feels too small on a modern widescreen display, a heading looks cramped next to an image, or a plugin’s widget is rendering everything at 12px for no obvious reason. WordPress gives you several places to change font size – per block, per theme, per site – and which one is correct depends on whether you want to change one piece of text or everything globally.

This guide covers per-block font size in the Gutenberg Typography panel, theme-level sizes in theme.json for block themes, classic theme font size controls, and the CSS rule that overrides everything when the admin panels are not enough. It also covers accessibility – below a certain size, body text becomes genuinely hard to read on mobile, and that shows up in bounce rate before it shows up anywhere else.

The short answer#

In the block editor, click any block with text, open the Styles panel on the right (the icon that looks like two overlapping circles), and find the Typography section. The size dropdown has preset values (Small, Medium, Large, Extra Large) plus a custom input. Pick a preset or type a specific value, and the change applies to that block.

For site-wide changes – every paragraph at a different base size, all H2s larger, body line-height adjusted – the answer depends on the theme:

• Block themes (Twenty Twenty-Four, Twenty Twenty-Five, anything with a Site Editor): use Appearance > Editor > Styles > Typography or edit theme.json in a child theme.
• Classic themes: look for a Typography panel in Appearance > Customize, or add CSS in Appearance > Customize > Additional CSS.
• Any theme: add CSS directly, which works everywhere and always wins when theme panels do not expose the setting you need.

Per-block font size in Gutenberg#

The most common font size change is for one specific block – a hero heading you want larger, a caption smaller, a pull quote bigger than the surrounding text. The block editor’s Typography panel handles this directly.

Step-by-step: change font size on a single block

1. Click the block (paragraph, heading, list, button, and most other text-containing blocks).
2. In the right sidebar, click the Block tab (not Document).
3. Find the Typography section. On some themes it is collapsed by default – click to expand.
4. Under Size, pick a preset (Small, Medium, Large, Extra Large) or click the three-dot menu next to Size and choose Custom.
5. Enter a specific value – 18px , 1.25rem , 120% , or one of the CSS clamp functions for responsive sizing.
6. The change is visible immediately in the editor and on the front end after you save the post.

Custom values give you more control than the presets. A Size of clamp(1rem, 2vw, 1.5rem) scales the font between 16px and 24px based on the viewport width – useful for responsive headings without writing media queries.

What the preset sizes actually are

The Small/Medium/Large/Extra Large values are defined by the theme, not by Gutenberg. Two themes showing the same “Large” preset may use completely different sizes – one theme’s Large might be 24px, another’s might be 32px. To see the actual values, either inspect the rendered element in browser DevTools or open the theme’s theme.json file and find the fontSizes array.

Reset a block to the theme default

If you set a size and want to undo it, click the three-dot menu next to Size and pick Reset. The block returns to the theme’s default size for that block type (paragraphs use the body default, H2 uses the H2 default, and so on).

Global font size in block themes#

Changing the size of one block is for edge cases. Most of the time you want every paragraph, every H2, every list item to use a new size site-wide. Block themes handle this through Global Styles in the Site Editor.

Site Editor Global Styles

1. Go to Appearance > Editor.
2. Click the Styles icon in the top-right (two overlapping circles).
3. Click Typography.
4. You will see options for Text, Link, Headings, Captions, and Buttons. Each has its own font family, size, line height, and letter spacing controls.
5. Click Text to change the body paragraph size, Headings to change H1-H6 sizes, and so on.
6. Click Save to apply site-wide.

Changes in Global Styles propagate to every block of that type across the entire site. A change to Text affects every paragraph, list item, and caption. A change to Headings affects every H1-H6 unless the specific level has its own override.

Per-heading level overrides

Headings also have per-level controls (H1, H2, H3, H4, H5, H6). Click Headings in the Styles panel, then pick the specific level to set its size, weight, and letter spacing. A common pattern is setting H1 at 48px, H2 at 36px, H3 at 28px, H4 at 22px, and letting H5 and H6 fall back to body size.

Editing theme.json directly

For more control – or to version-control your typography settings alongside the rest of the theme – edit theme.json in a child theme. The fontSizes array defines the preset values that populate the Size dropdown in the block editor:

{
  "version": 2,
  "settings": {
    "typography": {
      "fontSizes": [
        { "slug": "small",   "size": "0.875rem", "name": "Small" },
        { "slug": "medium",  "size": "1rem",     "name": "Medium" },
        { "slug": "large",   "size": "1.25rem",  "name": "Large" },
        { "slug": "x-large", "size": "1.5rem",   "name": "Extra Large" }
      ]
    }
  }
}

The size can be any CSS length – px, rem, em, clamp(). The slug is what WordPress writes into the block’s HTML class ( has-small-font-size , has-large-font-size ), so pick slugs that will not clash with your existing CSS.

For a fluid base type scale that adapts to screen size automatically, use fluid instead of a single size:

{ "slug": "medium", "size": "1.125rem", "fluid": { "min": "1rem", "max": "1.25rem" }, "name": "Medium" }

The min/max constrain the scaling, and WordPress outputs a CSS clamp() rule for you.

Child theme for theme.json changes

Edit theme.json in a child theme, not the parent. Parent theme updates overwrite the parent’s theme.json every time. How to edit the footer in WordPress has a minimal child theme setup section you can reuse for this – create the child, drop your theme.json in it, activate it. The child inherits everything from the parent and only overrides what you changed.

Global font size in classic themes#

Classic themes do not use theme.json . They use the Customizer (Appearance > Customize) with whatever controls the theme author chose to expose. Many themes include a Typography panel covering font family and size. Open the Customizer, look for it, and make changes with the live preview.

Themes that do not expose font size controls (and there are plenty) leave you with two options: switch to a theme that does, or add CSS.

Font size via Additional CSS

The Customizer’s Additional CSS panel is available on every classic theme. It loads after the theme stylesheet, which means rules you add here win over the theme’s default sizes without needing !important .

To change the global body font size:

body {
    font-size: 18px;
}

To change headings:

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

To change a specific widget or plugin area:

.widget-title { font-size: 20px; }
.woocommerce .product-title { font-size: 1.25rem; }

How to edit and add custom CSS in WordPress covers the full workflow including how to find the right CSS selector in browser DevTools before writing overrides, and when to promote CSS from the Customizer panel into a child theme stylesheet for larger customizations.

Responsive font sizes#

A single font-size value applies on every screen size. On a phone, 18px is reasonable; on a desktop with a 27-inch monitor, 18px body text looks unnecessarily small. Three ways to handle this:

Media queries

The classic approach. One size for mobile, one for tablet, one for desktop:

body { font-size: 16px; }

@media (min-width: 768px) {
    body { font-size: 17px; }
}

@media (min-width: 1200px) {
    body { font-size: 18px; }
}

Works everywhere, very predictable. Requires you to pick specific breakpoints.

CSS clamp()

Modern browsers support a function that interpolates smoothly between a minimum and maximum size:

body {
    font-size: clamp(1rem, 0.95rem + 0.5vw, 1.25rem);
}

The three values are: minimum, preferred (a function of viewport width), maximum. As the viewport grows from mobile to desktop, the font size scales between 16px and 20px automatically. One rule, no breakpoints.

Gutenberg fluid typography

Block themes support fluid sizing via theme.json without writing CSS, as shown earlier. WordPress outputs the clamp() rule for you. This is the right default for new sites on block themes.

Accessibility: do not go below 16px for body text#

There is a floor on how small body text should be, and it is not aesthetic – it is functional. Text smaller than 16px on mobile is hard to read for many users, and iOS Safari will zoom the page when users tap into an input with text under 16px. The latter breaks your mobile layout on every form submission.

Guidelines worth holding to:

• Body text: 16px minimum on mobile, 18px preferred on desktop. The old blog standard of 14px body text is a legacy of low-resolution monitors; every modern device has the pixel density to render 18px crisply.
• Line height: 1.5 to 1.7 for body paragraphs. Tight line height makes long paragraphs exhausting to read.
• Heading sizes: visually distinct from body. An H2 at 20px next to body text at 18px does not read as a heading. Keep at least a 1.5x ratio between body and H2, larger for H1.
• Never use all-caps with tracking-based sizing. Tight-tracked uppercase heading text looks elegant at 16px and becomes unreadable at 12px.
• Check your site on a real phone at arm’s length. Simulators in browser DevTools are useful but never substitute for holding the device.

Accessibility compliance (WCAG 2.1 AA) does not specify a minimum font size, but it does require that users can resize text up to 200% without loss of content or functionality. Setting body text in rem or em units instead of fixed px makes this work out of the box – browser text size preferences scale your entire type scale proportionally. Fixed px ignores those preferences.

Font size for specific use cases#

Increase font size across the entire site

Set the body font size in Global Styles (block theme) or Additional CSS (classic theme). Headings scale proportionally if their sizes are defined in em or rem . If they are in px , set each heading explicitly.

Make one paragraph larger than the rest

Use the Typography panel on that single paragraph block. Pick a preset or enter a custom size.

Make every H2 smaller

Block theme: Appearance > Editor > Styles > Typography > Headings > H2. Classic theme: CSS, h2 { font-size: 1.75rem; } in Additional CSS.

Change size only on mobile

CSS media query or clamp() in Additional CSS:

@media (max-width: 768px) {
    body { font-size: 16px; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
}

Change size inside a specific plugin

Inspect the plugin’s output in browser DevTools, grab the specific class or ID it uses, and target that in Additional CSS. Plugins often use generic-looking classes ( .plugin-name-title ) that are safe to target; they rarely use !important , so a simple rule with the right specificity wins.

Common mistakes#

• Changing font size with the browser zoom and assuming the site is set that way. Browser zoom affects only your view. To change the actual font size for all visitors, change the theme setting or CSS.
• Setting font-size: 0.875em on body in a classic theme and having everything inherit it with unexpected compounding. em is relative to the parent; nested elements with their own em sizes compound. Use rem (relative to the root <html> element) for body font size to avoid this.
• Using !important to override a theme size. If a theme’s rule is beating yours, the problem is specificity. Add more selector specificity ( body p instead of just p ), or use Additional CSS, which loads last. !important is a flag that says “I did not debug this.”
• Setting fixed px sizes and losing the user’s browser font size preference. Use rem or em on body and heading sizes so user preferences scale properly.
• Forgetting to change size in the editor and the front end. The block editor renders your content with the theme’s styles, so the editor preview usually matches the front end. But if a theme defines font size inside a CSS file that is only enqueued on the front end (not in the editor), the editor will look different. Save the post and check on the front end; do not trust the editor alone.
• Changing the font-size on html instead of body . html is the root. Changing it re-scales every rem unit across the entire site, which is sometimes what you want but usually not – a lot of CSS is built assuming html is 16px. Set body { font-size: ... } unless you specifically want the rem-scaling behavior.
• Confusing font size with font family. Size is how big the text is. Family is which typeface is used. They are different settings. If you want a different typeface entirely, how to add custom fonts to WordPress covers Google Fonts and self-hosted @font-face .

How Hostney handles font sizing#

Font size is a theme and CSS concern – it does not depend on the host. But a few Hostney details interact with it in small ways worth noting.

FastCGI page caching serves the fully-rendered HTML with inline styles and referenced stylesheets intact, so font size changes in Global Styles or theme.json are cached along with the page. When you change font size settings, the Hostney Cache plugin’s purge mechanism clears the affected URLs automatically so the new sizes go live immediately – no manual cache clear needed for the common case.

For sites using custom @font-face declarations with the font files served from your own /wp-content/uploads/ or theme directory, HTTP/2 and HTTP/3 multiplexing deliver the font files alongside the HTML and CSS on the same connection. That matters when you pair new font sizes with new font families – the fonts arrive fast enough that the layout does not shift visibly when they load.

The built-in file manager’s code editor has syntax highlighting for JSON, which makes editing theme.json safer than doing it in a plain text field. If you are setting up a child theme to hold your typography overrides, the file manager guide covers creating the child theme directory, dropping theme.json and style.css into it, and activating without needing SFTP.

Summary#

In WordPress, font size lives in multiple places depending on whether you want a single-block change or a site-wide setting. For one block, use the Typography panel in the block editor’s right sidebar. For everything site-wide on a block theme, use Appearance > Editor > Styles > Typography or edit theme.json in a child theme. On classic themes, check the Customizer for a Typography panel, and fall back to Additional CSS when the theme does not expose what you need. Use rem or em for body sizes so user preferences still work, keep mobile body text at 16px or larger to avoid iOS auto-zoom on input focus, and hold headings at a clear visual size ratio above the body. Font size is different from font family – if you want a different typeface, the custom fonts guide has that covered separately.