Continued from the previous post, Dear Diary is a series of articles about typography. In today's post, I'll tell you about white spaces, paragraph intending, and spaces between sentences.

White Spaces

Typography (Greek: typos "form", graphein "to write") is the art and technique of setting written subject matter in type using a combination of typeface styles, point sizes, line lengths, line leading, character spacing, and word spacing to produce typeset artwork in physical or digital form.

"You must have noticed that the second paragraph is easier to read, because of leading. In CSS, leading is implemented by creating a difference between the content height and the value of the line-height property. Half the leading is called the half-leading. User agents center glyphs vertically in an inline box, which adds half-leading on the top and bottom. For example, if a piece of text is '12px' high and the line-height value is '14px', 2pxs of extra space should be added: 1px above and 1px below the letters." (2)

Indenting Paragraphs

"There are two major schools of thought on denoting paragraphs. The classic typographic method uses indents to signal the beginning of a new paragraph. However, many technical, reference, and trade publications now use a blank line of white space to separate paragraphs. Indented paragraphs work especially well for longer blocks of prose, where the indents signal new paragraphs with minimal disruption to the flow of text. Blank line spacing between paragraphs, in contrast, makes a page easy to scan and provides extra white space for visual relief. Either approach is valid as long as the paragraph style is implemented consistently throughout the site." (3)
 

To indent paragraphs without using CSS, you can insert several non-breaking space characters ( ) at the start of each paragraph. You can also use a transparent single-pixel GIF graphic as a spacer and adjust its horizontal spacing. If you are using CSS you can set the exact spacing for the indentation using the "text-indent" property of paragraphs.

To separate paragraphs with blank lines, you could use a paragraph tag () for paragraphs instead of writing them in plain body. The paragraph tag, in default, adds some margin to the paragraph. To adjust the amount of margin, you can use the margin property of CSS. You could also use two line breaks (

) for spacing.

One Space After a Period

You see, the weird practice of leaving two spaces for no reason started really early, after the caveman and the hunter gatherer, man started to use typewriters. Early typewriters used monospaced fonts, meaning that the spaces between letters were always the same length, and so, typists started using two spaces to slightly widen the space between sentences. Now, the fonts on your computer are not monospaced, and are proportionally spaced. And therefore, this practice is outdated, because it created unnecessary spaces.The typist may wish to continue using two spaces after a period, but the typographer should not.

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.

"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." (4)
 

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 tag to add line-breaks, or the CSS white-space property to change how whitespace is handled on the page.

Resources