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!

Thanks!toshi.omagari@monotype.com