Screen width :
Font size :
Line Height :

Metrical

Control your metrics

A modular scale & vertical rythm SASS library.

Customizable

Change the values you like to build your custom responsive design system. Your own sleek, intuitive, and powerful mobile first framework is here.

Sass

Harness the power of Sass, the most mature, stable, and powerful professional grade CSS extension language in the world.


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

You get the idea, right?

  • For each responsive breakpoint, set a line height.
  • Then style your elements using Metrical's mixin.
  • All those metrics will be a multiplier of the base line height.
  • You now get consistent metrics across all breakpoints 🌞