- Shape – reading personality, pairing
- Layout – hierarchy, space, harmony
- Technology – fonts, rendering, tools
Really, the emphasis is on two areas: body text and display text (with a healthy dose of layout and design throughout the presentation.
Body Text
The text we read. Usually comes in sentences and paragraphs.
- Legibility – Are the glyphs readable and understandable?
- Readability – Can I read this comfortably and for a long time?
When type gets small it’s hard to make it legible and even harder to make it readable. A phonebook provides an example of type that is meant to be legible without needing to be readable.
A Great Body in 5 Steps
- Bigger x-height – the height from the base to the top of a lowercase “x”
- Less stroke contrast – the width of the vertical strokes versus horizontal strokes.
- Glyph support
- Nothing weird
- Trust the classics
Best advice for body type legibility and readability? Read it yourself.
Display Text
Type used at large sizes. Some typefaces are designed for use solely at display sizes.
- Serifs seem a little more fancy
- Serifs with contrasting stroke widths seem even more fancy
- Narrow or condensed typefaces feel deliberate and down to business
- Extended or wide fonts give the impression of having something important to convey
Displaying characters to convey meaning
The Basics
Use fewer fonts (no more than three). Look first for contrast, then harmony. Not everyone can be a star
- One family, many weights
- Pair a serif with a sans serif
- Pair a strong typeface for the display with neutral typeface for the body
Type is a beautiful group of letters, not a group of beautiful letters. —Matthew Carter
Three levels of hierarchy may make it easier for the reader to understand. Laying out type in a grid also helps bring order to help the reader.
Typography is 10 percent letter management and 90 percent space management. —Alex White, “The Elements of Design”
A brief history of rendering text
- Printing press
- Offset press
- Digital press
- Digital display
Progression of font types
- Bitmap
- Postscript (vector-based)
- TrueType
- OpenType
- WOFF – an exciting new font format for the web
Rendering depends on three layers
- Typeface design
- Font technology
- Rasterization