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.
Top comments (0)