TYPOGRAPHYAN INTRODUCTION TO SENSIBLE
A UCLA ACM PRODUCTION
WHY SHOULD I CARE?
WHAT IS TYPOGRAPHY?• Text is words
WHAT IS TYPOGRAPHY?• Text is words
• Visual text involves typography
WHAT IS TYPOGRAPHY?
WHAT IS TYPOGRAPHY?• Text is words
• Visual text involves typography
• Typography is NOT just fonts!
WHY DOES IT MATTER?• Reader attention
WHY DOES IT MATTER?• Reader attention
• Readers do not want to read
TYPOGRAPHY DOES NOT MAKE YOUR WRITING BETTER
–You, presumably
“But James, I don’t know design!”
WHY DOES IT MATTER?
WHY DOES IT MATTER?• Reader attention
• Readers do not want to read
• Typography already matters to you
TYPOGRAPHY ISN’T REQUIRED, BUT
NEITHER IS SHOWERING
WHAT IS GOOD?• Typography is utilitarian
WHAT IS GOOD?• Typography is utilitarian
• There is more than one correct answer
WHAT IS GOOD?• Typography is utilitarian
• There is more than one correct answer
• Good typography can be ugly
–Some famous designer dude
“Good design is invisible.”
BAD TYPOGRAPHY HABITS
QUOTATION MARKS• Straight quotation marks are what you get from the
apostrophe key
• Curly quotation marks are what you get from being
good
QUOTATION MARKS
'' ""
‘’ “”
QUOTATION MARKS
‘ “
’ ”
QUOTATION MARKS• Straight quotation marks are what you get from the
apostrophe key
• Curly quotation marks are what you get from good
typography
ONE SPACE• Always put one space between sentences
PARENTHESES, ETC.• Parentheses, brackets, and braces should not take
formatting of surrounded material
PARENTHESES, ETC.
[LA Hacks OST (feat. LA Hacks)]
[LA Hacks OST (feat. LA Hacks)]
[LA Hacks OST (feat. LA Hacks)]
[LA Hacks OST (feat. LA Hacks)]
HYPHENS/DASHES• Not interchangeable
HYPHENS/DASHES
- hyphen
– en-dash –
— em-dash —
HYPHENS/DASHES
— em-dash
-- NOT an em-dash
HYPHENS/DASHES
—em-dash
--NOT an em-dash
BAD NO
STOP
SPACES• Nonbreaking spaces exist. Please don’t abuse them.
UNDERLINING• Never underline in a printed document
UNDERLINING• Never underline in a printed document
• It’s okay to underline links
SILLY FONTSJames Wu
James Wu
James Wu James Wu
James Wu
MONOSPACED• Only use in code
SYSTEM FONTS• are bad
SYSTEM FONTS• are bad
• are overexposed
BOLD OR ITALIC• Mutually exclusive
BOLD OR ITALIC• Mutually exclusive
• Use for emphasis
–Syndrome
“Everyone can be super! And when everyone’s super, no one will be.”
BOLD OR ITALIC• Mutually exclusive
• Use for emphasis
• Italic for soft emphasis, bold for heavy
BOLD OR ITALIC• Mutually exclusive
• Use for emphasis
• Italic for soft emphasis, bold for heavy
• With sans-serif fonts, use bold for both
ALL CAPS• Use sparingly
ALL CAPSCAPITALIZING FULL PARAGRAPHS IS BAD. WHY DO
YOU STILL HAVE CAPS LOCK ENABLED ANYWAY.
REMAP THAT TO CONTROL OR SOMETHING. IT’S
BETTER FOR CODING. THIS IS EVEN HARDER TO
READ WHEN IT’S BOLDED. ARE YOU HAVING FUN
READING THIS? ARE YOU HAVING FUN YET?
HEADERS• ALL CAPS is okay for short ones
• Don’t Use Title Case
• Don’t underline
• Emphasize by adding margins
• Use bold over italic
• Don’t make too much larger than body
LETTERSPACING• CSS letter-spacing
• If you can fit another character in the space, it’s too
wide
FONT MIXING• Never required
FONT MIXING• Never required
• Diminishing returns
FONT MIXING• Never required
• Diminishing returns
• Any two different fonts are valid
FONT MIXING• Never required
• Diminishing returns
• Any two different fonts are valid
• Different fonts for different roles
OKAY, BUT WHAT FONT SHOULD I USE?
NOTHING BEATS PROFESSIONAL
FONTS 101• Anyone can appreciate a professional font
FONTS 101• Anyone can appreciate a professional font
• Fonts cost money
FONTS 101• Anyone can appreciate a professional font
• Fonts cost money
• Respect the license
SANS-SERIF
Proxima Nova DIN Pro Futura
Metro Nova Pro Avenir
SERIF
Grandesign Neue Serif Roboto Slab Quattrocento
MONOSPACED
CamingoCode Fantasque Sans Mono
MonacoInconsolata
GOOD FREE FONTS
The Lost Type Co-op The League of Moveable Type
ADDENDUM: LINE WIDTH
DO NOT FEAR WHITESPACE
THANK YOUTWEET ME @ZEKANOSHI