Which typeface should I use?
55
A typography primer for non-designers Which typeface should I use? Version 3.7
-
Upload
alexei-kapterev -
Category
Design
-
view
54.045 -
download
2
Transcript of Which typeface should I use?
A typography primer for non-designers
Which typeface should I use?
Version 3.7
KAPTEREV.COM
So, you are designing a presentation
or a resume a poster a document… ok, you name it
KAPTEREV.COM
Can you tell if the text above is set in Georgia or Baskerville? Most people can’t—yet the typeface still has a measurable impact on their decisions.
It does.
KAPTEREV.COM
One study have shown a 2% difference in impact for Georgia v. Baskerville—typefaces so similar that most people can’t tell apart.
Source: http://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/
There is a 10-15% difference for clearly different pairs like Times v. Arial.
Source: http://www.ncbi.nlm.nih.gov/pubmed/18459353
Rates RatesGeorgia Baskerville
KAPTEREV.COM
So you want to find a good typeface, but…
What exactly is “a good typeface”?
KAPTEREV.COM
A good typeface 1) is readable and 2) has character
Maybe too fancyJust rightMaybe too boring
AgAg Ag
KAPTEREV.COM
readable?
It’s a complex subject and for the sake of simplicity we suggest adopting one simple rule…
How do we know if the typeface is
KAPTEREV.COM
AgAgAg
Ag
Avoid typefaces that are obviously hard to read
Comic Sans
Blackmoor LET
Brush Script
Monotype Corsiva
KAPTEREV.COM
Typefaces carry an emotional charge. What emotion are you trying to convey? Choose a typeface accordingly.
Contemporary
Traditional
or CoolWarm
KAPTEREV.COM
R R R RR
Traditional Contemporary
Novelty Robust Simple
Affordable Straightforward
Classical Sophisticated
Complex Luxury Fancy
RDidot Playfair Minion Fedra Sans PT Sans Avenir
KAPTEREV.COM
Rates
Why some typefaces have a more traditional look? The obvious answers would be “serifs”.
Rates
A serif is a small line attached to the end of a stroke in a letter or symbol. A typeface with
serifs is called a serif typeface (or serifed typeface). A typeface without serifs is called sans
serif or sans-serif, from the French sans, meaning "without."N
Didot Avenir
Traditional Contemporary
KAPTEREV.COM
Bodoni Sans
Wow. What has just happened? The serifs are gone!
Serifs are important — but even if we take them away, the font on the left still looks more historical.
RatesAvenir
Traditional Contemporary
KAPTEREV.COM
RThe left R has more difference between thick and thin strokes. The technical term is contrast.
More contrast More sophistication
Less contrast Less sophistication
Bodoni Sans Avenir
KAPTEREV.COM
RSuppose we add even more contrast… See? Very sophisticated (also not very readable).
Low contrastHigh contrastExorbitant contrast
Bodoni Sans AvenirBroadway
KAPTEREV.COM
To conclude: tradition and sophistication are mostly communicated via serifs and contrast.
Serifs
More contrast
More sophisticated
More historical
No serifs
Less contrast
Less sophisticated
More contemporary
R R R RR RDidot Playfair Minion Fedra Sans PT Sans Century Gothic
KAPTEREV.COM
Geometric Distant Factory-made Rational Precise
Calligraphic Approachable Hand-mande Emotional Imperfect
Warm Cool
More calligraphic typefaces have more warmth. More geometric typefaces are cooler. They are also harder to read.
RatesPalatino Linotype Century Gothic
Rates
KAPTEREV.COM
This was done by a calligrapher.
Beautiful and slightly imperfect.
R RAn engineer with a ruler.
Calculated.
A fashion designer with a French curve.
Very precise, lots of thought.
RPalatino Linotype Century Gothic Didot
Warm CoolCool
KAPTEREV.COM
RWarm
Once again, it’s not just about serifs! Typefaces that have more contrast are also warmer.
RWarm
Optima
Cool
Didot
RPalatino Linotype
KAPTEREV.COM
Calligraphic Warm
Geometric Cool
R R R RR RJannon Swash Palatino APC Garamond Minion PT Serif Didot
RCentury Gothic
RGill Sans
RPT Sans
RCandara
RFedra Sans
ROptima
KAPTEREV.COM
We hope it makes some sense now. Let’s begin with discussing the four most prominent font groups.
Contemporary
Traditional
or CoolWarm
KAPTEREV.COM
Modern
Geometric
Old Style
Humanist
Readability: Satisfactory Readability: Poor
Character: Warm, traditional Character: Cool, traditional
Readability: Excellent Readability: Poor
Character: Warm, contemporary Character: Cool, contemporary
Star typeface: Garamond Star typeface: Didot
Star typeface: Gill Sans Star typeface: Futura
Contemporary
CoolWarm
Traditional
or
KAPTEREV.COM
Before choosing a typeface decide
Frankly, this is the hardest part. If you can’t decide on this, just use Georgia or Verdana (or both).
what emotion to convey
KAPTEREV.COM
You’re about to see 40 typefaces
This typeface comes free with Windows 10 This one comes with Mac OS 10.11
Leads to a Wikipedia article. It’s good to know the story of your typeface and it’s a good sign when a typeface is on Wikipedia.
Click and download this typeface for free at FontSquirrel.com or search the site for similarly tagged fonts.
For one reason or another we do not recommend this typeface
Here are some neat icons to help you with selection
KAPTEREV.COMPhoto by David Iliff
Old-Style SerifClassical Roman antiquity, Renaissance or Baroque, early printed books
KAPTEREV.COM
High contrast with serifs, calligraphic, very warm and quite complex
Old-Style Serif
Great 20th century design by Hermann Zapf
Based on 15th-century Venetian type by Nicolas Jenson
Designed in the US in 1915, excellent legibility
Hoefler TextWas used in Wikipedia logo and this should count for something
A very nice design inspired by Garamond. 45 Styles! Free!
GaramondBased on 16th century design, the most famous old style type
KAPTEREV.COMPhoto by Marc Vassal
Modern Serif19th century Paris, high fashion, Vogue magazine
KAPTEREV.COM
Modern Serif
Bodoni
Didot
More fonts tagged “modern”…
Late 18th century Italian design, one of the best of its kind
French design, even more refined and geometric than Bodoni
20th century American variation
Sometimes classified as transitional, it is both readable and fancy
Contemporary narrow typeface with historic look
Even higher contrast, very cool, fashionable and calculated. Problematic readability as the letters are overly complex. Recommended for headings
KAPTEREV.COM
First half of the 20th century, modernism, Bauhaus, Russian constructivism
Photo by Matt Olson
Geometric Sans
KAPTEREV.COM
Geometric Sans
Futura
Avenir Next
More fonts tagged “geometric”…
Century GothicIt’s on both PC and Mac and that’s the only reason we recommend it
An American take on Futura
The original German Futura, one and only
Aesthetically pleasing and highly readable
A semi-serifed contemporary geometric typeface
Based around simple geometric forms like square, circle or triangle. Minimalist, straight-forward, modernist. As a rule, have readability problems
KAPTEREV.COM
Humanist Sans
Print by William Morris
Late 19th and 20th century arts and cra"s movement, present-day Europe
KAPTEREV.COM
Humanist Sans
Gill Sans
Verdana
PT Sans
Segoe UI More fonts tagged “humanist”…
Eric Gill’s greatest design, it’s on every pub menu in London
Highly readable and aesthetically decent (used by IKEA!)
Comes with Office, the best of C-fonts
Microsoft uses Segoe family for branding and interfaces
Versatile and stylish
Designed by Erik Spiekermann, a legend in the world of typography
Not a bad font, but it suffers from gross overuse
Calibri
Based on hand-written text proportions. Very warm, friendly and very readable
Corbel
KAPTEREV.COM
Traditional, warm
Contemporary, warm
Modern
Geometric
Old Style
Humanist
We’ve covered groups that have the most character. Let’s cover some neutral ones as well.
Contemporary, cool
Traditional, cool
?Less character,
more neutral
KAPTEREV.COM
RatesOld Style Serif Modern Serif
RatesTransitional Serif
Rates
Factory-made Distant Rational Precise
Hand-mande Friendly Emotional Imperfect
Warm CoolNeutral
Mass-produced Convenient Practical Cost-effective
KAPTEREV.COM
18-19th century industrial revolution, newspapers, mass-produced books
Transitional Serif
KAPTEREV.COM
Very readable, practical and non-obtrusive but o"en lack distinct individuality
Georgia
Minion
More fonts tagged “transitional”…
Transitional Serif
PT Serif
Century Schoolbook
The best transitional serif available on both platforms
This maybe the first typeface you ever saw in your life
Another timeless design by Eric Gill
Often classified as old-style, it the most popular book font
A well-executed commission by the Russian Government
Times New RomanOh, please. Enough is enough. Replace with Georgia or Tinos.
An innovative serif metrically compatible with Times
KAPTEREV.COM
It should be Transitional Sans, right? But no, typography is not that obvious.
Traditional, warm
Contemporary, warm ?
Modern
Geometric
Old Style
HumanistContemporary, cool
Traditional, cool
TransitionalTraditional, neutral
KAPTEREV.COM
Late 19th–early 20th century. But also… #e 1960’s. Swiss design. Helvetica.
Grotesque & neo-grotesque
KAPTEREV.COM
Quite readable and neutral, the quintessential 20th century typeface group
Franklin Gothic
News Gothic
Helvetica Neue More fonts tagged “Grotesque”…
Grotesque & neo-grotesque
Celebrated American typeface named after Ben Franklin Designed for the Rubik’s Cube Exhibition, released for free
Remember the Star Wars crawl? That was in News Gothic
“When in doubt use Helvetica” was the common rule once
A replacement for Arial
Excellent free typeface from Poland
ArialA Helvetica rip-off which is just everywhere
KAPTEREV.COM
Modern
Geometric
Old Style
Humanist
Readability: Satisfactory Readability: Poor
Character: Warm, traditional Character: Cool, traditional
Readability: Excellent Readability: Poor
Character: Warm, contemporary Character: Cool, contemporary
Star typeface: Garamond Star typeface: Didot
Star typeface: Gill Sans Star typeface: Futura
TransitionalReadability: Good
Character: Neutral, traditional
Star typeface: Baskerville
GrotesqueReadability: Good
Character: Neutral, contemporary
Star typeface: Helvetica
KAPTEREV.COM
Traditional, warm
Contemporary, warm
?
Modern
Geometric
Old Style
HumanistContemporary, cool
Traditional, cool
TransitionalTraditional, neutral
GrotesqueContemporary, neutral
? ?
KAPTEREV.COM
Slab Serif
Photo by Luca Venturi
Reminiscent of the Wild West signs and posters, it is great for shouting at people.
KAPTEREV.COM
Slab SerifLow contrast with serifs, which look like slabs — hence the name. Comes in flavours: geometric, humanist or transitional.
Rockwell Charter
More fonts tagged “Slab”…
Geometric design from 1930’s It’s very readable and totally looks like a transitional typeface
Contemporary humanist Slab Serif, which kind of escapes the classification
KAPTEREV.COM
Warm
Ag Ag
Ag Ag
Ag Ag Ag
AgOld-style serif Transitional Serif Modern Serif
Humanist, Slab Transitional, Slab Geometric, Slab
Geometric Sans[Neo-]GrotesqueHumanist Sans
Neutral Cool
Warm Neutral Cool
Traditional Traditional
Neutral
Contemporary Contemporary
Neutral
KAPTEREV.COM
Go take another look, if you didn’t.
Did you find a typeface for yourself?
KAPTEREV.COM
Want to know more about typefaces and typography? We think these books are awesome for beginners.
Like, 20% of it is for lawyers.
KAPTEREV.COM
www.kapterev.com
[email protected] +7 495 764 1898
Alexei KapterevPresentation skills and visual communication
m
