Most unicode characters do not have variations associated with them. Since unicode is an evolving standard and aims to be future-compatible, variation selectors are supposed to be preserved during transformations, even if their meaning is not known by the code handling them. So the codepoint U+0067 (“g”) followed by U+FE01 (VS-2) renders as a lowercase “g”, exactly the same as U+0067 alone. But if you copy and paste it, the variation selector will tag along with it.

So you slap on a bunch of “variations” to a character that doesn’t support them (the secret message) and then pluck them off if you happen to know they are there. Sneaky sneaky.

Need an arrow that points up and to the left, that also has a circle around it? I actually assumed there wasn’t one, but there totally is.

𝐂𝐚𝐥𝐥𝐞 𝐁𝐥𝐚𝐧𝐜𝐨𝐬, 𝐂𝐨𝐬𝐭𝐚 𝐑𝐢𝐜𝐚

He said he could not remove that formatting no matter what he did. It looks kinda bold, doesn’t it? And set into a serif font. You’d think you could select it in the text editor you’re in and remove that formatting. He said he tried copy/pasting it into places where no text formatting is even allowed, like in VS Code or the URL bar of a browser. Voodoo, he said.

Here’s the thing: that text isn’t formatted.

That first “C” you see above isn’t a regular uppercase character C, our typical friend U+0043 : LATIN CAPITAL LETTER C, it’s “𝐂”, that is, U+1D402 : MATHEMATICAL BOLD CAPITAL C. It’s literally a different character in Unicode. There are… a lot of Unicode characters:

As of Unicode version 16.0, there are 155,063 characters with code points, covering 168 modern and historical scripts, as well as multiple symbol sets.

List of Unicode characters — Wikipedia

It could be written like 𝕮𝖆𝖑𝖑𝖊 𝕭𝖑𝖆𝖓𝖈𝖔𝖘, 𝕮𝖔𝖘𝖙𝖆 𝕽𝖎𝖈𝖆 instead, or 𝗖𝗮𝗹𝗹𝗲 𝗕𝗹𝗮𝗻𝗰𝗼𝘀, 𝗖𝗼𝘀𝘁𝗮 𝗥𝗶𝗰𝗮.

Should you do this to get super sweet effects in places you otherwise couldn’t? Probably not. The accessibility is rough. Listen to the audio output in this blog post. If you’re going to do it on the web where you have HTML control, do something like:

<!-- Don't do this! Leaving for posterity. -->
<span aria-label="Calle Blancos, Costa Rica">
  <span aria-hidden="true">𝕮𝖆𝖑𝖑𝖊 𝕭𝖑𝖆𝖓𝖈𝖔𝖘, 𝕮𝖔𝖘𝖙𝖆 𝕽𝖎𝖈𝖆</span>
</span>

UPDATE: See Ben’s comment on why not to do the above. Instead, make a visually hidden version that a screen reader would still see, and an ARIA hidden one that will be seen visually. (Noting potential concerns about copy/paste that started this whole article.)

<span class="visually-hidden">Calle Blancos, Costa Rica</span>
<span aria-hidden="true">𝕮𝖆𝖑𝖑𝖊 𝕭𝖑𝖆𝖓𝖈𝖔𝖘, 𝕮𝖔𝖘𝖙𝖆 𝕽𝖎𝖈𝖆</span>