Introduced in the CSS3 specification, the rem behaves much like the em: it’s a relative unit of measurement, sizing text up or down from a baseline value. But the rem is sized relative to the root of your document—in other words, the value set on the body element.

Each calling card is hand printed on a 1902 Chandler and Price letterpress. For $75 you get 100 personalized cards with your name and the option of either your email or phone number printed on 100% 110lb cotton paper.

It's ironic that an exhibition on the history of printing is available only online, but in this case, I am delighted it is available. One of the country's premiere libraries on graphic communication history and practices, The Cary Graphic Arts Collection at the Rochester Institute of Technology, presents the online exhibit, The Printer's Manual, An Illustrated History. There  are 31 images on classic and unusual texts on printing from the 17th, 18th, and 19th centuries. Curator David Pankow provides excellent documentation on each item in the exhibit.The image at the top is from The Printer's Grammer, or Introduction to the Art of Printing, 1808 by Caleb Stower. The bottom image shows some word and letterspacing run amuck in the Scottish text, The History of the Art of Printing, 1713 by James Watson. Pankow describes the work as an extended poetic metaphor on the relationship between God the master printer and the creatures of his creation, symbolized as pages of type. 

When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, CSS properties can affect how type looks.

Note: the following screenshots reflect rendering in Safari 5 on Mac OS 10.6, unless otherwise noted.

Font size

A slight change in font-size can mean a very different looking typeface.

First of all, there’s CSS font-size. Rasterizing a typeface’s vector outlines at sizes realistic for today’s screens means that each letter is represented by only a handful of pixels. This means a slight difference in type size can result in a very different looking typeface.

Color
CSS color is another factor. Varying contrast between text color and background color can significantly change how type looks. Lower contrast means that antialiasing appears more subtle — the graded steps from foreground (type color) to background are less dramatic.

Low contrast. Hover for high contrast.

Light-on-dark text. Hover for dark-on-light.

Light-on-dark text tends to look thicker than dark-on-light (see also Shawn Blanc᾿s research on this topic), so lower contrast makes an even bigger difference in these cases. Keep in mind that too little contrast can cause problems for vision-impaired readers. Jonathan Snook’s Colour Contrast Check tool checks foreground and background color for WCAG compliance.

WebKit font-smoothing
The vendor-prefixed property -webkit-font-smoothing allows designers to specify one of three options: subpixel-antialiased (the default), antialiased, or none. Tim Van Damme has pointed out that the “antialiased” value tends to make text look thinner in Safari for Mac, and there was much rejoicing among designers who had previously used unrelated properties like text-shadow to make text look less bulky.

Other folks have questioned the use of -webkit-font-smoothing as a means of thinning text, even though it’s a prefix and not a posthack. Christoph Zillgens argues that diagonal strokes suffer when subpixel-antialaising is diabled, and Dmitry Fadeyev says small text is less sharp.

Rotation
Finally, and perhaps obviously, type rendering suffers when text is rotated. CSS3 2D transforms, as Andy Clarke recently explained in a guest post for Typekit, allow designers to rotate elements; while this may achieve the intended result graphically, non-horizontal type is a veritable rendering wilderness. Thankfully, effects like this are less apparent on high-resolution screens.

Screenshot of text rotated at 90 degrees, image rotated back to horizontal.

Screenshot of text rotated at 45 degrees, image rotated back to horizontal.

Screenshot of text rotated at 45 degrees, image rotated back to horizontal (in Mobile Safari).

So: as a web designer, font rendering is mostly out of your hands. But it’s important to remember that certain styles within your control can have an effect. When testing, keep in mind that different styles for contrast, size, color, and rotation can result in significant differences.

Web type is exploding all over the web but CSS currently doesn't offer complete down-to-the-letter control. So we created a jQuery plugin to give you that control