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.