Scale font size the right way.

Hey there, I recently found this simple way of organising font sizes for different html semantics like h1, h2, p etc and also maintain the visual hierarchy among them.

Here is the snippet of it.

root: {
    --p: 1rem;
    --font-scale: 1.2;
    --h5: calc(var(--p) * var(--font-scale));
    --h4: calc(var(--h5) * var(--font-scale));
    --h3: calc(var(--h4) * var(--font-scale));
    --h2: calc(var(--h3) * var(--font-scale));
    --h1: calc(var(--h2) * var(--font-scale));
}

This has mainly two benefits:
first: you always maintain the hierarchy, the magnitude depends on what you set for --font-scale variable so tinker with it to get your perfect size.
second: when building responsive web apps with media queries, you only have to apply media query for --p, the rest will scale w.r.t to that value.

Configure this in your Tailwind config to use these variables.

const config = {
 theme: {
  extend: {
   fontSize: {
     p: "var(--p)",
     h5: "var(--h5)",
     h4: "var(--h4)",
     h3: "var(--h3)",
     h2: "var(--h2)",
     h1: "var(--h1)",
    },
  }
 }
}

I hope this helps bring font size consistency in your next project.

Follow me [twitter].(https://twitter.com/kuntashTweets/)
I also run a small web agency actualizeui.