Your web font is crap - webvisions pdx 2014

Presented by Jim Kidwell

Your Web Font is Crap How to Choose and Use a Better One

http://extens.is/webv

The Web can be an ugly place

http://extens.is/webv

http://extens.is/webv

http://extens.is/webv

http://extens.is/webv

http://extens.is/webv

But it doesn’t need to be that way

http://extens.is/webv

How to prevent suckage

1.  Define your audience

2.  Use real web fonts

3.  Examine your fonts carefully

4.  Implement it properly

5.  Test the features

http://extens.is/webv

Who is your

intended audience?

http://extens.is/webv

Maybe…

Comic Sans = Science!

http://extens.is/webv

Perhaps for

primary schools

http://extens.is/webv

Defining Audience

is Critical

http://extens.is/webv

Still relying on

“web safe” fonts

http://extens.is/webv

Comic Sans Impact

Arial Black Arial / Helvetica"

Trebuchet

Verdana

Courier/Courier New

Times (New) Roman Georgia!

Comic Sans Impact

Arial Black Arial / Helvetica"

Trebuchet

Verdana

Courier/Courier New

Times (New) Roman Georgia!

Comic Sans Impact

Arial Black Arial / Helvetica"

Trebuchet

Verdana

Courier/Courier New

Times (New) Roman Georgia!

http://extens.is/webv

Real web fonts

•  Come from a server

•  Provides brand consistency

•  Allow easily updated text

•  Can be made responsive with media queries

http://extens.is/webv

It’s not just you.

Let’s talk fruit

http://extens.is/webv

Using web fonts now? Good.

http://extens.is/webv

Examine your fonts for quality

http://extens.is/webv

Good fonts compensate for the tricks our eyes play •  Point placement •  Spacing •  Kerning •  Overshoot •  Stroke interactions •  Straight to curve

transitions

•  Round vs. straight •  Caps vs. lowercase •  Even weight •  Stretching •  Midline position •  Perfect circles

https://www.commarts.com/columns/know-font-sucks.html

http://extens.is/webv

Character Spacing & Kerning

When it’s bad, spacing between characters is uneven

http://extens.is/webv

Character Spacing & Kerning

When it’s good, spacing is even

Overshoot

Stroke Intersections

Stroke Intersections

http://extens.is/webv

Hinting

•  Best utilize OS & display

•  Turn on/off best pixels

•  Hand-hinted, Auto or Nothing

Hinting – GDI - Greyscale

http://blog.webink.com/why-fonts-suck-windows-hinting/

Hinting - ClearType

http://blog.webink.com/why-fonts-suck-windows-hinting/

http://extens.is/webv

Good Fonts Include

•  Full basic character set

•  Extended characters for additional languages

•  Ligatures

•  Contextual alternates

•  Small Caps

http://extens.is/webv

Testing your font selection

1.  Implement properly

2.  Turn on OpenType features

3.  Test font in targeted browser/OS combinations

http://extens.is/webv

Implementation

Best Practices

http://extens.is/webv

Bigger Body Text

•  Legible ≠ Comfortable!

•  Most web text unnecessarily small •  Average 9–12 px

•  Suggested default: 14–16 px

•  Ideal size varies by font •  Different x-height

•  Minimum legible varies

http://extens.is/webv

Limit & Control Line Length

•  Impacts reading comfort

•  Aim for 55–75 characters/line

•  Type size ×30 is a good start •  width: 30em;

•  Or, use max •  max-width: 30em;

http://extens.is/webv

Use OpenType features in CSS

•  Contextual Alternates

•  Ligatures

•  Contextual Ligatures

•  Kerning

•  OptimizeLegibility (Older Browser Support)

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Use OpenType features in CSS

•  OpenType is font file type

•  OpenType features ≠ file type

•  Not all features are in all fonts

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Use OpenType features in CSS

body { -moz-font-feature-settings:"calt", "liga", "clig", "kern"; -moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1"; -ms-font-feature-settings:"calt", "liga", "clig", "kern"; -o-font-feature-settings:"calt", "liga", "clig", "kern"; -webkit-font-feature-settings:"calt", "liga", "clig", "kern"; font-feature-settings:"calt", "liga", "clig", "kern"; text-rendering:optimizeLegibility; }

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Contextual Alternates

body { -moz-font-feature-settings:"calt", "liga", "clig", "kern"; -moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1"; -ms-font-feature-settings:"calt", "liga", "clig", "kern"; -o-font-feature-settings:"calt", "liga", "clig", "kern"; -webkit-font-feature-settings:"calt", "liga", "clig", "kern"; font-feature-settings:"calt", "liga", "clig", "kern"; text-rendering:optimizeLegibility; }

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Contextual Alternates

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Ligatures

body { -moz-font-feature-settings:"calt", "liga", "clig", "kern"; -moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1"; -ms-font-feature-settings:"calt", "liga", "clig", "kern"; -o-font-feature-settings:"calt", "liga", "clig", "kern"; -webkit-font-feature-settings:"calt", "liga", "clig", "kern"; font-feature-settings:"calt", "liga", "clig", "kern"; text-rendering:optimizeLegibility; }

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Ligatures

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Contextual Ligatures

body { -moz-font-feature-settings:"calt", "liga", "clig", "kern"; -moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1"; -ms-font-feature-settings:"calt", "liga", "clig", "kern"; -o-font-feature-settings:"calt", "liga", "clig", "kern"; -webkit-font-feature-settings:"calt", "liga", "clig", "kern"; font-feature-settings:"calt", "liga", "clig", "kern"; text-rendering:optimizeLegibility; }

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Contextual Ligatures

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Kerning

body { -moz-font-feature-settings:"calt", "liga", "clig", "kern"; -moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1"; -ms-font-feature-settings:"calt", "liga", "clig", "kern"; -o-font-feature-settings:"calt", "liga", "clig", "kern"; -webkit-font-feature-settings:"calt", "liga", "clig", "kern"; font-feature-settings:"calt", "liga", "clig", "kern"; text-rendering:optimizeLegibility; }

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Kerning

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

Use OpenType features in CSS

body { -moz-font-feature-settings:"calt", "liga", "clig", "kern"; -moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1"; -ms-font-feature-settings:"calt", "liga", "clig", "kern"; -o-font-feature-settings:"calt", "liga", "clig", "kern"; -webkit-font-feature-settings:"calt", "liga", "clig", "kern"; font-feature-settings:"calt", "liga", "clig", "kern"; text-rendering:optimizeLegibility; }

http://blog.webink.com/opentype-features-css/

http://extens.is/webv

More OpenType feature codes

•  Oldstyle figures: onum

•  Proportional figures: pnum

•  Small caps from caps: s2sc

•  Small caps from lowercase: smcp

•  Discretionary/historical ligs: dlig, hlig

•  Stylistic Sets: #2, #14: ss02, ss14

http://extens.is/webv

Contact, Resources, Q&A Jim Kidwell, Extensis www.extensis.com @jimkidwell

Slides & More Resources:

http://www.extensis.com/web-fonts/webvisions