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.

Table of Contents

• What are the typography settings?
• Controlling drop cap
• Controlling font sizes
  • Using a predefined font-size
  • Setting a custom font size
  • How to define default font sizes
• Controlling the font family
• Controlling appearance (font weight and font style)
• Letter case
• Letter spacing
• How to disable the typography settings?
  • Disable drop cap
  • Disable font size controls
  • Disable appearance (font weight and font style)
  • Disable letter case
  • Disable letter spacing
• Closing

What are the typography settings?

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

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.

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.

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:

1. Select from a set of predefined font sizes.
2. 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"
        }
    ]
}Code language: JavaScript (javascript)

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.

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"
        }
    ]
}Code language: JavaScript (javascript)

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.

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.

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
}Code language: JavaScript (javascript)

Disable font size controls

To disable the custom font size:

"typography": {
    "customFontSize": false
}Code language: JavaScript (javascript)

To disable the font size selection:

"typography": {
    "fontSizes": []
}Code language: JavaScript (javascript)

Disable appearance (font weight and font style)

To disable the entire appearance control:

"typography": {
    "fontWeight": false,
    "fontStyle": false
}Code language: JavaScript (javascript)

To disable the font style control:

"typography": {
    "fontStyle": false
}Code language: JavaScript (javascript)

To disable the font weight control:

"typography": {
    "fontStyle": false
}
Code language: JavaScript (javascript)

Disable letter case

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

"typography": {
    "textTransform": false
}Code language: JavaScript (javascript)

Disable letter spacing

"typography": {
    "letterSpacing": false
}Code language: JavaScript (javascript)

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.