{"id":373905,"date":"2022-10-07T06:19:23","date_gmt":"2022-10-07T13:19:23","guid":{"rendered":"https:\/\/css-tricks.com\/?p=373905"},"modified":"2022-10-07T06:19:24","modified_gmt":"2022-10-07T13:19:24","slug":"fluid-typography-wordpress-block-themes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fluid-typography-wordpress-block-themes\/","title":{"rendered":"Adding Fluid Typography Support to WordPress Block Themes"},"content":{"rendered":"\n<p>Fluid typography is a <a href=\"https:\/\/make.wordpress.org\/core\/2022\/05\/27\/block-font-sizes-and-fluid-typography\/\" rel=\"noopener\">fancy way<\/a> of \u201cdescribing font properties, such as size or line height, that scale fluidly according to the size of the viewport\u201d. It\u2019s <a href=\"https:\/\/websemantics.uk\/tools\/responsive-font-calculator\/\" rel=\"noopener\">also known by other names<\/a>, like responsive typography, flexible type, fluid type, viewport sized typography, fluid typography, and even responsive display text.<\/p>\n\n\n\n<p>Here is an <a href=\"https:\/\/mdn.github.io\/css-examples\/min-max-clamp\/\" rel=\"noopener\">example of fluid typography<\/a> that you can play live (courtesy of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clamp#examples\" rel=\"noopener\">MDN documentation<\/a>). <a href=\"https:\/\/css-tricks.com\/?s=fluid%20typography\">CSS-Tricks has covered fluid typography<\/a> extensively as well. But the point here is not to introduce you to fluid typography, but how to use it. More specifically, I want to show you how to implement fluid typography in WordPress 6.1 which recently introduced a fluid type feature directly in the WordPress Block Editor.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Open up your <code>style.css<\/code> file, slap in a style rule with fancy <code>clamp()<\/code>-ing on the <code>font-size<\/code> property, and good to go, right? Sure, that\u2019ll give you fluid text, but to get Block Editor controls that make it possible to apply fluid type anywhere on your WordPress site? That requires a different approach in these block-ified days.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"fluid-typography-support-in-gutenberg\">Fluid typography support in Gutenberg<\/h3>\n\n\n<p>Some WordPress theme developers have been using the <code>clamp()<\/code> function to define a fluid <code>font-size<\/code>, in their WordPress themes, even in newer \u201cblock\u201d themes such as <a href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/blob\/v1.0\/theme.json\" rel=\"noopener\">Twenty Twenty-Two<\/a>, <a href=\"https:\/\/make.wordpress.org\/design\/2022\/08\/10\/twenty-twenty-three-default-theme-project-kickoff\/\" rel=\"noopener\">Twenty Twenty-Three<\/a>, and others.<\/p>\n\n\n\n<p>But the Gutenberg plugin \u2014 the one that contains experimental development for WordPress Block and Site Editor features \u2014 introduced support for fluid typography <a href=\"https:\/\/wptavern.com\/gutenberg-13-8-introduces-fluid-typography-support-and-revamped-quote-block\" rel=\"noopener\">starting in version 13.8<\/a>. That opened the door for implementing at a theme level so that fluid type can be applied to specific elements and blocks directly in the Block Editor. CSS-Tricks was even given a shout-out in the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/39529#issuecomment-1076145509\" rel=\"noopener\">Pull Request<\/a> that merged the feature.<\/p>\n\n\n\n<p>That work became part of WordPress Core in <a href=\"https:\/\/make.wordpress.org\/core\/6-1\/\" rel=\"noopener\">WordPress 6.1.<\/a> Rich Tabor, one of the earlier advocates of fluid typography in the Block Editor says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>[Fluid typography] is also a part of making WordPress more powerful, while not more complicated (which we all know is quite the challenge). [\u2026] Fluid typography just works. Actually, I think it works great.<\/p><\/blockquote>\n\n\n\n<p>This <a href=\"https:\/\/make.wordpress.org\/core\/2022\/05\/27\/block-font-sizes-and-fluid-typography\/\" rel=\"noopener\">Make WordPress post highlights<\/a> the approach taken to support the feature at the block level so that a fluid font size is applied to blocks dynamically by default. There are <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/39529#issuecomment-1076979496\" rel=\"noopener\">some benefits<\/a> to this, of course:<\/p>\n\n\n\n<ul><li>It provides a way for theme authors to activate fluid typography without worrying about implementing it in code.<\/li><li>It applies fluid typography to specific typographical entities, such as elements or blocks in a maintainable and reusable way.<\/li><li>It allows flexibility in terms of font size units (e.g. <code>px<\/code>, <code>rem<\/code>, <code>em<\/code>, and <code>%<\/code>).<\/li><\/ul>\n\n\n\n<p>Now that this new feature is available in the WordPress Block Editor by default, theme authors can apply uniform fluid typography without writing additional code.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"blocks-that-support-typography-and-spacing-settings\">Blocks that support typography and spacing settings<\/h3>\n\n\n<p>Gutenberg 14.1 <a href=\"https:\/\/make.wordpress.org\/core\/2022\/09\/16\/whats-new-in-gutenberg-14-1-15-september\/\" rel=\"noopener\">released on September 16, 2022<\/a>, and introduced typographic settings on a bunch of blocks. That means the text settings for those blocks were set in CSS before and had to be changed in CSS as well. But those blocks now provide font and spacing controls in the Block Editor interface.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"379\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/gb14-typography.png?resize=671%2C379&#038;ssl=1\" alt=\"Illustrated list of WordPress blocks that received font and spacing controls in the Gutenberg plugin. There are 31 total blocks.\" class=\"wp-image-373910\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/gb14-typography.png?w=671&amp;ssl=1 671w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/gb14-typography.png?resize=300%2C169&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>That work is currently slated to be added to WordPress 6.1, as detailed in <a href=\"https:\/\/make.wordpress.org\/core\/2022\/09\/26\/core-editor-improvement-catalyst-for-creativity\/\" rel=\"noopener\">this Make WordPress blog post<\/a>. And with it is an expanded number of blocks that with typography support.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664291378156_Typography.png\" alt=\"Illustrated list of 60 WordPress blocks gaining typography and font size support in WordPress 6.1.\"\/><figcaption>WordPress blocks that will support typography settings in the upcoming WordPress 6.1 release.<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"declaring-fluid-type-in-a-wordpress-block-theme\">Declaring fluid type in a WordPress block theme<\/h3>\n\n\n<p>So, how do we put this new fluid typography to use in WordPress? The answer is in <code>theme.json<\/code>, a new-ish file specific to block themes that contains a bunch of theme configurations in key:value pairs.<\/p>\n\n\n\n<p>Let\u2019s look at a rule for a large font in <code>theme.json<\/code> where <code>contentSize: 768px<\/code> and we\u2019re working with a <code>widesize: 1600px<\/code> layout. This is how we can specify a CSS <code>font-size<\/code> using the <code>clamp()<\/code> function:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\"settings\": {\n  \"appearanceTools\": true,\n  \"layout\": {\n    \"contentSize\": \"768px\",\n    \"wideSize\": \"1600px\"\n  },\n  \"typography\": {\n    \"fontSizes\": [ \n      {\n        \"name\": \"Large\",\n        \"size\": \"clamp(2.25rem, 6vw, 3rem)\",\n        \"slug\": \"large\"\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"is-style-explanation\">As of WordPress 6.1, only <code>rem<\/code>, <code>em<\/code> and <code>px<\/code> units are supported.<\/p>\n\n\n\n<p>That\u2019s great and works, but with the new fluid type feature we would actually use a different approach. First, we opt into fluid typography on <code>settings.typography<\/code>, which has a new <code>fluid<\/code> property:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\"settings\": {\n  \"typography\": {\n    \"fluid\": true\n  }\n}<\/code><\/pre>\n\n\n\n<p>Then we specify our <code>settings.fontSizes<\/code> like before, but with a new <code>fluidSize<\/code> property where we can set the <code>min<\/code> and <code>max<\/code> size values for our fluid type range.<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\"settings\": {\n  \"appearanceTools\": true,\n  \"layout\": {\n    \"contentSize\": \"768px\",\n    \"wideSize\": \"1600px\"\n  },\n  \"typography\": {\n    \"fontSizes\": [ \n      {\n        \"size\": \"2.25rem\",\n        \"fluidSize\": {\n          \"min\": \"2.25rem\",\n          \"max\": \"3rem\"\n        },\n        \"slug\": \"large\",\n        \"name\": \"Large\"\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s really it. We just added fluid type to a font size called \u201cLarge\u201d with a range that starts at <code>2.25rem<\/code> and scales up to <code>3rem<\/code>. Now, we can apply the \u201cLarge\u201d font to any block with font settings.<\/p>\n\n\n\n<p>How does this works under the hood? <a href=\"https:\/\/richtabor.com\/fluid-typography-block-themes\/\" rel=\"noopener\">Rich Tabor offers a nice explanation<\/a>, as does <a href=\"https:\/\/github.com\/Automattic\/themes\/pull\/6262#issue-1312806090\" rel=\"noopener\">this Pull Request in GitHub<\/a>. In short, WordPress converts the <code>theme.json<\/code> properties into the following CSS rule:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.has-large-font-size {\n  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);\n}<\/code><\/pre>\n\n\n\n<p>\u2026which is applied to the element, say a Paragraph Block:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p class=\"has-large-font-size\">...&lt;\/p><\/code><\/pre>\n\n\n\n<p>Initially, I found it hard to understand and wrap around in my mind the concept of the CSS <code>clamp()<\/code> function without also learning about the <code>min()<\/code>, <code>max()<\/code>, and <code>calc()<\/code> functions. <a href=\"https:\/\/websemantics.uk\/tools\/responsive-font-calculator\/\" rel=\"noopener\">This calculator tool<\/a> helped me quite a bit, especially for determining which values to use in my own theme projects.<\/p>\n\n\n\n<p>For demonstration purposes, let\u2019s use the calculator to define our <code>font-size<\/code> range so that the size is <code>36px<\/code> at a <code>768px<\/code> viewport width and <code>48px<\/code> at a <code>1600px<\/code> viewport width.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"524\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/clam-calculator.jpg?resize=722%2C524&#038;ssl=1\" alt=\"Entering values into the online calculator for fluid typography.\" class=\"wp-image-373912\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/clam-calculator.jpg?w=722&amp;ssl=1 722w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/clam-calculator.jpg?resize=300%2C218&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The calculator automatically generates the following CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* 36px @ 768px increasing to 48px @ 1600px *\/\nfont-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);<\/code><\/pre>\n\n\n\n<p>The calculator provide options to select input units as <code>px<\/code>, <code>rem<\/code>, and <code>em<\/code>. If we select <code>rem<\/code> unit, the calculator generates the following <code>clamp()<\/code> value:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* 2.25rem @ 48rem increasing to 3rem @ 100rem *\/\nfont-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);<\/code><\/pre>\n\n\n\n<p>So, those minimum and maximum values correspond to the the <code>fluidSize.min<\/code> and <code>fluidSize.max<\/code> values in <code>theme.json<\/code>. The <code>min<\/code> value is applied at viewports that are <code>768px<\/code> wide and below. Then the <code>font-size<\/code> scales up as the viewport width grows. If the viewport is wider than <code>1600px<\/code>, the <code>max<\/code> is applied and the <code>font-size<\/code> is capped there.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"examples\">Examples<\/h3>\n\n\n<p>There are <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/39529#testing-instructions\" rel=\"noopener\">detailed testing instructions<\/a> in the merged Pull Request that introduced the feature. There are even more testing instructions from <a href=\"https:\/\/make.wordpress.org\/themes\/2022\/08\/15\/testing-and-feedback-for-the-fluid-typography-feature\/\" rel=\"noopener\">Justin Tadlock\u2019s pre-prelease post on Make WordPress<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"example-1-setting-a-new-fluid-font-setting\">Example 1: Setting a new fluid font setting<\/h4>\n\n\n<p>Let\u2019s start with Justin\u2019s set of instructions. I used in a modified version of the default <a href=\"https:\/\/github.com\/WordPress\/twentytwentythree\" rel=\"noopener\">Twenty Twenty-Three theme<\/a> that is currently under development.<\/p>\n\n\n\n<p>First, let\u2019s make sure we\u2019re running the Gutenberg plugin (13.8 and up) or WordPress 6.1, then opt into fluid type on the <code>settings.typography.fluid<\/code> property in the <code>theme.json<\/code> file:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"9,10,11\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"appearanceTools\": true,\n    \"layout\": {\n      \"contentSize\": \"768px\",\n      \"wideSize\": \"1600px\"\n    },\n    \"typography\": {\n      \"fluid\": true\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>Now, let\u2019s drop the <code>settings.typography.fontSizes<\/code> examples in there:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"11,12,13,14,15,16,17,18,19,20,21\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"appearanceTools\": true,\n    \"layout\": {\n      \"contentSize\": \"768px\",\n      \"wideSize\": \"1600px\"\n    },\n    \"typography\": {\n      \"fluid\": true\n      \"fontSizes\": [\n        {\n          \"name\": \"Normal\",\n          \"size\": \"1.125rem\",\n          \"fluid\": {\n            \"min\": \"1rem\",\n            \"max\": \"1.5rem\"\n          },\n          \"slug\": \"normal\"\n        }\n      ]\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>If everything is working correctly, we can now head into the WordPress Block Editor and apply the \u201cNormal\u201d font setting to our block:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1228\" height=\"926\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295102359_wp-fluid-type-block-settings.png?resize=1228%2C926&#038;ssl=1\" alt=\"The WordPress Block Editor interface showing a paragraph block and the fluid typography settings for it.\" class=\"wp-image-373914\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295102359_wp-fluid-type-block-settings.png?w=1228&amp;ssl=1 1228w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295102359_wp-fluid-type-block-settings.png?resize=300%2C226&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295102359_wp-fluid-type-block-settings.png?resize=1024%2C772&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295102359_wp-fluid-type-block-settings.png?resize=768%2C579&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Nice! And if we save and inspect that element on the front end, this is the markup:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1726\" height=\"130\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295238350_ScreenShot2022-09-27at10.13.34AM.png?resize=1726%2C130&#038;ssl=1\" alt=\"Inspecting the WordPress Paragraph block in DevTools.\" class=\"wp-image-373915\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295238350_ScreenShot2022-09-27at10.13.34AM.png?w=1726&amp;ssl=1 1726w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295238350_ScreenShot2022-09-27at10.13.34AM.png?resize=300%2C23&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295238350_ScreenShot2022-09-27at10.13.34AM.png?resize=1024%2C77&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295238350_ScreenShot2022-09-27at10.13.34AM.png?resize=768%2C58&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295238350_ScreenShot2022-09-27at10.13.34AM.png?resize=1536%2C116&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Very good. Now let\u2019s make sure the CSS is actually there:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1070\" height=\"244\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295694593_ScreenShot2022-09-27at10.21.13AM.png?resize=1070%2C244&#038;ssl=1\" alt=\"DevTools showing the font-size custom property for the WordPress Paragraph block's fluid typography.\" class=\"wp-image-373916\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295694593_ScreenShot2022-09-27at10.21.13AM.png?w=1070&amp;ssl=1 1070w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295694593_ScreenShot2022-09-27at10.21.13AM.png?resize=300%2C68&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295694593_ScreenShot2022-09-27at10.21.13AM.png?resize=1024%2C234&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295694593_ScreenShot2022-09-27at10.21.13AM.png?resize=768%2C175&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Good, good. Let\u2019s expose that CSS custom property to see if it\u2019s really clampin\u2019 things:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664295800946_wp-fluid-type-devtools-css-clamp.jpg\" alt=\"Revealing the custom property value in DevTools, showing a CSS clamp function.\"\/><\/figure>\n\n\n\n<p>Looks like everything is working just as we want it! Let\u2019s look at another example\u2026<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"example-2-excluding-a-font-setting-from-fluid-type\">Example 2: Excluding a font setting from fluid type<\/h4>\n\n\n<p>This time, let\u2019s follow the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/39529#testing-instructions\" rel=\"noopener\">instructions from the merged Pull Request<\/a> with a nod to this example by Carolina Nymark that shows how we can disable fluid type on a specific font setting.<\/p>\n\n\n\n<p>I used the <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/tree\/master\/emptytheme\" rel=\"noopener\">empty theme<\/a> as advised in the instructions and opened up the <code>theme.json<\/code> file for testing. First, we opt into fluid type exactly as we did before:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"9,10,11\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"appearanceTools\": true,\n    \"layout\": {\n      \"contentSize\": \"768px\",\n      \"wideSize\": \"1000px\"\n    },\n    \"typography\": {\n      \"fluid\": true\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>This time, we\u2019re working with smaller <code>wideSize<\/code> value of <code>1000px<\/code> instead of <code>1600px<\/code>. This should allow us to see fluid type working in an exact range.<\/p>\n\n\n\n<p>OK, on to defining some custom font sizes under <code>settings.typography.fontSizes:<\/code><\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"typography\": {\n      \"fluid\": true,\n      \"fontSizes\": [\n        {\n          \"size\": \".875rem\",\n          \"fluid\": {\n            \"min\": \"0.875rem\",\n            \"max\": \"1rem\"\n        },\n          \"slug\": \"small\",\n          \"name\": \"Small\"\n        },\n        {\n          \"size\": \"1rem\",\n          \"fluid\": {\n            \"min\": \"1rem\",\n            \"max\": \"1.5rem\"\n          },\n          \"slug\": \"normal\",\n          \"name\": \"Normal\"\n        },\n        {\n          \"size\": \"1.5rem\",\n          \"fluid\": {\n            \"min\": \"1.5rem\",\n            \"max\": \"2rem\"\n          },\n          \"slug\": \"large\",\n          \"name\": \"Large\"\n        },\n        {\n          \"size\": \"2.25rem\",\n          \"fluid\": false,\n          \"slug\": \"x-large\",\n          \"name\": \"Extra large\"\n        }\n      ]\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>Notice that we\u2019ve applied the fluid type feature only on the \u201cNormal\u201d, \u201cMedium\u201d, and \u201cLarge\u201d font settings. \u201cExtra Large\u201d is the odd one out where the <code>fluid<\/code> object is set to <code>false<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"901\" height=\"659\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297368834_wp-fluid-type-editor-all-sizes.png?resize=901%2C659&#038;ssl=1\" alt=\"the WordPress Block Editor interface with four Paragraph blocks, each at a different font size setting.\" class=\"wp-image-373918\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297368834_wp-fluid-type-editor-all-sizes.png?w=901&amp;ssl=1 901w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297368834_wp-fluid-type-editor-all-sizes.png?resize=300%2C219&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297368834_wp-fluid-type-editor-all-sizes.png?resize=768%2C562&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>What WordPress does from here \u2014 via the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/38167\" rel=\"noopener\">Gutenberg style engine<\/a> \u2014 is apply the properties we set into CSS <code>clamp()<\/code> functions for each font size setting that has opted into fluid type and a single size value for the Extra Large setting:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);\n--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);\n--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);\n--wp--preset--font-size--x-large: 2.25rem;<\/code><\/pre>\n\n\n\n<p>Let\u2019s check the markup on the front end:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1990\" height=\"544\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297582396_ScreenShot2022-09-27at10.52.39AM.png?resize=1990%2C544&#038;ssl=1\" alt=\"Inspecting the WordPress Paragraph blocks in DevTools.\" class=\"wp-image-373919\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297582396_ScreenShot2022-09-27at10.52.39AM.png?w=1990&amp;ssl=1 1990w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297582396_ScreenShot2022-09-27at10.52.39AM.png?resize=300%2C82&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297582396_ScreenShot2022-09-27at10.52.39AM.png?resize=1024%2C280&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297582396_ScreenShot2022-09-27at10.52.39AM.png?resize=768%2C210&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297582396_ScreenShot2022-09-27at10.52.39AM.png?resize=1536%2C420&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Good start! Let\u2019s confirm that the <code>.has-x-large-font-size<\/code> class is excluded from fluid type:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1688\" height=\"188\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297732386_ScreenShot2022-09-27at10.55.15AM.png?resize=1688%2C188&#038;ssl=1\" alt=\"Showing the font-size custom property for the Extra Large font setting in DevTools.\" class=\"wp-image-373920\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297732386_ScreenShot2022-09-27at10.55.15AM.png?w=1688&amp;ssl=1 1688w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297732386_ScreenShot2022-09-27at10.55.15AM.png?resize=300%2C33&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297732386_ScreenShot2022-09-27at10.55.15AM.png?resize=1024%2C114&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297732386_ScreenShot2022-09-27at10.55.15AM.png?resize=768%2C86&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297732386_ScreenShot2022-09-27at10.55.15AM.png?resize=1536%2C171&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If we expose the <code>--wp--preset--font-size--x-large<\/code> variable, we\u2019ll see it\u2019s set to <code>2.25rem<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1686\" height=\"220\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297829432_ScreenShot2022-09-27at10.56.52AM.png?resize=1686%2C220&#038;ssl=1\" alt=\"Revealing the Extra Large font size custom property value, showing 2.25rem.\" class=\"wp-image-373921\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297829432_ScreenShot2022-09-27at10.56.52AM.png?w=1686&amp;ssl=1 1686w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297829432_ScreenShot2022-09-27at10.56.52AM.png?resize=300%2C39&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297829432_ScreenShot2022-09-27at10.56.52AM.png?resize=1024%2C134&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297829432_ScreenShot2022-09-27at10.56.52AM.png?resize=768%2C100&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_D4E9450304750DE6E7253E4EEF63A37893A0B89FE1D16F5881F6C5171AAAEE5B_1664297829432_ScreenShot2022-09-27at10.56.52AM.png?resize=1536%2C200&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>That\u2019s exactly what we want!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"block-themes-that-support-fluid-typography\">Block themes that support fluid typography<\/h3>\n\n\n<p>Many WordPress themes already make use of the <code>clamp()<\/code> function for fluid type in both block and classic themes. A good example of fluid typography use is the recently released <a href=\"https:\/\/github.com\/WordPress\/twentytwentythree\" rel=\"noopener\">Twenty Twenty-Three default theme<\/a>.<\/p>\n\n\n\n<p>I&#8217;ve reviewed all the block themes from <a href=\"https:\/\/wordpress.org\/themes\/tags\/full-site-editing\/\" rel=\"noopener\">WordPress Block Theme directory<\/a>, examining <code>theme.json<\/code> file of each theme and to see just how many block themes currently support fluid typography \u2014 not the new feature since it\u2019s still in the Gutenberg plugin as of this writing \u2014 using the CSS <code>clamp()<\/code> function. Of the 146 themes I reviewed, the majority of them used a <code>clamp()<\/code> function to define spacing. A little more than half of them used <code>clamp()<\/code> to define font sizes. The <a href=\"https:\/\/wordpress.org\/themes\/alara\/\" rel=\"noopener\">Alara<\/a> theme is the only one to use <code>clamp()<\/code> for defining the <a href=\"https:\/\/themes.trac.wordpress.org\/browser\/alara\/1.3.8\/theme.json#L280-L304\" rel=\"noopener\">layout container sizes<\/a>.<\/p>\n\n\n\n<p>Understandably, only a few recently released themes contain the new fluid typography feature. But here are the ones I found that define it in <code>theme.json<\/code>:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/pixl\/theme.json#L167-L196\" rel=\"noopener\">Pixl<\/a> (Automattic) link to repo<\/li><li><a href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/block-canvas\/theme.json#L85-L116\" rel=\"noopener\">Block Canvas<\/a> (Automattic)<\/li><li><a href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/disco\/theme.json#L127-L164\" rel=\"noopener\">Disco<\/a> (Automattic)<\/li><li><a href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/rainfall\/theme.json#L104-L151\" rel=\"noopener\">Rainfall<\/a> (Automattic)<\/li><li><a href=\"https:\/\/themes.trac.wordpress.org\/browser\/wei\/1.0.3\/theme.json#L163-L185\" rel=\"noopener\">Wei<\/a> (Rich Tabor)<\/li><li><a href=\"https:\/\/github.com\/wpengine\/frost\/blob\/trunk\/theme.json#L159-L232\" rel=\"noopener\">Frost<\/a> (WP Engine) link to repo<\/li><li><a href=\"https:\/\/github.com\/WordPress\/twentytwentythree\" rel=\"noopener\">Twenty Twenty-Three<\/a> (WordPress.org)<\/li><\/ul>\n\n\n\n<p>And if you read my previous post here on CSS-Tricks, the <a href=\"https:\/\/github.com\/tinjure20\/TT2-gopher-blocks\/blob\/Branch-1\/theme.json#L163-L207\" rel=\"noopener\">TT2 Gopher Blocks<\/a> theme I used for the demo has also been updated to support the fluid typography feature.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"selected-reactions-to-the-wordpress-fluid-typography-features\">Selected reactions to the WordPress fluid typography features<\/h3>\n\n\n<p>Having fluid typography in WordPress at the settings level is super exciting! I thought I\u2019d share some thoughts from folks in the WordPress developer community who have commented on it.<\/p>\n\n\n\n<p>Matias Ventura, the lead architect of the Gutenberg project:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">One of my favorite latest Gutenberg features is fluid type that \u2014 hopefully \u2014 &quot;just works&quot;. It&#39;s available for testing in 13.8. <a href=\"https:\/\/t.co\/9SLUgEg4pF\">pic.twitter.com\/9SLUgEg4pF<\/a><\/p>&mdash; Mat\u00edas Ventura (@matias_ventura) <a href=\"https:\/\/twitter.com\/matias_ventura\/status\/1555241585851465728?ref_src=twsrc%5Etfw\" rel=\"noopener\">August 4, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p><a href=\"https:\/\/richtabor.com\/fluid-typography-block-themes\/\" rel=\"noopener\">Rich Tabor<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>As one of the bigger efforts towards making publishing beautifully rich pages in WordPress, fluid typography is a pretty big experience win for both the folks building with WordPress \u2014 and those consuming the content.<\/p><\/blockquote>\n\n\n\n<p>Automattic developer <a href=\"https:\/\/profiles.wordpress.org\/ramonopoly\/\" rel=\"noopener\">Ramon Dodd<\/a> commented <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/39529\" rel=\"noopener\">in the Pull Request<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Contrast that idea with font sizes that respond to specific viewport sizes, such as those defined by <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" rel=\"noopener\">media queries<\/a>, but do nothing in between those sizes. <code>theme.json<\/code> already allows authors to insert their own fluid font size values. This won\u2019t change, but this PR offers it to folks who don\u2019t want to worry about the implementation details.<\/p><\/blockquote>\n\n\n\n<p><a href=\"https:\/\/twitter.com\/Nick_theGeek\" rel=\"noopener\">Nick Croft<\/a>, author of GenesisWP:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Not gonna lie, I think this is the feature I\u2019m most excited about. Was using clamp to do this but the syntax looks easier for your average person.<\/p>&mdash; Nick Croft (@Nick_theGeek) <a href=\"https:\/\/twitter.com\/Nick_theGeek\/status\/1565397622654910465?ref_src=twsrc%5Etfw\" rel=\"noopener\">September 1, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p><a href=\"https:\/\/twitter.com\/bgardner\" rel=\"noopener\">Brian Garner<\/a>, designer and principal developer advocate at WPEngine:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Fluid Typography is a huge improvement to <a href=\"https:\/\/twitter.com\/hashtag\/WordPress?src=hash&amp;ref_src=twsrc%5Etfw\" rel=\"noopener\">#WordPress<\/a>. FSE themes can experimentally opt into this via the Gutenberg plugin, but we\u2019ll see it officially supported in 6.1 this fall. Here\u2019s how it looks\/works: <a href=\"https:\/\/t.co\/Jc7gHdyz5R\">pic.twitter.com\/Jc7gHdyz5R<\/a><\/p>&mdash; Brian Gardner (@bgardner) <a href=\"https:\/\/twitter.com\/bgardner\/status\/1565389943454720005?ref_src=twsrc%5Etfw\" rel=\"noopener\">September 1, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>A few developers <a href=\"https:\/\/github.com\/WordPress\/twentytwentythree\/issues\/158#issue-1369062208\" rel=\"noopener\">think<\/a> some features should be an opt-in. <a href=\"https:\/\/github.com\/WordPress\/twentytwentythree\/issues\/158#issuecomment-1243690763\" rel=\"noopener\">Jason Crist<\/a> of Automattic says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>I love the power of fluid typography, however I also don\u2019t believe that it should just be enabled by default. It\u2019s usage (and the details of it) are important design decisions that should be made carefully.<\/p><\/blockquote>\n\n\n\n<p>You can also find a bunch more comments in the official <a href=\"https:\/\/make.wordpress.org\/themes\/2022\/08\/15\/testing-and-feedback-for-the-fluid-typography-feature\/\" rel=\"noopener\">testing instructions<\/a> for the feature.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>The fluid typography feature in WordPress is <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/43241\" rel=\"noopener\">still in active development<\/a> at the time of this writing. So, right now, theme authors should proceed to use it, but with caution and expect some possible changes before it is officially released. <a href=\"https:\/\/make.wordpress.org\/themes\/2022\/08\/15\/testing-and-feedback-for-the-fluid-typography-feature\/\" rel=\"noopener\">Justin cautions<\/a> theme authors using this feature and suggests to keep eye on the following two GitHub issues:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/42694\" rel=\"noopener\">#42694<\/a><\/li><li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/42489\" rel=\"noopener\">#42489<\/a><\/li><\/ul>\n\n\n\n<p>There is also still lots of <a href=\"https:\/\/make.wordpress.org\/core\/2022\/09\/26\/core-editor-improvement-catalyst-for-creativity\/\" rel=\"noopener\">ongoing work<\/a> on typography and other design-related WordPress tools. If you\u2019re interested, watch this <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34345\" rel=\"noopener\">typography tracking GitHub ticket<\/a> and <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/43241\" rel=\"noopener\">design tools related GitHub issues<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"resources\">Resources<\/h3>\n\n\n<p>I used the following articles when researching fluid type and how WordPress is implementing it as a feature.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"tutorials-and-opinions\">Tutorials and opinions<\/h4>\n\n\n<ul><li><a href=\"https:\/\/richtabor.com\/fluid-typography-block-themes\/\" rel=\"noopener\">How to add Fluid Typography to WordPress Block Themes<\/a> (Rich Tabor)<\/li><li><a href=\"https:\/\/richtabor.com\/fluid-type-scale-theme-json\/\" rel=\"noopener\">Using a Fluid Type Scale in WordPress Block Themes with Theme.json<\/a> (Rich Tabor)<\/li><li><a href=\"https:\/\/wptavern.com\/gutenberg-13-8-introduces-fluid-typography-support-and-revamped-quote-block\" rel=\"noopener\">Gutenberg 13.8 Introduces Fluid Typography Support and Revamped Quote Block<\/a> (WP Tavern)<\/li><li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/05\/27\/block-font-sizes-and-fluid-typography\/\" rel=\"noopener\">Block Font Sizes and Fluid typography<\/a> (Make WordPress Core)<\/li><li><a href=\"https:\/\/make.wordpress.org\/themes\/2022\/08\/15\/testing-and-feedback-for-the-fluid-typography-feature\/\" rel=\"noopener\">Testing and Feedback for the Fluid Typography Feature<\/a> (Make WordPress Themes)<\/li><li><a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-typography-options\/#h-fluid-typography-with-gutenberg\" rel=\"noopener\">Fluid Typography with Gutenberg<\/a> (Full Site Editing)<\/li><li><a href=\"https:\/\/www.smashingmagazine.com\/2022\/01\/modern-fluid-typography-css-clamp\/\" rel=\"noopener\">Modern Fluid Typography Using CSS Clamp<\/a> (Smashing Magazine)<\/li><li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24480\" rel=\"noopener\">Fluid Typography Option #24480<\/a> (GitHub)<\/li><li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/39529\" rel=\"noopener\">Block supports: add fluid typography #39529<\/a> (GitHub)<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"csstricks\">CSS-Tricks<\/h4>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/fluid-typography\/\">Fluid Typography<\/a> (Geoff Graham)<\/li><li><a href=\"https:\/\/css-tricks.com\/simplified-fluid-typography\/\">Simplified Fluid Typography<\/a> (Chris Coyier)<\/li><li><a href=\"https:\/\/css-tricks.com\/consistent-fluidly-scaling-type-and-spacing\/\">Consistent, Fluidly Scaling Type and Spacing<\/a> (Andy Bell)<\/li><li><a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-calc-in-css\/\">A Complete Guide to <code>calc()<\/code> in CSS<\/a> (Chris Coyier)<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"calc-and-related-css-functions\"><code>calc()<\/code> and related CSS functions<\/h4>\n\n\n<ul><li><a href=\"https:\/\/royalfig.github.io\/fluid-typography-calculator\/\" rel=\"noopener\">Clamp() Calculator<\/a> (Christopher Kirk-Nielsen)<\/li><li><a href=\"https:\/\/min-max-calculator.9elements.com\/\" rel=\"noopener\">Min-Max-Value Calculator<\/a> (9Elements)<\/li><li><a href=\"https:\/\/websemantics.uk\/tools\/responsive-font-calculator\/\" rel=\"noopener\">Fluid-responsive font-size calculator<\/a> (Web Semantics)<\/li><li><a href=\"https:\/\/www.fluid-type-scale.com\/\" rel=\"noopener\">Fluid typography Scale Calculator<\/a> (Aleksandr Hovhannisyan)<\/li><li><a href=\"https:\/\/piccalil.li\/quick-tip\/use-css-clamp-to-create-a-more-flexible-wrapper-utility\/\" rel=\"noopener\">Use CSS Clamp to create a more flexible wrapper utility<\/a> (Piccalilli.li)<\/li><li><a href=\"https:\/\/css-tricks.com\/min-max-and-clamp-are-css-magic\/\">min(), max(), and clamp() are CSS magic!<\/a> (CSS-Tricks)<\/li><li><a href=\"https:\/\/ishadeed.com\/article\/css-min-max-clamp\/\" rel=\"noopener\">min(), max(), and clamp() CSS Functions<\/a> (Ahmad Shadeed)<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Fluid typography is a fancy way of \u201cdescribing font properties, such as size or line height, that scale fluidly according to the size of the viewport\u201d. It\u2019s also known by other names, like responsive typography, flexible type, fluid type, viewport sized typography, fluid typography, and even responsive display text. Here is an example of fluid [&hellip;]<\/p>\n","protected":false},"author":275938,"featured_media":373929,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"So, WordPress 6.1 is bringing fluid type to theming \u2014 defined ranges mapped to Block Editor controls. Ganesh Dahal has all the nitty gritty details.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[14726,963,264,14583,19028],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/wordpress-fluid-typography.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":343139,"url":"https:\/\/css-tricks.com\/working-around-the-viewport-based-fluid-typography-bug-in-safari\/","url_meta":{"origin":373905,"position":0},"title":"Working around the viewport-based fluid typography bug in Safari","date":"June 28, 2021","format":false,"excerpt":"Sara digs into a bug I happened to have mentioned back in 2012 where fluid type didn't resize when the browser window resized. Back then, it affected Chrome 20 and Safari 6, but the bug still persists today in Safari when a calc() involves viewport units. Sara credits Martin Ausw\u00f6ger\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/fluid-type.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299523,"url":"https:\/\/css-tricks.com\/simplified-fluid-typography\/","url_meta":{"origin":373905,"position":1},"title":"Simplified Fluid Typography","date":"November 29, 2019","format":false,"excerpt":"Fluid typography is the idea that font-size (and perhaps other attributes of type, like line-height) change depending on the screen size (or perhaps container queries if we had them). The core trickery comes from viewport units. You can literally set type in viewport units (e.g. font-size: 4vw), but the fluctuations\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/fluid-type.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":249005,"url":"https:\/\/css-tricks.com\/fluid-type-stuff\/","url_meta":{"origin":373905,"position":2},"title":"That Fluid Type Stuff Again","date":"December 15, 2016","format":false,"excerpt":"There have been a couple of articles lately regarding fluid type. Matt Smith (calling it \"flexible type\"): My preferred approach for more flexible type is to calculate the font size based on the viewport height and width using the :root selector Richard Rutter (calling it \"Responsive Display Text\"): In one\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":282086,"url":"https:\/\/css-tricks.com\/well-typetura-seems-fun\/","url_meta":{"origin":373905,"position":3},"title":"Well, Typetura seems fun","date":"February 1, 2019","format":false,"excerpt":"I came across this update from Scott Kellum's and Sal Hernandez's project Typetura via my Medium feed this morning, and what a delight?! (Also, wow, I really have been out of the game for a minute.) Typetura.js is a fluid design solution, for any property, based on any input. It\u2019s\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/typetura.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16888,"url":"https:\/\/css-tricks.com\/viewport-sized-typography\/","url_meta":{"origin":373905,"position":4},"title":"Viewport Sized Typography","date":"April 30, 2012","format":false,"excerpt":"There are values in CSS that are for sizing things in relation to the viewport (the size of the browser window). They are called viewport units, and there are a number of them that do slightly different (all useful) things. One unit is 1% of one of the axes of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/vw.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":358029,"url":"https:\/\/css-tricks.com\/consistent-fluidly-scaling-type-and-spacing\/","url_meta":{"origin":373905,"position":5},"title":"Consistent, Fluidly Scaling Type and Spacing","date":"December 16, 2021","format":false,"excerpt":"When Chris first sent me this prompt, I was thinking about writing about progressive enhancement, but that subject is so wide-reaching to be one thing and all too predictable, especially for those already familiar with my writing. Saying that, what I\u2019m going to outline in this article also isn\u2019t just\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_35FD991FAFE1DAC785D8FF6F2C6CB7F45F7B73B94A1005536BB4ECAF4F7F267E_1637665704993_CleanShot2021-11-23at11.08.192x-scaled.jpg?fit=1200%2C721&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373905"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/275938"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=373905"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373905\/revisions"}],"predecessor-version":[{"id":374328,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373905\/revisions\/374328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/373929"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=373905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=373905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=373905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}