Styling spaces in CSS

By typographic rules, we should use different widths for a space e.g.

This page demonstrates how to set the width of a space in CSS. The idea is to use a space character or no characters, with a suitable class attribute, and set the width of the element using them em unit. The reason is that in typography and mathematics, the rules for spacing are usually specified using that unit, and it makes the spacing adapt to the font size.

Examples:
0<small class=hairsp></small>–<small class=hairsp></small>0
Bien<small class=finesp>&nbsp;</small>!
550<small class=thinsp> </small>168

The choice of the markup element should depend on the desired fallback in situations where the style sheet is not applied. Using small as above makes the space somewhat narrower than a normal space in that case. If you prefer a normal space as fallback, use the span element instead.

The content of the element is also to be selected according to the desired fallback when CSS is off, though you may also consider the effect on search engines, for example. The basic idea is to use a space when orthography rules require a space and you just wish to tune its width.

Since the width property does not apply to small or span elements (or any “non-replaced inline elements”), we set display: inline-block for them. This setting is supported by modern browsers but not yet universally. However, on non-supporting browsers, the CSS settings just have no effect, which is tolerable.

This approach is much more practical than the use of fixed-width space characters, described in the document Unicode spaces.

Types of spaces
Name Width CSS width For 16px Test Example Comment
zero-width space 0 0 0 | | foo/ bar Allows line break, like <wbr>
hair space 1/24 em 0.0417em 0.7px | | 00 Width varies, but narrower than thin space
fine space 1/8 em 0.125em 2px | | Bien ! For French punctuation
six per em space 1/6 em 0.1667em 2.7px | | 550 168 Might be suitable for grouping
thin space 1/5 em 0.2em 3.2px | | 550 168 Recommended minimum width of space
medium mathematical space 4/18 em 0.2222em 3.6px | | a + b Around operators (according to Chicago)
four per em space, mid space 1/4 em 0.25em 4px | | foo bar Average width of normal space
thick space 5/18 em 0.2778em 4.4.px | | a = b Around relational operators (according to Chicago)
three per em space 1/3 em 0.3333em 5.3px | | foo bar Width of space in a wide font
en space 1/2 em 0.5em 8px | | foo bar Recommended maximum width of space
em space 1 em 1em 16px | | foo bar

The column “For 16px” indicates the width for a typical font size of 16 pixels. Browsers may round the values to an integral number of pixels.

Note: The Elements of Typographic Style by Robert Bringhurst says that a thick space is typically 1/3 em (i.e., three per em space). There is in general a lot of variation by authority regarding the various widths for a space. In computer programs, there is considerable variation, too, and the widths are often user-settable.

In conclusion, it seems that it is mostly rather futile to do fine-tune spacing, since e.g. the medium mathematical space, mid space, and thick space typically get rounded to 4px when using the typical font size of 16px. But fine space becomes typically 2px, which looks OK (and surely better than normal word space). The hair space, if set to 1/24em, tends to behave oddly in Firefox (sometimes there's a 1px gap, sometimes not).