The messy tech of typography
Quotation marks
Your grammar might be immaculate, your typos all eradicated, but you can still do a disservice to your writing by either choosing inappropriate fonts… or not knowing what to do with them.
It is hard to know what to do with fonts, though. Proper typography is messy, for some of the same reasons languages are messy. Hundreds of years of traditions, arbitrary influences, and not being able to cut your losses and start from scratch (although people tried) all contributed to the mess.
It’s a beautiful mess, though, and a mess we have no choice but to inhabit.
Our Medium editor tries to take care of a lot of the messiness of typography without losing any of the delightful parts. One area is the quotation marks. It seems simple on the surface:
“Smart” quotes are better than "dumb" quotes.
Yes, there are ways to type in smart quotes using complicated keyboard shortcuts, but Medium tries to do The Right Thing if you just keep pressing Shift+".
Except, The Right Thing is often… kind of complicated. Let’s take a look at a few examples.
Example 1: Everything that looks simple isn’t
A way to transform a dumb quote into a smart one could be simple: anything followed by text is an opening quote; anything preceded by text should be a closing one.
That, however, only takes us so far. Because, yes, typography is messy.
Here’s the list of all the special cases we learned to support over time:
(Eagle-eyed readers will notice that primes are not the same as dumb quotes, which originated from typewriters.)
Yes, it’s complicated enough that you might want to give up… and we do, too. We give up when you write within the code blocks, since computer code, not meant for people, eschews all typography subtleties:
The "quick" brown fox with 12" height, living in the '80s.Example 2: That time when Chrome’s spellcheck hated typography
A part of my job (very tiny, very unglamorous, and yet oddly treasured) is keeping an eye out for quotation marks behaving badly. There should be no way for them to do so — Medium does the above substitution on all platforms, when you copy/paste, import, or even when you use our APIs.
But there are bugs. There are always bugs. And earlier this year, we saw posts with dumb quotes appearing here and there. Some research later, I found the culprit: after Medium did its proper quote substitution, Chrome’s spellcheck on Windows flagged it as incorrect:
This was a small disaster for two reasons:
- Chrome’s spellcheck was bothering people and requiring them to click on many of their words to “fix” them.
- The “fix” was actively making typography worse!
Chrome on Windows is a popular browser on a popular platform, so this was serious. And people started to notice:
I tried to find a way to fix it on our side, but couldn’t think of anything. But then I remembered that Chrome was open source. So with help from a few people on the Chrome team (, , and , thank you!) I dusted off a copy of Windows, built my own version of Chrome, fixed the issue, and submitted a patch.
This is not something I do often, nor should do often. It was a fun few-hours project with a nice side benefit that made me feel proud. Today, if you use spellcheck on Chrome, it will be friendlier towards good typography… not just on Medium, but everywhere else.
(I wrote down the technical details of how I submitted that patch to Chrome in a separate story. Check them out if you’re interested in submitting your own Chrome fix.)
Example 3: That time iOS’s spellcheck was afraid of smart quotes
And then, a similar issue kicked our ass in iOS. When we were building our iOS editor earlier this year, we already had the QSH™ (Quotation Substitution Heuristics™) handy, so we plugged them into the new codebase.
But soon enough one of our engineers, , found a bug. Specifically, I’ve started being autocorrected to I’be:
It turned out, autocorrect in iOS didn’t understand that a smart quote is the same as a dumb quote. When we switched the quote in the middle of typing, iOS started seeing two separate words, and since ve is not a word and be is… you can figure out the rest.
Disaster, once again.
Unfortunately, this time around, we could not just submit a patch (Apple, do you mind fixing this, please?). Fortunately another engineer, , came up with a simple solution — what if we make the substitution only after you’re done with the word? It’s not as elegant as immediate substitution, but it has the benefit of actually working:
So that’s everything, right?
Oh lord, not even.
One of the next frontiers is that a lot of the above only makes sense in English. Different languages use different quotation styles. Here are a few examples:
Our iOS app does a much better job here, and we’ll keep improving on other platforms, too. But the point is: none of this comes for free.
I wish I could spend my entire days looking at quotation marks, redoing underlines or inspecting glyphs. In reality, it’s a small fraction of my work.
But I enjoy doing it immensely, and the fact that typography is so “messy” is not usually a frustration — it’s an opportunity. Through quotation marks alone I “sharpened” my CSS and JavaScript, wrote one of my first Objective C “apps,” dabbled in Java, made a “major” contribution to an open source program, and became “enlightened” about languages and cultures.
So I really like quotation marks, ’kay? E’er since the ’80s. And remember when I said that code should eschew all typography subtleties ’n’ stuff? Even so, there’re still battles to be fought, like this recent ’un in our code tracker:
As they say… It ain’t over ’til it’s over.
(Eagle-eyed readers will notice that I outfoxed Medium’s editor a few times above forcing it not to change "dumb" quotes into smart ones. Also, just now. How did I do it? Leave a response if you find out.)
Read more about Medium typography in Designing Medium. Thanks to , , and , who implemented the typography substitution features in the Medium editor and helped me understand and contribute to them. And thank you to for copy-editing.
