Web Typography, A Long Dark

Web TypographyA 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 typographersYes, you, internet people

Ryan LaBouveUX • Designer • Typographer

me

@RyanLaBouve

@RyanLaBouve

HolyArchers

@RyanLaBouve

Soon to be Dad

@RyanLaBouve

@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 proficiency

What you need to know to be good

Good News

Our Project

http://publicdomainreview.org/collections/george-withers-emblem-book-1635/

Before

After

History

Where do letters come from?

The history of typography reflects 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 five 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)

Invention of Movable Type

Evolution of Type

Gutenberg’s Textura (1450) Garamond (1530)

Old StyleTextura

http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/

Transitional

Caslon (1720) Bodoni (1798)

Modern


Humanist Sans

Gill Sans (1926)

Egyptian/Slab Serif

1815


Geometric Sans

FuturaHelvetica

Transitional Sans-serif


Digital Type

Bitmap Fonts Word Processing

Now Everyone’s a Typography

Bleeding Cowboy Lobster

Payparus

Digital fonts, human origins

Demo

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

Content + Reset

Add Markup

Organize

Define Containers

Choosing Typeface

Typographic Scale

Proofread, Edit, Augment

Typographic Hierarchy

Before/After

Mechanics

Quick Technical Disclaimer

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 fontshttp://css-tricks.com/snippets/css/using-font-face/Self Hosting

Generating Fonts for the Webhttp://www.fontsquirrel.com/tools/webfont-generator

Using a Servicehttps://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

Anatomy of a Typeface

• 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


___ Party


D&D Party

Slumber Party


LAN Party

D&D Party

Cocktail Party

Set some type; in context

Read it. Like it?


Good InspirationWhat do other designers use?

Quality

Font In Usehttp://fontsinuse.com/

Typespirationhttp://typespiration.com/

http://typespiration.com/

SuperfamiliesTypefaces with large families

Quality

weights & Styles Weight & Styles

Character SupportDo you need something that supports other languages?

Quality

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

Affordable?Purchasing/Procuring Fonts

Free Web Fonts

http://losttype.com/

theleagueofmoveabletype.com

http://losttype.com/

http://theleagueofmoveabletype.com

Not Free Web Fontsbut awesome

^

FoundriesBuy from individuals. Possibly host yourself

ServicesAggregate Fonts

Usually Host for You

For this DemoFree

Legible Book Club Party

https://www.google.com/fonts

Narrowed it down

Paragraphs

Typesetting Tricks

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

LeadingThe Space between Lines

CSS: line-height

120%-140% of font size

1

MeasureLength of Lines of Text

CSS: max-width

45-80 Character2

K erningSpaces between letters

http://xkcd.com/1015/

http://letteringjs.com/

http://www.kernjs.com/

http://kerningjs.com/

3

T r a c k i n geven spacing between every character

CSS: letter-spacing 4

Word SpacingAvoid messing with wordspacing

CSS: word-spacing 5

Hyphenation & JustificationLacking on the web

6

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

Narrow, Faster Tempo Wide, Slower Tempo

Nothing Done

Measure

Leading, Letter spacing, Tracking…

Hierarchy

Hierarchy is simply creating

CONTRAST

ContrastUse size, color, and space to differentiate content

Typographic ScaleLike a music scale. Creates harmony.

OrganizationGroup similar content. Make more important content more prominent

EditCorrect grammar & remove unnecessary content

practicaltypography.comAdditional Resources

smartquotesforsmartpeople.com

http://practicaltypography.com

http://smartquotesforsmartpeople.com

Strategies

Media Queries + Relative Unites

Responsive Typography 101

Why does our demo currently

fail?

Phones.

Solution

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

Adjust via breakpoints

font-size: 100%>1100px

90%<1100px

(Moved Aside to Bottom)<840px

90%Before Now

<590

Target Specific Problems

Headlines are Still too Big Fix with Media Queries

Before Now

All kinds of things

Future of WebType

http://fittextjs.com/http://letteringjs.com/

Javascript Steps In

Molten Leading

http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/

Face Detection

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

Dynamic Resizing

http://modularscale.com/scale/?px1=25&px2=1024&ra1=1.25&ra2=0

Abril Text+Titling

The End

Web Typography, A Long Dark

Design

Transcript of Web Typography, A Long Dark