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:

Letter Spacing Model

The letter spacing model is a crucial component of building a cohesive type scale within a type system. Letter spacing is dependent on the font size and generally decreases as the font size increases. Similar to the line height model, we need a model that calculates letter spacing values for all font sizes, starting from a base font size and a base letter spacing to ensure consistency across the type system.

Note: The letter spacing is also influenced by the font family, which we take into account when choosing the base values. These base values serve as a guide for the model to create a consistent type scale within the type system.

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

letter-spacing = a / font-size - 3

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

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

Substituting "a" in the initial model gives us the final formula for calculating letter spacing across the type scale in the type system:

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

This model calculates letter spacing in percentage relative to the font size, ensuring that the type scale maintains visual harmony as font sizes change. If we need to use "em" units instead, we can adjust the model accordingly:

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

By using this model-driven approach, you can create a cohesive and scalable type system for modern digital products. This ensures that your type scale is consistent, visually appealing, and adaptable to changes, providing a solid foundation for a well-balanced design.