Typography

Like other key design elements, typography matters. It can set a tone and mood, and even influence the meaning a reader draws from the text.

Font vs Typeface

A typeface is a family of fonts.

For example, Helvetica is a Typeface and within this font family  are fonts of varying weights and styles e.g. 12 pt Helvetica Bold.

There are 5 Typeface Families

Geometric Sans

  • Represents 3 different groups Geometric, Realist and Grotesk
  • Geometric Sans-Serifs are those faces that are based on strict geometric forms.
  • Examples of Geometric/Realist/Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

Humanist Sans

  • These are Sans faces that are derived from handwriting
  • Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

Old Style (aka Venetian)

  • These are our oldest typefaces.
  • Examples of Old Style: Jenson, Bembo, Palatino, and — especially — Garamond

Transitional & Modern

  • Typefaces emerged as type designers experimented with making their letterforms more geometric, sharp and virtuosic
  • Examples of transitional typefaces: Times New Roman, Baskerville. Examples of Modern serifs: Bodoni, Didot.

Slab Serif (aka Egyptian)

  • They convey very specific — and yet often quite contradictory — associations.
  • Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

Popular Type Faces

Sans Styles

  • Myriad
  • Gotham
  • DIN
  • Akzidenz Grotesk
  • Interstate

Sans Serif

  • Mercury
  • Electra
  • Perpetua

Anatomy of a Typeface

Ascenders, Meanline, Baseline & Descenders

Kerning, Tracking and Leading

Tracking is overall letterspacing.

Kerning is selective letterspacing.

Leading is the space between rows.

Choosing the right fonts

  1. Consider your brand & Audience
  2. Make sure it’s readable
  3. Factor in information hierachy
  4. Contrast font family & weights

Best Practices

  • Make sure the body copy is readable.  Readability has a lot to do with color contrast, character spacing, tracking, and leading.
  • Bold, sans-serif, all-caps works well for header text
  • Medium serif works well for body text.
  • To create visual hierarchy play with size, weight, color and position.
  • You can use just one typeface but useful to have different fonts to create information hierarchy
  • Break long text up with bulleted lists if possible
  • Chunk copy into sections with easily scanable sub-headers
  • Avoid single words on a single line at the bottom of a par (Widow) or at the top (Oprhan).
  • Point size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On the web, the range is 15–25 pixels. Not every font appears equally large at a given point size, so be prepared to adjust as necessary.
  • Line spacing is the vertical distance between lines. It should be 120–145% of the point size. In word processors, use the “Exact” linespacing option to achieve this. The default singleline option is too tight; the 1½ line option is too loose. In CSS, use line-height. The easiest way to calcualte is to multiply the font by 1.5 (16pt / 24, 21pt / 32, 24pt / 36 or 32pt / 48)
  • Line length is the horizontal width of the text block. Line length should be an av­er­age of 45–90 characters per line (use your word-count function) or 2–3 lowercase alphabet, like so:abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Questions to evaluate Typefaces

  • How legible is it? Do the letterforms feel organic or more stylised or geometric?
  • How readable is it? Does it invite long-form reading, or is it more suited to headlines?
  • How flexible is it? Does it work in different sizes and weights? Does it function in both body copy and titles?
  • How unique is it? Is it memorable? Does it have interesting details? Does it have amazing numerals or an interesting looking lowercase g?
  • How classy is it? Does it feel elegant or more down-to-earth?
  • Has it been optimized for screen? Will it look good on Macs, PCs and mobile devices?

Creating a Design System for Typography

  • Header
  • Sub Heads
  • Intro Par
  • Body copy
  • by lines
  • Time Stamps
  • Grid definition (vertical and horizontal)

Tips

  • Most brands have existing Typefaces so best to refer to Brand toolkits or guidelines before selecting a new typeface for a client
  • Remember most typefaces cost money – each weight or style will add to the price tag
  • Some typefaces are designed specifically for Headlines (aka “display faces”.  Examples include, League Gothic, Mardrone, Didot, Grafolita, azo sans uber.
  • Use a reputable foundry to source your fonts. Adobe Subscribers can use Type kit to test various typeface’s weights and styles. Google Fonts (using free resources runs the risk of missing characters or punctuations
  • When selecting typefaces keep it exactly the same, or change it a lot!

Further Reading

Typography Resources

  • Fontface Ninja (a browser extension that lets you inspect, try, buy and bookmark any fonts on any website) https://fontface.ninja/
  • Kerntype (a font spacing game) by Mark MacKay for Method of Actions http://type.method.ac/
  • Google Fonts: hundreds of high-quality open-source web fonts. (You can download .ttf fonts by adding fonts to your collection and clicking the download arrow in the top right of the screen.)  http://www.google.com/fonts/
  • The League of Movable Type: a collection of high-quality open-source typefaces that are licensed for use on the web, and available for download as .otf font files. https://www.theleagueofmoveabletype.com
  • Typedia.com: A Shared Encyclopedia of Typefaces. Typedia is a resource to classify, categorize, and connect typefaces. Search for typefaces, designers, foundries, and more.