Advanced Typographic CSS

We've already covered the basic CSS properties that govern typography in CSS, but there are a number of more advanced techniques that can provide additional control and unity to a site's type.

Modular Scales

One of the key functions of typographic CSS, especially for headings, is to create a visual hierarchy of information. This can be achieved many ways, but one of the most common techniques is to use different type sizes for the various headings using the font-size property. Determining the size of each heading is a question of design, but one way to ensure a harmonious set of sizes is to use a little math. A modular scale for type uses a numeric ratio as a multiplier to arrive at each new size. For instance:

Here it is in action. Notice how the sizes scale harmoniously:

Letting the Browser Do the Math

The modular scale technique is a nice design tool, but we can make things easier to manage by letting the browser do the math for us. To make this work, we'll need to make use of CSS Variables and the CSS calc function, which is like an in-code calculator tool.

By creating each size as a variable, we can use the calc function to multiply the ratio by the previous size:

What happens if you try changing the value of the ratio variable? Notice how all the sizes are recalculated and all the type scales accordingly. Can you figure out how to create a fourth size?

Responsive Type

As with everything on the web, typography should be responsive because there is no way to know what size screen any user might be using to view the page. Usually, this is as simple as sizing the type up in a series of media queries based on the user's viewport.

If we use absolute units like px to size our type, each individual element must be sized one-at-a-time in each new media query:

But there's a better way! By using the rem unit to size all type, the process becomes much easier. The rem unit is a relative unit, meaning, as long as all other elements are sized using the rem unit, we can change the size of all elements by changing a single number. This is because the definition of 1rem is changeable. Specifically, 1rem is equal to whatever font size is set on the html selector. By default, this is 16px, but we can change this size to be whatever we want:

Try grabbing the lower-right corner of the demo above and resizing it. Notice how all the elements change size in response to the viewport size. What happens if you change the font size that is set in the media query?

Responsive Modular Scale with Variables

While changing the value of 1rem is a powerful technique for making type responsive, you might sometimes find that the jump in sizes between headings needs to use a larger ratio on desktop sizes than on mobile sizes. If you use a modular scale with calc and variables as shown above, you can simply change the ratio variable in a media query and all the size variables are recalculated at that viewport width:

Try grabbing the lower-right corner of the demo above and resizing it. Notice how all the elements change size when the ratio variable changes. What happens if you change the number for the ratio variable in the media query?

Video Lesson