How to Set Typography and Apply Color to your Content in WordPress Block Editor

Are you looking to add flair to your content in the WordPress block editor? Setting the typography and applying color is a great way to make your content stand out. This guide will show you how to easily customize the font family, size, weight, and color of your text in the WordPress block editor.

How to Apply Colors

1

In the sidebar options, you will see a “Color Settings” section with “Text Color,” “Background Color,” and “Link Color” options.

Text Color

2

To set the text color for the selected block, click the “Text Color” option to open the color picker. Use the color picker to choose the color you want for the text, or enter a hex code for the color.

Background Color

3

To set the background color for the selected block, click the “Background Color” option to open the color picker. Use the color picker to choose the color you want for the background, or enter a hex code for the color.

4

To set the link color for the selected block, click the “Link Color” option to open the color picker. Use the color picker to choose the color you want for links, or enter a hex code for the color.

How to Set Typography

5

You can use the typography settings in your block to change the font and appearance of your texts. These settings include Font size, Font family, Appearance, Line height, Letter spacing, Decoration, and Letter case. They allow you to have new ways to differentiate your content.

How do I access the typography settings?

6

Under the section ‘Typography,’ click on the three-dot menu (also known as an ellipsis). This will reveal a list of all the available typography settings. Click on the setting you wish to modify.

How to view additional typography settings

7

To customize the typography options for a block, you can choose from various settings available in a drop-down menu. You can select as many settings as you like, and they will be added to the Typography section.

Font Size

8

The font size feature allows you to change the size of your text. You have the option to choose from preset sizes such as (S)small, (M)medium, (L)large, and (XL)extra large, or you can set a custom value using the slider icon above the default sizes. Select the desired size from the options available to adjust the font size.

9

If you want to set a custom font size value, you can use the slider icon to adjust it to your desired size. You can also change the font size unit by clicking the px icon on the right. The available units include px, em, and rem. To select a different unit, click on the desired unit from the options available.

Font Family

10

The font family option allows you to change the font of your text. The fonts available in the drop-down menu will depend on your theme. Select the desired font from the drop-down menu to change the font family.

Appearance

11

“The Appearance setting allows you to alter the weight of your text from Thin to Extra Bold, as well as choose from options to italicize the text such as Regular Italic, Extra Bold Italic.”

Line Height

12

This setting adjusts the amount of space above and below each line of text within a paragraph. The default line height for most themes is 1.5, but you can use the Line height settings to increase or decrease it to your preference. You also have the option to specify a custom line height value.

Letter Spacing

13

This setting enables you to adjust the space between individual characters. You can also change the units of measurement from the default (px) to %, em, rem, vw, or vh.

Decoration

14

The decoration setting allows you to add an underline or a line through the text (also known as strikethrough). You can choose one or both of these options.

Letter Case

15

This setting enables you to change the capitalization of the text in a block to three options: all caps (AB), all lowercase (ab), or the first letter capitalized (Ab).

Reset all typography options

16

You can use the reset function to revert customizations made to typography settings quickly. To do this, select the three-dot menu icon and click ‘Reset.’ This will reset the settings to their original state and remove any changes you have made.

Tip

These features and tools may vary depending on the specific theme and plugins you are using in your WordPress site.

You may also join our Gutenberg Facebook Community where we all learn and help each other.


Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe and Get Updates Weekly

Latest articles, blocks, templates, tools, news every week