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:
- Let's say we want to use a ratio of
- We know our body copy is sized to
- So to arrive at our next size, we multiply
1.5to arrive at a value of
1.5rem. That's our first heading size.
- To get our second size, we multiply out first size by the ratio. So
1.5gives us a second size of
- Likewise, for a third size, we multiply the second size, by the ratio. That gives us a third size of
- And so on until we have as many sizes as we need.
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?
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?
- Practical Typography: A Free Online Book on the Art of Typography
- Pro Web Type: A Free Online Book about Type on the Web
- Typography for User Interfaces
- A Practical Look at Choosing Typefaces
- An Exploration of Type-Focused Websites
- Obnoxiously Readable Text with Viewport Units