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 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.
You will find the block settings in the right sidebar when you click on a block. 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:
Within the block settings, you may find the typography settings right away. Other blocks have their typography settings located under the Styles tab. The image on the right shows a block with the typography settings underneath the Styles tab, accessible by clicking the circular icon.
Note that not every block includes typography settings. The available settings will vary depending on the theme and the type of block.
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 necessarily be available on all blocks.
Font size allows you to adjust the size of the text. You can choose from the preset sizes small (S), medium (M), large (L), and extra large (XL):
For more granular control, you can set a specific value by clicking the slider icon directly above the preset sizes (marked with a 1 in the adjacent image.)
You can change the units by clicking where the number 2 is marked in the image. Choose from:
- 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.
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. Or, learn how to install or upload your own fonts.
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.
Decoration includes options for underline and strikethrough (if available.)
Letter case allows you to set the text to all caps (AB), the first letter capitalized (Ab), or all lower-case (ab).
Use Drop cap to make the first letter of a paragraph extra large.
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.
