Published on | Prototyping: From UX to Front End — Medium Suzanne Hillman

I’ve been trying to wrap my mind around the fonts section of the “Thinking With Type” book.

I started by hunting for family trees for common font families. Failing to find those — likely because there’s an astonishing number of fonts out there — I started doodling around trying to get something on paper for myself.

Without further ado, here’s my best approximation of the information in the section I’ve read, with some space available for further exploration. Mostly, I think I’m baffled by how one selects a font or font family, in part due to the sheer number of fonts out there, and in part because some require money. I’ll start out playing with with google fonts, because those seem to be specific for the web, and free. Open Sans seems to be a decent default, and Patternfly uses it.

Font Categories

“Thinking With Type” starts out by explaining the history behind fonts, and structures things by that history.

Humanist (or Roman) fonts include what were originally the gothic and italic typefaces — these came from hand-written, script and body-based styles. These relied upon calligraphy and the movements of the hand.

Enlightenment fonts were based on engraving techniques and lead type, and allowed for more flexibility in what was possible. This included both Transitional and Modern typefaces, which began the process of separating and modifying pieces of a letterform. Transitional started with Baskerville’s sharper serifs and more vertical axes. Modern went to an extreme with this, with Bodoni and Didot’s thin, straight serifs, vertical axes, and sharp contrast between thick and thin lines.

Abstract fonts went even further in the direction of exaggerating the pieces of a letterform, in part because of the additional options available with industrialization and wood-cut type.

Reform and Revolution were a reaction to the abstract period, in which font makers returned to their more humanist roots.

Computer-optimized fonts were created to handle the low resolution available with CRT screens and low resolution printers.

With the advent of purely digital fonts, creators of fonts started playing with imperfect type. Others created font workhorses using flexible palettes.

This is probably better named Font History!

Humanist Fonts

Humanist fonts were based on handwriting samples.

Gothic fonts were based on German writing, such as that of Gutenberg:

https://www.myfonts.com/fonts/alterlittera/gutenberg-a/

Whereas the Italic fonts were based on Italian cursive writing:

https://en.wikipedia.org/wiki/Italic_type

These were combined by Nicolas Jenson in 1465 into the first Roman typeface, from which many typefaces sprung:

https://en.wikipedia.org/wiki/Nicolas_JensonI don’t have much about the ones after Jenson.

Enlightenment Fonts

With the Enlightenment period came experimentation.

From the committee-designed romain du roi typeface, which was entirely created on a grid:

http://ilovetypography.com/2008/01/17/type-terms-transitional-type/

To the high contrast between the thick and thin elements from Baskerville, no longer strongly attached to calligraphy (the point at which you enter the Transitional period for fonts):

http://ilovetypography.com/2008/01/17/type-terms-transitional-type/https://en.wikipedia.org/wiki/Baskerville

The Modern fonts from Bodoni and Didot further increased the contrast between thick and thin elements beyond Baskerville’s font.

https://en.wikipedia.org/wiki/Bodoni and https://en.wikipedia.org/wiki/Didot_(typeface)

Abstraction Fonts

In the abstraction period, the so-called Egyptian or Fat Face (now known as slab serifs) fonts came about. These were the first attempts at making type serve another function than long lines of book text, that of advertizing — otherwise known as display fontfaces.

These took the extremes of the Enlightenment period and went to extremes with them, making fonts whose thin lines were barely there, and whose thick lines were enormous.

Egyptian, or Slab Serif, from http://ilovetypography.com/2008/06/20/a-brief-history-of-type-part-5/Fat Face, from http://ilovetypography.com/2008/06/20/a-brief-history-of-type-part-5/

Reform and Revolution Fonts

Font makers in the reform period reacted to the excesses of the abstraction period by returning to their historic roots.

Johnston (1906) used more traditional letterform styles of the Humanist period, although without serifs:

https://en.wikipedia.org/wiki/Johnston_(typeface)

The Revolution period, on the other hand, continued experimenting with what type could do.

The De Stijl movement in particular explored the idea of the alphabet (and other forms or art) as entirely comprised of perpendicular elements:

Doesburg (1717), https://zaidadi.wordpress.com/2011/03/09/de-stijl-in-general/Forgive the bright pink aspect of this. It’s my lighting!

Computer-Optimized Fonts

The low resolution of early monitors and printers meant that fonts needed to be composed entirely of straight lines to display well.

Wim Crouwel created the New Alphabet (1967) font type for CRT monitors:

http://luc.devroye.org/fonts-24196.html

Zuzana Licko and Rudy VanderLans created the type foundry Emigre, which includes Licko’s Lo-Res (1985) font:

https://www.myfonts.com/person/Zuzana_Licko/

Matthew Carter created the first web fonts in 1996 for Microsoft, Verdana (sans serif) and Georgia (serif):

From Wikipedia, https://en.wikipedia.org/wiki/Verdana and https://en.wikipedia.org/wiki/Georgia_(typeface)

Imperfect Type

With the freedom from the physicality of the medium (such as lead type or wood type) that came with computers, some font designers began experimenting with imperfect types.

Deck made Template Gothic (1990), which looks like it had been stencilled:

https://en.wikipedia.org/wiki/Template_Gothic

Makela made the Dead History (1990) font using vector manipulation of the existing fonts Centennial and VAG Rounded:

https://www.emigre.com/Fonts/Dead-History

And Rossum and Blokland made Beowulf (1990) by changing the programming of PostScript fonts to randomize the locations of points in letters:

https://www.fontfont.com/fonts/beowolf

Workhorse Fonts

Also during the 1990s, some folks were working on fonts that were uncomplicated and functional. Licko’s Eaves pair, with their small X-heights, are good for use in larger sizes:

https://www.emigre.com/Fonts/Mrs-Eaves (1990) and https://www.emigre.com/Fonts/Mr-Eaves-Sans-and-Modern (2009)

Smeijer’s Quadraat (1992) started as a small serif font, with various weights and alternatives (sans and sans condensed) added to the family over time:

https://www.fontfont.com/fonts/quadraat

Majoor’s Scala (1990) is another simple, yet complete, typeface family:

https://en.wikipedia.org/wiki/FF_Scala

Finally, at the turn of the century, Frere-Jones created the Gotham (2000) typeface. Among other places, it featured prominently in Barack Obama’s 2008 presidential election campaign.

https://en.wikipedia.org/wiki/Gotham_(typeface)

Terminology

In an effort to better remember various suggestions and terms used throughout the Font portion of Thinking With Fonts, I created a terminology sheet.

I’m most likely to forget that there’s multiple different items which can be understood to be quotes, and how to use them. Additionally, that larger X-heights are easier to read at small sizes.

Common Fonts?

I started making a list of common fonts, but quickly realized that this was a complex and difficult task. I’m including what I made for completeness, but it seems like a superfamily (like Open Sans) will be fine for most of my work.

What’s next for me in Typography and Visual Design?

The book discusses Text next, after an exercise in creating modular letterforms on a grid. I’m looking forward to it, but I do need a break from it for now.

I’ve started trying to mimic existing visual designs (from the collectui.com website), as many folks have suggested it’d be the best way to get a feel for what works and how to do it. I’ll likely talk more about that here, once I’m further along in that process.

Thinking With Type: Fonts was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Thinking With Type: Fonts

Cool stuff, every week

More Articles