”
"This isn't right"
“That’s better!”
Good typography uses smart quotes, not dumb quotes
“Smart quotes” are the ideal form of quotation marks and apostrophes, and are commonly curly or sloped. "Dumb quotes," or straight quotes, are a vestigial constraint from typewriters when using one key for two different marks helped save space on a keyboard. Unfortunately, many unwanted marks make their way onto websites because of bad defaults in apps and CMSs. Using proper quotation marks and apostrophes today is easier than you’d think. The simplest method is to use charset utf-8 on your web pages and type or copy and paste the actual punctuation marks.
| Mac | Windows on number pad | Ubuntu | Entities without charset utf-8 |
|
|---|---|---|---|---|
| ‘ Single opening | Mac: ⌥ Opt + ] | Windows: Alt + 0 1 4 5 | Ubuntu: Shift + Alt + < ' | Entities: ‘ or ‘ |
| ’ Single closing & apostrophe | Mac: ⌥ Opt + ⇧ Shift + ] | Windows: Alt + 0 1 4 6 | Ubuntu: Shift + Alt + > ' | Entities: ’ or ’ |
| “ Double opening | Mac: ⌥ Opt + [ | Windows: Alt + 0 1 4 7 | Ubuntu: Shift + Alt + < " | Entities: “ or “ |
| ” Double closing | Mac: ⌥ Opt + ⇧ Shift + [ | Windows: Alt + 0 1 4 8 | Ubuntu: Shift + Alt + > " | Entities: ” or ” |
Not all smart quotes look the same
“blocky” “sloped”
Some typefaces have quotation marks that look more blocky or sloped* rather than curly, and that’s OK too. The look of punctuation marks is a stylistic choice made by a typeface’s designer.
*mirrored sloped quotes are also known as “signpainters’ quotes.”
Should I use straight quotes for measurements?
Feet and inches
“He was 6′4″ and full of muscle”
Latitude and longitude
40° 44′ 54.3588″ N, 73° 59′ 8.3616″ W
What you want are called “primes.” Primes are punctuation used to express things like coordinates on a map, time, and measurements in feet and inches. They look like slanted straight quotes and come in single (′), double (″), or triple (‴) variations.
Is it ever OK to use straight quotes?
When dealing with code, straight quotes are often required. Otherwise, straight quotes should never appear in your design work and professional writing, unless you are making a site about proper punctuation.
Further reading & resources
- Quotes & Accents (& Dashes), by Jessica Hische for advice on using smart quotes and more.
- Straight and curly quotes, an excerpt from Matthew Butterick’s wonderful book Practical Typography.
- JoliTypo is a PHP library to fix quotations, dashes, ellipses, and more.
- PHP SmartyPants is a port to PHP of the original SmartyPants plug-in written in Perl by John Gruber.
- HTML Symbols, coded entity reference for smart quotes and other special characters.
- Translations: French, Czech
Disclaimer: The above punctuation marks and shortcuts are used for the English language. Other languages may use different marks and shortcuts, or use these marks differently.