×
Introducing Creative Market Pro: Download unlimited assets to elevate your work. LEARN MORE

6 Typography Questions Every Web Designer Needs to Ask

By on May 2, 2016 in How To
6 Typography Questions Every Web Designer Needs to Ask

Typography creates the parameters with which words and text are displayed, like the laws of physics to our everyday life.

But typography and design are two separate masteries, despite how often they overlap. Typography gets especially tricky on the web, where the fluid medium gives us a whole new set of parameters.

That’s why we’ve compiled this handy checklist: six typography questions to ask yourself before finalizing a project, and the best practices for making sure they’re answered correctly.

1. Is the Spacing Adequate?

In typography, spacing encompasses several different variables. There’s the vertical spacing between lines of text (line-height on the web), the width of a horizontal line and how many characters fit within it (measure), the spacing between letters (tracking), and special spacing between letters, such as the shortened space in “AV” (kerning).

As explained in the free e-book Web UI Design Best Practices by UXPin, there are some concrete rules to optimize your spacing:

Units

  • You should use rems and ems, which base their sizes on in CSS to specify how wide columns of text appear with media queries.
  • Avoid setting text in pixels, which renders designs static on mobile devices where user may need to zoom in to read properly.

Vertical space

  • The ideal line-height distance is 120–140% its size. If you’re using a base font size of 11pt, experiment with line-height of 1.2 – 1.4 em, or 13.2–15.4 pts.
  • The greater the column width, the more line-height it needs to help users find the start of the next line.
  • On the web, one space is generally enough between paragraphs. However, you can go as high as 180% before people start to wonder if they’re beginning a new section.

Horizontal space

  • The ideal measure, or column width, fits 52-78 characters including spaces into one horizontal line of text. To simplify, aim for 65 characters per line, give or take 13. This applies to headings as well as body copy.
  • Hyphenation in CSS is a wish more than a reliable technique, so avoid excessive gaps between words by left- or right-aligning body copy.
  • Typically, kerning is set depending on the font you choose. Only customize it if you notice a problem.

2. Is the Color Contrast Optimized for Legibility?

The contrast between text and background colors makes a huge impact on legibility. Even if it looks fine to you, many of your users will suffer from some degree of sight handicaps, such as color blindness or simply weak eyesight.

The Web Content Accessibility Guidelines 2.0 are very specific about color contrast for text, putting the ideal ratio at 4.5:1. These accessibility guidelines are reliable not only in designing for people with disabilities, but also as a solid overall foundation.

Background TextPin It

Photo credit: Color Safe

To optimize your color choices for legibility, take a quick visit to Color Safe. This free online app lets you input your choice of background color, type families, etc., then gives you a wide variety of text color options that all meet WCAG 2.0 standards. You can also use Check My Colours, which does so automatically.

3. Are the Sizes Effective?

Just like spacing, text sizes can be disastrous to legibility if left unchecked.

While your choices in typeface should reflect your product and the mood, there are a few considerations when deciding, especially the differences between headings and body text, and the size of the x-height (the height of normal lowercase letters, like x).

  • Plan out your typographical hierarchy beforehand: How many different headings and subheadings do you need? How much should the size vary to reflect importance?
  • In general, choose type families in which the x-height is halfway between the bottom resting baseline and the top CAPS line for body copy. You can choose families that exaggerate this more or less for standalone headers and titles.
  • Headings are commonly twice the size of body text (or more precisely, 1.96x). However, this doesn’t take into account subheadings, or sites that don’t have a lot of body text.
  • The serif type family of Georgia was designed specifically for screen use, and is widely available on users’ computers — but it’s not the only option.

4. Does the Typography Communicate Visually?

Typography’s main purpose is legibility, but it also serves as a visual graphic. The look of your font and style choices will affect the perceived mood of your product.

You want to ask yourself if your typographical choices visually represent your site’s personality. Minimalist sites benefit from from simplistic and sans serif choices. Professional and traditional sites prefer classic serif typefaces like Times New Roman. Only playful sites or sites for children can pull off goofy, bubbly fonts; only dry and humorless sites can pull off small caps.

Times, Georgia, Arial and sometimes Helvetica used to be the only type families available to web designers.

Luckily today third-party services like Adobe Typekit, Google Fonts and Monotype’s Fonts.com let users download font files on demand. In addition, sites like FontSquirrel let you download font files — license permitting — which you can upload to your web host as you would any other CSS, image or JavaScript file.

Font Legibility ExamplePin It

Photo credit: Gitman Bros.

Technicalities aside, as long as legibility is achieved, the only wrong fonts are the ones that don’t reflect the atmosphere you want.

5. Are the Formats Consistent?

Once you decide concretely on your sizes, font choices, and styles, you want to make sure they’re used consistently. Primary headings should always be the same size and body text should always be the same size. Text links should always follow the same format, and captions should always follow the same format.

Before moving to the next iteration, have a fresh set of eyes do a quick QA or proofread of the site to catch any inconsistencies. At this point, you may be too close to the project to do it yourself.

6. Is the Text Effective on All Devices?

Just as you want to double-check for inconsistencies in format, you’ll also want to examine how the text appears on different device viewports. The change in screens almost always causes a change in the text layout, so it’s better to catch and fix these deviations early than to be surprised later.

As explained in Responsive Design Best Practices, the amount of work depends on your preferred method of multi-device consistency; this is a bigger concern for responsive sites than adaptive and m-dot ones. To save time, check at least a smartphone viewport, tablet viewport, and desktop viewport.

When designing for both mobile and desktop screens, remember that text size hinges upon how far the user’s eyes are from what they’re reading.

A user may have a laptop hooked up to a 64-inch screen television to view your page, or they may have a 124mm iPhone 5s. In one case, the screen is across the room and in the other it’s maybe a few inches from the user’s face. But your typography must still be readable in both situations.

The requirement can put you in a tough position when determining text size at different breakpoints. How can you be sure how far a reader is holding their device? Short of technology that detects the user’s distance from the screen, you should follow the best practices suggested by responsive design research.

Keep in mind the following when accounting for reading distance in your designs:

  • The further the distance between user and screen, the larger the text should be.
  • Compare your website with print material at similar distances to determine what’s readable. For example, compare a hand-held business card to a printed wall sign.
  • In terms of reading distance, tablets tend to fall between smartphones and desktops — users commonly hold them slightly further from their faces than would be the case with smartphones.

Ideally, your text at every breakpoint should look like it’s the same size when held at reading distances on different devices.

Further Reading

If you found these questions helpful, we have more advice on typography, and digital copywriting in general. Check out the free UX Design Builder’s Ebook bundle by UXPin and Creative Market which includes 350+ pages of advice in one download.


Products Seen In This Post:

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

1 Comment

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →