Upload
extensis
View
461
Download
1
Tags:
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
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