Start using real quotation marks in Design
Improve readability and discover the joy of top notch typography.
Good typography is nearly invisible and stays gently in the background. Her primary purpose is simply to reproduce the content, to the reader’s eyes. You could say, most of the time typography is some kind of neutral. Just to understand it right — neutral in this context has nothing to do with a stark or even boring looking typeface.
You could even create top-notch typography with a squarish looking sci-fi typeface like Eurostile. Especially if this font fits right in the thematic environment you are working on. If we stay with Eurostile, it could be a user interface for a super awesome space fighter or maybe a striking landing page for the next Star Wars movie.
But first — if you want to know about the real impact of type, please watch my latest speech during the Sundae Talks Conference.
Quality and Readability
But — let’s get back to neutrality mentioned at the beginning and the connection to readability. A core part of proper typography is the correct use of symbols. You can either call it a glyph, character or simply mark, whatever you prefer. In this case, I’m talking about apostrophes and quotation marks. The right use of them will support an unaffected look of your overall written content.
Sure thing, most people would say, that this is some kind of nerdiness or a part of details you could easily neglect, and to be honest, this is not false at all. You can still read a text if someone is using wrong punctuation, but in essence, this is not only a matter of fondness, it is far more a matter of quality and readability.
So, if you want to improve your typographic quality, head over and have at look on the following.
The Origins of Dumbledork Quotes
The 19th century. A time without computers but imaginary genius. The first lightning bubbles were invented, electricity distributed broadly and people started to use typewriters.
To minimize space on the keyboard, typewriters combined similar symbols in one key and simplified them. Two of the most prominent ones, that are now known as dumb quotes: " and ‘, for example. Through this essentially economical decision, both of them are still widely used in our daily communication. Unfortunately not every software replace them automatically with the correct typographic symbols, so you have to take action and revise them manually.
Basic Knowledge about Apostrophes and Quotation Marks
It’s not always easy to recognize apostrophes and quotation marks. They look in general a little bit curvy and sloped in classical serif fonts. In grotesk ones like Helvetica, Univers or Founders Grotesk, they often drafted of a square with a little hook on it. While most geometric ones using a more simplified form.
You see, every typeface has it own style for apostrophes but in general they are designed in a similar direction. If you need a mnemonic: Compare them to a 6, 9 or a comma. They are never just simply straight.
Apostrophe Use Case
The apostrophe is by far one of the most abused punctuation in the English language. A glance at store marquees, street signs, posters, and advertisements will show that almost no one knows how to us it properly. In general it has three different uses.
- Show the omission of letters
- Form possessives of nouns
- Indicate certain plurals of lowercase letters
Single and Double Quotation Mark Use Case
Instead of the apostrophe, the only central use of quotations marks is, to incorporate the quoted content. Americans use double quotes for initial quotations, then single quotes to incorporate quotations within the initial quotation. Hard to understand? The Example will help you.
The British doing it straight reversed. They use single quotes for initial quotations, then double quotes for quotations within the initial quotation.
Attention: Try to avoid emphasis with quotation marks. It will distort the reading experience and looks also pretty ugly. Use italic or bold instead, to get this job done.
Quotation Mark Use Case the French Way
Things going a little bit different in France. The mentioned curly whirly quotes replaced by guillemets. If you are working in an international context you have to keep this in mind.
Attention: Remember to put a single space before and after, when using guillemets. It should look like in the example above.
Quotation Mark Use Case for Germans
In Germany, it’s even a little bit more complex—like the language itself. So I separated this part a little bit.
Quote German the Traditional Way
At first, they are using the mentioned curly quotes. But in a different way. The quotation opens with a double quote placed on the baseline and closes with a raised one. Even the direction is different, in Germany we help us calling this “99 below, 66 above!”.
Fun fact: Germans call quotation marks also Gänsefüßchen, which you can translate with goose feet.
The French touch in Germany
Another way to quote is to use guillemets, quite similar to the French. But in a reversed version and named chevrons.
Attention: Germans don’t put any space after the opening chevron and before the closing chevron.
At least it is also allowed, but just quite rare, to use guillemets. But also without the extra space. So feel free to use them, if they fit more your personal taste. But I wouldn’t recommend them.
Is it eventually allowed to use dumb quotes?
If you want dumbledork looking content — feel free. Nay, seriously. It’s no problem to use them in your daily communication, like in messengers or E-Mails. Keep in mind that most people write or chat on mobile phones and it’s quite a pain in the ass to find the right symbols in a short time.
Also if the written text should be later copied into command line editor—maybe a code snippet—you should use dumb quotes.
But If we are talking about proper content with a sense of quality you should try to pay attention to use correct quotation marks.
Quote Stuff Conclusion
For now, hopefully I could give you a first impression about it. Even if those little symbols seem so unimportant to most people out there, they can make a huge difference how a user is reading your content and how he will notice it. Typography is all about details and a certain feel. Even if you don’t see it on first sight, you will definitely sense it.
In the end, I would like to share you a side to side comparison, to show you how much different it makes with just using the right symbols.
You will recognize, the version with the real quotes look at first time coherent and most important, it will guide you through the text. The opening and closing forms of the quotes will show you the start- and endpoint of quoted content. At least, this is what we want to archive: structure content and give the readers guidance.
Other Reads
About
I’m Florian Gaefke, a UI/UX designer based in Hamburg, Germany with a deep love and understanding of typography. Besides, Star Wars is my biggest passion, I occasionally talk about it on YouTube, and If you want to conquer my heart — try it with good food. I love it! Follow me on Twitter or get in contact with me through LinkedIn or XING.
