Learning About Web Typography

“You don’t have absolute control.” —Jennifer Niederst Robbins

Diagram showing typography terms
Arial typeface

Image source: Wikimedia Commons (public domain)

Georgia typeface

Image source: Wikimedia Commons (public domain)

“By far the most popular principle for creating typeface combinations is to pair a sans-serif header typeface with a serif body typeface. This is a classic combination, and it’s almost impossible to get wrong.” (Source: Smashing Magazine)

Comparison of Georgia and Times typefaces

Image by GearedBull at English Wikipedia (transferred from en.wikipedia to Commons). Public domain. Source: Wikimedia Commons

Readability

“Just because something is legible doesn’t mean it’s readable. Legibility means that text can be interpreted, but that’s like saying tree bark is edible. We’re aiming higher. Readability combines the emotional impact of a design (or lack thereof ) with the amount of effort it presumably takes to read. ... To paraphrase Stephen Coles, the term readability doesn’t ask simply, ‘Can you read it?’ but ‘Do you want to read it?’ ” (Source: A List Apart)

Optimal Line Length

“Having the right amount of characters on each line is key to the readability of your text. It shouldn’t merely be your design that dictates the width of your text; it should also be a matter of legibility.

“The optimal line length for your body text is considered to be 50 to 60 characters per line, including spaces (Typographie, Emil Ruder). Other sources suggest that up to 75 characters is acceptable. If a line of text is too long, the reader’s eyes will have a hard time focusing on the text. If a line is too short, the eye will have to travel back too often, breaking the reader’s rhythm.” (Source: Baymard Institute)

Helvetica Neue typeface weights

Image by Vectorised by Froztbyte. Public domain. Source: Wikimedia Commons

Typeface

In typography, a typeface (also known as font family) is a set of one or more fonts each composed of glyphs that share common design features. Each font of a typeface has a specific weight, style, condensation, width, slant, italicization, ornamentation, and designer or foundry (and formerly size, in metal fonts).

In professional typography, the term typeface is not interchangeable with the word font (originally “fount” in British English, and pronounced “font”), because the term font has historically been defined as a given alphabet and its associated characters in a single size. For example, 8-point Caslon Italic was one font, and 10-point Caslon Italic was another. Historically, fonts came in specific sizes determining the size of characters, and in quantities of sorts or number of each letter provided. The design of characters in a font took into account all these factors.

As the range of typeface designs increased and requirements of publishers broadened over the centuries, fonts of specific weight (blackness or lightness) and stylistic variants (most commonly regular or roman as distinct to italic, as well as condensed) have led to font families, collections of closely related typeface designs that can include hundreds of styles.

A font family is typically a group of related fonts which vary only in weight, orientation, width, etc., but not design. For example, Times is a font family, whereas Times Roman, Times Italic and Times Bold are individual fonts making up the Times family. Font families typically include several fonts, though some, such as Helvetica, may consist of dozens of fonts.

Source: Wikipedia