Choosing Headings
Headings and subheadings invite and guide readers through the text. Effective use of large headings grabs their attention. Smaller subheadings help them decide whether or not they want to read a particular section. Headings need to stand out to help anchor the composition.
Using the Same Typeface
You can start off having headlines use your body typeface with double or triple the size. Experiment with the spacing, weight, alignment, and case (such as setting a header in all-uppercase via text-transform), or even color. Reusing the same body typeface not only creates visual harmony, but also reduces the number of fonts to be loaded, boosting performance. As a general rule, eliminating any unnecessary font files helps your site load faster. Take advantage of variable fonts when you can.
Combining Typefaces
If you want more distinctive headings, then you will need to find a typeface that can both stand out as an attention grabber and complement the body text. In most cases, it’s not a good idea to pair two serifs (e.g. Bembo and Goudy) or two sans-serifs (e.g. Helvetica and Open Sans). Having two typefaces that are fundamentally similar but still different can look awkward.
One of the recommended methods for combining typefaces is to keep it in a superfamily—typefaces that have different classes (e.g. sans, serif, slab) but share similar structure. For example, if you use Source Sans Pro for body text, you can complement it with Source Serif Pro for headings. Another suggestion is using typefaces from the same designer. For example, you can pair Exchanged with Retina since both faces were designed by Tobias Frere-Jones and they compliment each other.
Do keep in mind that there is no set rule for mixing typefaces. You can choose two complementary or completely distinctive typefaces. Go with your own instinct to find a balanced combination for your project.
Using Em for Headings
When writing CSS for headings, I prefer em units over px units. Em is a relative unit calculated from the font-size property. For example, if I set my body text at 100% (or 16px), then 1em equals 16px, 2em equals 32px, and 2.5em equals 40px. One of the advantages of using em for headings is that when I need to change the text size, I can do it in one place. For instance, if I change my body text from 100% (16px) to 83.1% (13px), all my headings will also scale accordingly. I understand many designers prefer px units because they are easier to figure out the sizes. To convert px to em without doing the math, PX to EM converter is a useful for tool to bookmark. If you use Sass, here is a function that does the conversion:
@function calc-em($target-px, $context) {
@return ($target-px / $context) * 1em;
}
h1 {font-size: calc-em(32px, 16px);} // Outputs 2em
$target is the unit you want to use (32px) and $context is your base unit (16px). Therefore, 32px divided by 16px equals 2em.
Modular Scale
On the web, you will need at least six levels of headings (h1 to h6), whether you will use them all or not. If you design a typographic system to be used in a content management system (CMS), it is safe to define them all because you never know what level of heading a CMS user’s going to pick in the WYSIWYG editor. You don’t want your heading to fall back to the browser’s default setting and mess up your hierarchy.
To select the appropriate size for headings, I often experiment with em units in the CSS and then reload the page to see the live results. One of the benefits of using pre-calculated modular scales is to help you with choosing proportions. Modular scales are based on a set of numbers that connect to each other in a harmonious relationship. In a Fibonacci series, for instance, each number is a result of two previous numbers added together. If your base size is 16px and you want to chose your headings according to the golden section, the scale of sizes includes 16, 26, 42, 68, 110, 178, and so on.
To help calculate the values for various scales, Tim Brown and Scott Kellum have developed a useful tool called Modular Scale. To use it, all you have to do is enter in the base text size (1em or 16px is the default) and another base size (for heading), and then select a scale ratio. For example, when you enter 16px for text size, 50px for the largest heading, and select the golden section, you will receive the following values: 1em, 1.194em, 1.618em, 1.931em, 2.618em, and 3.125em. You can then enter those numbers into your CSS:
h1 {font-size: 3.125em;}
h2 {font-size: 2.618em;}
h3 {font-size: 1.931em;}
h4 {font-size: 1.618;}
h5 {font-size: 1.194em;}
h6 {font-size: 1em;}
If you want your headings to be bigger on a large screen, you can find a different set of values using a different scale. For example, let’s keep the text size at 16px, but change 100px for the largest heading, and then select the octave scale. You will get the following values: 1em, 1.563em, 2em, 3.125em, 4em, and 6.25em. You can then plug them in to your CSS’s media query:
@media only screen and (min-width: 42em) {
h1 {font-size: 6.2em;}
h2 {font-size: 4em;}
h3 {font-size: 3.125em;}
h4 {font-size: 2em;}
h5 {font-size: 1.563em;}
h6 {font-size: 1em;}
}