chapter eight

8 Text and typography math

 

This chapter covers

  • Understanding the mathematical relationships between font size, line height, and spacing for optimal readability
  • Using CSS math functions for fluid, responsive typography
  • Implementing modular scales and mathematical ratios in type systems

Typography on the web is fundamentally a mathematical craft. While designers often make typographic decisions based on visual intuition, the most readable and aesthetically pleasing text arrangements follow specific mathematical relationships that have been refined over decades of digital typography research and, really, over centuries of print design.

When you land on a web page that you find aesthetically pleasing, you might be responding to the color scheme or to the use of images, but I’m willing to bet that what you’re really responding to is the typography of the page. If that seems surprising, then it means the person who did the page typography has done a great job because it’s a general design rule that the better the typography, the less noticeable it is.

8.1 The math behind the “typographic trinity”

8.1.1 General readability considerations

8.1.2 When you know the font size you want to use

8.1.3 When you know the line height you want to use

8.1.4 When you know the line length you want to use

8.1.5 Putting the formulas to work

8.2 Fluid typography with CSS math functions

8.2.1 Using vw and vh for scalable text sizes

8.2.2 Setting constraints on dynamic font scaling

8.2.3 Calculating the preferred clamp() formula for font sizes

8.2.4 Example: Hero text for a landing page

8.3 Applying a modular scale to text

8.3.1 Creating a modular scale from a scaling factor

8.3.2 Choosing a modular scale ratio

8.3.3 Implementing typographic scales with CSS variables

8.4 Solutions to Exercises

8.5 Summary