A short lesson about type and how to organize it on your page…

ANATOMY OF A LETTER:

X-HEIGHT: the size of the main body of a letter BASELINE: the line on which the letters of a word sits

ASCENDER: part of the letter that goes dramatically above the x-height DESCENDER: part of the letter that goes dramatically below the baseline

SERIF: the decorative element on the top / bottom of a letter SERIF: the decorative element on the top / bottom of a letter.  Seen in more traditional, Roman style fonts.

SAN-SERIF: letters that do not have decorative elements SAN-SERIF: letters that do not have decorative elements. More modern, simplified fonts are usually sans-serif.

POINTS VS. PICAS points – standard measurement for fonts. 1 point = 1/72 inch picas - a measurement for use with larger lettering.  1 pica = 12 points

SPACING: leading – the space between lines of text

SPACING: kerning - individual spacing between two letters (unique to fonts and certain pairs of letters)

SPACING: tracking – spacing of all letters / words in a line

ALIGNMENT & TEXT: CENTRED: Lines of uneven length on a central axis. Centred text is formal and classical. At best, can look organic and elegant. At worst, can look depressing like a tombstone. Most of the time, centred text should be broken into phrases with a variety of long and short lines.

ALIGNMENT & TEXT: JUSTIFIED: Left and right edges are both even. Justified text makes a clean square shape on the page. At best, it makes efficient use of space – a standard for newspapers and books. At worst, can cause large gaps which can be avoided by using the appropriate text size for the line length.

ALIGNMENT & TEXT: FLUSH LEFT: Left edge is hard; right edge is soft. Flush left follows the organic flow of language. At best, avoids uneven spacing seen in justified text. At worst, can create an ugly wedge shape on the right side if not random enough.

ALIGNMENT & TEXT: FLUSH RIGHT: Right edge is hard; left edge is soft. Flush right can look fresh. At best, used for captions, side bards and margins – can show similarities between text. At worst, can also create a wedge on left and can look weaker with excessive punctuation.

ENLARGED CAPITALS: Enlarged capitals, also known as versals, show the entrance to a chapter in a book or an article in a magazine.  It is an invitation into a body of text.  Based on manuscripts.  This can sit on a baseline or cut into the text block by using a dropped cap.

TYPOGRAPHIC HIERARCHY: There are a variety of ways to emphasize and organize content such as spatial differences (indent, line spacing, placement) or graphic (size, style, colour).

HOW DO YOU PICK THE RIGHT TYPEFACE? There is no one way to pick the right typeface (font) for a project, but we are going to look at a great list of 5 guidelines adapted from the article “What Font Should I Use?”: Five Principles for Choosing and Using Typefaces” written for Smashing Magazine by Dan Mayer… For the original article, see… http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/#comments

Rule #1: Dress for the Occasion Choose a font that is appropriate for the situation (Is it formal, classic, expressive?) Most designers have a selection of fonts that are adaptable for various situations “A large type family like Helvetica Neue can be used to express a range of voices and emotions. Versatile and comfortable to work with, these faces are like a favorite pair of jeans for designers.”

Rule # 2: Know Font Families Most typefaces can be grouped into one of the following categories (often referred to as GHOTMS)… Geometric Sans Humanist Sans Old Style Transitional Modern Slab Serif We’ll look at each one briefly...

Geometric Sans Based on strict geometric forms Equal width throughout Minimalist Expressive qualities: Pros – clear, objective, modern, universal; Cons – cold, impersonal, boring Examples of Geometric Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

Humanist Sans Derived from handwriting Clean & modern BUT with more detailed, less consistency, varied thickness of stroke Expressive qualities: Pros – modern yet human, clear yet empathetic Cons – can seem wishy-washy and fake, the hand servants of corporate insincerity Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

Old Style oldest typefaces developed from calligraphy (a.k.a Venetian) little contrast between thick and thin curved letter forms tend to tilt to the left Expressive Qualities: Pros – classic, traditional, readable Cons – well, classic and traditional Examples of Old Style: Jenson, Bembo, Palatino, and — especially — Garamond, which was considered so perfect at the time of its creation that no one really tried much to improve on it for a century and a half.

Transitional & Modern Created in the mid-late 18th century (Enlightenment) More geometric, sharp, fancy than Old Style fonts Contrasting thick and thin strokes Expressive qualities: Pros – strong, stylish, dynamic Cons – neither here nor there (too conspicuous and baroque to be classic, too stodgy to be truly modern) Examples of transitional typefaces: Times New Roman, Baskerville Examples of Modern serifs: Bodoni, Didot

Slab Serif Strokes with little contrast between thick and thin Solid rectangular shoes stuck on the end Has become popular again in recent years (a.k.a Egyptian) Expressive qualities: Pros – can be distinct and give a strong impression, varied results & meanings (e.g. sophisticated, cowboy, authoritative, friendly, urban, etc.) Cons – can be contradictory & overly conspicuous in the wrong situations. Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

Rule #3: Decisive Contrast Keep it the same OR change it a lot (remember concordant vs. contrasting fonts) “…often, two typefaces work well together if they have one thing in common but are otherwise greatly different. This shared common aspect can be visual (similar x-height or stroke weight) or it can be chronological. Typefaces from the same period of time have a greater likelihood of working well together… and if they are by the same designer, all the better.”

Rule #4: A Little Can Go A Long Way Fancy, exaggerated typefaces are “display typefaces” Used to add personality / uniqueness These quickly wear out their welcome if used too widely - ‘do not exceed recommended dosage‘ Examples: Comic sans, Curlz, Papyrus

Rule #5: There Are No Rules There are only conventions, no ironclad rules about how to use type. “Some of the best type advice I ever received came early on from my first typography teacher: pick one typeface you like and use it over and over for months to the exclusion of all others. While this kind of exercise can feel constraining at times, it can also serve as a useful reminder that the quantity of available choices in the internet age is no substitute for quality.”