Select theme appearance

Fluid dynamic typography

Optimise your fonts by only providing what's needed.

  • Tags:  CSS, Web Development
  • Last updated:  

Explanation

Modular scales and fluid typography scales are not very new, although still not widely popular. They have their upsides and downsides, but I like them.

The basic idea is, that they scale with the devices viewport. Larger viewports have larger fonts (and spacing).

The scale is not linear, but modular, which is supposed to create a more harmonic visual effect. Read more about it under Inpspirations.

Script

This is script I wrote to generate my fluid typography scale.

https://paste.sr.ht/~jshsj/bcb0ca3a49ab0550b8d21e16f9f09025cad7c8d2

Inspiration

Basic explanation and source of inspiration: https://every-layout.dev/rudiments/modular-scale/

I copied and adapted the math from https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/. He also has a online calculator, that’s pretty good, but didn’t completely fit my needs.