hrbrmstr's Daily Drop

Drop #686 (2025-07-29): Typography Tuesday

hrbrmstr

Consider Even The Lowly Hyphen; endashification; Featured Free Font: Abyssopelagic

The em dash (—) has been in the spotlight of late, but it has some – er – dashing cousins that deserve their time in the spotlight. While we’ve covered hyphens in a previous Drop, the featured resource in the first section takes a more detailed look at the complexity involved when dealing with hyphens in a browser context (skip to the 👉 in that section if you do not want a bit of hyphen history in your life right now). And, since I (with many others) got schooled on en dashes this past week, we use the mid-section to transfer said schooling to all you dashing Drop readers.

TL;DR

(This is an LLM/GPT-generated summary of today’s Drop using Ollama with llama 3.2 and a custom Modelfile.)

SmollM3 went haywire for some reason, so I had to revert to the trusty standard setup. Gotta love non-deterministic computing.

Consider Even The Lowly Hyphen

Hyphens have become more uniform over time, but they used to be much more varied and interesting. Originally, scribes made hyphens as thin pen strokes angled between 20 and 45 degrees above horizontal (this should help explain the section header choice, which is set in Goudy Old Style). To tell them apart from commas, which could look similar, hyphens were sometimes doubled like an equal sign tilting upward.

During the Renaissance, many typographers used angled hyphens with italic text and level hyphens with roman text. Others mixed both styles randomly to make their pages look more like handwritten manuscripts. After master printers Robert Estienne and Claude Garamond died in the 1550s and 1560s, level hyphens became standard.

Today most hyphens are short, thick, blunt, and perfectly horizontal. They look like they came from (boring) Helvetica. This happened partly by choice, partly by accident. Hermann Zapf designed a double hyphen for his Aldus typeface in 1953, but it was removed when the font was released commercially. Bruce Rogers designed Centaur with a hyphen tilted at 48 degrees, but Monotype made it level when they adapted the font for machine typesetting. The original Linotype version of Electra had a subtly tapered hyphen angled at 7 degrees, but later versions used a plain, boring one instead.

Hyphens used to vary in width too, but now most are standardized to a quarter of an em. Sometimes shorter works better. Some Dutch designers, like Gerard Unger and Martin Majoor use hyphens that are only a fifth of an em in fonts like Swift, Flora, and Scala.

Hyphens at the end of lines often look best when they hang slightly into the right margin. Scribes did this regularly because it was easy with a pen, but it was difficult with metal type. Digital typography makes it possible again, though not all software handles it well.

It is worth taking a close look at hyphens, which were once more subtle and various than they tend to be today. The hyphen was originally a simple pen stroke, frequently the thinnest stroke the broad nib pen could make, at an angle of 20° to 45° above horizontal. To distinguish the hyphen from the comma (which could also be written as a simple, canted stroke), the hyphen was typically doubled, like an equal sign heading uphill.

Many Renaissance typographers preferred the canted hyphen with italic and the level hyphen with roman. Others mixed the two at random—one of several techniques once used to give a touch of scribal variety to the typeset page. But after the death of the master printer Robert Estienne in 1559 and of Claude Garamond in 1561, the level hyphen was the norm.

Tis a long section so I must follow the obligatory random cat photo rule.
Photo by Pixabay on Pexels.com

👉 While hyphens may seem like simple typographic adornments on the surface, Frank Taylor counsels us otherwise in “CSS Hyphens, Words, Syllables, and Languages.” It is a well-crafted and pretty fascinating post on how the relatively new CSS hyphens property interacts with language, word, and syllable boundaries in web typography. The main thrust is that proper hyphenation on the web is surprisingly complex because it fundamentally depends on linguistic context (what counts as a word or syllable, and how those elements are divided, changes from one language to another).

The hyphens property in CSS lets browsers know whether words in text can be split by hyphens at line breaks, improving readability and aesthetic flow. The most basic settings—none, manual, and auto—seem easy at first glance. However, for browsers to hyphenate correctly, they need to understand the language of the text. That understanding enables them to consult appropriate hyphenation rules and dictionaries, which differ wildly between languages.

For example, “hyphens: auto;” tells the browser to use automatic hyphenation where allowed. But this automatic function only works well if the browser knows what language it’s dealing with. It means the HTML lang attribute is crucial—not just for accessibility, but for text rendering fidelity. Without a correctly set lang attribute, hyphenation either won’t happen or will happen erroneously because the browser defaults to rules for English or may skip hyphenation entirely for unsupported languages.

Taylor illustrates that every language defines both words and syllables differently. German, for instance, has complex compounds and distinctive hyphenation rules compared to English; French has its own peculiarities, especially with word boundaries and marks like apostrophes. The article reinforces that using “hyphens: auto” without setting the correct language reduces the feature’s effectiveness. Frank links to the browser compatibility table for hypen, and draws our attention to the massive size of the table, which is a stark visual indicator of just the complexity of topic/feature.

To achieve professional-grade, internationalized typography on the web, you must combine CSS properties with correct markup—especially HTML’s lang attribute—so browsers can access the right hyphenation algorithms and dictionaries. This meticulous attention to detail ensures your text is readable, accessible, and typographically correct in every supported language.

endashification

If you are a regular consumer of these Tuesday Drops but have yet to acquire a copy of Bringhurst’s bible (–). I hereby confess to using it more as a reference tome than a daily devotional.

Section 5.2.1 school us pretty hard with its “Use spaced en dashes – rather than em dashes or hyphens – to set off phrases.”

In typescript, a double hyphen (–) is often used for a long dash. Double hyphens in a typeset document are a sure sign that the type was set by a typist, not a typographer. A typographer will use an em dash, three-quarter em, or en dash, depending on context or personal style. The em dash is the nineteenth-century standard, still prescribed in many editorial style books, but the em dash is too long for use with the best text faces. Like the oversized space between sentences, it belongs to the padded and corseted aesthetic of Victorian typography. Used as a phrase marker – thus – the en dash is set with a normal word space either side.

To avoid the being sent to typographic purgatory for other mis-uses, there are two other rules to be aware of in Bringhurst’s bible:

  • 5.2.2 Use close-set en dashes or three-to-em dashes between digits to indicate a range.
  • 5.2.3 Use the em dash to introduce speakers in narrative dialogue.

Unlearning so much (improper) em dash muscle memory is going to take a while. It does not help that every modern “grammar” helper plugin seems not to care a whit about these cardinal rules.

Increasingly, new, professional-grade typefaces come with a complete set:

  • en dash
  • em dash
  • figure dash
  • horizontal bar
  • hyphen-minus
  • non-breaking hyphen
  • minus sign
  • small em dash
  • double hyphen
  • swung dash
  • Katakana‐Hiragana double hyphen
  • hyphen, and a
  • Unicode hyphenation point

of dashing glyphs.

If you want to be boring, break out Inter (which I assume every Drop reader keeps on hand), and have at thee!

But, if you want to introduce some flair, give Abyssopelagic a go.

It has an “oceanic” vibe, is a sort of weird geometric font, and supports modern Unicode dashes (it’s be great in a sci-fi UI context).

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

  • 🐘 Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev
  • 🦋 Bluesky via https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy

☮️

, , , ,

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.