Most text blocks in the WordPress editor contain typography settings to control the text’s appearance in your content. This guide will show you how to use these typography settings.
In this guide
Typography style settings are available for:
- Styles – change the appearance of all the text throughout your site at once.
- Blocks – change the appearance of the text used in specific elements.
Note that not every block includes typography settings. The available settings will vary depending on the theme and the type of block.
To access the style settings for your whole site follow these steps:
- Visit your site’s dashboard.
- Go to Appearance → Editor.
- Select “Styles” from the left-side menu.
Learn more about editing your site’s styles.
To change the style settings for a single block follow these steps:
- Edit the page, post, or template with the specific block.
- Click the block and view the block’s sidebar settings.
Some block style settings be included in the main block settings, while others will have a separate “Styles” tab. Click the icon of a black and white circle to access style settings for those blocks.
Learn more about editing a specific block’s style.
When you select a block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:
Adjust the appearance of the block’s text with the following settings.
If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:
- Font size
- Font family
- Appearance
- Line height
- Decoration
- Letter case
- Letter spacing
Click each setting once, and a checkmark will appear next to it. You can then close the three dots menu to view the setting.
The settings available will depend on the block you are using. Not all settings will be available on all blocks.
Font size allows you to adjust the size of the text. You can select small, medium, large, extra large and bigger sizes from the font size preset list.
You can set a custom size by clicking the slider icon above the presets. By default, the custom size uses pixels. Click the “px” next to the field to change to one of the other font-size units:
- Pixels – maintain a consistent size regardless of the screen size.
em– use a responsive size that adjusts to the viewer’s screen size, relative to the parent HTML element.rem– use a responsive size that adjusts to the viewer’s screen size, relative to the root HTML element.vw– the percentage of the browser’s viewport width.vh– the percentage of the browser’s viewport height.
Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu. For more, see Change Your Site’s Fonts.
You can also learn how to install or upload new fonts if you don’t find a font you like in the drop-down.
Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.
Line Height sets the spacing above/below the text. This usually defaults to 1.5 for visually-appealing spacing between the lines of text. A zero value is not recommended, as lines of text may appear on top of each other on smaller mobile screens.
Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.
Decoration includes options for underline and strikethrough (if available.)
Use the Orientation setting to display the text either horizontally or vertically.
Letter case allows you to set the text to all upper case (AB), all lower case (ab), or capitalize the first letter of every word. (Ab) Set it to (—) to leave the case as it was originally written.
Use Drop cap to make the first letter of a paragraph extra large.
Block themes include font size settings for small, medium, large, and so on. The exact values of these font sizes are preset, but you can change the sizes to your preferred values and even create your own preset font values for easy selection later.
- Visit your website’s dashboard.
- Go to Appearance → Editor.
- Click on the “Styles” menu option.
- In the editor, you can also select the Styles icon in the upper right corner — the button looks like a black-and-white circle.
- Select the “Typography” option.
- Click on “Font size presets” at the bottom.
- Click on a predetermined font size such as small, medium, or large.
- Type a value in the “size” box and choose the unit (px, em, rem, vh, or vw).
- You can enable the “Fluid typography” option to scale the font size dynamically to fit the screen or viewport.
- Optionally, enable the “Custom fluid values” option to set custom minimum and maximum values for the fluid font size.
- Click the “Save” button to make your changes appear on the site.
- Visit your website’s dashboard.
- Go to Appearance → Editor.
- Click on the “Styles” menu option.
- In the editor, you can also select the Styles icon in the upper right corner — the button looks like a black-and-white circle.
- Select the “Typography” option.
- Click on “Font size presets” at the bottom.
- Next to “Custom“, click the plus (+) sign. A new font size preset will appear with a default name like “New Font Size 1”.
- Click on the new preset font size.
- Click the ellipses (three dots) icon at the top right and select “Rename” to assign a new name to the font size preset.
- Type a value in the “size” box and choose the unit (px, em, rem, vh, or vw).
- You can enable the “Fluid typography” option to scale the font size dynamically to fit the screen or viewport.
- Optionally, enable the “Custom fluid values” option to set custom minimum and maximum values for the fluid font size.
Your new font size preset will now appear in the Typography settings throughout your site.
