Which typeface should I use?

Post on 12-Jan-2017

54.045 views 2 download

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

But... you’ve got a little

problem

!

KAPTEREV.COM

FONTSHOULD I USE?

Which

KAPTEREV.COM

There could be a simple answer to your question

Don’t panic

KAPTEREV.COM

But first…

Why bother?Does the typeface matter at all?

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

character?

Ok, but what about

KAPTEREV.COM

Typefaces carry an emotional charge. What emotion are you trying to convey? Choose a typeface accordingly.

Contemporary

Traditional

or CoolWarm

KAPTEREV.COM

Let’s begin with

tradition

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

warmthThe second dimension is

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

We’re almost done!

But there is one more thing...

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

Behold…

The final map

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

www.kapterev.com

alexei@kapterev.com +7 495 764 1898

Alexei KapterevPresentation skills and visual communication

m