Choosing and using it well Toshi Omagari
Jan 27, 2015
Choosing and using it well
Toshi Omagari
Web fonts?Embedded fonts?
GREAT!
but . . .
Screen typography is still evolving.
Different font vendors may require different licenses.
Not all devices support all formats.
Font rendering is different from one platform to another.
And not all fonts work well on screen.
Rendering
your typeThis is how we want fonts to appearFont data is delivered as vector outlines with spacing info, and maybe some hints
Font outlines have to become pixelsRasterizers in any given device convert outlines to pixels in a variety of ways
This is how an LCD screen displays pixelsLCD screens allow rendering with subpixels — manipulating each colour channel
This is how a basic E Ink screen displays pixelsEven courser resolution, with only 4 level of grey (16 levels of grey in newer screens)
It’s rough out there
MacOS Safari Windows 7 Firefox
iPad Kindle (E Ink versions)iPhone 4
Type choice
Most fonts out there were designed for other purposes.
All software and device issues aside, that’s why not all fonts work well
on screens.
Vertical proportionsLook at the x-height — the height of the lowercase letters — to see if fonts will match
Verdana
Helvetica Neue
Times New Roman
Baskerville
Georgia
Lucida Grande
Help!
Help!
Help!
Help!
Help!
Help!
Comparison of four fonts at the same sizeNote that the optical size also affects the space between lines
IlIl IlShapesStraight lines and clear forms work better than subtle angles or curves
At small sizes, good hinting can keep these details from causing trouble
Georgia Optima Palatino
Open spacesGenerous spacing within and around the letters will increase legibility
generositygenerosity
Open apertures Loose spacing
Choose families wiselyMakes sure that italic and bold styles look as good as the regular
Choose families wiselyA wide range of weights make it easy to choose a suitable weight for each instance
Openype features for refined typography
Affiliate flag Affiliate flag Ligatures
The 1980s The 1980s Alternative number styles
Nicest egg Nicest egg Swashes and contextual altenates
An EPUB book An epub book Real small caps
→
→
→
→
Type use
Compensate for inconsistencyAdjust the size and line-height as needed to get contrasting fonts to work together
Who can turn the world on with her smile? Who can take a nothing day, and suddenly make it all seem worth-while? Well it’s you girl, and you should know it. With each glance and every little movement you show it. Love is all around, no need to waste it. You can have a town, why don’t you take it. You’re gonna make it after all. You’re gonna make it after all.
Who can turn the world on with her smile? Who can take a nothing day, and suddenly make it all seem worthwhile? Well it’s you girl, and you should know it. With each glance and every lit-tle movement you show it. Love is all around, no need to waste it. You can have a town, why don’t you take it. You’re gonna make it after all. You’re gonna make it after all.
Who can turn the world on with her smile? Who can take a nothing day, and suddenly make it all seem worth-while? Well it’s you girl, and you should know it. With each glance and every little movement you show it. Love is all around, no need to waste it. You can have a town, why don’t you take it. You’re gonna make it after all. You’re gonna make it after all.
Who can turn the world on with her smile? Who can take a nothing day, and suddenly make it all seem worth-while? Well it’s you girl, and you should know it. With each glance and every little movement you show it. Love is all around, no need to waste it. You can have a town, why don’t you take it. You’re gonna make it after all. You’re gonna make it after all.
Helvetica Neue — size: 18px; line-height: 100%
Helvetica Neue — size: 18px; line-height: 20px
Gill Sans — size: 18px; line-height: 100%
Gill Sans — size: 20px; line-height: 100%
Be generousIf in doubt, slightly larger text size and extra line spacing will often be easier to read
Choose colours carefullyContrast between text and background makes fonts easier to rasterize
New typeface choices
SampleSampleSampleSampleSabon and Sabon eText Adjustments to the weight, proportion, and spacing
SampleSampleSampleSample
Helvetica Neue and Helvetica Neue eTextAdjustments to the proportion and spacing
The Crystal GobletThe Crystal GobletThe Crystal GobletThe Crystal Goblet
MalabarA crisp, contemporary design optimised for the screen
MalabarIn use on the Barnes & Noble Nook reader (E Ink)
Everyone’s racing to make better fonts available to you
Hinting existing fonts to look better.
Revising outlines and spacing to look clearer at small sizes.
Designing new fonts specifically for screen display.
So speak up and tell us what you want!