Mind Your Characters: Web Typography

Over the years, I’ve seen three common mistakes when it comes to web typography. Paying attention to a few details sets you apart from the rest of the crowd. Here are the most common web typography mistakes and how to fix them.

Web Typography Mistake #1: Using too many fonts.

It’s best to limit the number of fonts on your site to two, maybe three. I usually use a certain font for headings and another font for body copy. Too many different fonts become a distraction.

Web Typography Mistake #2: Using two spaces, instead of one.

In the typewriter days, we were taught to always do two spaces after a period. Typewriters used monospaced fonts. Spaces between letters were always the same length. With current technology, we have proportionally spaced fonts. The practice of two spaces is no longer necessary. Adding another space places an extra hole in the text. Only use one space after a period.

Web Typography Mistake #3: Em dash. En dash.

Often in the web world we just use the dash character. Technically, that’s not correct. HTML has a set of special characters that give us access to the “more correct” em dash and en dash. An em dash indicates a sudden change of thought whereas the en dash is used to indicate a range of number, dates, etc.

When an em dash is needed, use the special code: —

HTML Code:

I am reading a book about—what time did you say it was?

Result:

I am reading a book about—what time did you say it was?

When an en dash is needed, use the special code: –

HTML Code:

Anybody from 5–11 years old may participate.

Result:

Anybody from 5–11 years old may participate.

Web Typography Mistake #4: Curly Quotes

Notice the difference in the following two lines. Pay close attention to the quote marks.


The first line used the quote key on the keyboard. The second line used the special html codes for a left double quote (&#8220) and a right double quote (&#8221). There are also special codes for single curly quotes as well: ‘ and ’.

I am using the number code for the quotes. Most special characters also have a name code (vs numcode) that can be used in html. For exmaple, a left double quote is “. A right double quote is ”.

 

Do I have to remember the special codes?

This is where appropriate html editors come in handy! Most html editors, including the visual editor in WordPress, will have a special character icon—it often looks like a horseshoe. Clicking on that icon will show you a set of special characters. Select the desired character and the special code is inserted for you.

web typography special characters

 

For a complete list of special characters and their corresponding HTML code (number and name), visit webmonkey’s Special Characters.

Set your site apart from other sites by minding your characters. Us the appropriate characters in the right scenarios.

What are the most common special characters you use? Or, what you have noticed with web typography?

Let us know in the comments below

Leave a Comment

Your email address will not be published. Required fields are marked *