Vertical rhythm (h1)

This is a tool for designers and developers. The aim is a design system, where practically all vertical measurements could be defined in rem units. The responsive scaling of fonts, line heights, margins, et cetera, can then be simply solved by defining different base font sizes for the breakpoints.

This tool was originally developed as an in-house tool at Crasman, by designers Teemu Korpilahti and Kiti Kutvonen. Feel free to use and share it. If you have any thoughts about it, please contact us at [email protected].

What does it do? (h2)

This tool enables the designer to experiment with various sizes in rem units, and convert them in to the corresponding pixel sizes that can be used in Photoshop, Sketch, or any other layout software. At the bottom of the page, you can find the generated css code that can be used as a specification for the developer.

Scale systems (h3)

The scale systems dropdown in the settings panel lets you choose from a set of predefined scale systems. The scale systems take the rem sizes you have set for the paragraph tag, and multiplies them with the series of numbers in the scaling system in order to produce the corresponding sizes for the heading tags. The bottom margin for the headings is by default the elements line-height divided by two, and top margin is by default equal to the element's line-height.

Other features (h4)

All of the main text elements are also editable, so you can replace any text with your own content. Simply click on the elements.

The top tool bar also lets you set css definitions for the body and heading font families.

Generated CSS

...