{"id":358029,"date":"2021-12-16T14:06:03","date_gmt":"2021-12-16T22:06:03","guid":{"rendered":"https:\/\/css-tricks.com\/?p=358029"},"modified":"2021-12-17T07:23:01","modified_gmt":"2021-12-17T15:23:01","slug":"consistent-fluidly-scaling-type-and-spacing","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/consistent-fluidly-scaling-type-and-spacing\/","title":{"rendered":"Consistent, Fluidly Scaling Type and Spacing"},"content":{"rendered":"\n

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<\/em> 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 one thing either, but the day I meet a writing prompt exactly will be the day pigs start flying. This one group of things, though, will change how you write CSS.<\/p>\n\n\n\n\n\n\n\n

I personally think this group of things lets a lot of sites down\u2014especially in a responsive design sense. The things in this group are typography and spacing<\/strong>. So often, I see inconsistent spacing\u2014especially vertically\u2014that makes content hard to scan and creates this subtle, disjointed feeling. The same goes for type: huge<\/em> headings on small viewports, or heading hierarchies that visually have no contrast in size, rendering them useless in a visual sense.<\/p>\n\n\n\n

There is a pretty easy fix for all of this using a sizing scale and fluid type, and I promise it\u2019ll make your websites look and feel heaps better. Let\u2019s get into it.<\/p>\n\n\n

What the heck is a sizing scale?<\/h3>\n\n\n

A sizing scale<\/dfn> is a uniform progression of sizes based on a scale\u2014or, more accurately, a ratio.<\/p>\n\n\n\n

\"Screensjhot<\/figure>\n\n\n\n

In that screenshot of type-scale.com<\/a>, I\u2019ve selected a \u201cPerfect Fourth\u201d scale which uses a ratio<\/strong> of 1.333. This means each time you go up a size, you multiply the current size by 1.333, and each time you go down a size, you divide by 1.333.<\/p>\n\n\n\n

If you have a base font size of 16px<\/code>, using this scale, the next size up is 16 * 1.333<\/code>, which is 21.33px<\/code>. The next size up is 21.33 * 1.333<\/code>, which is 28.43px<\/code>. This provides a lovely curve<\/em> as you move up and down the scale.<\/p>\n\n\n

CSS clamp()<\/code> and type fluidity<\/h3>\n\n\n

For years<\/em>, if you were to say, \u201cHey Andy, what’s your favorite CSS feature?\u201d I would immediately say flexbox, but nah, not these days. I am a clamp()<\/a><\/code> super fan<\/em>. I wrote about it in more detail here<\/a>, but the summary of clamp()<\/code> is that it does clever stuff based on three parameters you give it:<\/p>\n\n\n\n