Models

If you want to generate a type system programmatically from CSS or you're just curious about how to create a consistent type scale, this section will give you insights into the models used to calculate font size, line height, and letter spacing in a type system. Let's dive into the details:

Line Height Model

The line height model is an essential part of creating a well-balanced type system. The line height is calculated by multiplying the font size by a line height ratio. This ratio depends on both the font size and the line width, but for simplicity, we fix the line width and calculate the line height ratio based solely on the font size. When choosing the base font size and base line height, we are implicitly considering a standard line width, which helps maintain a consistent type scale across the entire type system.

We need a model to calculate all line height ratios for various font sizes within a type scale, starting from a base font size and base line height ratio. This ensures that any changes to these base values will propagate throughout the type system, maintaining consistency.

Note: The line height is also influenced by the font family, which we account for when selecting the base values. These base values act as a hint to the model, ensuring the resulting type system remains visually harmonious.

After extensive research and experience, I found that a reciprocal model is a perfect fit for calculating line height ratios within a type system. Inspired by pendulum motion, where frequency is the reciprocal of the period, the model is defined as follows:

line-height-ratio = 1 + a / font-size

To determine "a" such that the model passes through the point (base-font-size, base-line-height-ratio), we use:

a = (base-line-height-ratio - 1) * base-font-size

Substituting "a" back into the initial model provides the final formula to calculate line height ratios for the entire type system:

line-height-ratio = 1 + (base-line-height-ratio - 1) * base-font-size / font-size

Finally, we calculate the corresponding line heights by multiplying the font sizes by the line height ratios, ensuring consistency within the type scale.

The Backward Method

Our reciprocal model for calculating line heights within a type system has an interesting property that can simplify calculations. If we calculate the difference between a line height and its corresponding font size, then add this difference to any font size in the type scale, we get line heights that satisfy our model. This backward method is simple enough to perform mentally, without requiring a calculator. The backward model is as follows:

line-height = a + font-size

To determine "a," we use the base font size and base line height:

a = base-line-height - base-font-size

Replacing "a" in the initial model gives us the final formula for calculating line heights within the type system:

line-height = (base-line-height - base-font-size) + font-size

And of course, we can then calculate the corresponding line height ratios by dividing the line heights by the font sizes.