I've always been a big fan of the em dash — and I'm not the only one. Unfortunately it has become a telltale sign of AI-generated text, even if still used by many real people. And while I do use AI to help me with coding, I don't like to use it as my voice, and I don't want people thinking that my blog posts were not written by a real person.

Since I want to keep using the em dash, I started thinking if I could use something else in its place. I thought that a "double tilde" would look fun and quirky ~~ while conveying the same meaning. The problem with using two tildes is that it's not accessible: people reading the post with a screen reader will hear "tilde tilde", instead of a small pause, every time it encounters the symbols.

There are a few solutions to this problem. The easiest one is to just keep using the em dash, and use CSS to make it look different. The text could still be AI-generated, since it contains em dashes, but I'm not trying to prove that I'm human — I just want to remind the reader that behind these words is a human being who wants to convey some warmth and humor.

One problem with this solution is that I would have to add markup to every em dash:

<p>This is HTML <span class="custom-em-dash">—</span> with some CSS.</p>

And even if I could do a programmatic search-and-replace, it's still a bit ugly.

Can I do this without any special markup? As far as I know there's no way to do this in pure CSS, but there's is a clever way of doing it with CSS and a custom font:

@font-face {
  font-family: "QuirkDash Connected";
  src:
  url("/path/to/quirk-dash-connected.woff2") format("woff2"),
       url("/path/to/quirk-dash-connected.ttf") format("truetype");
  unicode-range: U+2014; /* EM DASH ONLY */
  font-display: swap;
}

Here, "QuirkDash Connected" is a custom font with just one symbol, an em dash that looks like this: —

Since it has only one symbol, I need a fallback font:

body {
  font-family: "QuirkDash Connected", system-ui, ...;
}

This will make the browser use the custom font for em dashes, and other fonts for any other characters. Because I'm still using an em dash, screen readers will pause when they encounter them, and other people (not you reading this from RSS) will see my quirky symbol.