Download pdf - 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






But it doesn’t need to be that way


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


Who is your

intended audience?


Maybe…

Comic Sans = Science!


Perhaps for

primary schools


Defining Audience

is Critical


Still relying on

“web safe” fonts


Comic Sans Impact

Arial Black Arial / Helvetica"

Trebuchet

Verdana

Courier/Courier New

Times (New) Roman Georgia!

Comic Sans Impact


Trebuchet

Verdana

Courier/Courier New


Comic Sans Impact


Trebuchet

Verdana

Courier/Courier New



Real web fonts

•  Come from a server

•  Provides brand consistency

•  Allow easily updated text

•  Can be made responsive with media queries


It’s not just you.

Let’s talk fruit


Using web fonts now? Good.


Examine your fonts for quality


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


Character Spacing & Kerning

When it’s bad, spacing between characters is uneven


Character Spacing & Kerning

When it’s good, spacing is even

Overshoot

Stroke Intersections

Stroke Intersections


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/


Good Fonts Include

•  Full basic character set

•  Extended characters for additional languages

•  Ligatures

•  Contextual alternates

•  Small Caps


Testing your font selection

1.  Implement properly

2.  Turn on OpenType features

3.  Test font in targeted browser/OS combinations


Implementation

Best Practices


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


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;


Use OpenType features in CSS

•  Contextual Alternates

•  Ligatures

•  Contextual Ligatures

•  Kerning

•  OptimizeLegibility (Older Browser Support)

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



•  OpenType is font file type

•  OpenType features ≠ file type

•  Not all features are in all fonts




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; }



Contextual Alternates




Contextual Alternates



Ligatures




Ligatures



Contextual Ligatures




Contextual Ligatures



Kerning




Kerning







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


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

Slides & More Resources:

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