Week 3: Typography
Typography is the art and technique of choosing and arranging type. Typography involves the selection of a typeface (from a universe of over 300,000 possibilities) and the decisions about it’s use including its size, format, arrangement and spacing. A typeface refers to a group of characters, such as letters, numbers, and punctuation that share a common design or style. All typefaces have defining characteristics that give it a unique personality. In choosing a particular typeface a designer is determining which features of a typeface best express the intent of the brand, author, or project.
Fonts refer to the means by which typefaces are displayed or presented. Graphic designers choose typefaces for their projects but use fonts to create the finished art. Fonts can be licensed at any number of type foundries. The actual shape or design of a letter form is called a glyph. There may be more than one glyph for a single character, such as a superscript version of it.
Character is the symbol representing an individual letter, numeral or punctuation mark. The capital letters are called caps, or uppercase (u.c.). Small letters are called lowercase characters (l.c.) Numbers are called numerals or figures. The actual shape or design of a letter form is called a glyphs. There may be more than one glyph for a single character, such as a superscript version.
The different options available within a font make up a type family. Many fonts are, at a minimum, available in roman, bold and italic. Other families are much larger, such as the Helvetica type family, which is available in multiple formats including Condensed Bold, Condensed Black, UltraLight, UltraLight Italic, Light, Light Italic, Regular, etc. The univers font comes in a large family of over 30 options. Designers generally work within a type family when looking for variety and emphasis within a composition as opposed to using multiple type faces.
Classifications of type: There are several different classifications of type but I prefer the standard four:
- Serif (variations include old style, transitional, slab serif, modern)
- San serif – typically uniform in stroke width.
- Script – which mimic handwriting or calligraphy
- Decorative or ornamental – which are generally not appropriate for body text but used for impact
In the slides above we look at the language of typography and 8 classic typefaces.
In choosing an appropriate typeface there are many considerations including: readability, appropriateness and size.
Readability
Legibility, spacing, kerning, consistent texture and size are important factors for readability. Designing with Type provides an excellent resource for understanding and appreciating the nuances of measurement, size and spacing including the type layout options and pitfalls. The recent creation of Clearview Hwt by type designer Don Meekeris a good example of the big impact that subtle changes in letter form can have on readability. This podcast explains the recent update to the highway signage system.
Type size
Type size is measured in points. One point is equal to 1/72 of an inch. When a character is referred to as 12pt, the point measurement is based full height of the largest character in that type family. Therefore within a type family set at 12pts individual characters may be smaller than 12/72”. Two characters that are set at 12pts but from different type families and set side by side may appear as different sizes. The point size is set to the largest character.
Type weight
Tyepfaces come in a wide range of weights. To achieve variety and impact within a composition but work within a single type family but using a variety of weights.
Kerning refers to the space between letters and in advanced design tools can be individually adjusted. Graphic designers typically adjust the kerning on type they set based on their visual judgment. Bad kerning can impact readability force the eye to read the individual letters rather than the letters grouped into words. Adjusting the spaces between groups of letters is referred to as tracking.
Leading
The vertical height between lines of type is called leading – the name references the time pre-digital printing, when lead weights were used to hold characters on the printing press. Generally a leading of 125- 140% is considered optimal for readability for font sizes under 20pt. Here is a somewhat astonishing example from Philly.com of bad leading and how hard it can be on the eyes. A document that is set in 12pt type on 15 pt leading, or sometimes referred to as twelve over fifteen, means that it is a 12 point font, with 15 points between the baselines of the two lines of type. Thus there are 3 points of additional space between lines.
Inspired Examples
Here are some wonderful examples of creative uses of typography:
Bembo’s Zoo
Thank You for Not Smoking Movie Trailer
Girl Effect
Catch Me if you Can Movie Trailer
Project Thirty Three
Fifteen Years of Paula Scher’s Design work for the Public Theatre
Trajan is the Movie Font
Designing with Type Professional Gallery
Vernacular blog celebrating French signage
I Love Typography blog
Kipp School tape installation
Enter the Void opening credits
I encourage you to watch the movie Helvetica. The trailer is here.
Steve Job’s commencement speech at Stanford addresses his passion for typography and the inspiration he found from studying calligraphy after dropping out of Reed College. (start at 3:00)
For fun:
Cheese or Font. and read about scrabble’s typography makeover. Also test your kerning abilities against the masters.
Assignment
There are two parts to this week’s assignment.
Part 1. Define yourself by your choice in typography. Set your name in 6 different typefaces that you feel say something about you or the character of your name. Below are some good resources for sampling fonts. Choose 3 serif and 3 non-serif faces. Create a set of 7 slides with a slide for each of your selections and one master slide at the end showing all the options. Be sure to identify the typeface on the slide.
Arstype Font Tester
DaFont
FontFont
Font Squirrel
Google web fonts
Lost Type
Open Font Library
TypeTester
Typotheque
Part 2. Create 3 expressive words. Here are some examples in this nice video collection. (yours do not need to animate but can be a single image). A few examples from last year: single images and one student’s ambitious words created in processing. The noun project might be a good resource for inspiration.