Making Web Typography Better

Making Web Typography Better

Typesetting for the web presents different challenges than typesetting for print. For instance, web designers understand that unlike designs going to print, our web designs need to be scalable and flexible for an unlimited number of sizes. Nonetheless, web typography should adhere to several of the same best practices as their more stable print counterparts. Improve user reading experiences on the web with these tips for better web typography.

Key Terms to Compare Elements of Web Typography

  • Legibility: identification of letterforms—whether people are able to see, distinguish, and recognize the characters and words in your text; often measured in reading speed (Nielsen, 2015)
  • Readability: looking for meaning—the user’s understanding of the content (me); measures the complexity of the words and sentence structure in a piece of content; often measured as reading level (Nielsen, 2015)
  • Comprehension: understanding—whether a user can understand the intended meaning of a text and can draw the correct conclusions (Nielsen, 2015)
  • Glanceability: reading and comprehending a text quickly; often measured in reading accuracy and reading speed (Laubheimer, 2017)

Elements of Better Web Typography:

  1. Font Selection
  2. Font-Size
  3. Headline Size
  4. Max-Width
  5. Text-Transform
  6. Contrast
  7. Font Stack

Choose Web Fonts Thoughtfully

Selecting fonts for the web means web designers must consider how the fonts will display. It’s even more important to choose fonts that don’t cause eye strain, especially as users read text through a bright, glowing electronic screen. Additionally, without fixed dimensions, fonts are often re-arranged or even re-sized depending on the user’s device. Therefore, choose fonts wisely.

Animation. Choosing web typography.

First, avoid thin-weight fonts to promote legibility (Laubheimer, 2017). Thin letterforms can get lost when viewed at small sizes, thus increasing user reading times. Thin weight fonts further reduce contrast as well. There’s no hard-and-fast rule mapping fonts to weights. However, “Book” weights (the traditional font weight used for printing books) tends to be 300 or 400. On the other hand, “Regular” is 400 or 500. I’ve personally found font-weights under Regular are hard for users to read unless the web typography is quite large.

Then, limit the use of condensed fonts to also retain legibility (Laubheimer, 2017). However, users also tend to have an easier time reading condensed fonts the larger they are. (Users nonetheless take more time to read condensed fonts at any size than regular fonts.)

Finally, when choosing a “bold” font to identify strong web text, select a font weight two weights heavier than the body copy for sufficient contrast. If using a font weight other than Regular for the body copy, you might need to specify a particular weight in the CSS.

For example, I use Montserrat Medium (500), but the web browser rendered strong text in just Montserrat Semi Bold (600). As a result, there was little emphasis between regular and emphasized copy. Once I specified a font-weight of 700 for my strong text in the CSS, I recovered sufficient text contrast.

For inspiration on selecting font pairs, check out these 10 Modern Web Font Pairings.

Use a 16 Pixel Font-Size or Larger

Larger font sizes reduce user reading times and increase glanceability (Laubheimer, 2017). As a result, headlines, which are meant to be scannable to entice users, are larger in size.

Several web typography calculators and converters default to a base text size of 12 points or 16 pixels.

At first glance, 16 pixels seems larger than necessary. After all, popular typesetting programs like Adobe InDesign use points and pixels interchangeably at a 1:1 conversion rate. That means most websites use a body copy 16 points big.

Illustration comparing font sizes in print vs. on the web.

However, Smashing Magazine author D Bnonn Tennant points out that 16 points/16 pixels on a faraway computer screen looks the same as 12 points in a hand-held book.

Nonetheless, this might lead one to think that mobile devices should decrease the font size since users hold phones closer to their faces to read like they would a book. Still, it’s also important to remember that larger font sizes are preferable even then. Smashing Magazine author Suzanne Scacca agrees the 16 pixel font is better for mobile, even 7 years after after D Bnonn Tennant’s article. If a 16 pixel font size causes frequent line breaks on mobile devices, consider reducing eye fatigue by reducing mobile margins and decreasing line-height to keep that 16 pixels.

Generally a 16 pixels body copy font size is simply easier to read for most of the population. Therefore, better web typography leans to a 16 pixel base size or larger.

Incorporate a Golden Ratio through the Headline Sizes

Another challenge in web typography is determining the headline sizes. Web designers select font sizes for the h1–h6 tags in the CSS. (In practice though, headlines beyond h3 are rare.)

Example of how the Major Third scaling looks in web typography.

Like most things web, no hard rules declare how big each headline should be. Instead, legibility vs. font size varies with the fonts.

However, I like incorporating a Golden Ratio into my headline sizes for balanced web typography. Jeremy Church’s Type Scale visual calculator is perfect for sampling fonts in different golden ratios.

Limit Text to the Ideal Max-Width

Better web typography is also considerate of how long texts are. Limit text content to the ideal max-width. Consider the optimal number of characters per line and/or the best line length.

Furthermore, remember that bigger font sizes outperform smaller font sizes for glanceability/readability/quicker user reading times (Laubheimer, 2017).

The ideal line length is 50­–75 characters per line.

Limit the width of text containers to reduce eye fatigue.

Where within that range a particular text falls depends on many variables. For example, a condensed font fits increasing characters per line. Yet since condensed fonts increase reading times, they should also display in larger font-sizes—therefore decreasing characters per line.

Generally, web designers make judgement calls for the most balanced fit.

Watch Text-Transform Trends

All-caps tend to outperform all lowercase letters. So, perhaps avoid the all lowercase trend.

Because lowercase letters are more difficult to recognize at a glance, readers take longer to skim text with all lowercase (Laubheimer, 2017).

Some web designers reduce this effect by limiting all lowercase letters to shorter texts, such as headlines. The same 2017 NNG study further revealed that increasing font-size on all lowercase texts also improves readability. However, users rely on headlines to identify interesting content while skimming the text.

As a result, even the shorter headlines should be as eye-catching and readable as possible for better web typography.

Keep High Contrast Font Colors

I briefly discussed how web designers must design for standards in ways print designers don’t in “Designing for Digital vs. Print.” This is one of those ways.

Web accessibility recommends at least a 7:1 contrast ratio between the text color and the background color for best legibility.

Check the contrast between foreground and background font colors.

A growing web design trend encourages lighter body copy, often a middle gray color. However, this middle gray font color quickly becomes illegible at small font sizes. For example, the “lightest” gray that passes all three tiers of the WCAG guidelines is #595959 on a white #fff background for a perfect 7:1 ratio.

As a result, be sure to test font color combinations with a contrast checker calculator like WebAIM’s.

Create Accessible Font Stacks

Email design sadly limits web technologies. Yet, better web typography remains accessible even for emails. Therefore, it’s important to assemble a good font-stack with at least one web-safe font.

A font-stack is a CSS declaration that identifies what font should display and alternatives for when users don’t have that font available. For example, a font-stack identifies similar looking fonts that, shall we say, “degrade gracefully” into an old-school web safe font that’s widely available. Look for similar character heights, widths, and weights.

First, browse web-safe font options at CSS Fonts from Dan’s Tools.

Then, compare web-safe fonts with popular font stacks with Chris Coyier’s handy code snippets.

Finally, it’s worth noting that while email development technologies are outdated in many ways, web font CDNs are gaining support from ESPs. Web fonts are appearing in emails!

Learn how to add web fonts to HTML emails and see examples “in the wild,” check out my article, Now Showing: Web Fonts in Emails.

Illustration. Web Fonts in Emails e-newsletter pops up of an envelope. The email compares traditional web safe fonts on the left to custom web fonts on the right.

For Further Reading:

Laubheimer, P. (2017, November 26). Typography for Glanceable Reading: Bigger Is Better [Blog article]. Nielsen Norman Group. Retrieved from https://www.nngroup.com/articles/glanceable-fonts/

Neilsen, J. (2015, November 15). Legibility, Readability, and Comprehension: Making Users Read Your Words [Blog article]. Nielsen Norman Group. Retrieved from https://www.nngroup.com/articles/legibility-readability-comprehension/

Lee, L. (2019, April 1). Now Showing: Web Fonts in Emails [Blog article]. Lara Lee Design. Retrieved from https://www.laralee.design/web-fonts-in-emails/

Bnonn Tennant, D. (2011, October 7). 16 Pixels Font Size: For Body Copy, Anything Less Is A Costly Mistake [Blog article]. Smashing Magazine. Retrieved from https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/