Finding and using the right quotation marks on your keyboard can be a hassle. There are several special characters that are not easily accessible. A while ago, I created a website which still is very useful on an almost daily basis. Here are a few words about it…
When I began working, I started as a freelance designer (a long, long, long, long time ago). I frequently visited various places, such as other offices or agencies. Sometimes I had to bring my laptop, and sometimes I did not. But one thing I was always taking along with me, was a mouse pad, a very special one. I’ve had this mouse pad since my days as an intern at MetaDesign. It showed a few lines of text with all kinds of special characters and their shortcuts, e.g. the € sign, which at this time was hard to find on any keyboard (‘easy’ Windows shortcut: Alt + 0128) or an em dash, which is not part of the standard keyboard layout (Windows shortcut: Alt + 0150).
After a while of using it in different workplaces or internet cafés, the mouse pad stopped working and broke. And at this moment the idea for a web version of this little helper was born.
A Online Web App
There were two versions of the mouse pad: one with shortcuts for Apple/Mac and the other with shortcuts for Windows. So for a digital version, it should work for both.
The first attempts with HTML and PHP did not produce good results. Finally, we developed an EmberJS application (at the time, we were mainly considering Ember versus Angular, and we chose Ember). The result is a basic web application that shows a sample text containing the most commonly used special characters and their shortcuts for both operating systems. Step by step, we added more functionalities while keeping the simplicity of the original mouse pad in mind.
The ¿©hara¢ter(s)! Website concentrates on special characters that are helpful and necessary for good typography in everyday life and characters that are available in almost every font. (If you feel the need for a more fancy tone in your written texts, you should check this website ☺ ✿ ✌ ✔ .)
There are two views: one with a text example that resembles the traditional mouse pad, and one with a list of all characters. Button in the upper left corner.
On the table view page, if you click on a character, it will be copied to your clipboard, allowing you to paste it anywhere. This is especially useful when working on a laptop without an additional numeric keypad.
Recently, we’ve added white space characters, such as the Zero Width Space (ZWSP) character, upon request.
Keep the mouse pointer over a character to view their name in a tooltip.
And finally, you can switch the preview typeface of the characters/text. The drop-down menu is in the middle at the top. Of course this is my favorite feature ;-)
“Hey, what’s up!”
« Pardonne-moi ? »
The proper usage of punctuation marks depends highly on the language being used. Every language comes with its own rules, traditions, and typesetting norms. For example, the French love their extra spaces, and in Spanish, some characters are upside down¡!
Here are some helpful links to web resources for English and German, which may assist you in dealing with special characters, quotation marks, and punctuation in your writing.
Smart Quotes for Smart People, a simple and quick overview of how to avoid straight quotes and using the right typographic quotation marks
The Punctuation Guide, a quick guide for the usage of common punctuation marks in British and American style
Matthew Butterick’s Practical Typography gives nearly all answers to contemporary usage of typography, from type composition, text formatting to philosophical questions
Shady Characters: The Secret Life of Punctuation, Symbols, & Other Typographical Marks is a printed book and the ultimate must-read for all typography lovers and punctuation nerds:
Article in German about the proper use of quotation marks in German language https://typefacts.com/artikel/anfuehrungszeichen