Towards a better web (digitalwaffle) wrote,
Towards a better web

  • Music:

When Is A Quote Not A Quote?

When it’s a prime.

No that isn’t a very unfunny joke, it’s actually a good description of a problem with typography on the web. Typography has evolved on the printed page over several hundred years, recently much of it has been ignored on the web.

I’m going to explain how you can use correct typography on the web, and how this will lead to a more readable web page, and readability means a more enjoyable experience for a user.

What This Article Aims To Do…

By the end of this, if I do my job right, you should know more about correct typography in documents, and how to use it in your web pages. Not only that, but you should also have a useful visual reference for all of them.

…And What It Doesn’t.

I’m not trying to write an English essay here, I’m trying to show you practical examples of how typography works. At the end of the day it should make your document more readable, and professional looking, not provide an academically accurate typography essay.

While some of the fine details may be glossed over, you should get all you need to know to use the characters properly, and how to insert them in html documents.

So What’s This Prime Thing?

What is normally perceived as the double quote (the " character, normally above the number two on a keyboard) is often rendered as a double prime, what you should be using for inches. The apostrophe is also often incorrectly substituted for a single prime—used for feet—or a single quote.

Feet and inches aren’t the only applications for the primes, but they are the most common.

The two straight lines in this character are quite fine for coding or similar uses (like when used to surround attribute values in HTML), but they are typographically incorrect. This character is actually a single uniform general quotation mark—quite similar to what is rendered in many fonts as a prime—called the APL quote.

HTML does allow correct rendering of both single and double primes, and they do (when correctly rendered) look different to the APL-quote and apostrophe, but I will cover that later.

This is more a typographical issue than technical though, and whether your text editor uses primes or the APL-quote both are still incorrect for text presentation. You should be using single or double quotes.

But They Look The Same!

Not really, but some applications convert the APL-quote into the correct double quotes, and the apostrophe into single quotes as that is what you usually want. Microsoft Word does this for example. This can create problems of its own though—like putting in primes for feet and inches, or inserting a correct apostrophe.

However there is a visual difference. Allow me to illustrate:

"This is how you are probably used to seeing quotes on the web. Notice the shape of the character at either end. The same character, and straight lines."

“However this text is in double quotes, note the obvious visual difference. Also notice how they are actually two different characters. One is an opening quote and the other is for closing the quote.”

Proper quotation marks are more readable, there’s five hundred years of typography to prove that. They make your text flow across the page nicer and they are more pleasing to the eye.

Not to mention its actually the correct thing to use!

But… Who Cares?

Well, as it is an integral part of typographical standards, correct layout, and good general presentation… you should really.

These conventions make your text look smarter, more legible, more professional. It also makes you the writer look like you know what you are talking about, as it is a more professional presentation. As another point of note, single quotes should also only ever really be used when quoting within an existing quote.

However quotes aren’t the only thing that suffer from being misused or neglected. Hyphens, ellipsis, and numerical symbols are all misunderstood on the web.

Dash It All.

A hyphen isn’t a dash—and vice-versa—but it is commonly used in place of the correct dashes on the web.

The actual character rendered by the hyphen/minus key on your keyboard is called, appropriately, the hyphen-minus. It is a bit of both and totally neither, however it is much more appropriate for a hyphen than a minus, as it lacks the length needed for the minus. Use it for a hyphen, as it looks almost the same, but never for a minus.

Equally the only correct application for a hyphen is the one used above—to split a word in the correct place. Examples of such are the words ‘re-read’, ‘vice-versa’, or similar split words.

The Em Dash
If you’ve spent anytime looking into CSS then you will have probably come across Em’s before. An Em is described as the width of a capital M. In practice that may vary a bit depending on the font, so it is more standard for the Em to be the same width as the number of points it is being displayed as—so it is 12 points wide when displayed at 12pt.

Can you guess how wide an Em dash is? Thought you might be able to.

Its uses are pretty well defined. It can be used instead of a colon or semi-colon to link clauses, or as a substitute for unknown date ranges (like 1980—, for someone’s birth date where the death is unknown or 19— for an incomplete date). Also two adjacent Em dashes (a 2-em dash) are used to indicate missing letters in a word. For example, censoring letters in swearwords.

The most common uses of an Em dash however are to show a break in thought, or a parenthetical statement that is more significant than regular brackets would indicate. You can see the em dash at work above, parenthenising the ‘and vice-versa’ in the first paragraph.

The En Dash
The En is the half the size of an Em (in theory the width of a N). Some people like to use an En dash surrounded by spaces instead of an Em dash, which is valid, but there is little point in using it that way.

Its most common use is to substitute for the word “to”, or to indicate a range of almost any sort (like the London–Glasgow railway line, or 1–100).

Some applications of it might be to show sports scores, dates, document pages, or just for correct range display. Certainly you should use it in any numbered range.

The Ellipsis.

You know when you see those three periods together (like so...) that there is actually a proper character for that? Well there is, its called an Ellipsis.

The ellipsis should be used to indicate missing text in a quotation, or that a quotation trails off. Like so:

“Two households, both alike in dignity,
In fair Verona, where we lay our scene,
From ancient grudge break to new mutiny,
Where civil blood makes civil hands unclean…”

Note that it does actually looks subtly different to three periods. There are some rules with the ellipsis, but it is enough to know that if you are cutting out text from a quote, or trailing off then you should use it.

Math Symbols.

There is an annoying trend for, even in professional publications, using an x or * for multiplication, a slash for division, and a hyphen for subtraction. This convention comes from the coding world—and is fine to use when you are dealing with code or similar works—but shouldn’t be used in general practice.

See the following comparison:


compared with:


While the slash might be useful in certain cases, for fractions or similar displays, the multiplication and minus symbols are a lot clearer in the latter case. It was for this reason I recommended against using a hyphen for the minus symbol earlier.

Other Symbols.

Not a day goes past without seeing someone substitute (TM) for ™ and (C) for ©, not to mention (R) for ®. Why this continues I don’t know, not only does it look clumsy, it also can be dangerous to the person that uses them.

None of the above substitutions have ever been given legal force or merit so, in some countries, there could be potentially damaging legal problems for someone who used the above substitutions.

However the characters are east to reproduce in HTML, so there should never be this problem.

Ok Genius, How Do I Get These Things In My Web Page?

Good Question. There isn’t much point knowing about these things unless you have a practical way of using them.

The answer is pretty simple too. You use decimal entity codes.

I Use What?

Decimal entity codes.

Entity codes come in three flavours—named, decimal, and hexadecimal. All of them start with the & character. The named ones used a & followed by a name, the decimal use &# followed by a number, and the hexadecimal use &#x followed by the hex value of the character. All of them end in a semi-colon.

For example to produce the < character you could use &lt; &#60; or &#x3C;. Whichever you use is up to you, however there are browser issues to consider.

Most browsers don’t fully support named entitles—or only support a small commonly used set—and support for hexadecimal ones is even worse. However all browsers seem to support decimal notation.

If your text editor supports UTF-8 encoding, and your document is set up to use it (it’s the default for XHTML and XML documents) then you don’t have to worry about inserting codes as the characters will display normally. However there are the same browser issues to consider here, not to mention that many text editors don’t support UTF-8, sadly.

If you don’t know what UTF-8 is, or are unsure if your document or text editor supports it, I would recommend using decimal notation. I would recommend using decimal codes as good general practice anyhow, unless you know a named entity is supported (like &nbsp; the non-breaking space is, or the above less-than symbol).

HTML Code Reference.

Please note, these are the correct codes for you to use. Far, far too many books and articles online quote the wrong codes. All the ones below are verified and work correctly. Note that the named entities are case sensitive, and that the APL-Quote is provided for reference.

Character NameCharacterNamedDecimalHex
APL Quote"&quot;&#34;&#x22;
Double Quote (left) &ldquo;&#8220;&#x201C;
Double Quote (right)&rdquo;&#8221;&#x201D;
Single Quote (left)&lsquo;&#8216;&#x2018;
Single Quote (right)&rsquo;&#8217;&#x2019;
Double Prime&Prime;&#8243;&#x2033;
Em Dash&mdash;&#8212;&#x2013;
En Dash&ndash;&#8211;&#x2013;
Multiplication Symbol×&times;&#215;&#xD7;
Division Symbol÷&divide;&#247;&#xF7;
Copyright Symbol©&copy;&#169;&#xA9;
Registered Trademark®&reg;&#174;&#xAE;

Hopefully these codes should make using the correct typography easier in your documents.

Good News For DreamWeaver Users.

Yes oh Macromedia converts, if you have DreamWeaver MX then its symbol entities are correct, and it will even convert between the APL-quote and the double quotes automatically if you are in design view.

However if you use DreamWeaver 4 or below please be aware that it inserts incorrect entities, and also contains some other bad code (like broken or invalid DocTypes for example). Time to get that upgrade perhaps?

At least they got it right in the end (mostly).

At The End Of The Day.

Hopefully the advice and instruction I’ve given here has informed you about how to use correct typography in your web pages. I don’t pretend I use all of it all the time, but knowing that it is there is they key to being able to construct a professional looking, and reading, web site.

Armed with this knowledge you should create more readable and pleasant content for your users. Also your pages should make the transition to print much easier, something that can be also greatly improved using style sheets.

However, that is a topic for another day.

  • Semi-Update.

    I've moved all my articles to my new website Twilight Universe. They are there under Articles or 'Waffle." I will continue to update here, but it…

  • PNG's Just Got Smaller.

    This post won't make too much sence unless you've read this or thisentry where I discuss PNG files, and then amendments to a program resulting from…

  • Packs O' Hacks

    Today I'm going to talk about the dirty side of style sheets. Hacks. Because of differing levels of browser support, and implementation, of CSS many…

  • Post a new comment


    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.