Typographically correct typesetting on websites

Since Web fonts have been available, it should be clear that there has been a lot more available on the Web besides "computer texts" that fall outside of typographic rules due to lack of options. We are dealing with a new, but nonetheless valuable design medium, in which the dividing line between hobby and professional typesetting runs along the adherence to typographical rules, like in any other medium.

By way of example, we will consider the most important rules and their implementation in HTML here. The use of the correct quotation marks and the right dash generally eliminate a majority of the typographic sins in an unprofessionally set text. You can find other typographic rules in the many standard works on the subject, such as “The Elements of Typographic Style” by Robert Bringhurst.

Special Characters in the HTML Source Text

There are two principal variations available in HTML for the typographically correct setting of special characters, including quotations and dashes.
If you use Unicode for your website, as is conventional nowadays (specified in the header with the meta charset="utf-8"), you can simply enter the special characters in the source text via the keyboard.
If for some reason Unicode is not available, you need to use the masked input method, which encodes the special characters. HTML offers various options for this. They always begin with the &-sign and end with a semicolon.
On the one hand, some codes are defined for a few of the special characters, such as &, for example, which is the ampersand, the commercial “and” symbol.
On the other hand, you can also specify the Unicode of the character, starting with #; in our example, this would be &.
By the way, you can also address all characters of a web font, including a pictogram, for example, not just the special characters.

Quotation marks

Nothing is used as widely and incorrectly as quotation marks. Most often, the inches mark is used (on the same key as the quotation marks on the keyboard). This is incorrect in any language, by the way.

In English texts, opening and closing quotation marks are set at the top; the correct way to set them resembles 66 (opening) and 99 (closing).

In German, the opening marks are set at the bottom and the closing marks at the top. The characters used resemble the 99 (opening) and 66 (closing).

Alternatively, the «French Guillemets» can be used in both languages; in German, they are »often reversed«. Typographically, these French characters are often the better choice, since they integrate better into the line.

German-speaking web designers will have already noted that in some frequently used system fonts, like Verdana, for example, the correct German quotation marks appear strange. The above-mentioned Guillemets can help here, or the use of Web fonts with carefully designed German quotations.

 Characters  Mac keyboard  Windows keyboard  HTML  Unicode
“ (Engl. opening) Alt - 2 Alt + 0147 “ “
” (Engl. closing) Alt-shift-2 Alt + 0148 ” ”
„ (German opening) Alt - ^ Alt + 0132 „ „
“ (German closing) Alt-shift-^ Alt + 0147 “ “
« (French opening) Alt-q Alt + 0171 « «
» (French closing) Alt-shift-q Alt + 0187 » »


Another common source of errors is the dash, which is often confused with the hyphen. The hyphen is intended for breaks.

The dash, also known as the en dash, is used for the following: Parentheses – always offset with blank spaces. To indicate a range of values for numbers (2–3) and times (12:00–1:00), without blank spaces. To indicate a connection between two locations, e.g. a connecting flight (Frankfurt–Mainz), with a maximum of half a blank space. Ellipsis (10.– Euro), also without blank spaces.

 Characters  Mac keyboard  Windows keyboard  HTML  Unicode
– Dash Alt – Alt + 0150 – –

Even with these few typographic rules and characters, you can lend your designs a significantly more professional appearance, which is always worth the effort. Most things can be implemented into HTML without any issues, in general. You can find a very comprehensive list of special characters on the Wikipedia website.