large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/thinking-with-type-fonts-723841a0fdf5?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> 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 <a href="https://fonts.google.com/about">google fonts</a>, because those seem to be specific for the web, and free. Open Sans seems to be a decent default, and <a href="https://www.patternfly.org/styles/typography/">Patternfly uses it</a>.
<h3>Font Categories</h3>
“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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9jbHANLBodj7QMEXRPJmRw.jpeg">This is probably better named Font History!
<h4>Humanist Fonts</h4>
Humanist fonts were based on handwriting samples.
Gothic fonts were based on German writing, such as that of Gutenberg:
<img alt="" src="https://cdn-images-1.medium.com/max/710/1*w_Rvgvf15KsKu3PD5qlkAw.png"><a href="https://www.myfonts.com/fonts/alterlittera/gutenberg-a/">https://www.myfonts.com/fonts/alterlittera/gutenberg-a/</a>
Whereas the Italic fonts were based on Italian cursive writing:
<img alt="" src="https://cdn-images-1.medium.com/max/499/1*LA98o517s4F5nOpz3zqIXA.png"><a href="https://en.wikipedia.org/wiki/Italic_type">https://en.wikipedia.org/wiki/Italic_type</a>
These were combined by Nicolas Jenson in 1465 into the first Roman typeface, from which many typefaces sprung:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PAQC6BX_ftPmZ6Nze4UjDQ.png"><a href="https://en.wikipedia.org/wiki/Nicolas_Jenson">https://en.wikipedia.org/wiki/Nicolas_Jenson</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9tDeMdlFHzY-MIlz_NSncw.jpeg">I don’t have much about the ones after Jenson.
<h4>Enlightenment Fonts</h4>
With the Enlightenment period came experimentation.
From the committee-designed romain du roi typeface, which was entirely created on a grid:
<img alt="" src="https://cdn-images-1.medium.com/max/427/1*dOQyR7pvVfYqFjskycDB8Q.gif"><a href="http://ilovetypography.com/2008/01/17/type-terms-transitional-type/">http://ilovetypography.com/2008/01/17/type-terms-transitional-type/</a>
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):
<img alt="" src="https://cdn-images-1.medium.com/max/468/1*BiYnes1bWrDZNpFmYnOzBA.jpeg"><a href="http://ilovetypography.com/2008/01/17/type-terms-transitional-type/">http://ilovetypography.com/2008/01/17/type-terms-transitional-type/</a><img alt="" src="https://cdn-images-1.medium.com/max/198/1*XUEkrBufGA0nxO48jwPrqw.png"><a href="https://en.wikipedia.org/wiki/Baskerville">https://en.wikipedia.org/wiki/Baskerville</a>
The Modern fonts from Bodoni and Didot further increased the contrast between thick and thin elements beyond Baskerville’s font.
<img alt="" src="https://cdn-images-1.medium.com/max/386/1*4TpH55gIUAfHQRHezdSPNA.png"><img alt="" src="https://cdn-images-1.medium.com/max/387/1*SbwWgwHK3GOrRZ3R-J_NxQ.png"><a href="https://en.wikipedia.org/wiki/Bodoni">https://en.wikipedia.org/wiki/Bodoni</a> and <a href="https://en.wikipedia.org/wiki/Didot_(typeface)">https://en.wikipedia.org/wiki/Didot_(typeface)</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6leV5Sg5kD64aaRUYIAWcg.jpeg">
<h4>Abstraction Fonts</h4>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/500/1*je3nGKBWs-lXzPBCABh9Vg.jpeg">Egyptian, or Slab Serif, from <a href="http://ilovetypography.com/2008/06/20/a-brief-history-of-type-part-5/">http://ilovetypography.com/2008/06/20/a-brief-history-of-type-part-5/</a><img alt="" src="https://cdn-images-1.medium.com/max/500/1*3A56hhmpnt2PqMkDKdJ-Mg.jpeg">Fat Face, from <a href="http://ilovetypography.com/2008/06/20/a-brief-history-of-type-part-5/">http://ilovetypography.com/2008/06/20/a-brief-history-of-type-part-5/</a>
<h4>Reform and Revolution Fonts</h4>
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:
<img alt="" src="https://cdn-images-1.medium.com/max/512/1*bJj81RZe0BoLL0oIG8K7GQ.png"><a href="https://en.wikipedia.org/wiki/Johnston_(typeface)">https://en.wikipedia.org/wiki/Johnston_(typeface)</a>
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:
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*XvqfwgMk5VjydKpkLlvF5w.jpeg">Doesburg (1717), <a href="https://zaidadi.wordpress.com/2011/03/09/de-stijl-in-general/">https://zaidadi.wordpress.com/2011/03/09/de-stijl-in-general/</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6DJXNTtYtou1QU6ykYQVcw.jpeg">Forgive the bright pink aspect of this. It’s my lighting!
<h4>Computer-Optimized Fonts</h4>
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:
<img alt="" src="https://cdn-images-1.medium.com/max/489/1*296p049yb9WBaaTvUxHW3g.gif"><a href="http://luc.devroye.org/fonts-24196.html">http://luc.devroye.org/fonts-24196.html</a>
Zuzana Licko and Rudy VanderLans created the type foundry <a href="https://www.emigre.com/">Emigre</a>, which includes Licko’s Lo-Res (1985) font:
<img alt="" src="https://cdn-images-1.medium.com/max/682/1*Iwhx8I3rznbGKDwww4eRiA.png"><a href="https://www.myfonts.com/person/Zuzana_Licko/">https://www.myfonts.com/person/Zuzana_Licko/</a>
Matthew Carter created the first web fonts in 1996 for Microsoft, Verdana (sans serif) and Georgia (serif):
<img alt="" src="https://cdn-images-1.medium.com/max/196/1*ecogv9FuUbdgImcXoJgqNg.png"><img alt="" src="https://cdn-images-1.medium.com/max/198/1*JVpk42t9wWA81_Q_WGDhHQ.png">From Wikipedia, <a href="https://en.wikipedia.org/wiki/Verdana">https://en.wikipedia.org/wiki/Verdana</a> and <a href="https://en.wikipedia.org/wiki/Georgia_(typeface)">https://en.wikipedia.org/wiki/Georgia_(typeface)</a>
<h4>Imperfect Type</h4>
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:
<img alt="" src="https://cdn-images-1.medium.com/max/794/1*uFHM_o3AEip5iC5N7GDUuQ.png"><a href="https://en.wikipedia.org/wiki/Template_Gothic">https://en.wikipedia.org/wiki/Template_Gothic</a>
Makela made the Dead History (1990) font using vector manipulation of the existing fonts Centennial and VAG Rounded:
<img alt="" src="https://cdn-images-1.medium.com/max/781/1*DQ0D9GO3MYFCFRF9r-6UGg.png"><a href="https://www.emigre.com/Fonts/Dead-History">https://www.emigre.com/Fonts/Dead-History</a>
And Rossum and Blokland made Beowulf (1990) by changing the programming of PostScript fonts to randomize the locations of points in letters:
<img alt="" src="https://cdn-images-1.medium.com/max/343/1*GwAFKmSeCvPNUrR3RBztPg.png"><a href="https://www.fontfont.com/fonts/beowolf">https://www.fontfont.com/fonts/beowolf</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UI7buEVruJwhHNOxG7wJQQ.jpeg">
<h4>Workhorse Fonts</h4>
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:
<img alt="" src="https://cdn-images-1.medium.com/max/790/1*2rukEdlUZ6IpZaVbaK7kyg.png"><img alt="" src="https://cdn-images-1.medium.com/max/785/1*YyUJUaUUYSAISv1Kbw0OQA.png"><a href="https://www.emigre.com/Fonts/Mrs-Eaves">https://www.emigre.com/Fonts/Mrs-Eaves</a> (1990) and <a href="https://www.emigre.com/Fonts/Mr-Eaves-Sans-and-Modern">https://www.emigre.com/Fonts/Mr-Eaves-Sans-and-Modern</a> (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:
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*56A4ubRsKqttdDDnZd8KBA.png"><a href="https://www.fontfont.com/fonts/quadraat">https://www.fontfont.com/fonts/quadraat</a>
Majoor’s Scala (1990) is another simple, yet complete, typeface family:
<img alt="" src="https://cdn-images-1.medium.com/max/193/1*jYHTlo80aQYFtr6oErTrJA.png"><a href="https://en.wikipedia.org/wiki/FF_Scala">https://en.wikipedia.org/wiki/FF_Scala</a>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/196/1*rGLbT7MPjcX1PBEN8sjx4g.png"><a href="https://en.wikipedia.org/wiki/Gotham_(typeface)">https://en.wikipedia.org/wiki/Gotham_(typeface)</a>
<h3>Terminology</h3>
In an effort to better remember various suggestions and terms used throughout the Font portion of Thinking With Fonts, I created a terminology sheet.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UGl-Pl8PGP_5BuDS2KR7Bw.jpeg">
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.
<h3>Common Fonts?</h3>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*38U7z0Pc5xZN_oMqqedjbQ.jpeg">
<h3>What’s next for me in Typography and Visual Design?</h3>
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 <a href="http://collectui.com">collectui.com</a> 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.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=723841a0fdf5" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/thinking-with-type-fonts-723841a0fdf5">Thinking With Type: Fonts</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Thinking With Type: Fonts

Thinking With Type: Fonts

Top Stories