Punctuation Details

August 11, 2004

There are simple details in typography that can make your design look professional. Yes, professional, that descriptive word you hear from clients. These details take a little more effort to produce with HTML and we often forget them when moving from a print medium to online. Punctuation is a simple and quick detail that can make your design stand out from the rest. It is generally practiced in the print world of design, but we have been a little lackadaisical with our punctuation with HTML copy. Coding your punctuation in HTML takes just a little more work than if you we working with an image in Photoshop, but it certainly makes your work ‘professional’ looking. I am just as guilty when it comes to punctuation, but there are a few simple things I have learned that will make your design look beautifully supafly. These are just a few quick details that every designer should not forget when working with type and copy both online and print. This is nothing new and many of us may practice this already, but sometimes we need a reminder.

Quotes Marks, Prime Marks, Ditto Marks

Always use true quote marks (“”, ‘’) and true apostrophes and not ditto marks(",') with all of your copy. For numbers, minutes, feet, and inches you should use prime marks (′, ″).

Name	Character	Code
Left Single Quotes	‘	‘ or ‘
Right Single Quotes	’	’ or ’
Left Double Quotes	“	“ or “
Right Double Quotes	”	” or ”
Single Prime Mark	′	′ or ′
Double Prime Mark	″	″ or ″

If you use Movable type, John Gruber has a great tool that will convert all of those ditto marks for you to the true quote marks.

Hang your Quote Marks

When you use a pull quotes, quotations, or headlines you should always hang your quotes. This can easliy be done with the text-indent CSS property set to a negative value on an element. In photoshop there is an option in the paragraph pallette to set type with ‘Roman Hanging Punctuation’.

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce consequat tellus nec nibh. Phasellus mollis. Duis nec est. Phasellus sit amet eros. Fusce nec felis sed pede egestas aliquam.”

.hang {text-indent: -0.4em;
font-size: .7em;
padding: 10px; }

Em Dash, En Dash, Hyphen

Em dashes(—) are usually used to mark a change in thought or sentance structure. Em dashes are set with no space before or after the dash.

En dashes(–) are commonly used to indicate a duration.

Hyphens(-) should only be used when you break a word at the end of a line or compound adjetives, like three-legged.

Ellipsis is a special character and not just three periods.

Name	Character	Code
Em Dash	—	— or —
En Dash	–	– or –
Ellipsis	…	…

These are all small details and only take seconds to change, but really make the difference when you use them. If you are like me and you like typography details like this, Robin Williams has a great book about type called The Non-Designer’s Type Book.