Block Editor Typography Settings: The Ultimate Guide

The block editor typography settings interface allows users to customize the text settings for different blocks in the block editor. This includes:

Drop cap
Font family
Font size
Appearance (or font style)
Line height
Letter case
Letter spacing

In this article, we’ll first look at what these typography settings are, and how they work. Then we’ll look at how to configure each of them, and of course how to disable them.

The code snippets in this article use the theme.json file. If you’re not familiar with how to use theme.json to configure a theme, you can take the free Theme.json Explained course.

What are the typography settings?
Controlling drop cap
Controlling font sizes
Controlling the font family
Controlling appearance (font weight and font style)
Letter case
Letter spacing
How to disable the typography settings?
Closing

What are the typography settings?

When you select a block that supports rich text, the Block Inspector will show a Typography panel.

The typography settings panel of the Paragraph block.

The default is not to show all these settings. Only the font size selector is always present. To show the other settings, you have to enable them as shown below.

The button with the three dots opens the menu with all available settings.

So what do these settings allow you to do? Let’s go through them.

Controlling drop cap

A drop cap is a large capital letter. This typographic style is used for the opening paragraph of a text or section to add emphasis.

Drop caps can be toggled on or off.

Only paragraph blocks support drop caps, and they are enabled by default. Here’s how to disable this feature.

Controlling font sizes

This settings control allows you to:

Select from a set of predefined font sizes.
Choose a custom font size.

Using a predefined font-size

The font size selector interface element has been changed several times, and this is its current implementation in WordPress 6.0:

There are two main controls:

The font size selector (see 1) allows users to select a font size.
The font size name (see 2) shows the name of the font size.

The numbers in the size selector correspond to the font size defined in theme.json, with the unit removed. The screenshot above shows the default WordPress font size palette, which ranges from 13px to 42px.

Setting a custom font size

If you want a font size that is not preset, you can use the font size picker. It needs to be toggled on to get access.

The units available to set the font sizes can be configured through the spacing setting in theme.json.

How to define default font sizes

To define custom font sizes in your theme, add the following JSON snippet under the settings key of your theme.json file.

"typography": {
    "fontSizes": [
        {
            "name": "Small",
            "slug": "small",
            "size": "1rem"
        },
       {
            "name": "Medium",
            "slug": "medium",
            "size": "1.125rem"
        },
        {
            "name": "Large",
            "slug": "large",
            "size": "1.75rem"
        },
        {
            "name": "Extra Large",
            "slug": "x-large",
            "size": "2.25rem"
        }
    ]
}

As we can see the font size options are an array, with objects representing each size. Each size has the following properties:

The name value for the selected size displays in the interface.
The slug is part of the CSS classes added to the block on the frontend.
The Block Editor uses the size value in size to style the block preview.

Our custom font sizes as defined in the theme.json file.

Controlling the font family

The font family control allows users to change the font styling of a block. This control is only available for specific blocks, and it is not enabled by default. The theme has to define font families for this interface element to appear.

To define font families in your theme, add the following JSON snippet under the settings key of your theme.json file.

"typography": {
    "fontFamilies": [
        {
            "fontFamily": "sans-serif",
            "name": "Sans Serif",
            "slug": "sans-serif"
        },
        {
            "fontFamily": "serif",
            "name": "Serif",
            "slug": "serif"
        }
    ]
}

As we can see the font family options are an array, with objects representing each family:

The name value displays in the dropdown of the Typography panel.
The slug is part of the CSS classes added to the block on the frontend.
The fontFamily declaration defines the font to be used.

Our font families as defined in the theme.json file.

Controlling appearance (font weight and font style)

The appearance control combines two settings: font weight, and font style.

If both are enabled, the control shows a single list combining weights and styles.

As of WordPress 6.0, these settings cannot be controlled through theme.json. Instead they are hard-coded into the interface element.

These are the font style values:

Regular
Italic

These are the font weight names, with their numeric values:

Thin: 100
Extra Light: 200
Light: 300
Regular: 400
Medium: 500
Semi Bold: 600
Bold: 700
Extra Bold: 800
Black: 900

Letter case

The letter case control allows to apply text-decoration styles.

The letter case control

As of WordPress 6.0, the transform control only supports three letter case styles:

Uppercase
Lowercase
Capitalize

These are hard-coded into the control, and cannot be managed through theme.json.

Letter spacing

The letter spacing control allows to set the space used between characters.

The input allows the user to enter a number, and the dropdown to choose a unit. To configure the units, set the spacing.units property in theme.json.

How to disable the typography settings?

Using theme.json you have very fine-grained control over the block editor typography settings. This way you can enable only the features that your theme needs.

Disable drop cap

“How to disable the drop cap feature?” is among the top questions I get asked. Thanks to theme.json, removing this feature is now as simple as this snippet:

"typography": {
    "dropCap" false
}

Disable font size controls

To disable the custom font size:

"typography": {
    "customFontSize": false
}

To disable the font size selection:

"typography": {
    "fontSizes": []
}

Disable appearance (font weight and font style)

To disable the entire appearance control:

"typography": {
    "fontWeight": false,
    "fontStyle": false
}

To disable the font style control:

"typography": {
    "fontStyle": false
}

To disable the font weight control:

"typography": {
    "fontStyle": false
}

Disable letter case

While the interface designates this feature as letter case, the theme.json file calls is text transforms.

"typography": {
    "textTransform": false
}

Disable letter spacing

"typography": {
    "letterSpacing": false
}

Closing

There you have it! All you need to know about typography settings in the block editor.

The ability to managed these settings is just one of the many features that you can configure with theme.json. If you aren’t yet confident in working with theme.json, my free Theme.json Explained course is the way to go.

Table of Contents