Module: Flow Rhythm

This module provides functions and mixins for keeping the vertical rhythm. You'll find it in src/modules/_flow-rhythm.scss.

Calculating line and font-sizes

The flow-lines function returns the number of "lines" needed to fit a given vertical size.

The flow-font-size function calculates a font size from a number of lines to cover and the desired relative line height.

The flow-line-height function returns an absolute line-height that fits a given $font-size into the vertical rhythm, while avoiding lines being too tight using parameter $min-line-height-factor.

Responsive sizing with rhythm

The usual way to set a height responsively using viewport relative units would break a vertical rhythm as heights are no longer discrete multiples of the vertical rhythm base. The responsive-rhythm mixin can help creating multiple breakpoints that gradually increase a length property from a $start-multiple to an $end-multiple in discrete steps.

Example going from 3 to 10 lines between 600px and 1800px viewport width.

Customizing the rhythm

At the top of the module's file there are default Sass variables setting the vertical rhythm base unit, as well as the desired line height span between body text and headings. These in turn are used to calculate $font-size-normal, but that variable can be overridden too.