We're going to switch gears a bit today and talk a bit about CSS typography. Typography on the web is, to designers, clients and front-end developers alike, a source of frustration for many reasons. Designers who are used to either print or laying out their typography in Photoshop and the like can't get the same results with CSS text; additionally the number of fonts commonly available for use on the web is limited and they can look stale. Clients often want text to break in certain ways or to fill spaces and not wrap when it's too large for the space it's designed for. Front-end developers find themselves trying to implement these requests and are faced with CSS rules that behave inconsistently or erratically across different browsers, different operating systems, and even different versions of the same operating system. 

Our interest in this topic was stirred when a client requested a letter-spacing change for some copy. For those not familiar with it, letter-spacing refers, not surprisingly, to the spacing between individual letters in text. It corresponds to kerning in traditional typography.  When the property has a value of 'normal', browsers use the kerning built into the font itself. When a length unit value is used, that value is added to the built-in kerning of the font (or subtracted; negative values are legitimate, though they can behave erratically). Percentage values are ignored. 

Note: the CSS3 working draft specification for letter-spacing adds an option to specify three values instead of one, for minimum, optimum, and maximum letter-spacing. These three values are only used in conjunction with the new text-justify property; in all other cases only the optimum value is used. For the purposes of this post, we will be looking at the CSS2.1 specification.

An aside - The Firebug Effect

It's most likely that the client came to this conclusion by using Firebug to test out CSS changes. We've been finding recently that clients and graphic designers are increasingly using Firebug to test out changes for themselves before making requests to front-end developers. By and large this is a fantastic development as it decreases the amount of time it takes to experiment with CSS refinements; designers and clients no longer need the front-end developer to test out these changes. On the other hand, it can cause confusion in that the way Firefox renders something is not necessarily representative of how things will display elsewhere, as we'll see in a moment. Nevertheless, we encourage front-end developers who are working out display issues with designers and clients to educate them about using Firebug for prototyping and testing so that they can see for themselves what different CSS values look like in-browser. 

Does it render?

What piqued our interest though, was that the client specifically requested a letter-spacing of 0.2px. It seemed strange; sub-pixel values won't display on a computer screen, by definition. Or will they? We turned to Firebug to investigate, and were surprised by the results:

(text ©NYTimes)

It turns out that there is a difference for every 0.1px you add, in Firefox (or even smaller values; try it!). A closer look shows that the spacing between each pair of letters doesn't change with each value change; some letter pairs change with a given value change, and others change with different value changes:

As you can see, some value changes will create a full pixel space between a pair of letters. Other changes seem to cause a shift in how the anti-aliasing is rendered.

What appears to be happening is the native font values for the spacing between the letters are themselves fractional, but fractional pixels can't be rendered on-screen, so the values are rounded for rendering. As fractional pixels are added to the letter-spacing property, some of the spaces between the letters become large enough that they round up rather than down. Looking at the Mozilla source code might confirm this but is beyond the scope of this post; at any rate, this is a good description of the behavior.

These fractional values would appear to provide a way to finely adjust kerning, which can have a great effect on the readability and 'feel' of text. But of course, Firefox is only one browser. How does this property behave in other browsers?

The cross-browser test

To test this, we whipped up a quick page using jQuery UI for controls. We find jQuery UI extremely useful for rapid prototyping and testing of this sort. CSS properties can also be manipulated in-browser more directly via Firebug or other web inspectors, but having on-screen sliders and buttons allows much faster adjustment of values. Additionally, older versions of IE don't allow this sort of direct manipulation as easily. (Feel free to launch our test page in the browser(s) of your choice in order to play with the letter-spacing property for yourself.)

Unfortunately, it seems that Firefox is unique in its behavior. All other browsers take the font's kerning value and render that as a base, rounding as necessary; the letter-spacing value is then added to or subtracted from that rendered value after it has been rounded to the nearest pixel, rather than before as is the case in Firefox. 

Here's how different values look in IE6, which for once is actually representative of how things look in most browsers:

We have provided screenshots of the behavior for illustration, but we recommend you launch our test page and see the property changes in action for yourself.

The upshot of this is that only whole-pixel values are rendered by other browsers; any fractional value is truncated. 1.5px is a legitimate value for letter-spacing in these browsers, but it will have the same effect as 1px. -2.3px letter-spacing will render as -2px in browsers other than Firefox. This also means that letter-spacing values greater than -1px and less than 1px will only render in Firefox; in all other browsers 0.2px or -0.5px are rendered as 0. 

In conclusion

It is impossible to say that either of these behaviors is the correct one. The W3 spec for letter-spacing specifies that length units will be added to inter-character space, but it does not specify where in the rendering calculations that should happen. It is arguable that the Firefox behavior is "better" because it provides more typography styling options. The usable values in 1px increments are much less useful from a design perspective. Still, either behavior is standards compliant, so we can't lay blame anywhere, as much as we might like to.

What are the takeaways here? 

• Firebug is an extremely useful tool for front-end development, especially for testing out CSS, but be aware that even the more standards-compliant browsers can have rendering differences. Always cross-browser test. 
• It can be useful to take the time to scrutinize CSS properties in detail.

In future posts we will look at other text styling properties more closely, as well as methods for getting a wider variety of fonts into your pages and the pros and cons of using them.