Fedra Sans Screen

About computer screen optimising (hinting)

Hinting instructions give the designer a tool to correct the way the computer displays the characters on the screen. In technical terms, the designer can manipulate the TrueType outlines prior to rasterization, specifying which pixels (the smallest ‘dot’ that the monitor can display) will be turned on or off, to ensure maximum legibility and aesthetic quality.

Most commercially available fonts were designed primarily to look good when printed: their designers have invested a lot of effort into making sure that they function well on paper, while largely overlooking how they appear on computer monitors. However, due to the relentless pace of technological change and its impact on how we work, we spend more and more time reading from the screen rather than from printed materials.

While hinting instructions provide the designer with a tremendously powerful tool, the hinting process itself is tremendously labour-intensive, particularly if the designer uses delta-hinting to hand edit each character at each point size. Verdana, a popular screen-optimized font, is the result of years of work. The development of Fedra Sans Screen involved hinting for over 1,560 characters in four weights at every size from 9 ppem to 64 ppem (The standard resolution-independent measure of type size), or over 40,000 programming instructions. The amount of effort involved explains why screen-optimized fonts are relatively rare.

The examples on the right shows hinted and unhinted screen rendering of the fonts, showing that careful hinting produces fine-tuned text that is easier to read, even at small point sizes on low-resolution devices such as computer monitors and (older) laser printers. And of course, the quality of printed characters remains as high as ever.
More information about hinting.

 Back

Black and White rendering, 1-bit

Black and White rendering of an unhinted font, at 10 ppem, magnified to 200%

Black and White rendering of an unhinted font, at 10 ppem, magnified to 200%

Black and White rendering of an hinted font , at 10 ppem, magnified to 200%

Black and White rendering of an hinted font, at 10 ppem, magnified to 200%

Greyscale rendering, 4-bit or 8-bit

Grey-scale rendering of an unhinted font, at 10 ppem, magnified to 200%

Grey-scale rendering of an unhinted font, at 10 ppem, magnified to 200%

Grey-scale rendering of an hinted font , at 10 ppem, magnified to 200%

Grey-scale rendering of an hinted font, at 10 ppem, magnified to 200%

ClearType rendering

ClearType rendering of an unhinted font, at 10 ppem, magnified to 200%

ClearType rendering of an unhinted font, at 10 ppem, magnified to 200%

ClearType rendering of an hinted font , at 10 ppem, magnified to 200%

ClearType rendering of an hinted font, at 10 ppem, magnified to 200%

DirectWrite rendering

DirectWrite rendering of an unhinted font, at 10 ppem, magnified to 200%

DirectWrite rendering of an unhinted font, at 10 ppem, magnified to 200%

DirectWrite rendering of an hinted font , at 10 ppem, magnified to 200%

DirectWrite rendering of an hinted font, at 10 ppem, magnified to 200%