Beautiful quotation marks

February 29th 2024

The use of the correct quotation marks in typography is one of those small details that makes a big difference to a nicely set piece of text. It seems everyone has been guilty at one time or another of using the straight quotation marks (also called ‘Dumb Quotes’) instead of the curly (also called ‘Smart Quotes’) version instead. I am writing a post about this as a reminder to myself and an easy reference for my web design students during our typesetting sessions.

Most desktop applications for text publishing offer options to turn the ‘Smart Quotes’ on and off. However, depending on experience and knowledge of typesetting, many people are not aware of this feature. Hence the straight quotes are now everywhere: in reports and any piece of writing created using a desktop publishing app; also, in online when text is typed out, or pasted into, a CMS without consideration.

What exactly does the difference look like? ~ The following screenshot shows examples of the two marks. The first example shows the straight quotation marks, the second shows the curly version ~ which is the typographically correct quotation mark for standard written text.

screenshot of straight and curly quatation marks
example from Butterick’s Practical Typography © Matthew Butterick

There is a clear difference in the shape, angle and appearance of the marks. The curly quotes have much more personality and feel more in tune with the spoken word or a citation. This becomes more apparent when the quotation mark is set into the margin as a typographic feature.

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.

Jason Santa Maria, Smart Quotes for Smart People

Using curly quotes

When typing single or double quotes, we can use a combination of keys. For copy online, we use the HTML or unicode instead to ensure the correct display of the curly quotes.

————————————————————————————————————————————————————————————    
    Windows 	   Mac               HTML       unicode
————————————————————————————————————————————————————————————
‘ Opening single apostrophe 	
  alt+0145        option+]           ‘    U+2018

’ Closing single apostrophe 	
  alt+0146        option+shift+]     ’    U+2019


“ Opening double quote 	
   alt+0147       option+[           “    U+201C

” Closing double quote 	
  alt+0148        option+shift+[     ”    U+201D

This is my own little reference for these two sets of marks, there’s a lot more to learn and know, of course. Make sure to check out the following links as well.

Further reading

Butterick’s Practical Typography

This wonderful online book is one I highly recommend to anyone new to typography. It offers great insights, examples and guidance on setting beautiful type for the web.

There’s an excellent chapter, called ‘straight and curly quotes’, which covers this topic in detail, including the screenshot shown previously an example of the difference between these quotation marks.