Gimme a hint on hinting

All about font hinting, subpixel rendering, and ponies in browsers

Transcript

1. Client: #ENGELHORN #07.07.2014 00001110 Slide Project: #Workshop 1
2. NEVILLE BRODY „Typography has to do with ’mood-setting’ before the message is delivered. Typography is a hidden tool of manipulation within society.“
3. We’ve come a long way
4. from here…
6. …to now
11. font goes digital - what’s the big deal?
12. Well they call this „hinting“ for a reason
13. Ideal shape, black-and-white and grayscale rendering http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
15. Hinting, or screen optimizing, is the process by which fonts are adjusted for maximum readability on computer monitors. https://www.typotheque.com/articles/hinting
16. Modern fonts are not designed primarily for the 72–96 dpi resolution of computer screens. https://www.typotheque.com/articles/hinting
17. This is the reason that webpage designers have long been more or less limited to a dozen or so fonts (Verdana, Georgia, Arial, etc.) https://www.typotheque.com/articles/hinting
18. Font hinting A font test without hinting (upper rows) and with hinting (lower rows). Note the increased edge contrast with the hinted text but more faithful character shape and more natural inter-character spacing in the unhinted text. http://en.wikipedia.org/wiki/Hinting
19. Every letter is basically designed for each point size again. https://www.typotheque.com/articles/hinting
20. Mac OS vs. Windows
21. font character vs. readability
22. Microsoft’s rasteriser tries to align characters to whole pixel grid, with the result that ‘Regular’ weights look lighter, ‘Bold’ weights look heavier, and subtle details of design can be lost at small point sizes. https://www.typotheque.com/articles/hinting
23. Microsoft generally believes that the shape of each letter should be hammered into pixel boundaries to prevent blur and improve readability, even at the cost of not being true to the typeface. http://www.joelonsoftware.com/items/2007/06/12.html
24. Apple’s rasteriser tries to preserve the design of the typeface as much as possible, sometimes at the cost of image clarity. https://www.typotheque.com/articles/hinting
25. Apple generally believes that the goal of the algorithm should be to preserve the design of the typeface as much as possible, even at the cost of a little bit of blurriness. http://www.joelonsoftware.com/items/2007/06/12.html
27. RENDERING TYPES ! Grayscale GDI ClearType Direct Write
28. http://readableweb.com/font-hinting-explained-by-a-font-design-master/
29. Without anitalising
32. Grayscale
35. GDI ClearType
38. Direct Write
41. vs
42. vs TRUETYPE quadratische Bézierkurven POSTSCRIPT kubische Bézierkurven Umriss-Technologie
43. vs TRUETYPE quadratische Bézierkurven POSTSCRIPT kubische Bézierkurven Umriss-Technologie
44. POSTSCRIPT kubische Bézierkurven TRUETYPE quadratische Bézierkurven OPENTYPE
46. Rendering modes used by Windows browsers. http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ GDI: Graphics Device Interface i 37
47. Src: Google for „Browser Ponys“
48. „Quartz [today: CoreText] rendering is reliable because it doesn’t try to be smart.„ http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
49. Examples
50. TrueType font rendering with Windows grayscale.
51. TrueType font rendering with Windows GDI ClearType.
52. TrueType font rendering with DirectWrite.
53. PostScript font rendering with GDI grayscale.
54. PostScript font rendering with DirectWrite.
55. Unhinted font rendered with grayscale.
56. Unhinted TrueType font in GDI-ClearType rendering.
57. Unhinted font rendered with DirectWrite.
58. Font rendering in Mac OS X.
59. Font rendering in iOS.
60. @silkine