Models

Whether you're looking to generate a type system from CSS or just curious about how to build a consistent type scale, this section will guide you through the models behind font size, line height, and letter spacing. Let's dive into the details:

Font Size Models

Modular Type Scale

The modular font size model is inspired by Tim Brown's work on music-like type scales. This approach uses intervals based on the modern tuning system of equal temperament, whereas Tim's original model relies on "just intonation" with whole number ratios. The focus here is on precision using the modern method.

Diagram of piano keys illustrating equal temperament intervals

In equal temperament, an octave is split into 12 equal steps (called semitones). The semitone value is calculated using the 12th root of 2:

                   semitone = nthroot(2, 12) = 1.059463094 = 1.06 
                   minor-second = semitone = 1.06 
                

Using this value, we can multiply to find larger intervals. For instance, the tone (or Major Second) is calculated as follows:


                    major-second = tone = semitone * semitone = 1.12

By repeating this process, we can calculate all the intervals for the modular type scale.

                   minor-third = major-second * semitone = 1.19 
                   major-third = minor-third * semitone = 1.26 
                   perfect-fourth = major-third * semitone = 1.33 
                   tritone = perfect-fourth * semitone = 1.41 
                   perfect-fifth = tritone * semitone = 1.50 
                

These intervals form the foundation for calculating font sizes in a type scale. By selecting a specific interval, such as Major Second, the designer can create a sequence of font sizes in a geometric progression, starting from a base size:

size(n) = size(n-1) * interval

To calculate sizes smaller than the base size, we can simply divide by the same interval:

size(n) = size(n-1) / interval

Metric Type Scale

The metric type scale model is inspired by popular type scales found in major design systems. It generates font sizes as multiples of a step unit, creating a highly consistent type scale that excels in complex scenarios.

The model operates like an arithmetic progression, but with a twist. After a set number of steps (called the module), the step size increases. This non-linear progression introduces variation, which is key for creating a hierarchy within a type system.

Here's the basic formula:

size(n) = size(n-1) + step-unit + a

While it may seem like a simple progression, the term 'a' introduces non-linearity, increasing with each successive module. To calculate 'a,' the module size and step-unit are used:

a = INT((n - 1)/mod-size) * step-unit

Plugging "a" back into the formula gives us:

                  size(n) = size(n-1) + (INT((n - 1)/mod-size) + 1) *
                    step-unit
                

For sizes smaller than the base, we subtract the step unit from the previous size. Since there are only a few sizes below the base, we can use a simple arithmetic progression:

size(n) = size(n-1) - step-unit