Using heading sizes based on the body maintains a visually appealing flow on your website. Instead of handpicking font sizes, we can take a base size and multiplicate it by a number - the size ratio - to obtain a bigger size, and so on. Every font size will scale when the main font size changes.
We now got harmonious sizes that look nice together 🤗
If you need to grab the code fast, I've made a codepen to demonstrate the use of ratio-based font sizes.
The size ratio should be a number between 1.1
and 1.7
.
Play with different ratio on type-scale.com to preview how different values look.
Let's set up your base font size and then use calc
to compute the headings font-size
attributes.
Ratio based font sizes. Screenshot from Type Scale.
The base font size and the 10px trick
The font size on your root element (usually the <html>
element) will define what 1rem
is. Let's use 10px
as a font-size
for the root element. Then it becomes easy to convert px
in rem
.
A body size should at least be 16px
so let's declare that on body
html {
font-size: 10px;
}
body {
font-size: 1.6rem; /* 16px */
}
About responsiveness, If you need to bump the size of the font for larger screen, you can just change --size-500
and the other will follow. Smarter could be to change the html
font-size, so every margin and icon size using rem
defined size will scale too.
Using calc() to compute bigger and smaller sizes
Instead of setting headings font-size, variables are assigned, so they can be used for other purposes. Using those variables for your font-size
, will enforce consistent font sizing.
These variables goes from --size-300
to --size-900
.
--size-400
is the base and the other are computed using the --font-ratio
variable.
The ratio can be changed to give a different amplitude to your design, but we'll default to 1.33
The size ratio can be changed by only overwriting the --font-ratio
variable. You can do that in your browser too, using the dev tools 🤯
:root {
--font-ratio: 1.33;
--size-300: calc(var(--size-400) / var(--font-ratio));
--size-400: 1.6rem; /* 16px */
--size-500: calc(var(--size-400) * var(--font-ratio));
--size-600: calc(var(--size-500) * var(--font-ratio));
--size-700: calc(var(--size-600) * var(--font-ratio));
--size-800: calc(var(--size-700) * var(--font-ratio));
--size-900: calc(var(--size-800) * var(--font-ratio));
}
Now we have useful CSS variables that we can use to stylize our titles. but you can also use them for any custom CSS you'll do in the future.
These sizes values can be used for headings size, but also for any other element.
A use case would be making larger version of a button. For example, the size will be --size-500
instead of --size-400
.
Stylize headings using the ratio-based sizes
Let's define a body size to --size-400
, the label size to --size-300
and the titles to some bigger sizes. It depends on how deep you need to go with your hierarchy. I usually am fine with h1
to h3
only but this might not be your case:
p {
font-size: var(--size-400);
}
label {
font-size: var(--size-300);
}
h1 {
font-size: var(--size-700);
}
h2 {
font-size: var(--size-600);
}
h3 {
font-size: var(--size-500);
}
Conclusion
If you followed along, you now are ready to set up your own ratio base font size system. Yay!
Setting how much 1rem
is and setting the body font size should be your first step. You can now compute a set of sizes, using a ratio. Finally, use these and only these in your CSS!
You are now all set!
Congrats 🥳🎉
I write about design systems and CSS, follow me on twitter for more tips and resources 🤙
Top comments (0)