{"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&#038;p=16091170"},"modified":"2026-09-07T16:44:45","modified_gmt":"2026-09-07T16:44:45","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<p class=\"wp-block-paragraph\">You can use the typography settings in your <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\" data-type=\"helphub_article\" data-id=\"11284652\">block<\/a> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The typography settings are available when you use the <a href=\"https:\/\/wordpress.org\/documentation\/article\/wordpress-editor\/\" data-type=\"helphub_article\" data-id=\"11284616\">block editor<\/a>. If you are new to the block editor, <a href=\"https:\/\/wordpress.org\/documentation\/article\/working-with-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">this guide<\/a>&nbsp;will show you how to work with blocks. <\/p>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <iframe loading=\"lazy\" title=\"VideoPress Video Player\" aria-label=\"VideoPress Video Player\" width=\"500\" height=\"335\" src=\"https:\/\/videopress.com\/embed\/ZgeBsjsl?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0\" frameborder=\"0\" allowfullscreen data-resize-to-parent=\"true\" allow=\"clipboard-write; presentation\"><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1770107250'><\/script><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Access typography settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The typography settings can be found in the Block Settings sidebar of a <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\" data-type=\"helphub_article\" data-id=\"11284652\">block<\/a> under the section <strong>Typography<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"453\" height=\"104\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/block-settings-7-0.png\" alt=\"Block settings icon\" class=\"wp-image-16370484\" style=\"width:300px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/block-settings-7-0.png 453w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/block-settings-7-0-300x69.png 300w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you don\u2019t see the <strong>Block Settings<\/strong> sidebar, select the block you want to customize, then click the <strong>Settings<\/strong> icon that is next to the <strong>Save\/Publish<\/strong> button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Additional settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Typography<\/strong> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the drop-down menu, select the typography setting that you want to add to the <strong>Typography<\/strong> section.  You can add as many settings as you like. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The full list of the different types of settings is listed below.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6abf9f59d81e1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6abf9f59d81e1\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1111\" height=\"1092\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/wordpress.org\/documentation\/files\/2026\/09\/typography-settings-edited.png\" alt=\"Typography panel for paragraph block with three-dot menu highlighted and expanded\" class=\"wp-image-16370483\" style=\"aspect-ratio:1.0174016180141265;width:506px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2026\/09\/typography-settings-edited.png 1111w, https:\/\/wordpress.org\/documentation\/files\/2026\/09\/typography-settings-edited-300x295.png 300w, https:\/\/wordpress.org\/documentation\/files\/2026\/09\/typography-settings-edited-1024x1006.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2026\/09\/typography-settings-edited-768x755.png 768w\" sizes=\"auto, (max-width: 1111px) 100vw, 1111px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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&nbsp;<strong>Reset All<\/strong> as <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/documentation\/article\/working-with-blocks\/#reset-controls\" target=\"_blank\">shown in this article<\/a>. This resets the settings and removes all of your changes. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Available settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every supported block comes with different typography settings. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Color<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"710\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/Screenshot-2026-09-06-at-9.49.49-AM-1024x710.png\" alt=\"Color palette example\" class=\"wp-image-16370487\" style=\"aspect-ratio:1.4422806665328247;width:633px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/Screenshot-2026-09-06-at-9.49.49-AM-1024x710.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/Screenshot-2026-09-06-at-9.49.49-AM-300x208.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/Screenshot-2026-09-06-at-9.49.49-AM-767x532.png 767w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/Screenshot-2026-09-06-at-9.49.49-AM.png 1142w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Example of choosing a purple color from a pre-defined palette.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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. <\/p>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <iframe loading=\"lazy\" title=\"VideoPress Video Player\" aria-label=\"VideoPress Video Player\" width=\"500\" height=\"315\" src=\"https:\/\/videopress.com\/embed\/Cwg0iNQ4?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0\" frameborder=\"0\" allowfullscreen data-resize-to-parent=\"true\" allow=\"clipboard-write; presentation\"><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1770107250'><\/script><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f4fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">Learn more about color settings.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Font size <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Font size allows you to adjust the size of your text. You can choose from preset sizes like (<strong>S<\/strong>)small, (<strong>M<\/strong>)medium, (<strong>L<\/strong>)large and (<strong>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\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <iframe loading=\"lazy\" title=\"VideoPress Video Player\" aria-label=\"VideoPress Video Player\" width=\"500\" height=\"315\" src=\"https:\/\/videopress.com\/embed\/gA6926aC?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0\" frameborder=\"0\" allowfullscreen data-resize-to-parent=\"true\" allow=\"clipboard-write; presentation\"><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1770107250'><\/script><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t\n\n\n<p class=\"wp-block-paragraph\">You can change the unit of the font size by clicking the&nbsp;<strong>px<\/strong>&nbsp;icon on the right. You can choose between&nbsp;<strong>px<\/strong>, <strong>em<\/strong>, <strong>rem<\/strong>. <\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f4fa\"><a href=\"#units-explained\">Learn the difference between these units here.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Font family<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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 <strong>Font <\/strong>to view the font family dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/font-family-1024x572.png\" alt=\"Font family drop down\" class=\"wp-image-16370509\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/font-family-1024x572.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/font-family-300x167.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/font-family-767x428.png 767w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/font-family-1536x857.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/font-family-2048x1143.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Font family of FIra Code<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Appearance <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Appearance setting allows you to change the text\u2019s weight from <strong>Thin<\/strong> to <strong>Extra Bold<\/strong> and <strong>Black<\/strong>. You also have the option to italicize your text from <strong>Regular Italic<\/strong> to <strong>Extra Bold Italic<\/strong> and <strong>Black Italic<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/appearance-bold-1024x572.png\" alt=\"Appearance\" class=\"wp-image-16370508\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/appearance-bold-1024x572.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/appearance-bold-300x167.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/appearance-bold-767x428.png 767w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/appearance-bold-1536x857.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/appearance-bold-2048x1143.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Appearance bold<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Line height <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This setting sets the spacing above and below each line of text within a given paragraph. The default line height for most themes is <strong>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<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-height-1024x567.png\" alt=\"Line height\" class=\"wp-image-16370497\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-height-1024x567.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-height-300x166.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-height-767x425.png 767w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-height-1536x851.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-height-2048x1135.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Line height of two<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Letter spacing <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This setting allows you to set the space between each individual character. You can also change the units from the default (<strong>px<\/strong>) to&nbsp;<strong>%<\/strong>, <strong>em<\/strong>, <strong>rem<\/strong><code>,<\/code><strong>vw<\/strong> and <strong>vh<\/strong>.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f4fa\"><a href=\"#units-explained\">Learn the difference between these units here.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"565\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-spacing-1024x565.png\" alt=\"Letter spacing\" class=\"wp-image-16370498\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-spacing-1024x565.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-spacing-300x165.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-spacing-767x423.png 767w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-spacing-1536x847.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-spacing-2048x1129.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Letter spacing of three pixels<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Line indent<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-indent-1024x579.png\" alt=\"Line indent\" class=\"wp-image-16370502\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-indent-1024x579.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-indent-300x170.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-indent-768x434.png 768w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-indent-1536x868.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/line-indent-2048x1158.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">One hundred pixel line indent<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Columns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Columns control can be used to split a paragraph across multiple columns, like how text can flow in a magazine or newspaper.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"568\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/columns-1-1024x568.png\" alt=\"Columns\" class=\"wp-image-16370526\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/columns-1-1024x568.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/columns-1-300x166.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/columns-1-767x425.png 767w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/columns-1-1536x851.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/columns-1-2048x1135.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Three columns<\/figcaption><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f4fa\"><strong>Note: <\/strong>Text columns persist on mobile, tablet and desktop <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Decoration <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The decoration setting allows you to choose an <strong>Underline<\/strong> or <strong>Strikethrough<\/strong> style for the text. Select <strong>Normal<\/strong> (<strong>\u2014<\/strong>)  to remove and existing underline or strikethrough styles. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"568\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/decoration-1024x568.png\" alt=\"Text decoration block style with strikethrough enabled\" class=\"wp-image-16370504\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/decoration-1024x568.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/decoration-300x167.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/decoration-768x426.png 768w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/decoration-1536x853.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/decoration-2048x1137.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Strikethrough text decoration<\/figcaption><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f4fa\"><strong>Note: <\/strong>It&#8217;s best to reserve underlines for links so readers know what&#8217;s clickable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Orientation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Some blocks such as Heading and Paragraph have an orientation option which enables the block to flow vertically or horizontally.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/orientation-1-1024x559.png\" alt=\"Orientation\" class=\"wp-image-16370507\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/orientation-1-1024x559.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/orientation-1-300x164.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/orientation-1-766x418.png 766w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/orientation-1-1536x838.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/orientation-1-2048x1117.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Vertical text orientation<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Letter case<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This setting allows you to set text in a block to three casing options: all caps (<strong>AB<\/strong>), all lowercase (<strong>ab<\/strong>), or the first letter capitalized (<strong>Ab<\/strong>). Select the None option (<strong>\u2014<\/strong>) to remove Letter case styles.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-case-1024x581.png\" alt=\"Letter case\" class=\"wp-image-16370511\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-case-1024x581.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-case-300x170.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-case-767x435.png 767w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-case-1536x872.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/letter-case-2048x1162.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Letter case of Upper case applied to full paragraph<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Drop cap<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Drop cap<\/strong> feature enlarges the initial letter and aligns it to the left of the text.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/drop-cap-1-1024x554.png\" alt=\"Drop cap\" class=\"wp-image-16370515\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/drop-cap-1-1024x554.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/drop-cap-1-300x162.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/drop-cap-1-767x415.png 767w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/drop-cap-1-1536x831.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/drop-cap-1-2048x1108.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Paragraph with drop cap active <\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Fit text<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Fit text <\/strong>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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/fit-text-1024x597.png\" alt=\"Fit text\" class=\"wp-image-16370517\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/fit-text-1024x597.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/fit-text-300x175.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/fit-text-767x447.png 767w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/fit-text-1536x895.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/11\/fit-text-2048x1193.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Paragraph with Fit text enabled<\/figcaption><\/figure>\n\n\n\n<h2 id=\"units-explained\" class=\"wp-block-heading\">The difference between px, em, rem, %, vw, and vh units<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>px:<\/strong> <strong>(Pixel):<\/strong> An absolute unit that stays fixed regardless of screen size or user browser settings.<\/li>\n\n\n\n<li><strong>em<\/strong>: Relative to the element\u2019s current font size (or parent&#8217;s font size). <\/li>\n\n\n\n<li><strong>rem<\/strong>: <strong>(Root em):<\/strong> Relative to the root font size (the browser&#8217;s default text size). <\/li>\n\n\n\n<li><strong>%:<\/strong> <strong>(Percentage):<\/strong> Relative to the parent element&#8217;s value (such as a column width).<\/li>\n\n\n\n<li><strong>vw<\/strong>: <strong>(Viewport Width):<\/strong> Relative the browser window&#8217;s width.<\/li>\n\n\n\n<li><strong>vh<\/strong>: <strong>(Viewport Height):<\/strong> Relative the browser window&#8217;s height.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Pixel (<code>px<\/code>) 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 <code>px<\/code> value is needed to satisfy design requirements, such as thin borders, static icons, or rigid component dimensions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Units such as <code>em<\/code>, <code>rem<\/code>, <code>%<\/code>, <code>vh<\/code>, and <code>vw<\/code> 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.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f4fa\"><strong>Accessibility Tip:<\/strong> Use relative units (such as <code>rem<\/code> or <code>em<\/code>) instead of fixed pixels. This ensures your text and spacing will automatically scale if a user increases their browser&#8217;s default text size.<\/p>\n\n\n\n<div class=\"wp-block-group changelog has-very-dark-gray-color has-very-light-gray-background-color has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h2 id=\"changelog\" class=\"wp-block-heading has-medium-font-size\">Changelog <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2026-09-06 (props @awetz583)\n<ul class=\"wp-block-list\">\n<li>Added text color<\/li>\n\n\n\n<li>Updated screenshots and video for 7.1<\/li>\n\n\n\n<li>Updated px, em, rem, %, vw, and vh units documentation<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2026-06-16 (props @lanamiro1)\n<ul class=\"wp-block-list\">\n<li>Improved layout of font size information<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2026-05-23\n<ul class=\"wp-block-list\">\n<li>Added drop cap, fit text, line indent, columns, and orientation<\/li>\n\n\n\n<li>Updated screenshots for 7.0 and added fit text video<\/li>\n\n\n\n<li>Removed out of date information and block list<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2025-06-28\n<ul class=\"wp-block-list\">\n<li>Updated font-family with preview feature<br>Updated screenshot and add new showcasing the font-family preview<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-04-03\n<ul class=\"wp-block-list\">\n<li>Updated list of blocks that support typography settings<\/li>\n\n\n\n<li>Updated screenshots<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2022-11-01<\/li>\n<\/ul>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":15769828,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":""},"category":[83,80],"class_list":["post-16091170","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16091170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16091170"}],"version-history":[{"count":39,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16091170\/revisions"}],"predecessor-version":[{"id":16370586,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16091170\/revisions\/16370586"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wporg\/v1\/users\/thelmachido"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16091170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16091170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}