Typophile

Legend of Raster: Glyph's Quest for Pixel Solace

Tim Brown0 votes

I'm still trying to wrap my head around what exactly is in between a font's vector outlines and what we see on screen in web browsers. Based on a little reading, as well as the excellent replies in a previous thread (Who else wants to understand hinting?), this is the gauntlet I imagine a glyph must survive on its way to being rendered in a web page...

  1. A glyph starts as a bezier-based shape.
  2. This shape is made in or brought into a font-creation program like FontLab.
  3. Settings like UPM (units per em), key dimensions (for vertical measurements like x-height, cap height, ascenders and descenders), and metrics (for horizontal measurements like sidebearings and kerning) determine how the letterform will act as a glyph in a font—e.g., how much room it will occupy at a given size, how close other letters may live.
  4. Hinting or instructions are added (automatically and/or manually) which can provide directions for conservation of the fonts design character in environments where less-than ideal output is to be employed.
  5. The glyph is exported as part of a font, in either OTF or TTF format (in this context, I am ignoring all other formats—let me know if I shouldn't). TrueType hints are ditched if the font is OTF.
  6. The glyph is confronted by operating-system-level and browser-level rendering algorithms. I am still trying to list these combinations for myself. I would want to cross-reference technologies like Quartz and ClearType with headings like OS rendering engine, browser rendering engine, result of combination (overrides, any ignored font data).
  7. User settings in various places (browser preferences, OS preferences) can modify how and when the rendering engines interact with font files. Windows users can turn ClearType on or off. Users can turn antialiasing off altogether. Certain preferences can limit the size at which antialiasing is applied. Listing these variables is another item on my to-do list.
  8. Finally, there are the physical qualities of a user's hardware, such as the kind of monitor they use, its resolution, whether they run it at native resolution or not, and their settings for color and luminosity.

Have I missed any steps or failed to articulate these well enough? What details might you add? Also, sorry the title of this thread is so juicy compared to the content! What a way to start a conversation about rasterization, eh?

Theunis de Jong0 votes

For the physical part -- #6. Rendering -- you could do no better than reading up on FreeType. Much of it is dedicated to pure code, but there is also lots of theoretical stuff.

A side-track could be Maxim Shemanarov's Antigrain Library -- he has a nice page on rendering type as well, and even more theoretical stuff on the physics of antialiasing.

On a more technical note, the divide in font technology is not "OpenType/TTF" but rather "CFF/TTF". Microsoft's 'TTF' technology uses TrueType curves & hints, Adobe's 'CFF' uses PostScript curves and PostScript hints (not sure about the latter--wasn't Adobe phasing these out for OTF?). Both filetypes can have an OpenType wrapper; TTFs can also have a TTF wrapper.

Dyana Weissman0 votes

Nitpicking:

2. This shape is brought into a font-creation program like FontLab.

I would add:

2. This shape is made in or brought into a font-creation program like FontLab.

John Hudson0 votes

Both filetypes can have an OpenType wrapper; TTFs can also have a TTF wrapper.

Better to say that CFF is implemented within OpenType by placing the PS outlines and hints within an sfnt structure; whereas TTF is by definition an sfnt structure.

John Hudson0 votes

If you have not already, be sure to read Beat Stamm's excellent article The raster tragedy at low resolution. Some of its starting observations—e.g. ‘The screen is a regularly spaced grid of black and white dots’—are now obsolete, but as an introduction to why hinting is necessary this remains a good read.

Tim Brown0 votes

Good call, Dyana. I made the change.

Thanks for the link to Stamm's piece, John. I have read this ... but years ago, and it will be good to refresh. More recently I've thumbed through Leslie Cabarga's Learn FontLab Fast.

Theunis, John, you lost me on the font formats. I need to digest this some more.

Theunis, the Anti-Grain link didn't come through right at first. I found the site, though, and I'm looking at it now. Whoa. Lots of stuff here. I'm not sure where to start. Where's the page you're thinking of?

Theunis de Jong0 votes

http://www.antigrain.com/research/font_rasterization/index.html

Its first paragraph mentions a Joel Spolsky article you might already have seen. If not, do read it first :-)

The font format difference is a nitpick I mentioned because, well, frankly, you started! ;-)
Maybe it's not necessary to differ between OTF, CFF, or TTF or otherwise; it's the definition-as-curves that's important in the file format.

David Berlow0 votes

Better to say: Hinting or instructions are added (automatically and/or manually) which can provide directions for conservation of the fonts design character in environments where less-than ideal output is to be employed.

Hinting instructions are two confused fused terms. "Suggestions" about stem width, alignment zones, overlap management, is not a great term, for though TT instructions, and T1 hints do turn off, when turned on, they are simply obeyed, unlike a suggestion, which by definition may be ignored, just like this one. And—for TrueType hinting—actual pixel placement is never defined only actual outline placement is. This is a subtle difference, perhaps, though I would suggest it is crucial to understanding.

As for reading Beat Stamm’s excellent article "The raster tragedy at low resolution", please remember this article is old, out of date in many respects, discussing only TT instructing for black and white fonts which is not terribly important today, and based on a world where TT instructions were interpreted by default in environments where less-than ideal output is to be employed, which is no longer the case.

>What details might you add?

This is pretty good overall.

Cheers!

Tim Brown0 votes

Nice! This piece from Karsten Lücke seems to address the font format differences directly: http://kltf.de/kltf_notes_raster.htm

Hat tip: Typographica

Tim Brown0 votes

I should say also: thanks very much, Theunis and David. I'm in the middle of the reading material you and others in this thread have recommended, so I haven't replied properly yet. Just wanted to post the link to Karsten's piece so everybody knew about it.

Alex Klages0 votes

The title of the thread is just screaming for a homebrew Nintendo DS game or something. Good resources in the thread!

Captured from web.archive.org on 18 Jul 2019. view this capture