Models

Line Height Model

The line height is essential to creating a balanced vertical rhythm, and it's calculated by multiplying the font size by a line height ratio. While this ratio depends on both font size and line width, we focus on font size, leaving the designer in control of the optimal line width. The designer will factor in the line width when selecting the base font size and base line height.

The model should calculate line height ratios for all font sizes in the type scale, starting with a base font size and line height ratio. This ensures that any changes to the base values are applied throughout the system, maintaining consistency.

Note: The line height also depends on the font family, and the designer takes this into account when selecting the base values. These base values keep the designer in control of the entire process.

Through research and hands-on experience, I've found that a reciprocal model is ideal for calculating line height ratios in a type system. Inspired by pendulum motion, where frequency is the reciprocal of the period, the model works like this:

To find "a" so that the model matches the base font size and base line height ratio, here's the formula:

Plugging "a" back into the original model gives the final formula for calculating line height ratios across the type scale:

To get the line heights, simply multiply the font size by the line height ratio for the entire type scale.

The Backward Method

Our reciprocal model has a interesting property that makes calculations even easier. If you take the difference between a line height and its font size, and then add this difference to any font size in the type scale, you'll get line heights that match the model. This method is simple enough to do mentally without needing a calculator. Here's how the backward method works:

To find 'a,' use the base font size and base line height:

Plugging 'a' into the original formula gives us the final, more efficient line height model:

Afterward, you can calculate the line height ratios by dividing all line heights by their corresponding font sizes.