Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
•
1 like•2,088 views
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.
More Related Content
Viewers also liked
Similar to Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
Similar to Type on Screens: What to Consider and Why - Toshi Omagari, Monotype (20)
More from City University London
More from City University London (20)
Recently uploaded
Recently uploaded (20)
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
- 1. Choosing and using it well Toshi Omagari
- 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)
- 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
- 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!