Skip to content

24 ways to impress your friends

A Modern Typographic Scale


Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Gunnar Bittersmann

A typographic scale is a good use of custom properties and the `calc` function.

You might want to take this even further and make the intervals dependend on the viewport size, i.e. a smaller interval on small vieports (like mobile phones and smart watches), a larger interval on large viewports (like desktop computers and presentation screens). All it takes to do so is to change the value of the custon property `—int` with media queries, like so:

:root { —int: 1.2}
@media (min-width: 22em) { :root { —int: 1.3 }
@media (min-width: 32em) { :root { —int: 1.4 }
@media (min-width: 42em) { :root { —int: 1.5 }

All the calculations will adopt automatically. Magic! (There’s a reason why the things are called “custom properties”, not “CSS variables”. ;-))

See example

Impress us

Be friendly / use Textile