Typographically correct punctuation on web sites

While many web designers settle for the simplified punctuation of the ASCII character set, using typographically correct punctuation shows the professionalism and attention to detail of the designer and the web site owner. This page explains the differences between superficially similar punctuation marks and lists the character entity references used to represent them.

Quotation marks and primes

The ASCII character set includes single and double straight quotation marks, which serve as substitutes for a range of characters. In each case, one of the following characters should be used instead.

‘
’
These two characters are opening and closing single quotation marks, and are usually curved or slanted in comparison with straight quotation marks. The character used as a single closing quotation mark also functions as an apostrophe. Single quotation marks are sometimes used for quotations, but are more often used to indicate a use–mention distinction (referring to a word itself rather than the concept it represents), introducing neologisms, or indicating an ironic or unusual use of a word or phrase. An apostrophe is used to indicate possession or to show omitted letters.
“
”
These two characters are opening and closing double quotation marks, and are usually curved or slanted in comparison with straight quotation marks. Double quotation marks are usually reserved for quotations, but occasionally are used in the same situations as single quotation marks (but not apostrophes), as described above.
′
This character is a prime, and is usually slanted in comparison with straight quotation marks. Primes are used to represent the units feet (in distance), arcminutes (in angles), and occasionally minutes (in time).
″
This character is a double prime, and is usually slanted in comparison with straight quotation marks. Double primes are used to represent the units inches (in distance), arcseconds (in angles), and occasionally seconds (in time).

Hyphens, dashes, and minus signs

The ASCII character set includes a hyphen character, which also serves as a substitute for a range of characters. Hyphens are used in compound or split words. In other cases, one of the following characters should be used instead.

–
This character is an en dash, and is usually longer than a hyphen. En dashes are used to indicate ranges of values (where it is usually read as ‘to’) and connections between terms (for example, ‘Spring–Autumn 2010’ or ‘the Torquay–Brixham ferry’).
—
This character is an em dash, and is usually much longer than a hyphen. Em dashes are used in parenthetical statements (as an alternative to using brackets) or to indicate a relation between two clauses (as an alternative to using semicolons).
−
This character is a minus sign, and is usually longer than a hyphen but shorter than a dash, and is set higher than a hyphen or dash in order to align with the centre of digits. Minus signs are used to represent subtraction or negative numbers.

Other characters

There are several other characters not present in the ASCII character set whose usage improves web typography.

…
This character is an ellipsis, and usually resembles three periods, but with reduced spacing. Ellipses are used to represent omitted words (for example, when omitting part of a quotation), pauses in speech, or the trailing off of a sentence.
×
×
This character is a multiplication sign, and usually resembles a lower case ‘x’ but set higher in order to align with the centre of digits. Multiplication signs are used to represent the multiplication of numbers and the cross product of vectors.
÷
÷
This character is a division sign, and usually resembles a dash with dots above and below. Division signs are used to represent the division of numbers, and are a more attractive alternative to the using forward slash character for this purpose.

Where now?

Found this useful? Share it:

Also in HTML and CSS: