{"id":16091170,"date":"2022-11-02T07:20:39","date_gmt":"2022-11-02T07:20:39","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=16091170"},"modified":"2024-06-09T08:56:59","modified_gmt":"2024-06-09T08:56:59","slug":"typography-settings-overview","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/","title":{"rendered":"Typography Settings overview"},"content":{"rendered":"\n

You can use the typography settings in your block<\/a> to change the font and appearance of your texts. These settings include font size, line height, font style, font weight, text transform, letter spacing, font family, and text decoration. When combined, they allow you to have new ways to differentiate your content.<\/p>\n\n\n\n

The typography settings are available when you use the block editor<\/a>. If you are new to the block editor, this guide<\/a> will show you how to work with blocks. You can read more about the new block editor features and improvements in this article.<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n

How to access typography settings <\/h2>\n\n\n\n
\n
\n

The typography settings can be found in the Block Settings sidebar of a block<\/a> under the section Typography<\/strong>.<\/p>\n\n\n\n

If you don\u2019t see the Block Settings<\/strong> sidebar, select the block you want to customize, then click the settings<\/strong> icon that is to the right of the Publish<\/strong> or Update<\/strong> buttons in the WordPress Editor. <\/p>\n\n\n\n

In the Typography<\/strong> section, some options may be hidden. Click on the Typography options three-dot menu (also known as an ellipsis) to explore all the typography settings that are not visible by default. <\/p>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n
\"Typography<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"Adding<\/figure>\n<\/div>\n\n\n\n
\n

Displaying additional typography settings<\/strong><\/p>\n\n\n\n

From the drop-down menu, select the typography setting that you want to add to the Typography<\/strong> section. You can add as many settings as you like. <\/p>\n\n\n\n

The full list of the different types of settings is listed below.<\/p>\n<\/div>\n<\/div>\n\n\n\n

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<\/strong> as shown in this article<\/a>. This resets the settings and removes all of your changes. <\/p>\n\n\n\n

Type of settings <\/h2>\n\n\n\n

Every supported block comes with different typography settings. <\/p>\n\n\n\n

Font family <\/h3>\n\n\n\n

This option allows you to change the font family for your text. The list of fonts available in the drop-down menu depends on your theme. <\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Font size <\/h3>\n\n\n\n

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

\"How<\/figure>\n\n\n\n
\n
\n
\"How<\/figure>\n<\/div>\n\n\n\n
\n

You can change the unit of the font size by clicking the\u00a0px<\/strong>\u00a0icon on the right. You can choose between\u00a0px<\/strong>, em<\/strong>, rem<\/strong>. <\/p>\n\n\n\n

Learn the difference between these units here<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Line height <\/h3>\n\n\n\n

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<\/strong>. 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. <\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Letter case<\/h3>\n\n\n\n

This setting allows you to set text in a block to three casing options: all caps (AB<\/strong>), all lowercase (ab<\/strong>), or the first letter capitalized (Ab<\/strong>).<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Letter spacing <\/h3>\n\n\n\n

This setting allows you to set the space between each individual character. You can also change the units from the default (px<\/strong>) to\u00a0%<\/strong>, em<\/strong>, rem<\/strong>,<\/code>vw<\/strong> and vh<\/strong>.<\/p>\n\n\n\n

Learn the difference between these units here<\/a>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Changing<\/figure>\n\n\n\n

Decoration <\/h3>\n\n\n\n

The decoration setting allows you to add an underline or a line-through in the text. The line through is also known as strikethrough.<\/p>\n\n\n\n

\"Changing<\/figure>\n\n\n\n

Appearance <\/h3>\n\n\n\n

The Appearance setting allows you to change the text\u2019s weight from Thin<\/strong> to Extra Bold<\/strong> and Black<\/strong>. You also have the option to italicize your text from Regular Italic<\/strong> to Extra Bold Italic<\/strong> and Black Italic<\/strong>. <\/p>\n\n\n\n

\"Changing<\/figure>\n\n\n\n

Blocks that have typography settings<\/h2>\n\n\n\n
    \n
  • Archives<\/li>\n\n\n\n
  • Button\/Buttons<\/li>\n\n\n\n
  • Calendar<\/li>\n\n\n\n
  • Categories<\/li>\n\n\n\n
  • Code<\/li>\n\n\n\n
  • Column\/Columns<\/li>\n\n\n\n
  • Comment Author Name<\/li>\n\n\n\n
  • Comments Content<\/li>\n\n\n\n
  • Comment Date<\/li>\n\n\n\n
  • Comment Edit Link<\/li>\n\n\n\n
  • Comments Reply Link<\/li>\n\n\n\n
  • Comment Template<\/li>\n\n\n\n
  • Comments<\/li>\n\n\n\n
  • Comments Pagination<\/li>\n\n\n\n
  • Comments Pagination Next<\/li>\n\n\n\n
  • Comments Pagination Numbers<\/li>\n\n\n\n
  • Comments Pagination Previous<\/li>\n\n\n\n
  • Comments Title<\/li>\n\n\n\n
  • Cover<\/li>\n\n\n\n
  • Group<\/li>\n\n\n\n
  • Heading<\/li>\n\n\n\n
  • Home Link<\/li>\n\n\n\n
  • Latest Posts<\/li>\n\n\n\n
  • List & List Item<\/li>\n\n\n\n
  • Media & Text<\/li>\n\n\n\n
  • Navigation<\/li>\n\n\n\n
  • Navigation Link<\/li>\n\n\n\n
  • Page List<\/li>\n\n\n\n
  • Paragraph<\/li>\n\n\n\n
  • Post Author<\/li>\n\n\n\n
  • Post Author Biography<\/li>\n\n\n\n
  • Post Author Name<\/li>\n\n\n\n
  • Post Comments Count<\/li>\n\n\n\n
  • Post Comments Form<\/li>\n\n\n\n
  • Post Comments Link<\/li>\n\n\n\n
  • Post Content<\/li>\n\n\n\n
  • Post Date<\/li>\n\n\n\n
  • Post Excerpt<\/li>\n\n\n\n
  • Post Template<\/li>\n\n\n\n
  • Post Terms<\/li>\n\n\n\n
  • Post Title<\/li>\n\n\n\n
  • Post Navigation Link<\/li>\n\n\n\n
  • Preformatted<\/li>\n\n\n\n
  • Pullquote<\/li>\n\n\n\n
  • Query No Results<\/li>\n\n\n\n
  • Query Pagination<\/li>\n\n\n\n
  • Query Pagination Next<\/li>\n\n\n\n
  • Query Pagination Numbers<\/li>\n\n\n\n
  • Query Pagination Previous<\/li>\n\n\n\n
  • Query Title<\/li>\n\n\n\n
  • Quote<\/li>\n\n\n\n
  • Read More<\/li>\n\n\n\n
  • Search<\/li>\n\n\n\n
  • Site Title<\/li>\n\n\n\n
  • Site Tagline<\/li>\n\n\n\n
  • Table<\/li>\n\n\n\n
  • Table of Contents \u2013 not available in 6.2<\/li>\n\n\n\n
  • Tag Cloud<\/li>\n\n\n\n
  • Term Description<\/li>\n\n\n\n
  • Verse<\/li>\n<\/ul>\n\n\n\n

    The difference between px, em, rem, %, vw, and vh units<\/h2>\n\n\n\n

    Pixel (px<\/strong>) is not a scalable unit, it is an absolute unit. The px<\/strong> unit does not change based on any other element and hence px<\/strong> units are not responsive. They are useful for maintaining consistent sizing for some elements. If you have elements that should not be resized, then using px<\/strong> unit is a good option.<\/p>\n\n\n\n

    Element (em<\/strong>), root element (rem<\/strong>), %<\/strong>, viewport height(vh<\/strong>) and viewport width(vw<\/strong>) are relative units. They are suited for responsive designs because these units scale up and down based on other elements size. They also get interpreted into the equivalent px<\/strong> unit by the browser. <\/p>\n\n\n\n

    em<\/strong>: Relative to the parent element<\/p>\n\n\n\n

    rem<\/strong>: Relative to the root element (HTML tag)<\/p>\n\n\n\n

    %<\/strong>: % relative to the parent element<\/p>\n\n\n\n

    vw<\/strong>: Relative to the viewport\u2019s width<\/p>\n\n\n\n

    vh<\/strong>: Relative to the viewport\u2019s height<\/p>\n\n\n\n

    Demonstration<\/h2>\n\n\n\n

    To see the power of these settings in action, here\u2019s an example of using them to personalize a button. <\/p>\n\n\n\n