An Intro to Web Typography

By Tyler Keenan

a box of wood block letter stamps

Typography isn’t just the fonts you use–it’s how you compose and arrange type to convey meaning and organize information to guide your reader. In this way, it’s closely related to UX design, which is why many copy decisions are best made in collaboration with UX designers relatively early in the design process. Executed well, good web typography helps establish the tone and style of your website or app while also subtly leading users to important information.

We’ll walk through some of the practical basics of digital typography, from how to choose fonts to best practices for arranging type to create hierarchy and focus. For our purposes, we’ll say that our block of text should be legible on a mobile screen. To start, let’s take a block of unstyled text. We’ll use the beginning of Don Quixote:

Example of a text block using a default font and unstyled

As you can see, this text isn’t very pleasant or comfortable to read. We’ll start by choosing a more appropriate font.

Choosing Fonts

Choosing fonts for your project is more art than science. That said, there are a few pointers you should keep in mind. For the majority of cases, one to two well-chosen fonts will be more than sufficient–one for your body text and another for headlines. Your body font can be either serif or sans serif–the science says both can be perfectly readable in digital settings. More important is finding a font that’s suitable for digital settings. The focus here should be on legibility.

  1. Look for fonts with large x-heights. The x-height is literally the height of the letter x, but more generally it refers to the height of the main body of a font’s lowercase letters. On digital displays, larger lowercase letters are generally thought to be more legible.
  2. Figure out how large a character set you need. If your project is going to be translated or localized, you’ll want to make sure that the font you’re using has more than just the bare minimum English characters.
  3. Limit the number of styles. Every font actually consists of a family of related typefaces–there’s the regular (or roman) version, the bold version, the italic version, and so on. Every one of these styles is a different file that your website or app will need to load, so the fewer styles you use, the faster your site or app will load.
  4. Consider web fonts. As a response to both performance issues and cost, many designers have turned to Google Fonts, an online directory of open source web fonts. Enabling Google Fonts just takes a line of code dropped into your HTML header. For that, you get access to hundreds of high quality, free fonts. Google Fonts uses a process called cross-site caching, meaning that once a user has cached a Google Font, it can be called from any other website that uses that font, preventing the user from having to download the same font every time.

For our passage from Don Quixote, we decided to go Go to the full article.

Source:: Business 2 Community

Be Sociable, Share!