Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "A short lesson about type and how to organize it on your page…"— Presentation transcript:

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

2 ANATOMY OF A LETTER:

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

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

5 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.

6 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.

7 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

8 SPACING: leading – the space between lines of text

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

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

11 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.

12 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.

13 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.

14 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.

15 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.

16 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).

17

18 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…

19 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.”

20 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...

21 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.

22 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.

23 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.

24 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

25 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.

26 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.”

27 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

28 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.”


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

Similar presentations


Ads by Google