Web Typography: A Guide to Choosing Fonts, Layout, and Design

Web Typography
A Long Dark Rant

95% of the
information on the
web is written
language
http://ia.net/blog/the-web-is-all-about-typography-period/

Typography is the
visual expression of
language

We are all typographers
Yes, you, internet people

Ryan LaBouve
UX • Designer • Typographer
me
@RyanLaBouve

Why I’m personally
interested in typography
Tim Brown’s More Perfect Typography
After watching this I
knew I was supposed to
be a designer.
http://vimeo.com/17079380

3 Goals Today
• Show the impact of typography
• Show where typography is from and where
its’ going
• Give you practical ways to practice (on as
many platforms as possible)

Obstacles
• Type is hard
• There are no rules
• There are a lot of variables

Worth It
• Happier Users
• Represents Content Better
• Works on more platforms

All typographic knowledge
Knowledge you need for proﬁciency
What you need to know to be good
Good News

Our Project
http://publicdomainreview.org/collections/george-withers-emblem-book-1635/
Before
After

The history of typography reﬂects a continual tension between
hand and machine. Organic and the geometric, the human body
and the abstract system. These tensions, which marked the birth
of printed letters over ﬁve hundred years ago, continue to
energize typography today.
—Ellen Lupton in Thinking With Type
“
”

Modern Writing Systems
Arabic (Abjad)
Hangul (Syllabic)
Latin (Alphabetic)
French
Spanish
Italian
English
Dutch
German
Irish
Welsh
Czech
Polish
Chinese (Logographic)

Ancient
Egyptian
Abbreviated History of Our Alphabet
Phoenician Greek
(logographic with alphabetic
elements)
4000
BC
Latin
1200
BC
800
BC
700
BC
(Essentially the “latin” or
“roman” alphabet)

Early Latin Writing
Uncial (400)Roman Capitals (Trajan)

Blackletter (12th-15th)Carolingian (9th)

Gutenberg’s Textura (1450) Garamond (1530)
Old StyleTextura
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classiﬁcation/

Transitional
Caslon (1720) Bodoni (1798)
Modern

Humanist Sans
Gill Sans (1926)
Egyptian/Slab Serif
1815

Geometric Sans
FuturaHelvetica
Transitional Sans-serif

Now Everyone’s a Typography
Bleeding Cowboy Lobster
Payparus

Demo
https://github.com/ryanlabouve/type-talk-demo

Examples assume level of
html/css knowledge
#webTypography

Additional Resources
Pixels vs EM vs REM (and vh, vw)
Mapping Typography to CSS (don’t fear web typography)
HTML/CSS Typography Primer
http://j.eremy.net/confused-about-rem-and-em/
http://adamschwartz.co/magic-of-css/chapters/5-typography/
http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-web-
typography
http://css-tricks.com/viewport-sized-typography/

Including web fonts
http://css-tricks.com/snippets/css/using-font-face/
Self Hosting
Generating Fonts for the Web
http://www.fontsquirrel.com/tools/webfont-generator
Using a Service
https://developers.google.com/fonts/docs/getting_started

font-family
font-weight
font-font size
letter-spacing
max-width
line-height
Which Font
How Bold/Light
Font Size
Letter Spacing
Measure
Leading
CSS IRL

• X-height
• Stroke contrast
• Reading Test
!
Legibility

Choosing a Typeface
• Appropriate for Context
• Font Quality
• Legibility
• Affordable?

Display vs Body
Poster vs Reading
OR
Appropriate for Context

via Typekit.com

What kind of party?

________ Party

Cocktail Party

________ Party

Slumber Party

___ Party

LAN Party

D&D Party

Slumber Party
LAN Party
D&D Party
Cocktail Party

Set some type;
in context
Read it.
Like it?

Good Inspiration
What do other designers use?
Quality

Font In Use
http://fontsinuse.com/

Typespiration
http://typespiration.com/

Superfamilies
Typefaces with large families
Quality

weights & Styles
Weight & Styles

Character Support
Do you need something that supports other languages?
Quality

https://www.google.com/fonts/specimen/PT+Sans
PT Sans, Characters

Aﬀordable?
Purchasing/Procuring Fonts

http://losttype.com/
theleagueofmoveabletype.com

Not Free Web Fonts
but awesome
^

Foundries
Buy from individuals.
Possibly host yourself

Services
Aggregate Fonts
Usually Host for You

For this Demo
Free
Legible
Book Club Party

1. Leading
2. Measure
3. Kerning
4. Tracking
5. Word Spacing
6. Hyphenation

Leading
The Space between Lines
CSS: line-height
120%-140% of font size
1

MeasureLength of Lines of Text
CSS: max-width
45-80 Character
2

K erning
Spaces between letters
http://xkcd.com/1015/
http://letteringjs.com/
http://www.kernjs.com/
http://kerningjs.com/
3

T r a c k i n g
even spacing between every character
CSS: letter-spacing4

Word Spacing
Avoid messing with wordspacing
CSS: word-spacing5

Hyphenation & Justiﬁcation
Lacking on the web
6

Tempo The sum of leading, measure, kerning,
tracking, word-spacing, and H&J
Narrow, Faster Tempo Wide, Slower Tempo

Leading, Letter spacing, Tracking…

Hierarchy is simply creating
CONTRAST

Contrast
Use size, color, and space
to diﬀerentiate content

Typographic Scale
Like a music scale. Creates harmony.

Organization
Group similar content. Make more important
content more prominent

Edit
Correct grammar & remove
unnecessary content
practicaltypography.com
Additional Resources
smartquotesforsmartpeople.com

Media Queries + Relative Unites
Responsive
Typography 101

Why does our
demo currently
fail?

PX -> (R)EM
Use relative units

/* Target / Context = Result */

Change font-size on
body(%), rest of
document resizes
mmmmmm…. relative units

Use media queries to
establish breakpoints and
make adjustments

90%
<1100px
(Moved Aside to Bottom)
<840px

Headlines are Still too Big
Fix with Media Queries

All kinds of things
Future of WebType

http://ﬁttextjs.com/http://letteringjs.com/
Javascript Steps In

Molten Leading
http://nicewebtype.com/notes/2012/02/03/molten-leading-or-ﬂuid-line-
height/

Face Detection
http://webdesign.maratz.com/lab/responsivetypography/realtime/

http://modularscale.com/scale/?px1=25&px2=1024&ra1=1.25&ra2=0
Abril Text+Titling
The End

Web Typography: A Guide to Choosing Fonts, Layout, and Design

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Web Typography: A Guide to Choosing Fonts, Layout, and Design

Semelhante a Web Typography: A Guide to Choosing Fonts, Layout, and Design (20)

Último

Último (20)

Web Typography: A Guide to Choosing Fonts, Layout, and Design