Type scale

Modular scales, or type scales are popular ways to create consistent and harmonious hierarchy in your typography. While we don’t usually use them in our own work anymore, opting for more purposeful and semantic scaling that Typetura allows, you can still create responsive modular scales with Typetura. Scales that resize fluidly with an easing curve.

Below is some code that generates scale values from --s5 (5 on a modular scale) through --s-1 (-1 on a modular scale) along with corresponding classes for font size. The ratio and base can be dynamically controlled with --ratio and --base in the Typetura keyframes.

See the Pen Typetura Type Scale Tutorial by Scott Kellum (@scottkellum) on CodePen.