free tools runs in this tab no account, no upload
Modular type scale
What sizes should the headings be if the body is 16px?
One base size and one ratio produce the whole scale. It prints px and rem side by side because the ratio is a design decision and the rem value is what actually ships.
--text-body: 1rem; --text-h6: 1.25rem; --text-h5: 1.5625rem; --text-h4: 1.9531rem; --text-h3: 2.4414rem; --text-h2: 3.0518rem; --text-h1: 3.8147rem; --text-display: 4.7684rem;
- display 4.7684rem 76.29px
- h1 3.8147rem 61.04px
- h2 3.0518rem 48.83px
- h3 2.4414rem 39.06px
- h4 1.9531rem 31.25px
- h5 1.5625rem 25px
- h6 1.25rem 20px
- body 1rem 16px
how to use it
- Set the body size and the ratio - 1.25 is a major third and reads well on screen.
- Read the eight steps; each is the one below it multiplied by the ratio.
- Copy the custom properties out and the scale is the stylesheet's, not a habit.
what this page cannot do
A scale is a proposal until something uses it. The extension lists every font size a live page actually renders, which is how you find the eleven sizes between the six the scale defines.
Fonts in the panel What would this page look like in a different typeface?
no host permissions · the reading is free