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> </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:
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.
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 | 0–0 | 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).