This document discusses best practices for using fonts on screens. It notes that screen typography is still evolving and font rendering can vary across platforms and devices. Different formats and licenses may be required for web fonts versus embedded fonts. When rendering fonts on screens, rasterizers convert vector outlines to pixels in different ways depending on the device. The document provides examples of how LCD and e-ink screens display pixels. It recommends choosing fonts designed for screens that have vertical proportions, shapes, spacing, and weights suitable for small sizes. Adjusting line height and size can improve readability when combining fonts. Font designers are working to optimize existing fonts and design new fonts specifically for legibility on screens.

1. Choosing and using it well
Toshi Omagari

2. Web fonts?
Embedded fonts?
GREAT!

3. but . . .

4. 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.

5. Rendering

6. your type
This is how we want fonts to appear
Font data is delivered as vector outlines with spacing info, and maybe some hints

7. Font outlines have to become pixels
Rasterizers in any given device convert outlines to pixels in a variety of ways

8. This is how an LCD screen displays pixels
LCD screens allow rendering with subpixels — manipulating each colour channel

9. This is how a basic E Ink screen displays pixels
Even courser resolution, with only 4 level of grey (16 levels of grey in newer screens)

10. It’s rough out there

11. MacOS Safari Windows 7 Firefox

12. iPad Kindle (E Ink versions)iPhone 4

13. Type choice

14. 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.

15. Vertical proportions
Look 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!

16. Comparison of four fonts at the same size
Note that the optical size also affects the space between lines

17. IlIlIlShapes
Straight 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

19. Open spaces
Generous spacing within and around the letters will increase legibility
generosity
generosity
Open apertures Loose spacing

20. Choose families wisely
Makes sure that italic and bold styles look as good as the regular

21. Choose families wisely
A wide range of weights make it easy to choose a suitable weight for each instance

22. 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
→
→
→
→

23. Type use

25. Compensate for inconsistency
Adjust 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%

26. Be generous
If in doubt, slightly larger text size and extra line spacing will often be easier to read

27. Choose colours carefully
Contrast between text and background makes fonts easier to rasterize

28. New typeface
choices

29. Sample
Sample
Sample
Sample
Sabon and Sabon eText
Adjustments to the weight, proportion, and spacing

30. Sample
Sample
Sample
Sample
Helvetica Neue and Helvetica Neue eText
Adjustments to the proportion and spacing

31. The Crystal Goblet
The Crystal Goblet
The Crystal Goblet
The Crystal Goblet
Malabar
A crisp, contemporary design optimised for the screen

32. Malabar
In use on the Barnes & Noble Nook reader (E Ink)

33. 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!

34. Thanks!
toshi.omagari@monotype.com