Coyote Tracks

Long before I learned to program — and long before the World-Wide Web was even a gleam in Tim Berners-Lee’s eye — I was introduced to typography by Douglas R. Hofstadter’s Metamagical Themas. In his chapter “Variations on a Theme as the Crux of Creativity”, Hofstadter presents a full-page figure that shows 56 different versions of the letter “A”. The 56 fonts he uses show versions of “A” ranging from the spare to the ornate, with every other variation in between.

I’d never realized there was so much variation just in one letter. I was converted into a fontaholic on the spot (though not so completely as my sister, who now designs typefaces professionally for a prestigious font foundry — way to go, sis!). But it’s easy to get too absorbed in the letters.

Like Debussy, who noted that “music is the space between the notes”, I’ve become enamored with the kind of typography that happens between the letters. It’s more important than you think it is, because: It makes your text easier for people to read.

Non-Breaking Spaces

The humble non-breaking space has been a full-fledged HTML entity code since the late ’90s. Entering   will produce one in any browser that’s still in use… and yet, nobody makes use of them. It’s a shame that this character’s being wasted; it’s very useful in places like:

Before dashes

I’ve got a couple of em dashes in my very first paragraph. Go ahead and try changing your browser window’s width so the text re-flows. No matter what you do, you can’t get those dashes to show up at the beginning of a line. Ah, but this dash — this one, you can get at the beginning of a line. Looks ugly, doesn’t it?

If you look at a properly typeset book, magazine, or newspaper, you’ll see that dashes work nicely at the ends of lines, but if they wind up at the beginnings of lines, they look awkward. Almost orphaned. Putting a non-breaking space before your dashes will ensure that the awkward layout never happens. (I’ve got a pair of keystrokes in my editor bound to the sequences “ — ” and “ – ” — note that each of those sequences includes a trailing space, to save me even more typing. And in laying out those particular quoted strings, I used non-breaking spaces at the ends, so that the closing quotes are always on the same line as the rest of the sequence.)

At paragraph endings, to avoid orphans

I mentioned things looking “almost orphaned” earlier. In typesetting, the word “orphan” can refer to either of two things: One is “A single line of text at the top of a (physical) page” — this is the meaning commonly used by word processing programs, which will apply “widow and orphan protection” to ensure that no fewer than two lines ever appear together at the top or bottom of a page.

But the other meaning is “one or two short words of text forming a sole, final line of a paragraph”. For example, consider:

This is the sort of thing up with which I will not
put.

Once again, this looks horrible. And once again, it can be avoided by using a non-breaking space between the penultimate and final words of your sentences. (Okay, this takes a bit of mindfulness, I’ll admit. Honestly, it’s the sort of thing that works best when you’re editing, not when you’re writing the first time around. And you only need it with short final words; there’s no need to bother if the last word of your paragraph is “elephantine”.)

At beginnings and ends of inline titles

The history of literature and the arts is filled with titles that start or end with very short words. Titles like As You Like It, and The Importance of Being Earnest, and Of Mice and Men; titles that run the gamut from A River Runs Through It to The Wizard of Oz; from To Kill a Mockingbird to Mr. Smith Goes to Washington; from The Godfather, Part II to The King and I.

Depending on just how wide your browser window is, and what your font size is, probably at least one of those titles has a lone, orphaned word at the beginning or the end of a line. But you can resize your browser window however you like, and the titles in this paragraph will never have that orphaned-word effect. I’m sure you can guess exactly why. And the titles are: As You Like It, and The Importance of Being Earnest, and Of Mice and Men; titles that run the gamut from A River Runs Through It to The Wizard of Oz; from To Kill a Mockingbird to Mr. Smith Goes to Washington; from The Godfather, Part II to The King and I.

If Only We Had Non-Breaking Hyphens!

All this talk about non-breaking spaces is pretty cool, but what do you do when you list a phone number, and you want to avoid having (415) 555‑1212 get broken across a line-break? Or a book’s ISBN, such as 020530902‑X or 030010699‑8?

For some reason, the W3C never bothered to provide a decent non-breaking hyphen code, like &nbhy; or &nbh; or some such. More’s the pity. But the Unicode code point U+2011 (or 8209 in decimal), found in the “General Punctuation” section, is defined as a non-breaking hyphen. (It occupies the next code point after U+2010, simply called “hyphen”.) So using either ‑ or ‑ should get you a nice non-breaking hyphen in any modern browser.

If that doesn’t do it for you, you could set up a .nowrap { white-space: nowrap; } definition in your sitewide CSS file. Then just wrap any hyphenated text that you want to keep on one line in span tags with the class “nowrap”, like so: <span class="nowrap">123‑456‑7890</span>

You probably won’t be surprised to find examples of these basic principles in the source code to many of my previous posts. I’ve been doing this kind of thing for a long time.