TheOverAnalyzed

By

How Practical Typography Helped Me Be a Better Writer

Practical Photography: Semicolons and colons
No one ever gets these right.

Forward

When Matthew Butterick launched Practical Typography in 2013, my concept of the ideal desktop writing experience was rich text (via Pages.app).[1] Back then, I hadn’t even started blogging. I knew nothing about plain text, Markdown, HTML, CSS, or JavaScript.[2] Things are a little different now. Practical Typography is an absolute gold-mine of a writing resource. I’m not alone in that assessment. Butterick’s ideas on simple and clear writing is presented in a pseudo-online book format, unsurprisingly set in wonderful typography. I want to share some of the things I learned from his tutorial, as well as encourage you to check it out for yourself.[3]

Fixing Bad Habits

Dashes

It took me all of about ten minutes to dive into the section on hyphens and dashes—a subject I was convinced I had mastered previously. Turns Out™ I was wrong.

There were a couple things wrong with my previous usage of hyphens instead of dashes:

  1. Using a double-hyphen is indicative of an en dash—not an em dash, which is what I was going for when I used -- in my writing. According to Butterick, “The em dash is used to make a break be­tween parts of a sen­tence. Use it when a comma is too weak, but a colon, semi­colon, or pair of paren­the­ses is too strong.” What I should have done was use a triple hyphen instead ---, which markdown-it (CommonMark) parses to the correct em dash.

    Incorrect:

    Prose -- aside -- back to prose.

    More correct:[4]

    Prose --- aside --- back to prose.

  2. I should have omitted the spaces on either side of the double hyphens. Again, markdown-it was smart enough to go ahead and parse the --- as an em dash, but the more proper writing convention would be to have no spaces.

    [Still] incorrect:

    Prose --- aside --- back to prose.

    Correct:

    Prose---aside---back to prose.

    The above Markdown gets parsed to this:

    <p>Prose&mdash;aside&mdash;back to prose.</p>
What’s the difference between en and em dashes?

Both dashes have different uses.[5] As stated previously, em dashes are for separating the main text and an aside. It’s sort of like a baby-version of a semicolon.[6] En dashes are appropriate to signify a range of values, such has the year range 2015–2016:

Sample Text markdown-it (CommonMark) Parse
2015-2016 2015-2016
Table 1.1 — Incorrect use of Hyphens
Sample Text markdown-it (CommonMark) Parse
2015-2016 2015–2016
Table 1.2 — Correct use of en dash

According to Butterick, this nasty habit of writers using double-hyphens in place of actual em dashes was born from the typewriter days. After a simple Finder search,[7] I spent about an hour or so going through ~50 or so Markdown documents, quickly changing all the instances of inappropriate double hyphens -- and changing them instead to the correct em dashes —.

Font Sizes

Butterick also had good advice as far as header (<h1>, <h2>, etc.) font sizes. Previously, for .entry (“body text”) <h1>'s, I was using a font size 175% (font-size: 1.75em) of the normal body text, and 150% for <h2>'s (font-size: 1.5em). This was simply too big. Not only were .entry-level headings made too big compared to the regular font size, but post titles (.postHeader and .postHeaderLinked) were even bigger. For example, for .postHeader (non-linked posts) titles, the font size was 200% body text for the homepage (.homepage), and 220% on the permalink page (.post).

Sample Text Text Type HTML & CSS Classes
Blah Body text <p>, <blockquote>
Blah Headings <h1>, <h2>
Blah “Homepage” post titles .homepage .postTitle
Blah “Permalink” post title .post .postTitle
Table 2.1 — Previous Font Sizes

Note that in Table 2.1 above, I left the font weight unchanged. The differences in font size are even more exaggerated if my previous font-weight’s are applied:[8]

Sample Text Text Type HTML & CSS Classes font-weight
Blah Body text <p>, <blockquote> 300
Blah Headings <h1>, <h2> 600
Blah “Homepage” post titles .homepage .postTitle 800
Blah “Permalink” post title .post .postTitle 800
Table 2.2 — Previous Font Sizes with font-weight Applied

According to Butterick, such extreme variations in heading sizes aren’t necessary to differentiate headings from body text. The fact that the headings are bolded and placed their own line is typically enough to visually separate headings and body text. I spent some time scaling-down the inflated heading sizes, and while doing so, eliminated the separate permalink-page .post styles as well. This wasn’t completely inspired by Butterick; this was an application of the general principle of less is more.

I’m bound to spend more time with Butterick’s Practical Typography. There’s just so much to digest. What is reassuring to me is that I had already been practicing a lot of his suggestions. That said, I’m sure this will prove a valuable resource for me in the future.

  1. But only Pages 4.3 (from iWork '09), which has always been better than version 5.0. ↩

  2. Yes, I actually hyperlinked every single one of those last few entries, because why not? ↩

  3. I’m convinced that even non-[web]bloggers could find use from Practical Typography. Indeed, he has whole sections devoted to print. ↩

  4. But still not perfect. Keep reading. ↩

  5. Butterick: “The em dash (—) is typ­i­cally about as wide as a cap­i­tal H. The en dash (–) is about half as wide.” ↩

  6. A punctuation mark so frequently misused these days. ↩

  7. Made possible only because Markdown documents are plain text, and searching through plain text documents is a snap for the OS X filesystem. ↩

  8. The standard font-weight I’ve set for Ideal Sans is 300 (font-weight: 300). (This is the default for the webfont.) ↩