Fonts for this class
GDES-220 spring 2019 (David Ramos, American University Design)
ramos@american.edu · office hours · interaction design resources
Acceptable fonts
You may use these fonts and only these fonts for web assignments.
System font stacks
Font stacks are lists of fonts. The first font is the designer’s first choice; if that font isn’t available, the browser will try the second font, and the third, until it exhausts the list.
Here are two basic font stacks, with fonts on these lists are likely to be installed on most Macs, Windows machines, iOS devices, and Android devices. The last entries, “serif” and “sans-serif”, are the ultimate fallbacks. (Background at Smashing Magazine).
Serif:
Georgia, Times, 'Times New Roman', serif
Sans:
'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif
Start with a font stack. You might put your preferred web font on the front and shorten the list of alternatives, but it’s safest to provide fallbacks in case that ideal font doesn’t load.
With a web font on front:
'Source Code Pro', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif
Google Web Fonts
Freely licensed.
Superfamilies
- Source Sans Pro, Source Serif Pro, Source Code Pro
- IBM Plex Serif, IBM Plex Sans, IBM Plex Sans Condensed, IBM Plex Mono
- Merriweather, Merriweather Sans
- Noto Noto Serif, Noto Sans
- Fira Sans, Fira Mono
Sans
- Monserrat
- Lato
- Open Sans
- Oswald
- Raleway
- Libre Franklin
- Barlow (and condensed/semi condensed)
- Spectral
Serif
- Crimson Text
- Libre Baskerville
- Arvo
- EB Garamond
- Volkorn
- Alegreya
- Cormorant Garamond
- Gentium (family)
Monospace
- Iconsolata
Adobe Fonts
Formerly TypeKit. Requires a subscription.
- Myriad
- URW DIN, DIN Condensed, and DIN 1451 Pro
- Adobe Garamond Pro
- Jenson
- Bodoni URW and LTC Bodoni
- Adobe Caslon
- Franklin Gothic
Background
There are 915 font families on Google Fonts, and 1,600 on Adobe Fonts (TypeKit), as of January 2019. Among the independent type foundries, Emigre alone sells 72 families, and Hoefler &Co. (formerly Hoefler & Frere-Jones), 46.
This is too many fonts for an early-career design student to choose from effectively. Font choice requires knowledge of what’s available, and it also leans on typographic knowledge that a beginning student simply can’t yet have.
While most of these typefaces are excellent, at least for the right purposes, many are of doubtful value. They might suffer from legibility problems when used for body copy, or poorly designed spacing, or they might just lack an italic. This problem is especially acute on Google Fonts, where the majority of fonts have some deficiency or another. (Hoefler & Co. typefaces are of uniformly high quality and broad application, but they’re expensive to license.)
So, student designers needs to gain typographic experience and good judgement. Yet choosing from too many fonts makes it harder to learn to chose fonts with intention and precision, and it’s difficult to learn good type handling skills if you’re designing with badly-drawn fonts—or with fonts with such strong voices that there’s no room for your own design decisions.
To short-cut this problem of font choice, we have a limited number of permissible fonts in this class. There are hundreds or thousands of excellent fonts not included here, but you may not use them for our projects.
One exception: you may use a font, not on this list, for a logo or logotype.