Try hand-kerning some tricky pieces of text

This online kerning exercise presents you with words in different fonts and invites you to drag the letters around for the best spacing. Then see how your solution matches the typographer’s solution.

Thanks, Christina Vasilevski for the link.

How to make typographers’ quotes in HTML

What are typographers’ quotes?

You’ve probably noticed two kinds of quotation marks in web pages and printed matter. The quotation mark that you get when you just press the " key on your keyboard is the straight quote, and it looks like ' and ". Typographers’ quotes, also known as a smart quotes or curly quotes, look like ‘ ’ and “ ”. You’ll notice that opening and closing marks are drawn differently, and you may also notice that they look a lot nicer.

Using typographers’ quotes on a web page

Straight quotes are convenient for two reasons: they’re easy to type, obviously, but more importantly, they’re part of the basic ASCII character set, and therefore when you use them in HTML they will be rendered correctly on everyone’s browser, all the time, even if you completely ignore the concept of character encoding in your document.

If you use typographers’ quotes without specifying the right character encoding for your HTML file, some of your viewers are going to see question marks, boxes, or other crazy symbols instead of the beautiful curly quotes you intended them to see. That’s bad. That can happen if you do something like type up some text in MS Word with the AutoFormat “Replace straight quotation marks with smart quotation marks” feature turned on, and then you cut and paste that text into an HTML file.

Using HTML codes to make smart quotes

The good news is that you can use HTML codes to render your typographers’ quotes, and browsers will know how to render them, even without setting the document encoding. Although these codes are cumbersome in your text, if you’re saving your HTML documents as text files, this is the way to go.

HTML codes for typographers’ quotes

• left single quote ‘ ‘
• right single quote (and apostrophe) ’ ’
• left double quote “ “
• right double quote ” ”

Other special characters

But don’t stop there. You can have other special characters: em-dashes (—), en-dashes (–), non-breaking spaces ( ), and accents. Here’s a list of special characters with their HTML codes.

More information about using special characters on the web

• For more information about character sets, read Joel Spolsky’s article about Unicode and character sets.
• This is a simple test file that you can look at with different browsers.

About typing two spaces after a period

Using the double spaces

This article in Slate can say it for me: we recommend against putting two spaces after a period. From an editor’s perspective, I’ll say that the first thing I do with a new manuscript is to replace all multiple spaces with single spaces.

If you’re deciding what style to use for a document you’re producing, keep in mind that the two-space style is fragile, in that it’s much harder to find and correct extra spaces or missing spaces. With the one-space style, you can get rid of accidental extra spaces with a single search and replace operation. But with the two-space style, you have to use a much more complicated search, since you require two spaces after a sentence-ending period but not after i.e., e.g., ellipsis points, etc.). If you display your text justified instead of left-aligned, it will be really hard to tell whether each word gap contains the right number of spaces.

Removing the double spaces

To process a manuscript that has extra spaces (I always do this on receiving a manuscript and again before delivery because it’s easy for extra spaces to creep in), use search and replace to search for “  ” (just type two spaces into the search box) and replace with “ ” (one space in the replace box). I always choose the “Replace all” option to change them all at once, and then run it again until there are no more multiple spaces found.

Helvetica

I was delighted to find there was a documentary about Helvetica.