Marcin Wichary has a fantastic series of posts documenting Medium’s commitment to beautiful web typography. Apart from being intrigued about some of the little tricks they use to enforce better typing habits, like disallowing users from entering two spaces in a row, I was also interested to read the technical supplement for designers and developers. It reminded me of a few things I’ve been meaning to add to my main theme and introduced several things I hadn’t really thought about.
My purpose in making this post is simply to take some notes for my own personal reference (this being the “notes” section of my development blog) for use in designing WordPress themes. I am passionate about good web typography but I don’t claim to be an expert—nor am I working on services at massive scales at the present time. I also have the freedom to be fairly casual about these things if I want to be. I tend to shy away from anything that contributes too much to payload size for only small gains in functionality.
WordPress handles much of Medium’s text replacement functionality via the ancient
wptexturize filter (browse the source). Most text replacements in WordPress require no additional action on behalf of the user; curly (“smart”) quotation marks1, apostrophes, primes, ellipses, and other things are handled exactly as you would expect. The two most common replacements that require a bit of extra work are en-dashes (e.g.
-- in 2010–2015) and em-dashes (e.g.
--- in this—but not that). Have a glance at the WordPress Codex for a full list of replacements.
WordPress text replacement is by no means complete, of course, and there are additional modifications that might be made. I happen to like Medium’s approach to em-dashes, wrapping them with hair spaces to let the words breathe. I also like some of the additions, like the right arrow shortcut, and have since authored a simple function to augment WordPress core text replacements with a few that I might like to use. This work is now a part of Ubik Text2.
On the topic of styling type for greater readability, I already use
text-rendering: optimizeLegibility but hadn’t already set
font-feature-settings: 'liga'3. I decline to mess around with font smoothing for reasons given here. Setting an explicit
letter-spacing on content looks pretty sharp. And oddly enough I already have a halfway decent print stylesheet for this theme, the product of a rainy day project at some point in the not-so-distant past.
On the topic of punctuation, I’m an avid user of Markdown in WordPress so this covers the making of lists, among other things. I quite like Medium’s implementations of custom bullet points and hanging punctuation4 but only implemented the former as a result of this reading (hanging punctuation is cool but a bit too arduous to implement for such minor aesthetic gains). Hyphenation and underlining works well enough in my themes already—and there’s no way I’m going down this particular rabbit hole. At present I use dotted borders rather than underlines and it works well enough for me.
Other odds and ends: headline alignment is a nice touch easily implemented with ems. Font feature settings are intriguing but only work with specific fonts. I’d like to play around with lining, old-style, and tabular numerals at some point when I’m not serving Google Web Fonts (which don’t always support these features).
That about wraps it up. Reading through the original post series was a good reminder of some things I’ve meant to get around to sooner or later. I’m glad to say that most of these tweaks have been successfully integrated into my main theme, the basis for all of my WordPress development, which means that anything I do will have nice typography baked in.
P.S. this article is also worth reading.
- Hopefully I’m not the only one wryly amused that such a pedantic write-up would repeatedly refer to quotation marks as “quote marks”. ↩
- Ubik Text now includes several more typographic replacements e.g. /No., /|P, /|S, and more. Browse the source to see what else I implemented. ↩
Autoprefixer handles the rest of the declarations. Note: when activating ligatures on body text be sure to switch them off for
- Here’s a hanging punctuation tutorial if you’re not keen to wait for browsers to catch up to the spec. ↩