the wonderful world of (web) typography

The wonderful world

Garret Voorhees

DrupalCon Los Angeles / May 12, 2015

Senior Designer & UX Strategist, Chapter Three

of typography[web]

chapter_three

Typography: a primer

What is typography?

WARNING!What you are about to see

cannot be unseen.

nicolasdamiens.com/project/tokyo-no-ads/!

flickr.com/groups/trajanfilmposter!

nedbatchelder.com/blog/201303/letterpress_workshop_at_massart.html!

http://nedbatchelder.com/blog/201303/letterpress_workshop_at_massart.html

instagram.com/seblester!

http://instagram.com/seblester/

Old Style Hamburgefonstiv 12345

Hamburgefonstiv 12345Hamburgefonstiv 12345

Hamburgefonstiv 12345

Transitional

Modern

Egyptian/Slab

Sabon

Baskerville

Bodoni

Glypha

SERIF



Hamburgefonstiv 12345Hamburgefonstiv 12345

Grotesque

Neo Grotesque

Geometric Sans

Humanist Sans

Franklin Gothic

Helvetica Neue

Futura

Frutiger

SANS SERIF

g g g gg g

Old Style Transitional Modern Egyptian/Slab

Geometric Sans Humanist Sans

g gGrotesque Neo Grotesque

Anatomy

acounter

bowl

stem

arm

serif

another counter

terminal

xBlingbaseline

cap height meanlineascender

descender

x-height

serif

HelveticaLight Light Oblique Roman Oblique Bold Bold Oblique Black Black Oblique

Font

Family

Typeface

12 pt

Point Size

these pretzelsare making methirsty!

14 pt

Leading/Linespacing

thinkdifferent

12 ptturkeypestowrap

12 pt

12 pt

15 pt

15 pt

12/15

“Twelveon fifteen”

RECOMMENDED READING

The Laws of SimplicityJohn Maeda

Stop Stealing Sheep &find out how type worksErik Spiekermann

Thinking With TypeEllen Lupton

Grid Systems in Graphic DesignJosef Müller-Brockman

The Elements ofTypographic StyleRobert Bringhurst

On Web TypographyJason Santa Maria

Helvetica orArial?

a aHelvetica Arial

r rHelvetica Arial

t tHelvetica Arial

s sHelvetica Arial

R RHelvetica Arial

G GHelvetica Arial

Q QHelvetica Arial

Y YHelvetica Arial

wizardwizard

schoolschool

potatopotato

monkeymonkey

BUFFALOBUFFALO

Selecting a typeface

Do I need a large family?

Will it be used for print?

How will it displaycross-platform?

Does it convey the right tone?

What sort of content will it be used for?

What style of numeralsare included?

https://flic.kr/p/5cFp9s

Do I need to support non-Latin characters?

HamburgefonstivHamburgefonstiv

Hamburgefonstiv

The quick brown fox jumps over the lazy dog.

www.clagnut.com/blog/2380!

http://www.clagnut.com/blog/2380/

Pack my box with five dozen liquor jugs.



Jackdaws love my big sphinx of quartz.



Grumpy wizardsmake toxic brewfor the evil queenand jack.



Skillets served sizzlin’ hot.Three-egg omelettes are served with

hash browns and choice of bread.

NEW!

pancakes

Sides

Philly Cheesesteak Omelette

Hearty Breakfast Skillet

Santa Fe Skillet

Cinnamon Pancake Breakfast

Banana Pecan Pancake Breakfast

Country-Fried Steak & Eggs

T-Bone Steak & Eggs

OMELETTES & SKILLETSOMELETTES & SKILLETS FAVORITESFAVORITES

Meat Lover’s Omelette Grilled prime rib, crumbled chorizo sausage, bacon, fire-roasted bell peppers and onions, and Cheddar cheese covered with Pepper Jack queso.

Ham & Cheese Omelette Diced ham, melted Swiss and American cheeses.

Philly Cheesesteak Omelette Grilled prime rib, fire-roasted bell peppers and onions, sautéed mushrooms and melted Swiss cheese.

Loaded Veggie Omelette Fresh spinach, mushrooms, sautéed zucchini and squash, diced tomatoes and melted Swiss cheese.

Ultimate Omelette® Crumbled sausage, bacon, fire-roasted bell peppers and onions, mushrooms, diced tomatoes and shredded Cheddar cheese.

Over 20g of protein

when you choose egg whites, seasonal fruit and an English muffin as your side choices

Under 15g of fat

Start your day off

right with a large,

refreshing glass of

Minute Maid®

Orange Juice.

Add toast

or tortillas

to any skillet

pancake Puppies®

Add six delicious bite-sized round

pancakes rolled in cinnamon sugar

and served with warm syrup.

* Eggs served over-easy, poached, sunny-side-up or soft-boiled and steaks that are served rare or medium-rare may be undercooked and will only be served upon the consumers’ request.NOTICE: Consuming raw or undercooked meats, poultry, seafood, shellfish or eggs may increase your risk of foodborne illness, especially if you have certain medical conditions.

CAUTION: Skillets are hot. Handle with care.

Fit Fare® Veggie Skillet Seasoned red-skinned potatoes, fire-roasted bell peppers and onions, mushrooms and broccoli topped with two egg whites scrambled with spinach and grape tomatoes. Served with a side of salsa.

Ultimate Skillet Grilled sausage, fresh spinach, fire-roasted bell peppers and onions, mushrooms, grape tomatoes and seasoned red-skinned potatoes. Topped with Cheddar cheese and two eggs.*

Hearty Breakfast Skillet A hearty breakfast sausage with seasoned red-skinned potatoes, sautéed mushrooms and fire-roasted bell peppers and onions. Topped with shredded Cheddar cheese and two eggs.*

Under 550 calories

Cinnamon Pancake Breakfast Cinnamon sauce and cream cheese icing drizzled over two buttermilk pancakes. Served with two eggs* and hash browns, plus your choice of two strips of bacon or two sausage links and a side of warm syrup.

Red-Skinned PotatoesHash BrownsCheddar Cheese Hash BrownsEverything Hash Browns (Onions, Cheddar cheese & country gravy)

Grits (6 am - 2 pm only)

Oatmeal (6 am - 2 pm only)

YogurtSeasonal Fruit (Selection may vary.)

Bacon Strips (4)Turkey Bacon Strips (4)Sausage Links (4)Hearty Breakfast Sausage (1)Chicken Sausage Patties (2)Grilled Ham SliceEggs* (Each)Slices of Toast (2)Buttermilk Biscuits (2)English Muffin

Moons Over My Hammy® Our classic ham and scrambled egg sandwich with Swiss and American cheeses on grilled sourdough. Served with hash browns.

T-Bone Steak* & Eggs* A tender 13 oz. seasoned T-Bone steak* served with two eggs,* hash browns and choice of bread.

Country-Fried Steak & Eggs* A golden-fried chopped beef steak smothered in rich country gravy. Served with two eggs,* hash browns and choice of bread.

Peanut Butter Cup Pancake Breakfast Chocolate chips and white chocolate chips inside two buttermilk pancakes, topped with hot fudge and drizzled with peanut butter sauce. Served with two eggs* and hash browns, plus your choice of two strips of bacon or two sausage links and a side of warm syrup.

Banana Pecan Pancake Breakfast Glazed pecans cooked inside two hearty wheat pancakes and topped with fresh banana slices. Served with two scrambled egg whites, two strips of turkey bacon and a side of warm syrup.

Blueberry Pancake Breakfast Juicy blueberries cooked inside two buttermilk pancakes. Served with two eggs* and hash browns, plus your choice of two strips of bacon or two sausage links and a side of warm syrup.

Under 15g of fat Over 8g of fiber

Over 20g of protein

Santa Fe Skillet Crumbled chorizo sausage, fire-roasted bell peppers and onions, mushrooms and seasoned red-skinned potatoes. Topped with Cheddar cheese and two eggs.*

Under 550 calories


Fit Fare® Veggie Skillet Seasoned red-skinned potatoes, fire-roasted bell peppers and

onions, mushrooms and broccoli topped with two egg whites

scrambled with spinach and grape tomatoes. Served with a side

of salsa.Over 20g of protein

Santa Fe Skillet

Under 550 calories

T-Bone Steak & Eggs

pancake Puppies®




Moons Over My Hammy® Our classic ham and scrambled egg sandwich with Swiss and American cheeses on grilled sourdough. Served with hash browns.

central kitchen may 7, 2015

DUCK BREAST & CONFIT smoked foie gras. pickled ramps.

33

LAMB ROAST garbanzo. chermoula. snow peas.

35

KING SALMON artichoke. borage. fiddleheads.

32

PORCHETTA for two pickles. condiments. relishes.

80

CHICKPEA PANISSE yogurt. sunflower seed.

cilantro. 8

LIVER MOUSSE hazelnut. cherry gelée.

11

PORK COUNTRY PÂTÉ avocado. horseradish.

12

THREE CHEESES*

lavosh. rhubarb jam. walnut. 18

LET THE KITCHEN DECIDE 75/per person

BEVERAGE pairing 45/per person

bread upon request *consumption of raw or undercooked meat, poultry, fish, shellfish or eggs may increase risk of food-borne illness

a 4.5% SF mandate restaurant charge allows us to provide health benefits for our staff

FENNEL & STRAWBERRY fresh ricotta. pistachio.

13

WAGYU BEEF TARTARE grilled sourdough. anchovy. nasturtium.

17

OCTOPUS TERRINE peas. miso. basil.

18

CHARRED ASPARAGUS trout roe. spring onion. pullet egg.

18

PORCINI SPAGHETTI speck. morels. ramp greens.

22

PORK AGNOLOTTI fava bean. preserved lime.

21

JOIN US FOR SUNDAY BRUNCH 10:30AM – 2:00PM

central kitchen

may 7, 2015

DUCK BREAST & CONFIT

smoked foie gras. pickled ramps. 33

LAMB ROAST

garbanzo. chermoula. snow peas. 35


32


80


cilantro. 8


11


12

THREE CHEESES*

lavosh. rhubarb jam. walnut. 18



bread upon request

*consumption of raw or undercooked meat, poultry, fish, shellfish or eggs may increase risk of food-borne illness

a 4.5% SF mandate restaurant charge allows us to provide health benefits for our staff


13

WAGYU BEEF TARTARE

grilled sourdough. anchovy. nasturtium. 17


18

CHARRED ASPARAGUS

trout roe. spring onion. pullet egg. 18

PORCINI SPAGHETTI

speck. morels. ramp greens. 22


21




33


35


32


80


cilantro. 8


11


12

THREE CHEESES* lavosh. rhubarb jam. walnut.

18



bread upon request *consumption of raw or undercooked meat, poultry, fish, shellfish or eggs may increase risk of food-borne illness a 4.5% SF mandate restaurant charge allows us to provide health benefits for our staff


13


17


18


18


22


21


Skillets served sizzlin’ hot.Three-egg omelettes are served with


NEW!

pancakes

Sides

Philly Cheesesteak Omelette


Santa Fe Skillet



Country-Fried Steak & Eggs

T-Bone Steak & Eggs

OMELETTES & SKILLETSOMELETTES & SKILLETS FAVORITESFAVORITES

Meat Lover’s Omelette Grilled prime rib, crumbled chorizo sausage, bacon,

fire-roasted bell peppers and onions, and Cheddar cheese

covered with Pepper Jack queso.

Ham & Cheese Omelette Diced ham, melted Swiss and American cheeses.

Philly Cheesesteak Omelette Grilled prime rib, fire-roasted bell peppers and onions,

sautéed mushrooms and melted Swiss cheese.

Loaded Veggie Omelette

Fresh spinach, mushrooms, sautéed zucchini and squash,

diced tomatoes and melted Swiss cheese.

Ultimate Omelette® Crumbled sausage, bacon, fire-roasted bell peppers and

onions, mushrooms, diced tomatoes and shredded

Cheddar cheese.

Over 20g of proteinwhen you choose egg whites, seasonal fruit and an English muffin as your side choicesUnder 15g of fat

Start your day off

right with a large,

refreshing glass of

Minute Maid®

Orange Juice.

Add toast

or tortillas

to any skilletpancake Puppies®




* Eggs served over-easy, poached, sunny-side-up

or soft-boiled and steaks that are served rare or

medium-rare may be undercooked and will only be

served upon the consumers’ request.

NOTICE: Consuming raw or undercooked meats,

poultry, seafood, shellfish or eggs may increase your

risk of foodborne illness, especially if you have certain

medical conditions.

CAUTION: Skillets are hot. Handle with care.

Fit Fare® Veggie Skillet Seasoned red-skinned potatoes, fire-roasted bell peppers and

onions, mushrooms and broccoli topped with two egg whites

scrambled with spinach and grape tomatoes. Served with a side

of salsa.

Ultimate Skillet Grilled sausage, fresh spinach, fire-roasted bell peppers and

onions, mushrooms, grape tomatoes and seasoned red-skinned

potatoes. Topped with Cheddar cheese and two eggs.*

Hearty Breakfast Skillet A hearty breakfast sausage with seasoned red-skinned potatoes,

sautéed mushrooms and fire-roasted bell peppers and onions.

Topped with shredded Cheddar cheese and two eggs.*

Under 550 calories


Cinnamon sauce and cream cheese icing drizzled over two

buttermilk pancakes. Served with two eggs* and hash browns,

plus your choice of two strips of bacon or two sausage links

and a side of warm syrup.

Red-Skinned Potatoes

Hash Browns

Cheddar Cheese Hash Browns

Everything Hash Browns (Onions, Cheddar cheese

& country gravy)

Grits (6 am - 2 pm only)

Oatmeal (6 am - 2 pm only)

Yogurt

Seasonal Fruit (Selection may vary.)

Bacon Strips (4)

Turkey Bacon Strips (4)

Sausage Links (4)

Hearty Breakfast Sausage (1)

Chicken Sausage Patties (2)

Grilled Ham Slice

Eggs* (Each)

Slices of Toast (2)

Buttermilk Biscuits (2)

English Muffin

Moons Over My Hammy®

Our classic ham and scrambled egg sandwich with

Swiss and American cheeses on grilled sourdough.

Served with hash browns.

T-Bone Steak* & Eggs* A tender 13 oz. seasoned T-Bone steak* served with two eggs,*


Country-Fried Steak

& Eggs* A golden-fried chopped beef steak smothered

in rich country gravy. Served with two eggs,*


Peanut Butter Cup

Pancake Breakfast Chocolate chips and white chocolate chips inside two

buttermilk pancakes, topped with hot fudge and drizzled with

peanut butter sauce. Served with two eggs* and hash browns,

plus your choice of two strips of bacon or two sausage links and

a side of warm syrup.


Glazed pecans cooked inside two hearty wheat pancakes and

topped with fresh banana slices. Served with two scrambled egg

whites, two strips of turkey bacon and a side of warm syrup.

Blueberry Pancake Breakfast

Juicy blueberries cooked inside two buttermilk pancakes.

Served with two eggs* and hash browns, plus your choice

of two strips of bacon or two sausage links and a side

of warm syrup.

Under 15g of fat Over 8g of fiberOver 20g of protein

Santa Fe Skillet Crumbled chorizo sausage, fire-roasted bell peppers and onions,

mushrooms and seasoned red-skinned potatoes. Topped with

Cheddar cheese and two eggs.*

Under 550 calories



33


35


32


80


cilantro. 8


11


12

THREE CHEESES* lavosh. rhubarb jam. walnut.

18



bread upon request *consumption of raw or undercooked meat, poultry, fish, shellfish or eggs may increase risk of food-borne illness a 4.5% SF mandate restaurant charge allows us to provide health benefits for our staff


13


17


18


18


22


21


Sentinel

Gotham

Proxima Nova

FontFace Ninjawww.fontface.ninja!

http://www.fontface.ninja

WhatTheFontwww.myfonts.com/WhatTheFont!

http://www.myfonts.com/WhatTheFont

www.typecast.com/preview/google

Typecast!

http://typecast.com/preview/google

File formats

PostScript

.PS

Developed by Adobe Released in 1984

TrueType

.TTF

Developed by Apple (and Microsoft later) Released in 1991 (Mac OS 7)

(cubic bézier) (quadratic bézier)

OpenType

.OTF

Developed by Microsoft and Adobe Released 1997

wafflewaf lef "

k � � � �

12345678901234567890

TABULAR/LINING

OLD STYLE

12345678901234567890

css-tricks.com/snippets/css/using-font-face!

https://css-tricks.com/snippets/css/using-font-face/

Web Open Font FormatWOFF

Developed by Mozilla, Opera and Microsoft 1.0 spec released to W3C in 2010

All major browsers!

Scalable Vector GraphicsSVG

Developed by W3C Released in 2001

Webkit ONLY (Safari & Mobile Safari)

#

Embedded OpenTypeEOT

Developed by Microsoft Released in 2007 (and rejected by W3C)

Internet Explorer ONLY$$

TrueTypeTTF

Developed by Apple Released in 1991 (Mac OS 7)

All major browsers!#

Licensing

Subscription Pay as you go

‣ $50–120/year

‣ often include monthly pageview limits

‣ convenience and flexibility

‣ fonts hosted on their servers

‣ $35–55 per style

‣ 250,000 pageviews (and up)

‣when you know exactly what you need

‣ option to host fonts yourself

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

1234567890

1234567890

1234567890

1234567890

1234567890

1234567890

1234567890

Proxima Nova

Meta

Meta Serif

Adelle

Tisa

Futura

Minion

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

Hamburgefonstiv

1234567890

1234567890

1234567890

1234567890

1234567890

1234567890

1234567890Sentinel

Whitney

Gotham

Archer

Gotham Narrow

Forza

Vitesse

HamburgefonstivOpen Sans

HamburgefonstivSource Sans Pro

HamburgefonstivFira Sans

HamburgefonstivPT Serif

HamburgefonstivLato

HamburgefonstivDroid Serif

HamburgefonstivRoboto

1234567890

1234567890

1234567890

1234567890

1234567890

1234567890

1234567890

Source on Github!

Source on Github!

Fonts

‣to involve others in your font project

‣to enable your fonts to be expanded with new weights and improved writing system/language support

‣to allow your font to be includedin Libre Software operating systemslike Ubuntu

‣to educate students aboutquality typeface and font design

‣to expand your test base andget more useful feedback

‣to give back and contributeto a growing body of font sources

http://scripts.sil.org/OFL!

SIL OPEN FONT LICENSE

100daysoffonts.com!

http://100daysoffonts.com/

The League ofMoveable Type

www.theleagueofmoveabletype.com!

The -ilities

ReadabilityLegibility

Usability Accessibility

Legibility

(Wolves in the Throne Room)

(Borknagar)

(Dark Throne)

milliliter

milliliter

milliliter

milliliter

milliliter

milliliterthomasbyttebier.be/blog/the-best-ui-typeface-goes-unnoticed!

Readabilityhttps://flic.kr/p/djgWR8

https://flic.kr/p/djgWR8

A visual mind is interested in anything that you see, and a literary mind is interested in anything you think. A literary mind is interested in people. A visual mind is interested in things, objects, nature. This doesn’t mean that you look and don’t think. Of course, you do that, too. But a literary mind is more prone to thinking than looking visually. They like to read. They like to analyze things from a psychological point of view. Writers like this write about isolation, and some write about being together. Each one investigates one action of the mind. And the mind, being as complex as it is, is an endless source of investigation.

A visual mind is interested in anything that you see, and a literary mind is

interested in anything you think. A literary mind is interested in people. A visual

mind is interested in things, objects, nature. This doesn’t mean that you look and

don’t think. Of course, you do that, too. But a literary mind is more prone to

thinking than looking visually. They like to read. They like to analyze things from

a psychological point of view. Writers like this write about isolation, and some

write about being together. Each one investigates one action of the mind. And

the mind, being as complex as it is, is an endless source of investigation.

Can you even read this bro?

Text size

Leading/line spacing

Line length

Text contrast

Text alignment

Vocabulary/syntax

KEY FACTORS

Usability

https://flic.kr/p/5cUMt9!

https://flic.kr/p/5cUMt9

Accessibility

“The power of the Web is in its universality. Access by everyone regardless of disability

is an essential aspect.”

Tim Berners-LeeW3C Director and inventor

of the World Wide Web

webaim.org/resources/contrastchecker!

Although stylish, this one is probably more difficult to read than the text on the right, even if you have good eyesight.

There’s probably someone in this room right now with worse eyesight than you and they deserve to read things too!

3.34 : 1 7.6 : 1

http://webaim.org/resources/contrastchecker/

Accessibility supports social inclusion for

people with disabilities as well as others,

such as older people, people in rural areas,

and people in developing countries.

www.w3.org/standards/webdesign/accessibility!

Typography on the web

If you take away all of the text on a website…

Typographyin gaming

Higher resolution screens mean higher quality typography.

NES 256x240 SNES 512x448 (max) N64 640x480 (max)

NES SNES N64256x240 512x448 (max) 640x480 (max)

Type is all around you.