For many years, people were taught to type using typewriters, and those typewriters used monospace fonts. Because each glyph in a monospaced font takes up the same amount of space as every other, adding two spaces after a period ending a sentence helped the reader see the end of sentences more clearly.
Web Pages are Not Typewritten - They Use Proportionally Spaced Fonts
While it is possible to use monospaced fonts on web pages, the most commonly used fonts are proportionally spaced. In other words, each character takes up a proportional amount of space - the letter "i" takes up less space than the letter "m" for example. Because the letters are proportional it is easier to see where a sentence ends and one space is enough to visually separate them.
Here are two examples:
This paragraph uses a monospaced font. The letters all line up in columns and every letter takes up the same amount of space as every other. To help guide the reader, it is best to use two spaces after a period ending a sentence in this situation. But I would recommend not using monospaced fonts for body text because it is harder to read than proportional fonts.This paragraph is written using a proportional font. The letters do not line up in columns and each letter takes up the amount of space appropriate to that letter. Using one space after a period at the end of a sentence is appropriate, as the reader can easily distinguish those breaks. Putting two spaces creates a strange gap that is visually unappealing.
Web Pages Collapse Multiple Spaces
One of the more frustrating parts of web design for new designers is how web pages handle whitespace. In a typewriter or word processor, if you type two spaces, two spaces appear in the document. But web pages collapse whitespace down to a single space.
Even if you type two spaces after a period on a web document, the web browser will only show one space, unless you force it. In order to force whitespace to display you need to either use the non-breaking space to add single spaces, the <br /> tag to add line-breaks, or the CSS white-space property to change how whitespace is handled on the page.
