New Perspectives On Web Design

By Marko Dugonjić CHAPTER 9

iA graded fonts

In print design there is rough paper; in Web design there is a coarse
low resolution screen, so the same approach can be applied. Designers at
Information Architects^84 led by Oliver Reichenstein use graded fonts^85 to
normalize the appearance of text across different resolutions. They embed
three different grades:

• the default, non-Retina grade


• the Retina landscape grade


• and the Retina portrait grade

Since you are a CSS-literate, the code is self-explanatory:

@font-face {
font-family: '-graded font';
...
}

@media only screen and (min-device-pixel-ratio: 1.5) {
@font-face {
font-family: '+graded font';
...
}
}

84 http://ia.net
85 The comprehensive list of graded fonts can be found at Typophile forums
http://typophile.com/node/81483 — you will be amazed at the selection.