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

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. Seen in more traditional, Roman style fonts.

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 FamiliesMost 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 empatheticCons – 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, dynamicCons – 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.”