Typography Settings overview

You can use the typography settings in your block to change the font and appearance of your texts. These settings differ from block to block and may include text color, font family, font size, appearance, line height, letter spacing, line indent, columns, decoration, orientation, letter case, drop cap and fit text. When combined, they allow you to have new ways to differentiate your content.

The typography settings are available when you use the block editor. If you are new to the block editor, this guide will show you how to work with blocks.

Access typography settings

The typography settings can be found in the Block Settings sidebar of a block under the section Typography.

If you don’t see the Block Settings sidebar, select the block you want to customize, then click the Settings icon that is next to the Save/Publish button.

Additional settings

In the Typography section, some options may be hidden. Click on the Typography options three-dot menu to explore all the typography settings that are not visible by default.

From the drop-down menu, select the typography setting that you want to add to the Typography section. You can add as many settings as you like.

The full list of the different types of settings is listed below.

If you make customizations to these settings and want to revert back to the original settings quickly, you can do so by selecting the three-dot menu icon and clicking Reset All as shown in this article. This resets the settings and removes all of your changes.

Available settings

Every supported block comes with different typography settings.

Color

To change the text color of all of the text in a block, click on the Color button. You can choose a pre-defined color from the palette or enter your own color value by clicking on the large color preview at the top of the color menu. Your color options may differ depending on the theme you are using.

You may see a warning if your text color does not have enough contrast compared to the background color that would make it difficult to read. Use the custom color interface to choose a different color to meet accessibility color guidance.

Learn more about color settings.

Font size

Font size allows you to adjust the size of your text. You can choose from preset sizes like (S)small, (M)medium, (L)large and (XL)extra large. You can also set a custom value by clicking the slider icon directly above the default selections.

You can change the unit of the font size by clicking the px icon on the right. You can choose between px, em, rem.

Learn the difference between these units here.

Font family

This option allows you to change the font family for your text, with a preview of the fonts available in the drop-down menu. The list of available fonts depends on your theme. Click on the three dot menu and choose Font to view the font family dropdown.

Appearance

The Appearance setting allows you to change the text’s weight from Thin to Extra Bold and Black. You also have the option to italicize your text from Regular Italic to Extra Bold Italic and Black Italic.

Line height

This setting sets the spacing above and below each line of text within a given paragraph. The default line height for most themes is 1.5. You can use the Line height settings to increase or decrease it to your liking. You can also add a custom number for the line height.

Letter spacing

This setting allows you to set the space between each individual character. You can also change the units from the default (px) to %, em, rem,vw and vh.

Learn the difference between these units here.

Line indent

Line indent can be used on a paragraph block to add space before the first word in that paragraph. This adds a literary effect to the text.

Columns

The Columns control can be used to split a paragraph across multiple columns, like how text can flow in a magazine or newspaper.

Note: Text columns persist on mobile, tablet and desktop

Decoration

The decoration setting allows you to choose an Underline or Strikethrough style for the text. Select Normal (—) to remove and existing underline or strikethrough styles.

Note: It’s best to reserve underlines for links so readers know what’s clickable.

Orientation

Some blocks such as Heading and Paragraph have an orientation option which enables the block to flow vertically or horizontally.

Letter case

This setting allows you to set text in a block to three casing options: all caps (AB), all lowercase (ab), or the first letter capitalized (Ab). Select the None option (—) to remove Letter case styles.

Drop cap

The Drop cap feature enlarges the initial letter and aligns it to the left of the text.

Fit text

The Fit text toggle will allow the text to grow or shrink to the full width of the container. It can be used to have a heading that spans a full page width on mobile, tablet and desktop.

The difference between px, em, rem, %, vw, and vh units

• px: (Pixel): An absolute unit that stays fixed regardless of screen size or user browser settings.
• em: Relative to the element’s current font size (or parent’s font size).
• rem: (Root em): Relative to the root font size (the browser’s default text size).
• %: (Percentage): Relative to the parent element’s value (such as a column width).
• vw: (Viewport Width): Relative the browser window’s width.
• vh: (Viewport Height): Relative the browser window’s height.

Pixel (px) is an absolute, non-scalable unit. Because pixels do not change based on other elements, they are not responsive. However, there are rare occasions where an absolute px value is needed to satisfy design requirements, such as thin borders, static icons, or rigid component dimensions.

Units such as em, rem, %, vh, and vw are relative units. They are ideally suited for responsive design because they scale up and down based on the size of other elements or screen dimensions.