As I was writing the first few posts for Breaking Things, I was painfully aware that I was doing a frankly terrible job of presenting certain typographical elements. Specifically, I was using common ambidextrous quotation marks (typewriter quotes) instead of proper English curved quotation marks (book quotes). Any blogging engine worth its salt will have a so‐called smart quotes feature to pre‐process posts and automatically convert typewriter quotes to book quotes. Blogging engines also bring with them a plethora of other features, however, so I made a conscious decision not to use one for Breaking Things precisely because I wanted to start from scratch with a blank canvas and evolve the blog iteratively in step with the progression of my personal reboot. And it was the best decision ever. You have no idea how liberating and empowering it is not to be confined by the restrictions of generic frameworks and libraries or burdened by their layers upon layers of abstractions and their kitchen‐sink approach to features. The downside, of course, is that my fledgling little blog is left without a smart quotes feature. In fact, if you think about it, Breaking Things doesn’t really have any features at all, just content that I’ve lovingly hand‐crafted in HTML and CSS.
Pragmatism and craftsmanship are not mutually exclusive.
So, given the typographically unsightly and unacceptable status quo and my stubborn reluctance to use an existing blogging engine, I had to come up with a different solution to my typewriter quote infestation problem.
Since I know how to code, my first instinct was to cook up a little script to convert ambidextrous quotes to curvy quotes. Or, perhaps, I could find and use an existing script. Maybe, I could even gut just that one feature out from one of the other blogging engines. After all, there is really no reason to reinvent the wheel unless you absolutely have to. But that would have involved introducing a build stage to my blogging process and I’m very cautious about adding any new layers of abstraction to my workflow at this point.
Each layer of abstraction you add to a product or workflow brings with it promises of functionality and productivity enhancements but comes at the cost of an additional layer of complexity that separates you from whatever it is that you’re building. The key is in knowing when the value of that additional layer of abstraction outweighs the costs. You must be brutal in evaluating this. Make each layer of abstraction justify its raison d'être to you before you commit to it. Don’t reinvent the wheel, but also don’t add unnecessary layers of complexity to your workflow and products either. Through the years, I've realised that while monolithic frameworks and templates can give me a tremendous leg up in getting something rough and ready out of the door as quickly as possible, I usually end up finding it much harder work in the long run to learn their various idiosyncrasies to customise what I’m building precisely and remove spurious features that I don't need and which detract from the simplicity of the result that I covet. Sometimes, it’s more economical in the long run to start with a blank slate.
Automation isn’t always the right answer
So, in the spirit of practicality, I decided not to introduce a build step at this stage in the evolution of the blog. Instead, I decided to bake the curly quotes into the text of my articles. When you think about it, that’s what we should be doing anyway. The only reason we don’t use proper quotes when writing on computers is because computer keyboards are relics from the era of the typewriter and haven’t really evolved much in the intervening decades.
Ambidextrous quotes were introduced on typewriters as a space‐saving measure. That they have somehow survived unchanged into the era of digital computers is actually rather shocking. We’ve raised several generations of people who have no appreciation for proper typographical punctuation. We should be writing using proper punctuation as we go and the only reason we are not is a lack of education combined with the lack of proper tools. The keyboards we have on our computers today are stuck in the typographical stone age. So, to fix the problem, I realised that I had to fix the keyboard.
Towards a typographically‐aware keyboard
I’ve been a TextExpander user for a while so my first thought was to use it to map practical keystroke combinations to proper punctuation marks. Unfortunately, I could not get it to work reliably enough*. Undeterred, I decided to give a new app called Typinator a shot. And it worked like a charm.
Typinator, like Text Expander, is a macro expansion tool. It automatically replaces abbreviations with their long‐form counterparts as you type. For my purposes, I mapped easy‐to‐remember key sequences to proper curly quotes.
All the gory details
If you have Typinator, you may download my Typography abbreviation set (.zip, 4KB) and use it freely. Below, you will find details of how it all works.
I decided to use two‐character combinations to stand for single and double curly quotes. Specifically, ; + . creates an opening single quote and ' + / creates a closing single quote (also known as an apostrophe). Similarly, ⇧ + ; + . creates an opening double quote and ⇧ + ' + / creates a closing double quote. I chose those particular key combinations because they’re both not likely to occur in everyday writing (to minimize false positives) and since they’re ergonomically placed in relation to each other and located near the existing ambidextrous quote key on the keyboard to help me take advantage of existing muscle memory. It’s taken me about a day to get used to using proper curly quotes in my writing. By keeping the process manual, instead of automating a solution to the wrong problem, I’ve also empowered myself to write correctly in any app, not just on my blog or in apps that have a smart quotes feature.
Other typographical niceties
In addition to curly quotes, a lot of online writing is littered with typographical faux pas. One of the most common, and a personal pet peeve of mine, is the use of three dots (...) instead of an ellipsis (…). Beyond the cruel inefficiency of using three glyphs where just one will suffice, ellipses are also set differently (notice the wider kerning between the dots in the ellipsis from the previous sentence). So, abandon the three dots, stave off RSI for a little while longer, and use ⌥ + ; to create proper ellipses on Mac.
Another common typographical transgression guaranteed to leave the more typographically‐sensitive among us frothing at the mouth is confusing a hyphen‐minus with a hyphen, an en dash, an em dash, a minus sign, or with the figure dash. A hyphen‐minus (the - key on your keyboard) is the Frankenstein’s monster of the dash‐hyphen world. It is, like ambidextrous quotes, a relic from the days when efficiency concerns governed the design of early typewriter keyboards and the gamut of dash‐like symbols was amalgamated into one glyph to save space. And, like most things that try to do (or be) too many things at once, it is essentially useless outside of coding and should be avoided.
The proper hyphen, which I’ve mapped to the character sequence - + - in Typinator, is used to create compound‐words‐like‐this. The en dash is used to specify ranges (e.g., 24–36 year olds) and is entered with the ⌥ + - key combination on Mac. Its better‐endowed cousin, the em dash — which is the length of an uppercase ‘M’, hence the name — is used to denote parenthetical statements — like the one just demonstrated — and is entered by using the ⌥ + ⇧ + - key combination on Mac. Additionally, the
emdash abbreviation in my Typinator set creates an em dash surrounded by hairline spaces for use in HTML. Whatever you do, never, ever, use two hyphen‐minuses (--) to denote an em dash or the flying typography monster will douse you in spaghetti sauce when you least expect it (he’s apparently good friends with the flying spaghetti monster). A minus sign is used for arithmetic (e.g., 46 − 4 = 42) and is mapped to the abbreviation
minussign in Typinator. Finally, the figure dash is the exact length of a digit in fonts with monospaced numerals and is used when you need a dash in a number. It is not used to specify a range of numbers (use an en dash instead) or to signify subtraction (use a minus sign) but can be used, for example, when writing phone numbers (e.g., 555‒1278). All this isn’t just aesthetic pedantry, the different marks have different semantics. Why should being semantic in your content be any less important than being semantic in your mark‐up?
Yet another boo‐boo is using the letter x when you mean to use the multiplication symbol, ×. I mapped that one to the
multiplicationsign abbreviation in Typinator. Notice how much better 2 × 4 = 8 looks, compared to 2 x 4 = 8. There are too many examples to list all of them here but I’ll end with one last pet peeve: please don't use (c) when you mean to use the copyright symbol, ©. You can enter a proper copyright symbol using the ⌥ + g key combination on Mac (notice that the word is ‘copyright’, not ‘copywrite’). And, if you want to enter a trademark sign, the key combination for that is ⌥ + ⇧ + 2, not (tm).
While I’m being pragmatic about my blogging, this does not mean that I do not care about the quality of the final product. Quite the contrary, my approach is that of a craftsman, constantly tweaking and continuously iterating over my work. I’ve made dozens of tiny improvements to this blog since launching it just a few days ago. And you probably will not notice most of them, which is as it should be. The best design is invisible.
Pragmatism and craftsmanship are not mutually exclusive. In fact, I would go so far as to argue that the craftsperson, given the demands of her chosen undertaking, must be pragmatic if she is to actually ship the fruits of her labour. Craftsmanship isn’t perfectionism. Care about the quality of your work and labour over the details and yet remain pragmatic in your approach. And before you throw yourself into solving a problem, make sure that the problem you’re solving is the right one.
Design is as much about identifying the correct problems to solve as it is about solving problems. The smart quotes features in apps are pragmatic and useful hacks that nonetheless solve the wrong problem. The core problem is not ‘how do we convert ambidextrous quotes to book quotes?’ but ‘how do we get people to write using proper punctuation in the first place?’ Solving the wrong problem — or solving the problem at the wrong place — only helps to make us lazy and perpetuates the actual problem along with our bad writing habits. The correct place to solve this particular problem is at the keyboard. We must redesign the physical layout of modern keyboards to expose proper punctuation symbols. Barring that, in the short‐term, we can at least evolve current keyboards by using various key‐combination shortcuts to make it easier to write content with proper punctuation from the outset. Evolving a typographical keyboard is a pragmatic solution and one that I hope will help to make me a better craftsperson.
Since writing this post, I’ve noticed that the ' + / can be problematic when coding. For example, when entering a path (e.g., '/images/some-image.jpg'), the single‐opening‐quote‐forward‐slash combination will be replaced with a single curly opening quote. Also, some code editors automatically add a closing quotation mark when either a single or double quote is entered and this may interfere with the macro expansion also. To work around this issue, I’ve updated my abbreviations for single and double quotes to the following: ; + ; + . to create an opening single quote, ' + ' + / to create a closing single quote, and shifted versions of the above for opening and closing double quotes. If you don’t code, chances are that this will not affect you. If you do, you can download my updated Typinator abbreviations set for coders (.zip, 4KB).
Return to the table of contents.