When Marty McFly stepped into the time machine, he flew into the future—2015! And like all evolved trends in the future, typography in web design has changed over the years. Font families have become more affordable, easier to implement, and there are a multitude of options for people working with smaller budgets. This means designers have more typographic flexibility and can create clean, cohesive, and individualized websites. But with so many options available, how do we navigate this typographical maze? When starting any new web design project, I always keep 4 important themes in mind: Contrast, Spacing, Pairing, and Performance.
The human eye is very receptive to contrast within a body of text. But like Goldilocks, we want this contrast to be just right. Too much is harsh and unpleasant. Too little means the type will blend into the background.
Unlike printed material, most web devices are light-emitting. Since our eyes react to these screens very differently than traditional print media, we have to be careful when choosing the colour of our type. At first it may seem that rich black ( rgb(0, 0, 0) ) text paired with a white background is a safe and classic choice, but web designers usually avoid this combination, because it can be incredibly harsh. Designers will often choose a lighter shade of black, such as ( rgb(56, 56, 56) ).
But every rule has an exception, and rich black text on a white background can be a good idea when designing for low light-emitting devices. So keep in mind that many smartphone users turn their backlight down to save power, and adjust your design accordingly.
Structure is also vitally important for creating contrast. Without it, the user’s eye doesn’t engage and becomes lost. We want to help direct the reader through the site’s content by using effective contrast within and between the headers and body type.
The second major typography theme to keep in mind is Spacing. In web design, there are two main types of spacing—line-height and letter-spacing.
Line-height (normally referred to as leading in print) is the term for the distance between the baseline of the succeeding type. For example, the little tail on the lowercase ‘y’ or the arm on a ‘d’ fall outside of the baseline and need to be taken into consideration when you are planning your line-height. It’s important to have sufficient line-height when dealing with larger bodies of text, or the text starts to blur together and becomes hard to read. A good rule of thumb is to use a vertical rhythm of around 1.5. For a standard body font of 16px, a line-height between 1.3 to 1.8 would usually be sufficient—allowing the user’s eye to flow through a body of text smoothly. However, keep in mind that the number of pixels can change depending on which font style and family you use.
Letter-spacing (normally referred to as tracking in print) is the overall adjustment of letter spacing between the characters within a font type. If letters are set too close together, words become indecipherable. If they are too far apart, they become awkward to read. Web font designers spend a lot of time ensuring the letter-spacing in a particular font family is proportional and desirable for the specific font, so it is best to leave it alone. Or at least use changes sparingly.
Headers and button text are a different story where spacing is concerned (for both line-height and letter-spacing). Adjusting letter-spacing in headers and in buttons can be a powerful design technique, and both smaller or larger pixel spacing can have a dramatic, eye-catching impact. It’s best to play around, because letter-spacing can look very different depending on the font family, weight, and style. For example, capitalized text on a button can look better with high pixel letter-spacing. In contrast, lighter fonts (100-300) can look strange with loose letter-spacing. Similar principles apply for line-height. Without sufficient line-height, an H2 can be lost within a body of text. But a header with a large font size should have a line-height that is much smaller than what is used for the body text. For example, a two-line header with a font size of 48px may only need a line-height of 1.2 or less, depending on the font chosen.
The selection of free web fonts (like google fonts: www.google.com/fonts) grows bigger every day, and we are seeing clean and smooth-flowing typography on websites. Although the world of web fonts is becoming more accessible, it’s still a jungle out there. In order to create cohesive and cleanly styled typography on a website, a designer needs to successfully pair font faces (serif and sans-serif) and their properties (weight, width, and height).
Selecting fonts that work well within a website design can be challenging—selecting 2 to 3 fonts that also work well together can be a major headache. With all of these options, where does a designer even start? To have success in pairing fonts you have to keep the three C’s in mind—Contrast, Concord, and Conflict.
Your selected fonts need enough contrast to make them individualized. Headers, buttons, and body text should be easily distinguishable from each other, so it is a good idea to use different fonts or styles for each. But they need to be in concord rather than conflict. Clashing fonts can quickly turn a good website design into something cringe-worthy. One way to achieve all three and to make your fonts work in concert (ok, so I’ve added a few extra C’s) is to pick two font faces from the same font family. An example of this would be the Museo font family. Museo, Museo Slab, Museo Sans, Museo Sans Condensed, and Museo Sans Rounded, available through Adobe’s Typekit (www.typekit.com), are all font faces from the same font family and can work quite well together (shown below). These fonts all have various weights and styles. Museo has a serif face, Museo Slab is slab serif, and?Museo Sans is sans-serif. Just choosing from this font family gives you over 40 weight and styling options!
Although I’ve put this point last, you should think about performance from the very start. The more files you add to your site, the slower the load time. It’s a good idea to keep your font files under 100k, if possible. Google Fonts goes even further and recommends limiting your font file size to 75k, total for best performance results. It’s hard, but not impossible. And keeping this in mind will stop your developers from tearing out their hair in frustration.
The art of typography has existed for thousands of years, and there are a myriad of time-honoured rules and techniques for adding emphasis. Although web design is constantly evolving, focusing on contrast, spacing, properly pairing font families, and performance will help you design beautiful, user-friendly websites—for 2015 and beyond.