A site that has grown for a year has fifteen font sizes in it, each one chosen because it looked right on the day. Together they look like nothing in particular.
Choose the scale up front
Pick a base size for body text, usually 16 to 18 pixels, and multiply by a fixed ratio for each step up. A ratio of 1.25 gives you 18, 22, 28, 35, 44. That is enough for body, lead, three headings and a display size, and nothing else is allowed.
Then hold the line
- Put the sizes in CSS variables and use nothing else.
- When something needs to be bigger, move it up one step, never by a few pixels.
- Do the same for spacing: one scale, used everywhere.
