March 2012
Updated April 2012 (switch from padding-right to word-spacing)

Click to select your desired sentence spacing:

one space modern automated look

conservative

traditional

wide

effing huge

(Note that the spacing terminology above is my own, and completely subjective.If anything, the record shows that wider spacings were common prior to the automation of the printing process.)

Sentence Spacing in HTML and CSS

For the record, I am not a mandatory spacing person.I'm not going to tell
you how to format your sentences.I do have some
information and opinions
on those who demand
you must do it one way or another.

The lazy choice is to add no extra space.You'll get spacing between
sentences the same size as spaces between words.This is true no matter how many spaces you type.HTML
collapses repeated spaces, because within the content portion of HTML (the
part that isn't tags) the only purpose a space has is to
separate words from each other, i.e. to make "grapefruit" and "grape fruit"
have different meanings.Adding extra space between sentences is
a kind of layout, and that's supposed to be the work of the tags themselves.

The "Wrong" Way

If you poke around on the web on this subject, you'll probably see many people
recommend that if you want to do this, the proper way is to use &nbsp; to create an extra space that will not be collapsed.This does in fact
work, but it suffers from a few drawbacks (and at least one advantage).First of all, 'nbsp' is actually an abbreviation of 'non-breaking space'.This is used to insure that HTML doesn't wrap your lines at that particular
space.The non-collapsing aspect is a side-effect of the non-breaking feature.

So the first problem is that HTML can not wrap your text where that space is.This is sort of ok if you use one regular space and one &nbsp;
because it can still wrap text on the regular space.However if you put the
regular space first and then the &nbsp; you can end up with a
space at the beginning of the line after it wraps.If you do use
this method, you have to make sure the regular space comes second (although
even this is a problem if you are using justified text).

Another problem is that adding an extra space is a club, where you might
prefer a scalpel.Hand-set type always allowed printers to put in as much
space as they desired between sentences (well, depending on the width of the
blank sorts (printing blocks) they had on hand).Only the invention of
typewriters put us in a position to count the space in terms of the number
of times we pressed the space bar (or in computer terms, the number of space
characters).It would be better to adjust sentence spacing to whatever
amount of space we desire.And there is a way to do that more or less,
which I'll describe shortly.

But first I'll say that the one advantage of using the &nbsp;
method is that when you cut and paste text out of a web browser window,
you'll probably end up with two spaces between sentences.

The "Maybe" Way

HTML does offer other spacing entities.I am aware of three of them:

&emsp—the em space;
this should be a very wide space, typically as much as four real spaces.

&ensp—the en space; this should be a somewhat wide space, roughly two regular spaces.

&thinsp—this will be a narrow space, even more narrow than a regular space.

Here are samples of all of the spaces, so you can see how they render
in your browser, in whatever font you happen to be using.

This is &emsp;

This is &ensp;

This is a regular space.

This is &nbsp;

This is &thinsp;(Note that on my browser, this looks almost the same as a regular space but upon closer inspection appears to be 1/2 pixel narrower.In other words, there's about a 50% chance that it will be one pixel narrower.

The advantage of these spaces is that you have some finer grain control over
the amount of space, they will not affect line wrapping (if the
browser is properly implemented which I'm not going to guarantee), and
cut-and-paste will cut the actual number of spaces (including both space
characters and any of the space above entities) you actually use.

This is probably a good approach, but since I haven't seen it recommended
very often, it may not function as expected.For the record, it seems to
work correctly in Safari, breaking lines even if there are multiple spaces,
without inserting extra space at the beginning of the line.But it really
isn't the fully modern CSS approach that I think is what we should be doing.

The "Right" Way

The correct way to do this in HTML is to put in a tag that tells you what
elements of your content are sentences.Then you can use CSS to control
the spacing between your sentences in a much more proper and modern way,
and you can be somewhat precise about it (or even very precise, with some
compromises).

Unfortunately, HTML does not have any standard tags that are used to mark
sentences.In my opinion (and having participated in the design at the time)
the reason is that HTML was never supposed to be that complicated.When
the subject of spaces between sentences was raised, someone quipped
"what next, range-kerning?" Nowadays that doesn't seem so unlikely.

But, we can do this using the SPAN tag, and adding a class for that particular
span that tells us it is a sentence span.For example <SPAN class=sentence>Your sentence goes here.</SPAN> would work, and you'd
use CSS to control the separation between your sentence spans.

There's a gotcha with this method, which is similar to the problems of the
first method.If you use spans like this, you have to think about
cut-and-paste.If you don't put any spaces between spans, then when you cut
text from a web browser it will not have any spaces at all between sentences.However, by adding in a space to fix this, you lose a bit of precise control
over the inter-sentence spacing.This is because you can't completely
control the width of the space character used in the web browser.Of
course, even without the space you can't guarantee how the remote system
will define "em" units, as it isn't well-defined in modern typography.Or
at least, the definition is not followed very consistently.

I'll note here that this issue could be solved if HTML had a real sentence
tag, because then browsers doing cut-and-paste would understand that this
required particular handling.

Of course, if you don't care about cut-and-paste, you can skip all the real
whitespace, but I think this is a mistake.It might be a problem for web
crawlers like Google.It's just not how the web is meant to function.

Initially, I had another problem with this method.I was using
padding-right to add extra space.The formatting wasn't
correct when a sentence would end at the right margin (which was glaringly
obvious with fully justified text).Ideally, the
sentence would end all the way up against the right margin, but this
padding in the span element forced the sentence to wrap before the
end of the sentence reaches the edge of it's block.
The correct way to solve this problem turns out to
be to use the CSS word-spacing parameter, which does just
what it sounds like it does (more or less).So we set the word-spacing for paragraphs to the
space we want between sentences, and then set the word-spacing
in sentences back to normal.Perhaps not the most intuitive approach, but it seems
to work correctly in modern browsers.It's important to note that this value is added or
subtracted to the size of the already existing space character.But it's not relative to any existing setting.So, setting paragrph word-spacing to 10px adds 10 pixels
to the existing space character, and then setting sentence word-spacing
to 0 will set the size back to a plain space.

This is a very tedious method (in fact, so is the &nbsp; method).I think if HTML did have a sentence tag, then things that generate HTML would
be able to automatically detect and mark sentences off for us, and do a pretty
nice job of it.Alas, this is not the case.

The Details

An em is a unit that historically was
the width of the 'M' character, which was typically square.Since it was
square, then in modern terms an em is loosely defined as the height of a font.When a modern
font is set to 36 point, then that is supposed to be the height, and it
also defines the em size.But if you just browse through the fonts on your
system with the size set at 36 points, you'll see that the actual height of
the fonts varies widely (perhaps even wildly).

So how much space do we want? Well
Historically the most common sentence spacing used between sentences seems
to be between 1/3 em and 1/2 em (but sometimes less, and sometimes even
more, up to 1 full em).And in modern practice,
many fonts choose roughly 1/4 em as the size of the (ordinary) space
character.There is literally no standard here that I know of, but this is
typical.So 1/2 em sentence spacing is going to be roughly two normal spaces,
all other things being equal.And if you want something roughly between
1/4 and 1/2 em, you could use a regular space along with &thinsp;.

If you are using CSS and the SPAN method described above, you can just
specify the word-spacing CSS elements exactly.I definitely recommend you
use em units here.If you use pixels or inches or points, and the
reader choose a very different font size than you did, the results will
not scale with the font.(Although there is a proposal to be able to size things
relative to the space character, which could be very useful here if that
ever comes to pass.)Em units are the only approach that will grow
and shrink when the font does (albeit fairly inconsistently).If you
are using one real space, along with the CSS word-spacing element, then
I recommend you assume that the space character is 1/4 em, and that you then
add additional space in word-spacing.So for 1/3 em, you would set
word-spacing to 0.08em, and for 1/2 em, you'd set
word-spacing to 0.25em.

The Fun Part

If you choose to use the SPAN method, there's one more fun feature you
can include, which this page uses.You can give the user control over
the spacing they look at.The following bit of javascript is a function
that I use to change the word-spacing
element for everything who's class is 'fp' (formatted paragraph).(Originally I used the same script, but was changing
the padding-right for class 'sntc'.)

Then you can just use onclick="spacing('0.25em');" on some a
link or other element to give the users clickable control over the sentence
spacing.If you look at the HTML source of this document, I use a slightly
fancier version of the function which uses boxes in a table, and changes
the background color of the selected choice.

Reader Comments
(Experimental. Moderated, expect delays. Posts may be edited or ignored.
I reserve the right to remove any or all comments, at any time.)