Part of the HTML Typography & Writing reading list

The workflow for producing correctly formatted body copy for the web can be broken down to three major steps:

Write your body copy in a word processor

  • The majority of HTML editors – including Notepad, TextEdit and – do not understand the subtlties of typography, while word processors, such as Microsoft Word and OpenOffice, do. They will correctly encode the majority of our body text, including correct apostrophes and hyphens.
  • Word processors also give the advantage of checking your work inline – that is, “on the fly”, as you type, for grammar and spelling errors.
  • Word processors formats are understood by clients. Most have an option to “track changes”, allowing you to tell when a client alters or adds body copy in the document. This is a lot easier than communicating changes via phone or eMail.

Transfer this body copy into your HTML document via copy-and-paste

Apply appropriate markup manually, or generate tags using an online utlity like Word to Clean HTML or DreamWeaver’s built-in Word text conversion tools.

Inevitably you will have to edit and further clean up the resulting code. There are several tags that produce semantic and typographical changes:

  • The inline element <q> is used for short quotations, and will produce the correct opening and closing “smart” quotes.
  • <blockquote>, a block tag, wraps around a larger quotation from a source. (For this reason, text inside the <blockquote> is often divided up into several paragraphs). <blockquote> indents the enclosed text by default, but remember it is the meaning that counts, not its default appearance. <blockquote> does not automatically produce quote marks, although it can be made to do so via CSS.
  • <hr> introduces a horizontal rule, a visual break between text elements.
  • <cite> is for an inline citation of a book, film, article or other work. In terms of presentation, it italicizes content by default.

Add HTML Entities into the body copy where appropriate.

For the most part the previous steps will take care of most basic typography issues. There are, however, a few characters that can be tricky to generate in a word processor if you don’t know how: for example, the correct characters for feet and inches (they’re not single and double quotes: use the HTML entities &Prime; and &prime; instead; note that HTML entities are case-sensitive), the character for degree (as in “It’s 39°C outside.”: &deg;), how to do a correct common fraction.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.