Your web font is crap - webvisions pdx 2014
description
Transcript of 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