55
Presented by Jim Kidwell Your Web Font is Crap How to Choose and Use a Better One

Your web font is crap - webvisions pdx 2014

Embed Size (px)

DESCRIPTION

Are you certain that your choice and implementation of fonts on the web is living up to your expectations? Shared at WebVisions Portland 2014, Jim Kidwell goes through what makes good use of fonts on the web.

Citation preview

Page 1: 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

Page 2: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

The Web can be an ugly place

Page 3: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Page 4: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Page 5: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Page 6: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Page 7: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

But it doesn’t need to be that way

Page 8: Your web font is crap - webvisions pdx 2014

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

Page 9: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Who is your

intended audience?

Page 10: Your web font is crap - webvisions pdx 2014
Page 11: Your web font is crap - webvisions pdx 2014
Page 12: Your web font is crap - webvisions pdx 2014
Page 13: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Maybe…

Comic Sans = Science!

Page 14: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Perhaps for

primary schools

Page 15: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Defining Audience

is Critical

Page 16: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Still relying on

“web safe” fonts

Page 17: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Comic Sans Impact

Arial Black Arial / Helvetica"

Trebuchet

Verdana

Courier/Courier New

Times (New) Roman Georgia!

Page 18: Your web font is crap - webvisions pdx 2014

Comic Sans Impact

Arial Black Arial / Helvetica"

Trebuchet

Verdana

Courier/Courier New

Times (New) Roman Georgia!

Page 19: Your web font is crap - webvisions pdx 2014

Comic Sans Impact

Arial Black Arial / Helvetica"

Trebuchet

Verdana

Courier/Courier New

Times (New) Roman Georgia!

Page 20: Your web font is crap - webvisions pdx 2014

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

Page 21: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

It’s not just you.

Let’s talk fruit

Page 22: Your web font is crap - webvisions pdx 2014
Page 23: Your web font is crap - webvisions pdx 2014
Page 24: Your web font is crap - webvisions pdx 2014
Page 25: Your web font is crap - webvisions pdx 2014
Page 26: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Using web fonts now? Good.

Page 27: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Examine your fonts for quality

Page 28: Your web font is crap - webvisions pdx 2014

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

Page 29: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Character Spacing & Kerning

When it’s bad, spacing between characters is uneven

Page 30: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Character Spacing & Kerning

When it’s good, spacing is even

Page 31: Your web font is crap - webvisions pdx 2014

Overshoot

Page 32: Your web font is crap - webvisions pdx 2014

Stroke Intersections

Page 33: Your web font is crap - webvisions pdx 2014

Stroke Intersections

Page 34: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Hinting

•  Best utilize OS & display

•  Turn on/off best pixels

•  Hand-hinted, Auto or Nothing

Page 35: Your web font is crap - webvisions pdx 2014

Hinting – GDI - Greyscale

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

Page 36: Your web font is crap - webvisions pdx 2014

Hinting - ClearType

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

Page 37: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Good Fonts Include

•  Full basic character set

•  Extended characters for additional languages

•  Ligatures

•  Contextual alternates

•  Small Caps

Page 38: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Testing your font selection

1.  Implement properly

2.  Turn on OpenType features

3.  Test font in targeted browser/OS combinations

Page 39: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Implementation

Best Practices

Page 40: Your web font is crap - webvisions pdx 2014

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

Page 41: Your web font is crap - webvisions pdx 2014

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;

Page 42: Your web font is crap - webvisions pdx 2014

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/

Page 43: Your web font is crap - webvisions pdx 2014

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/

Page 44: Your web font is crap - webvisions pdx 2014

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/

Page 45: Your web font is crap - webvisions pdx 2014

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/

Page 46: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Contextual Alternates

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

Page 47: Your web font is crap - webvisions pdx 2014

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/

Page 48: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Ligatures

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

Page 49: Your web font is crap - webvisions pdx 2014

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/

Page 50: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Contextual Ligatures

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

Page 51: Your web font is crap - webvisions pdx 2014

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/

Page 52: Your web font is crap - webvisions pdx 2014

http://extens.is/webv

Kerning

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

Page 53: Your web font is crap - webvisions pdx 2014

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/

Page 54: Your web font is crap - webvisions pdx 2014

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

Page 55: Your web font is crap - webvisions pdx 2014

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