Download - VOICE OF TYPE - Typography
TYPOGRAPHY II COUNTY COLLEGE OF MORRIS PROFESSOR GAYLE REMBOLD FURBERT
VOICE OF TYPE L E C T U R E 1
2 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
VOICE OF TYPE
As you look at typefaces, analyze their forms, learn their history and learn how to use them in layouts, you will expand your ability to make type “speak” in expressive ways.
3 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Objectives
• To observe how type expresses ideas and feelings
• To identify the anatomy of letterforms
• To describe how type families work
• To learn about faux type styles
• To understand letterform proportion
• To review typographic terms
4 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Can you hear type?
• Spoken language doesn’t express ideas and feelings with words alone.
• The tone of the voice, volume and the speed of delivery impacts the message.
• Written communication can’t use these means of expression.
• Typographic design gives voice to words.
5 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Example 1:
• You can see two different settings of the same word?
• Which conveys a stronger warning?
6 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Example 2:
Which typeface inspires confidence in the doctor’s professionalism?
7 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
• Which typeface works best for a Western Steak House?
• Which for a wedding invitation?
• Which might work well for a party invitation?
• Which reflects the Jazz Age of 1920’s
8 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Expression
Cadillac’s use of script font embodies their motto of elegance and sophistication.
Disney’s display font has proven to become one of the most recognizable and boldest logo’s in the world.
Google is the benchmark for stability and reliability, the serif font has a calming effect.
Hulu’s logo is a bold modern font with a progressive edge needed to capture the attention of users.
9 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Psychology behind type choices
10 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Anatomy of Letter Characters
11 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Terminology
There is a standard set of terms to describe the parts of a character. These terms and the parts of the letter they
represent, are often referred to as “letter anatomy” or “typeface anatomy.” With this understanding, designers can better
understand how type is created and how to use it effectively.
12 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Baseline
• The baseline is the invisible line on which characters sit
• Baselines may differ from typeface to typeface
• Rounded letters may extend slightly below the baseline
X-height
• Is determined by the height of a lowercase “x.” This height can vary greatly between typefaces.
13 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Meanline
• The meanline is determined by the x-height of a typeface
Cap Height
• The cap height is the distance from the baseline to the top of uppercase letters
14 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Ascender
• The part of a character that extends above the meanline is the ascender.
Descender
• The part of a character that extends below the baseline is the descender, such as the bottom stroke of the letter
15 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Serifs
• Fonts are often divided into serif and sans serif
• Serif fonts are distinguishable by the extra stroke at the ends of the character, known as a serif
16 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Stem • The stem is often the main “body” or “stroke” of a letter
• The vertical line of the letter “B” and primary diagonal line of letter “V” are stems
Bar • Bars are horizontal or diagonal lines of a letter, also known
as arms, and are open on at least one side
17 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
More terms…
Bowls: open or closed circular line, creates an interior space, such as in “c” and “b”.
Counter: the open or closed inside of a bowl.
Leg: the bottom stroke of a letter, such as the base of an “L” or diagonal stroke of a “K”.
Shoulder: the curve at the beginning of a leg of a character, such as in an “m”.
18 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
More terms…
Axis of Stress: the direction of an implied line that passes through the thin parts of the round shapes in letters.
Bracket: a curve from the serif to the main stroke.
Swash: decorative extensions at the beginning or end of a letter.
Ligature: two or more letters redesigned to join together into a compound character; this is usually done to avoid clumsy fitting between characters.
19 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Type Family: Variations on the theme
20 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Fonts
Font refers to the encoded information that describes the entire typeface and the digital files that contains this information.
OR
A complete set of type of one size and face, which includes letters, numbers, and punctuation, that shares a common
design or style.
} Each of these is a specific font.
21 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Type Families
Refers to a set of related typefaces that share a common name
• Different styles are available within a typeface, such as roman, bold and italic.
• Times New Roman and Helvetica are examples of type families.
22 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Styles
Italic • Italic type is at an angle, generally slanting to the right
from bottom to top.
• Italics usually refer to serif typefaces.
• Oblique usually refer to sans serif typefaces.
Bold • Bold, or boldface, type is a heavier weight than roman type.
• Bold is often referred to as black or medium, or other names depending on the weight.
23 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Styles continued
Light • Light type is thinner than the roman option.
• Depending on how light the type weight is, it will often be used at large sizes so it is legible, or to achieve a specific style.
• As with bold, there are light varieties such as ultralight.
24 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Styles continued
Extended • Extended type is wider than the standard type of a family.
• Useful for headlines/large type areas.
• It provides even greater flexibility within a family.
Condensed • Condensed type is a narrower face, which can fit into
small spaces.
• It provides more style options while staying within the same family.
25 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Combined styles
Most type families will not just provide bold, italic, condensed, light, and so on, but combinations of each. This gives the
designer even more options to work with.
Example:
Helvetica Neue: regular, italic, bold, bold italic, light, light italic, ultralight, ultralight italic, condensed bold and condensed black.
26 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Combined styles continued
Combined style options within a type family, and the combinations of each, allow designers to achieve a harmonious layout while using a variety of styles.
These type families are extremely useful because a designer can use just one or two within a project, but still have a wide variety of styles to choose from.
Combined styles help achieve a consistent design.
27 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Don’t Faux It!
28 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Faux
Faux (pronounced “foe”) a French word that means “false” or “fake”.
• Applications have the option of styling a regular font into a faux bold or italic.
• This is technically incorrect and may not print correctly.
• Faux styles destroy the integrity of the form and structure of beautiful typefaces.
29 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Letterform Proportion
30 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Four major variables impact letterforms
1. Stroke-to-height ratio: a change in the weight and appearance of the letterform occurs when the ratio of stroke width to letter height is produced.
2. Contrast-in-stroke weight: changes in the contrast between thick and thin strokes alter the optical qualities of the letterform.
31 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Four major variables impact letterforms
3. Expanded and Condensed styles: qualities of the typographic font change dramatically when the widths of the letters are expanded or condensed.
4. X-height and proportion: relationships between the x-height and capital, ascender, and descender lengths influence the appearance of letterforms significantly.
EXPANDED
CONDENSED
32 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Tracking, Kerning and Letterspacing
33 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Tracking, Kerning and Letterspacing
The distance between characters is controlled by tracking, kerning and letterspacing.
• Tracking adjusts the space between characters across a block of text.
• Kerning reduces space between individual characters.
34 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Tracking, Kerning and Letterspacing
Letterspacing is the addition of space between characters. These precise adjustments are used to tweak a specific word, such as in a logo design, or a large headline.
Leading is interline spacing and is measured in points, from one baseline to the next. A block of text may be referred to as being 12pt with 6pts of extra leading, also known as 12/18.
35 TYPOGRAPHY II – COUNTY COLLEGE OF MORRIS
Chapter Summary This chapter introduced the idea that type expresses
feelings. It included basic vocabulary to describe the
anatomy of letters and the use of typographic terms.
You became familiar with type families, letterform
proportion, and the problem with faux type styles.