T Y P E A Typography Guide for Graphic Designers
TYPOGRAPHY GUIDE Typography II 338.03
By Julie Marzan Published through ISSU
“Being an effective typographer is more about good skills than good taste.” —Matthew Butterick
TYPE MATTERS.
12
Table of Contents
3
TEXT CHARACTERS TYPEFACES
1
T E
TYPE RULES:
Practical Typography Rules Excerpts by Matthew Butterick
A few rules on body text...
For print, point size should be 10-12 pt., for web 15–20 pixels Line length should be 45–90 characters Line Spacing (leading) equals 120–145% of the point size (20 pt. font would need anywhere from 24–29 pt. spacing)
Typography Journal
8
PRINT: 10 – 12 PT.
WEB: 15 – 20 PT. 9
FORMATTING:
Note: Always turn on hyphenation when justifying text!
Formatting Text Justified
Left-Aligned
Justified text is spaced so the left and right sides of the text block both have a straight edge. The usual alternative to justified text is left-aligned text, which has a straight left edge and an uneven right edge. Com pared to leftaligned text, justification gives text a cleaner, more formal look.
Justified text is spaced so the left and right sides of the text block both have a straight edge. The usual alternative to justified text is left-aligned text, which has a straight left edge and an uneven right edge. Compared to left-aligned text, justification gives text a cleaner, more formal look.
Typography Journal
10
JUSTIFIED T E X T
11
Note: Too much tracking on the word ‘text’.
LEFT– ALIGNED
Typography Journal
12
Body Text Format Centered
Left-Aligned
Whole paragraphs should never be centered. Centering makes paragraphs difficult to read be cause both edges of the para graph are uneven. Centered paragraphs are also difficult to align with other page elements.
Whole paragraphs should never be centered. Center ing makes paragraphs difficult to read because both edges of the paragraph are uneven. Centered paragraphs are also difficult to align with other page elements.
13
WIDOW:
A widow is a very short line— usually one word, or the end of a hyphenated word — at the end of a paragraph or column.
Typography Journal
14
FORMATTING: Avoiding Widows Avoid widows:
Add 10pt. Tracking
It is generally acknowledged that it was Gutenberg who invented movable type printing in 1436. It is generally forgotten that what is missing in that statement is the necessary qualifier “in Europe”.
It is generally acknowledged that it was Gutenberg who invented movable type printing in 1436. It is generally forgotten that what is missing in that statement is the necessary qualifier “in Europe”.
15
2
C H A R A C
CHARCTERS: Special Characters
A few Special characters...
&
•Using the hyphen, en dash and em dash correctly •Smart vs. straight quotes •Difference between parentheses, brackets and braces
Special Characters ( - ) Hyphen ( – ) En Dash ( — ) Em Dash
Hyphens are used for words that break on a line, multi-part words (such as good-looking) and for phrases En dashes are used for dates (1889–2013) and for connection or contrast of words (liberal– conservative split) Em dashes are used for breaks in a text that are stronger than commas, but not as bold as colons.
For Mac: Hyphen
-
En dash
Option + hyphen
Em dash
Option + shift + hyphen
“Smart!” BUTTERICK: Special Characters
"Dumb!"
For Mac: Smart opening double quote Smart opening single quote
L: option + [ R: option + shift + ] L: option + ] R: option + shift + ]
Always use smart quotes! It is only acceptable to use straight quotes in email.
“Smart quotes are the quotation marks used in good typography.”
(PARENTHESES) [BRACKETS] {BRACES}
Special Characters (Parentheses)
Parentheses separate citations or other asides from the body text
[Brackets]
Brackets show changes within quoted material
{Braces}
Braces are used in technical and mathematical writing
Fun fact: Braces are used for almost all software-programing language.
3
T Y F A
P C
Goofy Monospace Times New Roman
Fonts to Avoid GOOFY FONTS:
abcdefgh ijklmnopqrstuvwxyz
MONOSPACE FONTS:
abcdefghijklmnopqrstuvwxyz
TIMES NEW ROMAN:
abcdefghijklmnopqrstuvwxyz
TYPEFACES: How to Choose
Aa Aa Aa Aa Aa Aa Avenir in different weights and italics
Factors to Consider:
Typeface proportions and weight Content of text Screen vs. print
Note: For screen, body text should be 14 pt. or above, for print, anywhere from 9 pt. to 12pt.
MULTIPLE WEIGHTS
Aa Aa Aa Aa A
TYPEFACES: How to Choose
This font is narrow Frutiger LT Std 30pt.
More Factors to Consider:
Large type family with multiple weights and italics Full character set (including special glyphs) Narrower (to fit more text on page)
This font is less narrow Futura 30pt.
FREE FONTS! Google Fonts
Lost Type Co-Op League of Movable Type Font Squirrel Fontspring
DESIGNED BY JULIE MARZAN Department of Art & Design Typography II 338.03 Professor Charmaine Martinez Winter Term 2016 Typefaces set in: Avenir & Clarendon