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:

Letter Spacing Model

The letter spacing is key for a cohesive type scale within a type system. As the font size grows, the letter spacing decreases, requiring a model to adjust the spacing for each size.

Note: Letter spacing also depends on the font family, so the designer can control this with base values.

The reciprocal model works well for calculating letter spacing, but with a slight modification to suit our needs:

letter-spacing = a / font-size - 3

To determine "a" so the model aligns with the base font size and base letter spacing, we use:

a = (base-letter-spacing + 3) * base-font-size

Plugging "a" back into the formula gives the final version for calculating letter spacing across the type scale:

                  letter-spacing = (base-letter-spacing + 3) * base-font-size
                    / font-size - 3
                

This model calculates letter spacing as a percentage of the font size. But the model can be adjusted for "em" units too:

                  letter-spacing = (base-letter-spacing + 0.03) *
                    base-font-size / font-size - 0.03
                

This model-driven approach makes it easy to create cohesive type scales for modern digital products and websites. It provides the required consistency and harmony to any design work.