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:

Font Size Models

Modular Type Scale

The piano scale model used for font size is inspired by Tim Brown's work on music-like type scales. Here, we leverage intervals from an equal-tempered piano, the modern tuning method. While Tim's model uses the classical "just intonation" tuning with whole number ratios, my approach opts for the precision of the modern equal temperament system.

In an equal-tempered tuning, the octave (a doubling in frequency) is divided into 12 equal steps, known as semitones. To find the value of a semitone, we use the 12th root of 2:

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

Once we have the semitone value, we can calculate the other intervals by multiplying the semitone with itself to derive the next interval. For example, the tone (or Major Second) can be calculated as follows:


                    major-second = tone = semitone * semitone = 1.12

By applying this process repeatedly, we can calculate all the intervals used for the modular 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. To create a concrete type system, we select a specific interval (e.g., Major Second) and use it to determine successive font sizes in a geometric progression, starting from a base size:

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

Sizes smaller than the base are calculated by dividing by the interval:

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

Metric Type Scale

The metric scale model for font size is reverse-engineered from popular type scales found in major design systems. The widespread use of these type scales inspired me to extract and propose a model that generates font sizes as multiples of a scale unit, creating a consistent type scale that fits well within a type system.

The modular arithmetic progression model used to calculate font sizes works as follows: Imagine an arithmetic progression that increases its step size after a set number of steps. This set number of items is called the module. Each consecutive module in the progression uses a slightly larger step, which allows values to be multiples of a scale unit while introducing some nonlinearity. This nonlinearity is crucial for expressing hierarchy within the type system.

Here's how the type scale generative model works:

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

A specific font size is obtained by adding to the previous font size. While it resembles a simple arithmetic progression, the new term "a" introduces variability, which increases for each successive module and adds a value to the step. To calculate "a" based on the module size and step, we use:

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

Substituting "a" with this expression gives us the final model used to generate the type scale:

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

If we express the step in units (e.g., step = 1 unit), we have:

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

Sizes smaller than the base font size are calculated by subtracting the unit from the previous size. Since there are only a few sizes below the base, we can use this simplified model without reducing the progression step after a certain number of items:

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