Webfonts talk

281 views

Published on

A talk I gave at Cog Design, a multidisciplinary agency I used to work at based out of Greenwich, London

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
281
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webfonts talk

  1. 1. How text is rendered within Mac OS/Windows, and how this affects the fontswe use on websites .By Jack ArmleyHow text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 1
  2. 2. The process 2 Application passes request to the rasterizer of its choice 1 3 User requests a font size/face from within an application to bitmap info, at the correct size. 4 Bitmap information is rendered within the applicationHow text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 2
  3. 3. Font files .OT/CFF .TTF OpenType/Compact Font Format TrueType FormatHow text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 3
  4. 4. TrueType (TTF) Δ Released by Apple in March 1991 Δ Stores information quadratic bezier curves Δ “Hinting” can be included at specified sizes / size ranges .TTFHow text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 4
  5. 5. “Hinting” is a way ofmanipulating a character’soutline to ensure it layscorrectly over the pixel grid.How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 5
  6. 6. Unhinted text (14ppem) Hinted text (14ppem)How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 6
  7. 7. OpenType/Compact Font Format (OT/CFF) Δ Released by Adobe and Microsoft in 1996 Δ Stores information as cubic bezier curves, using a Truetype or Postrscipt Outline Δ Hinting is not included in the file, but is left to the rasterizer Δ Font sets are 20-50% smaller than comparable TT fonts, due to .OT/CFF “subroutinization”How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 7
  8. 8. RasterizationHow text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 8
  9. 9. Greyscale antialiasingHow text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 9
  10. 10. A CRT monitor’s pixel makeupHow text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 10
  11. 11. An LCD monitor’s pixel makeupHow text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 11
  12. 12. Subpixel antialiasingSubpixel antialiasingexploits the sub-pixelsof an LCD monitor,effectivtly tripling thehorizontal resolution oftext.How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 12

×