Rhythmic sizing

line-height-step

Use fixed steps to create rhythmic text layouts by using line-heights with user-defined units.

Property values

Rhythmic layouts allow the reader's eye to comfortably scan down a page, or across different columns of text. This can be accomplished by establishing a new unit of vertical measure, where each paragraph, heading, and other text fits exactly within that vertical measure, or a multiple of it.

Specify the step size on the :root selector using the line-height-step rather than on the line-height of each separate paragraph and header.

Examples

:root {            
line-height-step: 12pt;
}
line-height-step

style > paragraph > line-height-stepRhythmic sizing

🔎