&

ūüďį

It’s all about type

Writing gives the impression of things. Conversely, things can give the impression of writing.

Paul Elliman

Typography is the form and structure into which words are manifested into our world. It has a long and storied history, and it’s our job to both understand this history and how to apply type effectively.

A¬†brief‚ÄČ history of¬†typography

Early example of Chinese movable type.
Early example of Chinese movable type.

While Johannes Gutenberg is widely associated with inventing the printing press and movable typography in 1450, earlier forms had been invented around 1040 in Asia, by Chinese polymath Bi Sheng.

Our story here however begins in¬†the early 1500s with¬†Albrecht D√ľrer, a¬†seminal figure of¬†the German Renaissance. D√ľrer made the first inroads towards a¬†methodology of¬†type design, the beginnings of¬†formal¬†typography.

Image from D√ľrer‚Äôs ‚ÄúDirections for the Construction of the Text.‚ÄĚ
Image from D√ľrer‚Äôs ‚ÄúDirections for the Construction of¬†the Text.‚ÄĚ

D√ľrer examined Roman letterforms and attempted to¬†create a¬†rational system for recreating glyphs, specifically drawing attention to¬†the form in¬†which words appear. At¬†the time, the way words appeared were often a¬†byproduct of¬†the medium that was used to¬†write them.

An early example of blackletter script‚ÄĒa style that reflected the thick nibbed pens that were in use at the time.
An early example of¬†blackletter script‚ÄĒa¬†style that reflected the thick nibbed pens that were in¬†use at the¬†time.

The first typefaces

Cuneiform tablet: administrative account concerning the distribution of barley and emmer.
Cuneiform tablet: administrative account concerning the distribution of barley and emmer.

The first ‚Äútypefaces‚ÄĚ weren‚Äôt typefaces at all. Early writing was used primarily as a¬†means for recording and storing information. Care was generally not given to¬†the presentation of¬†forms on¬†physical medium, but to¬†the¬†information as¬†such.

Brush and pen strokes defining typeforms.
Brush and pen strokes defining typeforms.

Often, words and forms were expressed into a particular physical medium with whatever tools were available. These tools shaped the ways words were shown and presented.

Type forms which came from chisel on marble (a), stubby pen or metal stylus (b, c), reed pen (d), reed pen inspired by stone (e), and pen or brush on parchment (f).
Type forms which came from chisel on marble (a), stubby pen or metal stylus (b, c), reed pen (d), reed pen inspired by stone (e), and pen or brush on parchment (f).

Metal type

Creating movable type from punch cut forms.
Creating movable type from punch cut forms.

The first typefaces created with movable type attempted to emulate handwritten scripts. A typeface designer would create a punch which would function as the source from which a metal form would be created.

A ‚Äúlockup‚ÄĚ of metal type, describing the frame holding forms together. We still use this phrase to refer to design layouts.
A ‚Äúlockup‚ÄĚ of¬†metal type, describing the frame holding forms together. We¬†still use this phrase to¬†refer to¬†design layouts.

Many of the terms that were created to describe physical attributes of metal type (leading, point size, shoulder) continue through to our digital world.

Anatomy of metal type.
Anatomy of metal type.

Type was stored in drawers where the lower case held the uncapitalized forms, and the upper case held the capital forms. Sound familiar?

Conventions and standards carry on through history.
Conventions and standards carry on through history.

Technological evolution

‚ÄúFarewell Etaoin Shrdlu,‚ÄĚ a¬†documentary made at the end of¬†the metal type era¬†at¬†The¬†New York Times, in¬†1978.

Over time, as technologies evolved, type and typesetting transitioned as well. We moved from hand setting movable type in composing sticks to Linotype typesetting. This allowed for machines to create an entire line-of-type as a metal slug, which could then be put into layout.

With the advent of the photocopier, we quickly moved from metal type to phototypesetting.

A master plate for Futura phototypesetting.
A master plate for Futura phototypesetting.

A¬†phototypesetting machine works by projecting text onto a¬†light-sensitive medium‚ÄĒfilm in¬†some¬†models, photosensitive paper in¬†others‚ÄĒwhich is¬†then used to¬†transfer the material for offset printing. [‚Ķ] But because film was exposed one full frame at a¬†time, the limiting factor with these devices was the size of¬†the CRT screen, which kept the maximum page size down to¬†about¬†8.5‚Ä≥‚ÄČ√ó‚ÄČ11‚Ä≥.

In fact, some of the first computer programs for digital typesetting, such as troff, were created to support and drive phototypesetting processes.

A transition to digital

Some typefaces that came with the original Macintosh.
Some typefaces that came with the original Macintosh.

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.

Physical type had to be converted to digital formats in order to be presented on a screen. We started with pixel and bitmap encodings of typefaces, before switching to vector-based representations.
Physical type had to be converted to digital formats in order to be presented on a screen. We started with pixel and bitmap encodings of typefaces, before switching to vector-based representations.

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.

Hinting typefaces to sit on a pixel grid.
Hinting typefaces to sit on a pixel grid.

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.


So what is a typeface?

Anatomy of a typeface, from Ellen Lupton‚Äôs ‚ÄúThinking with Type.‚ÄĚ
Anatomy of a¬†typeface, from Ellen Lupton‚Äôs ‚ÄúThinking with Type.‚ÄĚ

A typeface has distinct characteristics and properties that make it unique from other typefaces. Beyond the visual manifestation of each glyph, typefaces contain metrics that aren’t visible, such as kerning.

What is the difference between a typeface and a font?

Typeface is a¬†font family ‚ÄĒ a¬†collection of fonts based on the same design. The term font is¬†mostly used for a¬†single style such as EB Garamond Regular.

Typeface anatomy.
Typeface anatomy.

Broadly, we’ll refer to several main styles of typefaces:

While there are distinct subfamilies within each of these, our selection of a typeface from one of these particular styles already conveys significant meaning.

What are things to consider when picking a typeface?
  • Readability
  • Legibility
  • Meaning
  • Historical context
  • Past usage
  • Visual appearance (‚Äúvibe‚ÄĚ)
  • Licensing/rights
  1. Because it works.
  2. Because you like its history.
  3. Because you like its name.
  4. Because of who designed it.
  5. Because it was there.
  6. Because they made you.
  7. Because it reminds you of something.
  8. Because it’s beautiful.
  9. Because it’s ugly.
  10. Because it’s boring.
  11. Because it’s special.
  12. Because you believe in it.
  13. Because you can’t not.

Michael Bierut, on picking a typeface

Typesetting and layout

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.

An example of how type size informs hierarchy.
An example of how type size informs hierarchy.

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.

An example of how type weight informs hierarchy. Did your eyes skip over the first block?
An example of how type weight informs hierarchy. Did your eyes skip over the first block?

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.

An example of how type color informs hierarchy. We’re guessing you went to the blue, first.
An example of how type color informs hierarchy. We’re guessing you went to the blue, first.

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

An example of how leading can inform legibility.
An example of how leading can inform legibility.

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

An example of ragging text.
An example of ragging text.

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

An example of a widow (left) and orphan (right).
An example of a widow (left) and orphan (right).

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.

Type foundries

Where does one find typefaces? From foundries, again referencing the days when making type involved casting actual metal.

While most computers now come with some good ones, there are many other places to get fonts. Here are some that we like:

Google Fonts

While not a type foundry itself, we include (and will use) this resource because of its vast array of open-source typefaces.


Shout-out to instructor-emiritus Eric on this one.