Type on Screens: What to Consider and Why - Toshi Omagari, Monotype

1,854 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,854
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Type on Screens: What to Consider and Why - Toshi Omagari, Monotype

  1. 1. Choosing and using it wellToshi Omagari
  2. 2. Web fonts?Embedded fonts?GREAT!
  3. 3. but . . .
  4. 4. Screen typography is still evolving.Different font vendors may requiredifferent licenses.Not all devices support all formats.Font rendering is different from oneplatform to another.And not all fonts work well on screen.
  5. 5. Rendering
  6. 6. your typeThis is how we want fonts to appearFont data is delivered as vector outlines with spacing info, and maybe some hints
  7. 7. Font outlines have to become pixelsRasterizers in any given device convert outlines to pixels in a variety of ways
  8. 8. This is how an LCD screen displays pixelsLCD screens allow rendering with subpixels — manipulating each colour channel
  9. 9. 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)
  10. 10. It’s rough out there
  11. 11. MacOS Safari Windows 7 Firefox
  12. 12. iPad Kindle (E Ink versions)iPhone 4
  13. 13. Type choice
  14. 14. Most fonts out there were designedfor other purposes.All software and device issues aside,that’s why not all fonts work wellon screens.
  15. 15. Vertical proportionsLook at the x-height — the height of the lowercase letters — to see if fonts will matchVerdanaHelvetica NeueTimes New RomanBaskervilleGeorgiaLucida GrandeHelp!Help!Help!Help!Help!Help!
  16. 16. Comparison of four fonts at the same sizeNote that the optical size also affects the space between lines
  17. 17. IlIlIlShapesStraight lines and clear forms work better than subtle angles or curvesAt small sizes, good hinting can keep these details from causing troubleGeorgia Optima Palatino
  18. 18. Open spacesGenerous spacing within and around the letters will increase legibilitygenerositygenerosityOpen apertures Loose spacing
  19. 19. Choose families wiselyMakes sure that italic and bold styles look as good as the regular
  20. 20. Choose families wiselyA wide range of weights make it easy to choose a suitable weight for each instance
  21. 21. Openype features for refined typographyAffiliate flag Affiliate flag LigaturesThe 1980s The 1980s Alternative number stylesNicest egg Nicest egg Swashes and contextual altenatesAn EPUB book An epub book Real small caps→→→→
  22. 22. Type use
  23. 23. Compensate for inconsistencyAdjust the size and line-height as needed to get contrasting fonts to work togetherWho can turn the world on with her smile? Who can takea nothing day, and suddenly make it all seem worth-while? Well it’s you girl, and you should know it. With eachglance and every little movement you show it. Love is allaround, no need to waste it. You can have a town, whydon’t you take it. You’re gonna make it after all. You’regonna make it after all.Who can turn the world on with her smile? Who can take anothing day, and suddenly make it all seem worthwhile? Well it’syou girl, and you should know it.With each glance and every lit-tle movement you show it. Love is all around, no need to wasteit.You can have a town, why don’t you take it.You’re gonna makeit after all.You’re gonna make it after all.Who can turn the world on with her smile? Who can takea nothing day, and suddenly make it all seem worth-while? Well it’s you girl, and you should know it. With eachglance and every little movement you show it. Love is allaround, no need to waste it. You can have a town, whydon’t you take it. You’re gonna make it after all. You’regonna make it after all.Who can turn the world on with her smile? Who cantake a nothing day, and suddenly make it all seem worth-while? Well it’s you girl, and you should know it.Witheach glance and every little movement you show it. Loveis 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’regonna make it after all.Helvetica Neue — size: 18px; line-height: 100%Helvetica Neue — size: 18px; line-height: 20pxGill Sans — size: 18px; line-height: 100%Gill Sans — size: 20px; line-height: 100%
  24. 24. Be generousIf in doubt, slightly larger text size and extra line spacing will often be easier to read
  25. 25. Choose colours carefullyContrast between text and background makes fonts easier to rasterize
  26. 26. New typefacechoices
  27. 27. SampleSampleSampleSampleSabon and Sabon eTextAdjustments to the weight, proportion, and spacing
  28. 28. SampleSampleSampleSampleHelvetica Neue and Helvetica Neue eTextAdjustments to the proportion and spacing
  29. 29. The Crystal GobletThe Crystal GobletThe Crystal GobletThe Crystal GobletMalabarA crisp, contemporary design optimised for the screen
  30. 30. MalabarIn use on the Barnes & Noble Nook reader (E Ink)
  31. 31. Everyone’s racing to make betterfonts available to youHinting existing fonts to look better.Revising outlines and spacing to look clearerat small sizes.Designing new fonts specifically for screendisplay.So speak up and tell us what you want!
  32. 32. Thanks!toshi.omagari@monotype.com

×