Stop using Open Sans – Why your font choice matters

A presentation at Stay Curious – Fonts in November 2020 in by Oliver Schöndorfer

Slide 1

Stop using Open Sans and start living

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Open Sans

Slide 8

Open Sans

Slide 9

Open Sans

Slide 10

1,713,719,143,728 views within the last year fonts.google.com/analytics, 17 Nov 2020

Slide 11

ikea.us, Sep 2020

Slide 12

chase.com, Sep 2020

Slide 13

twitter.com/staycurio_us/status/1328327611827761152

Slide 14

twitter.com/staycurio_us/status/1328327611827761152

Slide 15

Slide 16

Why?

Slide 17

raiffeisen.at, Sep 2020

Slide 18

volksbank.at, Sep 2020

Slide 19

sparkasse.at, Sep 2020

Slide 20

This is an opportunity

Slide 21

Slide 22

1 Why your font choice matters

Slide 23

Without text there’s no communication

Slide 24

“Type is never neutral.” — Jason Pamental, An Event Apart, 2018 youtu.be/Hp9p3-M29R0

Slide 25

Dr. Jessica Bauer Objektiv Mk1 by Dalton Maag

Slide 26

Dr. Je!ica Bauer Winsome by Laura Worthington

Slide 27

Dr. Jessica Bauer FF Folk by Ben Shahn, Jane Patterson and Maurizio Osti

Slide 28

Slide 29

font follows function font follows feeling

Slide 30

Slide 31

2 Different kinds of text

Slide 32

THERE ARE NO BAD TYPEFACES. There are badly used typefaces.

Slide 33

Slide 34

What is the key application?

Slide 35

What is the key audience?

Slide 36

What limitations are there?

Slide 37

Slide 38

1 Display text 2 Body text 3 Functional text

Slide 39

1 Display text 2 Body text 3 Functional text

Slide 40

1 Display text

Slide 41

“Display text is all about seduction. Its purpose is to draw your reader into the content.” — Richard Rutter, Web Typography, page 246 book.webtypography.net

Slide 42

Display Typeface Bungee by DJR

Slide 43

Display Typeface Display Typeface Display Typeface Display Typeface Display Typeface Display Typeface

Slide 44

I am a display typeface. I should be used in larger sizes, 20 pt and upwards. It often contains decorative, trendy or graphic elements. Due to it’s attention grabbing look it draws attention to itself and sets the mood or theme for your message or product. For long reading text it’s inappropriate as you can see in this paragraph. Don’t use display typefaces for body text

Slide 45

Abril Abril Abril Text Abril Display

Slide 46

Display text • To represent the vibe of your project • Only for short texts • At larger sizes, meaning ~20 px upwards • Don’t use it for body text

Slide 47

2 Body text

Slide 48

“Good typography is invisible.” — Someone

Slide 49

I am a typeface for body text. My speciality is that I don’t seem special – except to some type nerds, of course. And that’s the whole point. because a text typeface should not draw much attention to itself. I’m humble and I work best when I’m understated. My job is to get out of the reader’s way and let the words speak. Bluntly said “boring is better”. Tisa Pro

Slide 50

Sans Serif

Slide 51

Good? Bad?

Slide 52

modern

Slide 53

elegant

Slide 54

are the letters distinctive enough?

Slide 55

a g q

Slide 56

a g q

Slide 57

agqIl Geometric (Objektiv Mk1) agqIl Humanist Sans (Aller) agqIl Humanist Serif (Tisa Pro)

Slide 58

Type Type Large x-height (Roboto) Small x-height (Gill Sans)

Slide 59

Roboto on Android Gill Sans on iOS ” iOS wien.gv.at, 2017

Slide 60

Body text • Boring is better • Sans and serif are both fine • Look for distinctive letter shapes • Go for larger x-heights

Slide 61

3 Functional text

Slide 62

Can you read me? Sloop Script by Lipton Letter Design

Slide 63

Il1 Il1 Il1 Gill Sans Fira Sans Recursive

Slide 64

coe coe Closed shapes (Helvetica) Open shapes (PT Sans)

Slide 65

coe coe Closed shapes (Helvetica) Open shapes (PT Sans)

Slide 66

Helvetica Mac OS 10.10 Yosemite, screenshots by typografie.info

Slide 67

Lucida Grande Mac OS 10.10 Yosemite, screenshots by typografie.info

Slide 68

Screenshot taken from Half-Life: Alyx VR

Slide 69

Functional text • Should work in tiny sizes (10 px) and low resolutions • Strokes should have little contrast • Go for clean, open shapes • Look for good distinctions

Slide 70

Slide 71

3 Font follows function

Slide 72

Aa Aa Aa Ĥèlłõ 1⁄2 ag ag Weights & Styles Languages Characters & OTF varbiable.woff2 €$£ File size & Format Licensing

Slide 73

Regular Italic Bold

Slide 74

Light Regular sml. caps Italic Bold

Slide 75

Thîš dòesñ’t łook góod

Slide 76

Thîš dòesñ’t łook góod

Slide 77

Hallå Привет γεια Latin Cyrillic Greek

Slide 78

‫مرحبا‬ สวัสดี नमस्ते ‫שלום‬ Hebrew Devanagari Arabic Thai

Slide 79

Slide 80

fonts.adobe.com

Slide 81

123467890 Proportional old-style figures 1234567890 Tabular lining figures

Slide 82

1/3 → 1⁄3 ag → ag Fractions Alternative Characters

Slide 83

↑ ↓ ↕ ↩ ↪ ✓ ✗ ▼ ▲ ◀ ▶ ⚠ ☼ ☀ ♡ ♥ ★ ☆ ↺ ↻ ⏎ Special characters for UI design from Inter rsms.me/inter

Slide 84

Static Fonts Variable Font Aa Aa Aa Aa Regular 30 KB Italic 30 KB 90 KB Bold 30 KB 80 KB 80 KB

Slide 85

myfonts.com

Slide 86

typenetwork.com

Slide 87

fontwerk.com

Slide 88

djr.com

Slide 89

futurefonts.xyz

Slide 90

theleagueofmoveabletype.com

Slide 91

Slide 92

4 Font follows feeling

Slide 93

What are the key values?

Slide 94

Sans Serif Serif Slab Serif Script Handwritten Display

Slide 95

Sans Serif Gill Sans modern ! Display text Objektiv Mk1 clean ! Body text minimalistic ! Functional text Output Sans Roboto Myriad Pro dry technical restrained

Slide 96

Serif PT Serif traditional ! Display text Bressay classic ! Body text established ? Functional text Bodoni Georgia Ingeborg trustworthy warm noble

Slide 97

Slab Serif Rockwell confident ! Display text Eames stable ! Body text striking ? Functional text Questa Slab Ernestine solid cluncy Adelle

Slide 98

Script Snell Roundhand lively ! Display text He!o My Love individual ” Body text playful ” Functional text Bello Script expressive Lucida Calligraphy elaborate Avebury skillful

Slide 99

Handwritten Supermarker human ! Display text Chalky approachable ” Body text natural ” Functional text Marydale friendly Amatic SC authentic Classic Comic down-to-earth

Slide 100

Display Allerta Stencil expressive ! Display text Modak interesting ” Body text atmospheric ” Functional text Abril Display Output Sans Roslindale

Slide 101

Slide 102

5 Bringing it together

Slide 103

Slide 104

Key application • iOS App • Phone & Tablet Functional text

Slide 105

Key audience • Musicians • on their mobile devices • at home

Slide 106

Limitations • No hard brand guidelines • No budget for font licenses • EN & DE

Slide 107

font follows function Weights & Styles Languages Characters & OTF Format & Size Licensing Wide range latin based, extended Tabular & proportional numbers, ligatures Ideally a variable font Free

Slide 108

font follows feeling playful motivating Sans Serif Handwritten friendly open modern inclusive

Slide 109

font follows feeling Handwritten Sans Serif open modern motivating playful friendly inclusive

Slide 110

Main text Features Feeling Functional text Many weights playful Latin based, ext. friendly Tab. & prop. Num. inclusive Sans Serif Variable Font? Free Handwritten touch