Notes from BWA Meeting, May 2004
Presenter:
Alan Green, Vermillion Graphics
Font designer (Atma Serif, Atma Sans, MVB Sirienne)
Typography
Clarifying some terms
- Font: the software you install on your computer.
- Typeface: the design you look at on the page or screen that has been so
painstakingly created.
- Serif typefaces: typefaces with the little nubs on the ends of letterforms,
E.g., Times, Georgia.
- Sans serif: a font that has no nubbins (serifs). E.g., Arial.
- Weight: a variation on a typeface, such as the degree of heaviness (light,
demi, medium, bold), italicizing, small caps, roman, etc.
- Family: a group of typefaces of varying weights.
Anatomy
Anatomy determines the legibility of the font depending on its intended design
- Serifs: the bits & wisps on the corners of letterforms, such as on
Times.
- Stems: the main, usually vertical stroke in a letterform.
- x-height: the height of the lower-case letters without extenders (a, c,
e, m, n, o, r, s, u, v, w, x, z) defined by the base line and the mean line.
The x-height predominantly characterizes the font size.
- Cap height: the height of a capital letter, such as A, B, C, etc.
- Ascender: the part of a lower case letter that ascends above the x-height
(on the b, d, f, h, k, l, t).
- Descender: the part of a lower-case letter that hands below the base line,
or base of the x-height (on the g, j, p, q, y).
- Extenders: collectively the ascenders & descenders.
- Counters: closed-in spaces inside the a, b, d, e, g, etc. Terminals: the
end of a letter's stroke such as on the top of the a, the ends of the c, bottom
of the e, etc. Ear: the nubbin on the lower case g.
Terms
- Kerning: modifying space between pairs of letters to help them harmonize,
e.g., Av vs. A v.
- Leading: the space inserted between lines of text, measured in points,
and often converted into 'double spacing,' etc.
- Em-unit: how the computer establishes the size of your font (it's a little
algebra). An em is a square of the point size of the type you're using. An
em in 6-point type is 6 pt by 6 pt. This is a big issue for accessibility,
such as for a user who has set their font size to 20 pt.
Type classification
Moveable type changed the way letters were constructed & designed. There
was a huge evolution of typefaces in the 15th cty. Most changes were greeted
with resistance.
- Blackletter (14th cty): thick & dense, usually handwritten calligraphy.
The kind of type in old illuminated texts, nowadays often called Gothic.
- Venetian: (15th cty): calligraphic, chiseled-feeling serif font much lighter
than blackletter. Identified by the slanted crossbar of the e.
- Garalde (16th cty): More refined, greater contrast of thickness between
elements of letterforms. E.g., Garamond & Bembo.
- Transitional (18th cty): E.g., Clifford, Caslon, Times & Baskerville.
- Didone (late 18th cty): Finer ascenders. E.g., Didot & Bodoni.
- Slab serif (19th & 20th cty): Serifs are large & squared off. E.g.,
Clarendon.
- Sans serif (20th cty): No serifs. Some are very geometric, like Helvetica.
Others are humanist, like Myriad, where there are varying line weights and
less rigid geometries. Arial is a knock-off of Helvetica, designed by Monotype,
and it achieved its desired popularity despite its lack of refinement.
- Other typefaces: The weird stuff often used for display type, e.g. Graffiti,
Zapf Chancery.
Type usage
Misused typography
Fonts communicate character. Don't use script for a Stop Sign. Don't use
handwriting for severe warnings. Don't use heavy slab for a cuddly phrase.
Assumptions we make about type
Many fonts are stereotyped now, like Fracture, which is seen as only suitable
for Goth and heavy-metal. Some blackletter fonts are only used for diplomas.
Most scripts are only used for wedding invites.
Historical & cultural considerations
If you're doing a piece about Holland, you might want to use a typeface by
a Dutch typeface designer. Holland has many of the world's best designers.
You might want to use a typeface that was designed from the era of the subject
of your writing.
Technical considerations
Contrast & thickness of serifs: thin serifs & stems could disappear
at small sizes.
- Extenders: X-height and extenders will affect the typeface you choose.
Long extenders require larger line spacing. The x-height is really what we
read; we can read text when descenders are cut off. A typeface with a small
x-height will need to be set larger to be readable.
- Point size: Some typefaces are designed for different sizes, e.g., 18-pt
type that has longer extenders for display use and 12-pt type with smaller
extenders to be used for body text.
Online fonts
You can specify the font, the 2nd & 3rd choice, or serif vs. sans serif.
However, browsers rely on the reader's local fonts for how it displays type.
Thus, if the reader doesn't have the fonts you specify, you won't have control
over how your text is displayed.
Several fonts are ideal for online use. The below truetype fonts have delta
hints (or delta instructions) that tell the computer exactly where to put the
pixels at every size and resolution. So the font reshapes itself for every size
to maintain clarity. Note these are all set at the same size as well.
- Verdana: The perfect web sans-serif font, designed exactly for this use
by Matthew Carter, perhaps the best designer ever.
- Georgia: Also designed for the screen by Matthew Carter.
- Trebuchet: Good.
- Helvetica: Serviceable.
- Times New Roman: quite serviceable too.
The defaults
Fear the defaults. Respect the defaults
Application defaults:
- Size: 12 pt type is generally too big. 11 pt is good. 10.5 is good. Age
and ability are issues to consider with point size, as is the font.
- Add leading: single spacing is usually solid leading (no leading). Text
seems a little too tight and generates a little buzz or noise between lines.
- Wordspace: Be aware of too much wordspace. Quark, for example, defaults
to wordspace being 110% of the font size. 100% wordspace is just fine.
- Lining figures: numbers or other figures that line up fully with the ascenders:
1995. They generally look too big, like all-caps. Try old-style figures (or
hanging figures), which are smaller than the cap height: 1995.
- Margins: Shift margins slightly to the right to optically center the page;
the ragged right margin generally makes the right margin look bigger. Set
the left margin slightly bigger to compensate. Also, make the bottom margin
slightly larger; it's pleasing to the eye.
- Paragraph indentation: not much is needed: for 12 pt text, 16 pt indentation
is plenty. Avoid using both paragraph indentation and paragraph spacing, as
that's redundant. Also, don't generally indent the first paragraph.
- Hyphenate: it helps the right margin look cleaner.
- Sentence spacing: it depends on the font. Err on the side of one space
between sentences. If a font has a tiny space, consider switching fonts.
The design of typeface
- Size: Use the typeface at the size for which it was intended. How tightly
spaced is it, how thin are the extenders, what does the font say it's designed
for?
- Condensing or expanding: A good typeface doesn't generally need adjusting,
and often won't tolerate it. Use a font that is designed that way, e.g., Arial
narrow, rather than condensing a type.
- Characteristics: keep the outlining, shadows, etc., to a minimum. It might
be fun for display, but not usually good for body text. Likewise with italics:
some fonts aren't meant to be italicized. Instead, use a font with an italic
version in the font family.
Other typesetting tips
- Bold serifs: Avoid bold serif types in body text. There's no such thing,
really. They're just ugly. Italics are more refined. Or use a bold sans serif.
Myriad & Minion are designed to work well together.
- Uses for small caps: acronyms, emphasis within body text.
- Old-style figures: try to use them, since lining figures look too big.
- Ligatures: in words like 'difficulty' the i f f i" sequence looks
bad. Ligatures link the letter forms and harmonize them.
- Proper quotes: use 'curly quotes', not straight 'inch marks.'
Technical font nitty-gritty
An overview of font formats
- TrueType: single file installed on your machine. Not great to send to printers.
They usually don't like them. Works both on PC and Mac.
- PostScript: usually 4 files. You can't send from Mac to PC and have it
work.
- Bitmap suitcase:never mind.
- OpenType: an advanced format, relatively new and still being adopted. Its
advanced features are usually only available in advanced page layout programs.
- Font management tools: it's a good idea to install one if you've got a
lot of fonts. It will display fonts for you, streamline your menu, activate
& deactivate fonts, and diagnose and repair damaged fonts. Extensis Suitcase
& FontAgent Pro are two common ones.
- How to care for fonts: keep font files together if a family of fonts comes
in multiple files. Never rename a font file. Try not to have too many fonts
installed at once. 400 is too many, though it depends on your machine. Compress
font files being delivered via email or download.
Signs of bad fonts
- Text that looks like code from the Matrix.
- If it prints out totally unlike it appears on screen.
- If many characters are replaced by boxes.
Finding help
web site www.typophile.com. The addict's site for typography.
Stop Stealing Sheep & Find Out How Type Works by E. M. Ginger.
Wonderful & concise.
The Design of Books by Adrian Wilson. An excellent resource specifically
for books.
The Elements of Typographic Style by Robert Bringhurst. Nose-in-the-air
expertise on type. He's arrogant but he's right.
