--- title: Standardizing theme.json font sizes description: 'Standardizing font sizes in WordPress themes via theme.json enhances theme interchangeability while maintaining distinct styles. Here’s how to implement it.' doc_version: current last_updated: '2026-03-31T09:56:25.000Z' date: '2021-08-30T07:41:37.000Z' author: Rich Tabor summary: 'Standardizing font sizes in WordPress themes via theme.json enhances theme interchangeability while maintaining distinct styles. Here’s how to implement it.' tags: - Design - Gutenberg - Themes - WordPress published: true type: blog url: /theme-json-font-sizes canonical: https://richtabor.com/theme-json-font-sizes id: 1254 --- **This is part two**, of three, in a series on standardizing how we build this next generation of WordPress block themes to accompany the [Full Site Editing](/full-site-editing/) effort. If you like this article on font sizes, read on about [standardizing color slugs](/?p=1247), and [standardizing site spacing](/?p=1256). Each of these are what I would consider core design tenets of a website, of which should be functionally standardized. By standardizing a few entries within a WordPress theme’s theme.json file, we can finally create a class of themes that truly are interchangeable. Interchangeable in _function_, while remaining distinct in _style_. Here’s a take on why this is important, and how weget there. ## How theme font sizes are generated from the theme.json file When a font size is applied to a Gutenberg block, a class is added to the component, consisting of `.has-font-size-(property)`. So here’s how you extend font sizes with theme.json, using what I’d say should be the standard `fontSizes` that every block theme should account for: ``` "settings": { "typography": { "fontSizes": [ { "name": "Small", "fluid": { "min": "0.875rem", "max": "1rem" }, "size": "1rem", "slug": "small" }, { "name": "Medium", "fluid": { "min": "1rem", "max": "1.125rem" }, "size": "1rem", "slug": "medium" }, { "name": "Large", "fluid": { "min": "1.75rem", "max": "1.875rem" }, "size": "1.875rem", "slug": "large" }, { "name": "Extra Large", "fluid": { "min": "1.875rem", "max": "2.25rem" }, "size": "2.25rem", "slug": "x-large" } ] } } ``` The [theme.json resolver](https://developer.wordpress.org/reference/files/wp-includes/class-wp-theme-json-resolver.php/) creates the CSS classes with the appropriate value, along with the necessary CSS custom properties within the block editor and on the front-end. The output looks something like this below: ``` body { --wp--preset--font-size--small: 0.8rem; --wp--preset--font-size--medium 1rem: --wp--preset--font-size--large: 1.25rem; --wp--preset--font-size--x-large: 1.563rem; } .has-small-font-size { font-size: var(--wp--preset--font-size--small) !important; } .has-medium-font-size { font-size: var(--wp--preset--font-size--medium) !important; } .has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; } .has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large) !important; } ``` This is great — as now themes don’t have to [manually declare a set of CSS classes](/gutenberg-color-palettes/) to cover font sizes _and colors_. But there is one caveat… ## Why standardization matters If you switch to a different block theme, those _specific_ font size are no longer generated — resulting in content that no longer is styled appropriately. To illustrate this hiccup — and the purpose behind standardizing these font size slugs — check out what happens when switching between the [TT1 Blocks](https://wordpress.org/themes/tt1-blocks/) and [Quadrat](https://wordpress.org/themes/quadrat/) block themes. ![](https://i0.wp.com/rich.blog/wp-content/uploads/2023/07/e0574-tt1.png.webp?ssl=1&resize=1024%2C751) ![](https://i0.wp.com/rich.blog/wp-content/uploads/2023/07/bacb2-qu.png.webp?ssl=1&resize=1024%2C751) To illustrate this, I’ve added paragraph blocks to the page, each with a corresponding font size assigned to it. The TT1 Blocks theme has a `gigantic` font size slug, but uses `extra-small` instead of `tiny`. Quadrat ignores both of those font sizes, resulting in both the “Gigantic” text and the “Tiny” text displaying as normal paragraph text. And this gets worse as the number of font size slugs that map in `settings.typography.fontSizes` is lower. This is not a fantastic experience. In fact—it’s destructive. As WordPress developers, we should encourage the democratization of publishing… even if that means making it easy for folks to switch away from your products. ## Suggested font size slugs Just because block themes should include these six font size options, does not mean all of the _values_ in each block theme are the same across all themes. That saying, here are the `settings.typography.fontSizes` slugs that I propose should be included in each block theme (at least): - `small` - `medium` - `large` - `x-large` You could easily use the [Type Scale](https://type-scale.com) tool to scale the typography appropriately, or come up with a clever scaling system in the theme itself — but ideally, each of these font sizes should be accounted for in the theme.json file. ## What are block themes doing today? A lot of block themes are actually close to this standard already. Others, not so much — even core WordPress themes have not landed on a standard yet. Here’s a look at some of the leading block themes and how they are registering font sizes: - [BlockBase](https://github.com/Automattic/themes/blob/trunk/blockbase/theme.json#L337-L362) has most of these font sizes, but is missing extra-large and gigantic. The hierarchy is broken, skipping extra large entirely — jumping from large to huge - [Aino](https://wordpress.org/themes/aino/) uses its own t-shirt style font size system, resulting in none of the font sizes translating to and from other themes. I think using the t-shirt labels is interesting, but the actual slugs should still be mapped accordingly - [Anariel Design’s](http://Anariel des) beautiful [Naledi](https://github.com/anarieldesign/naledi/blob/main/theme.json#L128-L163) and [Clove](https://github.com/anarieldesign/clove/blob/main/theme.json) themes are looking good, but are both using extra-small instead of `tiny` - [Quadrat](https://github.com/Automattic/themes/blob/trunk/quadrat/theme.json#L388-L418) is close; just missing the gigantic font size - [TT1-Blocks](https://github.com/WordPress/theme-experiments/blob/master/tt1-blocks/theme.json#L119-L152) is nearly there; using extra-small instead of tiny Just from looking at the leading theme.json based block themes, there is _nearly_ a standard. But still, if you switched between any of these, and happen to have used font sizes within the editor, you will have text that is no longer sized the way you intended. ## What’s your take? And as we continue to move towards more block and pattern-based site building, we should encourage themes to act more as a coat of design, not a system of “locked-in” design components that break once you change a theme. If we can create themes that don’t require folks to double-back on every page they’ve ever published, we’ll foster a much deeper level of empowerment across WordPress publishing. I am excited about the potential this new paradigm of WordPress themes brings to the site building and editing experience. Combined with the Global Styles effort, Block Themes make WordPress personal again. _If you like this article on colors, read the others in this standardization series covering [](/?p=1254)_[color slugs](/?p=1247)__ _and [site spacing](/?p=1256)_. ## Sitemap [Full site index](/sitemap.md)