An Intro to Web Typography

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:

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 with a web-optimized version of Baskerville, a classic serif-style font that also has a large x-height so that it’ll be legible even on smaller screens. Next, we’ll look at how to set the type so that it’s easier to read.

Setting Digital Type

Once you’ve settled on the look of your type, there’s still the matter of setting it. This is where we decide how long lines of text should be, how much space there should be between lines and different elements, and so on. When choosing our fonts we focused on legibility of individual characters. Here, we’re going to focus on the readability of whole sentences and paragraphs.

The goal is to arrange your text so that the user’s eye follows naturally, without spending so much time on a single line that the eye becomes tired, or jumping down to new lines so often that it loses its place. As with other aspects of typography, composition is as much art as it is science. That said, here are some general guidelines.

1. When setting the body type on the web, the ideal point size is usually around 16 or 18 pixels, depending on the font.


2. The ideal line length is usually around 65 characters (including spaces), though anything between 45 and 85 or so is probably fine as well.


3. The space between lines should be 120-150% the point size. Note: Contrary to what you might think, smaller type should have more space between lines, not less. This is so that the eye can easily distinguish one line from the next.

Because we want our version of Don Quixote to look good on mobile screens, we’re going to keep it one column. We will, however, add some more space between the lines (in this case 140% of the point size).

Creating Hierarchy

Hierarchy is how type designers signal to users what pieces of information are logically connected and which are most important. It’s why chapter titles are usually bigger and more prominent than body text, and why page numbers are usually smaller. There are lots of different ways to establish hierarchy, depending on the complexity of your site. The New York Times homepage, for example, contains three distinct font families (two custom fonts and the venerable Georgia) and around 10 different styles. Your project may not need to be this elaborate, but you can see how these different typographic styles work together to signal to users what elements on the page are most important.

Creating hierarchy is closely related to UX design, and many of the same rules apply to both. There are two rules to keep in mind when building hierarchy: the Rule of Similarity and the Rule of Proximity. (These are taken from the Gestalt principles in psychology.)

The Rule of Proximity states that elements that are near each other are perceived to be related to one another. This is why, for example, the space between different paragraphs in the same article usually have less space between them than with other elements on the page, like sidebars, links to other stories, etc.

The Rule of Similarity states that elements that look similar are perceived to be part of the same group. For example, on that New York Times homepage, each byline is styled in the same way, such that you can tell something is a byline without even reading it first.

Taken together, these two rules help establish visual hierarchy on a page. Two final points about hierarchy: As with picking fonts, sometimes less is more. Just increasing the point size of the headline a couple of points, or adding italics for emphasis, is often enough to create a sense of difference. Second, a little forethought here can save a lot of headache later on. How many levels of hierarchy do you need? Does your project require separate styles of type for headlines, subheads, body text, and legal disclaimers? The answers to these questions might involve input from design, product, and marketing functions, so it’s usually best to figure this out early.

As you can see, now every distinct element of our text is now visually distinct. Following the Rule of Proximity, we set the author name and title closer together to give it a little space from the chapter title and body text. Given our space constraints, we decided to distinguish the chapter title from the body text by setting the title in all caps rather than making the point size much bigger. In this case, we also set Don Quixote’s name in red, not because we needed to, but because we wanted to highlight the title of the book.

Web Typography and Editorial Design

Web typography is an essential component of editorial design. As more and more of our newspapers, magazines, and books migrate to digital platforms, the exact tools and techniques of editorial design have changed, though many of the same principles that guide print design also apply to digital settings.

You can think of editorial design as typographic design taken another level higher. Where creating hierarchy in type is about guiding a reader through a single piece of text, editorial design is about guiding readers through many different pieces of content, from articles to photographs to infographics. As with typographic design, content should drive editorial design decisions. Check out the homepage of any newspaper: the story the paper considers the most important of the day will nearly always appear at the top, with the biggest, boldest headline and probably an image as well. Related coverage will appear nearby (in keeping with the Rule of Proximity).

How do graphic designers guide readers through a newspaper or magazine? Whether print or digital, the foundation of good editorial design is the grid layout. There are two major considerations with grids–orientation and number of columns. The combination you choose will form the backbone of your publication and should permit your graphic designers the flexibility to accommodate different editorial objectives while still maintaining a sense of visual harmony and consistency from layout to layout.

Looking for a Type Designer?

In the print days, typographers were their own specialized profession. Today, that function is often split between UX and graphic designers. Whoever is making your typographic design decisions, they should have familiarity with the principles of design, strong practical knowledge of HTML and CSS, and maybe even skills with a prototyping program like Sketch or Photoshop.

Get more work done, faster with freelance help. Post a job today and get started!

Source: B2C