It’s All About Type

A Transition to Digital #

By the early 1980s, as the internet was being formed and the web had yet to exist, the advent of computers with screens and visual interfaces made the final typesetting transition: from physical to digital. Most significantly, the Apple Macintosh and Lisa were significant milestones in providing the first visual document editing experience on a computer. The term, What You See Is What You Get (WYSIWYG) begins with this era of computing.

To support this, in 1983, Susan Kare created a suite of digital-only typefaces.

With the transition to digital screens, the representation of fonts also evolved over time. Today, almost all digital fonts are presented as vectors—the basic mathematical instructions for recreating the letterforms.

However, while vector files are infinitely scalable, the medium on which they are shown (screens) are not. As with any analog to digital process, there is some loss of information as a computer samples the original shape of a glyph and then maps it to a pixel grid. This is how we get artifacts such as aliasing, which happens when a line or curve doesn’t land perfectly on the pixel grid. The operating system and display use shades of gray to trick our eyes into seeing a smooth curve.

Type Size, Weight, and Color #

A heading (or display text) should appear differently than body text (also called body copy), which should appear differently than lists, which should appear differently than links, and so on. A well-typeset document considers all of these elements, working together, to create a clear, cohesive layout.

As you typeset it is also important to treat things consistently—headings should always look the same, so that a reader will understand what they are looking at visually.

We can use differing type sizes to distinguish between headings and body text. Generally, we aim to create a visual type hierarchy where the most important parts of a document have the largest size (headings), scaling down through our main, body text to the least important (captions or footnotes) as the smallest.

But the literal size is not our only tool. Another way we can distinguish copy within a document is by making use of weights—varying the thickness of the stroke. Good typefaces usually come in a range of weights to facilitate our designs—at the very least a regular (or roman), bold, and italic weight. Nowadays, variable typefaces allow us to pick and choose the exact weight combinations that we need.

We can also use color as a visual element to distinguish our content. Above, we keep the type the same in both the heading and body text. But using only color, we are still able to set the heading apart.

Many of these principles of hierarchy are come from the Principles of Gestalt—creating associations out of form. These principles have become systematized in interactive work.

Leading #

Leading refers to the the space between lines, harkening back to the days of moveable type when metal separated rows. Body text should have looser leading since it will be smaller; heading text can be tighter without losing legibility, since it will be set at a larger size.

We can tolerate close lines for short texts; we struggle with them over longer passages. The space between heading and body text should also be considered.

Ragging #

Ragging is the in-and-out flow of text on the right edge in a left-aligned block of text. (Or the left, in a right-to-left script.) When setting type with a ragged edge (the norm in interactive, where justification is rare), pay attention to where each line ends.

A good rag is one where the lines move in and out in small increments. A not-so-good rag bounces the eye back and forth from line to line, creating distracting white spaces in the margin and hurting readability.

To avoid bad rags, we can make sure that the type size of a container is not too large and that the column is not too narrow. We want our text to land in nice rectangular and rounded, chunky blocks.

Widows and Orphans #

Widows are short last lines of a paragraph, usually one word on its own or the end of a hyphenated word. Widows generally leave too much white space at the end of a line, making it look like an extra blank line—disrupting your typographic rhythm and spacing. The wider the line and the tighter the paragraph spacing, the more distracting the widow.

Orphans are short top lines of a page or column—abandoned on their own—that are also distracting. They create ambiguous design intention and hinder clear reading.

We should avoid orphans and widows through proper ragging, making sure that type sizes aren’t too large for a container, and making use of the non-breaking space character, which makes sure there is not a line-break between two words.

We should also always wrap some words together (for example, September 6, or van Zanten), for ease of reading.

Punctuation #

It is also our job to make sure that we properly use punctuation—so it is in service of our content, not a distraction.

Various dashes are a very common mistake. Hyphens (-) are different than en-dashes (–) are different than em-dashes (—). We use hyphens to separate and break words, en-dashes to dictate a numerical range, and em-dashes to emphasize phrasing.

Another common mistake is misusing apostrophes and quotations. By default, most computers will generate (") as a proper curly quote when you type it (the feature is usually called “smart quotes”). However, you should be prudent to use opening and closing quotes—note the difference between these two quotes:

"These are sad, ambiguous, straight quotes."

“These are better, clearer, opening/closing quotes.”

A third mistake is to use characters rather than mathematical symbols. This common practice started when typewriters where the norm which only had a limited characters set. This excuse no longer applies! For example:

9 x 5   9 × 5

9 / 5   9 ÷ 5

9 - 5   9 − 5

When in doubt, The Elements of Typographic Style probably has the answers you need. It is among the best single references for typographic minutia.