{"id":299523,"date":"2019-11-29T08:11:40","date_gmt":"2019-11-29T15:11:40","guid":{"rendered":"https:\/\/css-tricks.com\/?p=299523"},"modified":"2020-05-19T05:47:39","modified_gmt":"2020-05-19T12:47:39","slug":"simplified-fluid-typography","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/simplified-fluid-typography\/","title":{"rendered":"Simplified Fluid Typography"},"content":{"rendered":"\n<p>Fluid typography is the idea that <code>font-size<\/code> (and perhaps other attributes of type, like <code>line-height<\/code>) change depending on the screen size (or perhaps container queries if we had them).<\/p>\n\n\n\n<p>The core trickery comes from <a href=\"https:\/\/css-tricks.com\/viewport-sized-typography\/\">viewport units<\/a>. You can literally set type in viewport units (e.g. <code>font-size: 4vw<\/code>), but the fluctuations in size are so extreme that it&#8217;s usually undesirable. That&#8217;s tempered by doing something like <code>font-size: calc(16px + 1vw)<\/code>. But while we&#8217;re getting fancy with calculations anyway, the most common implementation ended up being an equation to calculate plain English:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>I want the type to go between being 16px on a 320px screen to 22px on a 1000px screen.<\/p><\/blockquote>\n\n\n\n<!--more-->\n\n\n\n<p>Which ended up <a href=\"https:\/\/css-tricks.com\/snippets\/css\/fluid-typography\/\">like this<\/a>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html {\n  font-size: 16px;\n}\n@media screen and (min-width: 320px) {\n  html {\n    font-size: calc(16px + 6 * ((100vw - 320px) \/ 680));\n  }\n}\n@media screen and (min-width: 1000px) {\n  html {\n    font-size: 22px;\n  }\n} <\/code><\/pre>\n\n\n\n<p>That&#8217;s essentially setting a <strong>minimum<\/strong> and <strong>maximum<\/strong> font size so the type won&#8217;t shrink or grow to anything too extreme. <a href=\"https:\/\/blog.typekit.com\/2016\/08\/17\/flexible-typography-with-css-locks\/\" rel=\"noopener\">&#8220;CSS locks&#8221;<\/a> was a term coined by Tim Brown.<\/p>\n\n\n\n<p><strong>Minimum<\/strong> and <strong>maximum<\/strong> you say?! Well it so happens that functions for these have <a href=\"https:\/\/www.w3.org\/TR\/css-values-4\/#calc-notation\" rel=\"noopener\">made their way into the CSS spec<\/a> in the form of <code>min()<\/code> and <code>max()<\/code>.<\/p>\n\n\n\n<p>So we can simplify our fancy setup above with a one-liner and maintain the locks:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html {\n  font-size: min(max(1rem, 4vw), 22px);\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/11\/fluid.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>We actually might want to stop there because even though both Safari (11.1+) and Chrome (79+) support this at the current moment, that&#8217;s as wide as support will get today. Speaking of which, you&#8217;d probably want to slip a <code>font-size<\/code> declaration before this to set an acceptable fallback value with no fancy functions.<\/p>\n\n\n\n<p>But as long as we&#8217;re pushing the limits, there is another function to simplify things even more: <code>clamp()<\/code>! Clamp takes three values, a min, max, and a flexible unit (or calculation or whatever) in the middle that it will use in case the value is between the min and max. So, our one-liner gets even smaller:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  font-size: clamp(100%, 1rem + 2vw, 24px);\n} <\/code><\/pre>\n\n\n\n<p>That&#8217;ll be Chrome 79+ (which doesn&#8217;t hasn&#8217;t <a href=\"https:\/\/www.chromestatus.com\/features\/schedule\" rel=\"noopener\">shipped<\/a> to stable but will very soon).<\/p>\n\n\n\n<p>Uncle Dave is very happy that <a href=\"http:\/\/fittextjs.com\/\" rel=\"noopener\">FitText<\/a> is now a few bytes instead of all-of-jQuery plus 40 more lines. Here is Dave chucking CSS custom properties at it:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mddmRJe\" src=\"\/\/codepen.io\/anon\/embed\/mddmRJe?height=450&amp;theme-id=1&amp;slug-hash=mddmRJe&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mddmRJe\" title=\"CodePen Embed mddmRJe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Just saw this nice explanation:<\/p>\n\n\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">Morning devsheet: CSS `clamp` can be used for fluid typography. &#x1f389;<br><br>&#x1f517; `clamp` on MDN: <a href=\"https:\/\/t.co\/4xZpDfYoqB\">https:\/\/t.co\/4xZpDfYoqB<\/a><br><br>Video alt: Example showing how to use `clamp` for fluid\/responsive typography for an h1 element <a href=\"https:\/\/t.co\/9iiCxxXJO7\">pic.twitter.com\/9iiCxxXJO7<\/a><\/p>\u2014 Stefan Judis (@stefanjudis) <a href=\"https:\/\/twitter.com\/stefanjudis\/status\/1252140444231712769?ref_src=twsrc%5Etfw\" rel=\"noopener\">April 20, 2020<\/a><\/blockquote> <script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Fluid typography is the idea that <code>font-size<\/code> (and perhaps other attributes of type, like <code>line-height<\/code>) change depending on the screen size (or perhaps container queries if we had them).<\/p>\n<p>The core trickery comes from <a href=\"https:\/\/css-tricks.com\/viewport-sized-typography\/\">viewport units<\/a>. You can literally set type in viewport units (e.g. <code>font-size: 4vw<\/code>), but the fluctuations in size are so extreme that&#8217;s usually undesirable. Let&#8217;s look at a technique for tamping the extremes, but it basically a one-liner now that CSS is evolving!<\/p>\n","protected":false},"author":3,"featured_media":285285,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[963],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/fluid-type.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":249005,"url":"https:\/\/css-tricks.com\/fluid-type-stuff\/","url_meta":{"origin":299523,"position":0},"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":373905,"url":"https:\/\/css-tricks.com\/fluid-typography-wordpress-block-themes\/","url_meta":{"origin":299523,"position":1},"title":"Adding Fluid Typography Support to WordPress Block Themes","date":"October 7, 2022","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/wordpress-fluid-typography.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":252583,"url":"https:\/\/css-tricks.com\/fun-viewport-units\/","url_meta":{"origin":299523,"position":2},"title":"Fun with Viewport Units","date":"June 5, 2017","format":false,"excerpt":"Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them. I thought it would be fun to review the basics, and then round-up some of my favorite use-cases. What are viewport units? Four\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":344273,"url":"https:\/\/css-tricks.com\/how-to-get-a-pixel-perfect-linearly-scaled-ui\/","url_meta":{"origin":299523,"position":3},"title":"How to Get a Pixel-Perfect, Linearly Scaled UI","date":"July 15, 2021","format":false,"excerpt":"Dynamically scaling CSS values based on the viewport width is hardly a new topic. You can find plenty of in-depth coverage right here on CSS-Tricks in articles like this one or this one. Most of those examples, though, use relative CSS units and unitless values to achieve fluid scaling. That\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_801F1F8B02DD1D1B01F3A8CD432798C49451FBC222AD086C6E92AE6397AC3E1B_1624719394166_image.png?fit=1200%2C750&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16888,"url":"https:\/\/css-tricks.com\/viewport-sized-typography\/","url_meta":{"origin":299523,"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":242376,"url":"https:\/\/css-tricks.com\/molten-leading-css\/","url_meta":{"origin":299523,"position":5},"title":"Molten Leading in CSS","date":"June 2, 2016","format":false,"excerpt":"Dave and I started the latest ShopTalk Show with an audio clip from Tim Brown responding to some of our previous chatter regarding vertical rhythm (and such). Transcription here. It sparked another interesting conversation about these things. A small part of that was about Tim's coined phrase \"molten leading\", which\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/fluid-type.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299523"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=299523"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299523\/revisions"}],"predecessor-version":[{"id":311305,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299523\/revisions\/311305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/285285"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=299523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=299523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=299523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}