Upgrade Your CSS: The Syntax.fm Typography Sizing Strategy

In a recent episode of the Syntax.fm podcast, Wes Bos and Scott Tolinski discuss how they handle typography sizing in their applications. I decided to try it out in Codepen and share my results here.

In short, here's the approach:

1.) A range of font sizes are declared as custom properties
2.) Sizing is declared as rem units
3.) The root font size is changed via @media queries to shrink and grow the rem sizes as needed

This approach solves several problems:

1.) Standardizes sizing
2.) Simplifies your CSS
3.) Responsive to changes in browser size

How To Start

First, set up your custom properties with a range of font sizes in rem units

:root {
  --text-1: 0.5rem;
  --text-2: 1rem;
  --text-3: 1.5rem;
  --text-4: 2rem;
  --text-5: 2.5rem;
  --text-6: 3rem;
}

You can name your custom properties however you like, but I found using a number at the end helped me keep it straight in my head. Some might prefer their names to be --smallest-font, --extra-large-font, etc. Whatever works for you is best.

You can also use whatever rem values you like. I found the 0.5rem to 3rem range useful for this short example. Out in the wild, there might be uses for more text size options and a larger range.

I then went through some common elements and assigned them these custom variables:

h1 {
  font-size: var(--text-6);
}

h2 {
  font-size: var(--text-5);
}

h3 {
  font-size: var(--text-3);
  margin-bottom: var(--text-2);
}

p {
  font-size: var(--text-2);
  margin-bottom: var(--text-1);
}

You'll notice I used the font sizing custom properties to set margin sizing. I don't see the downside, but in the future, perhaps I'll define a margin sizing custom property, as well.

Scott Tolinski's Level Up Tutorials course, Modern CSS Design Systems, covers this topic in much more detail, if you're looking to Level Up your CSS.

Take a look at the Codepen example to see this strategy implemented. I use JavaScript to cycle the root font size between 16px and 20px, so you can easily visualize how a change to the root font size proportionally changes any sizes declared as rem units.

Why is standardization important?

When you define your unit sizes in custom properties, you can change the font sizes throughout the entire document by changing a single value in the custom properties, versus combing through the entire stylesheet to adjust the font sizes for individual classes and html type selectors.

How does this simplify design?

Coming up with a strategy like this simplifies design. Sizing decisions are pre-made for you (and by you), so your task is to find the best fit from your limited options. When compared to selecting the perfect size from infinite options, you'll find that this approach is faster.

How is this responsive?

rem units are sized relative to the root font size, meaning 1 rem is equal to the font size set in the :root or html property. So if the root font size is decreased via a @media query as the screen size gets smaller, then all values with property values declared in rem units will resize proportionally.