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 at twitter Checkout a project I built for making flatmate finding easier and more fun bunkr - the flatmate finder.