When it comes to the font rendering on the Web, the designer cannot do much. For example, how the font looks on the screen. For the most part, it depends on the operating systems, browsers, typefaces’ design, font files, and on whether these files are supplemented by the instructions for the most unexpected scenarios of the rendering. But sometimes the CSS properties can affect how the font looks like.


Note: the screenshots shows the font rendering in Safari 5 on MakOsi 10.6.

Font size

Slight changes of the font size can greatly affect the appearance of the typeface

First of all, there is the property of font size. Rasterization of vector contours for the font sizes that adequate to the modern screens means that each letter is represented by only the handful of pixels. Therefore, a small difference in the font size can greatly affect the appearance of the typeface.

Color

Property of color is another important factor. When we change the contrast between the colors of text and background, we can get a noticeable difference in the appearance of the typeface. Anti-aliasing looks less noticeable in the low contrast - the transition from the foreground (font color) to the background becomes less catchy.


High contrast; dark text on the light background


Weak contrast


Light text on the dark background

Light text on the dark background tends to look thicker than the dark to the light (let us see a research on the subject, made by Shawn Blanc), therefore, we should pay a particular attention to the low contrast in such cases. Take into consideration that the lack of contrast may cause difficulties for the readers with visual impairment. Utility Colour Contrast Check that is written by Jonathan Snook examines the background color and foreground against the WCAG.

WebKit and the font smoothing

Property of Webkit-font-smoothing (only works in browsers that support s WebKit) allows the designer to specify one of three options: subpixel-antialiased (default), antialiased, or none. Tim Van Damme has shown that “antialised”, usually makes the text thinner in Safari on Macs, which made the designers very happy, because they previously used other properties, for example, text-shadow made the text to look less awkward.

Others guys were questioning the use of webkit-font-smoothing as a means of sharpening the text, though it is a prefix, and not posthack. Christoph Zillgens affirms that the diagonal lines look bad whenthe subpixels’ anti-aliasing is switched off, Dmitry Fadeev said that the small text less sharp.

Rotations

Perhaps, it is obvious that the rotation of the text leads to the problems with the rendering. Flat conversions in CSS3 allow the designers to rotate the elements, as explained Andy Clark in his article concerning Typekit, although by using this hint we can achieve the desired graphic result.


Screenshot of the text that are rotated at an angle of 90o; the image is unfolded


Screenshot of the text that are rotated at an angle of 45o; the image is unfolded


Screenshot of the text in Safari Mobile that are rotated at an angle of 45o; the image is unfolded

Conclusion

The font rendering does not depend on the web designer. But it is important to remember that we can achieve the desired result by using the certain controlled styles. Keep in mind that during testing the different styles of contrast, size, color and rotation can lead to the significant differences.