DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

Fancy Unicode Text: How Special Characters Work Across Platforms

#webdev #beginners #programming #productivity

You have seen those social media posts with text in bold, italic, script, or double-struck fonts -- in places where formatting is not supported. Instagram bios, Twitter posts, Discord messages. These are not formatted text. They are different Unicode characters that happen to look like styled versions of regular letters.

Understanding how this works reveals something interesting about Unicode's design.

How it actually works

Unicode includes multiple complete alphabets in different mathematical styles. These exist because mathematicians need to distinguish between different types of variables. Bold lowercase a, italic lowercase a, script lowercase a, and double-struck lowercase a are all semantically distinct in mathematical notation.

The character "a" is U+0061. But there are also:

  • Bold a: U+1D41A (in Mathematical Bold Small block)
  • Italic a: U+1D44E
  • Script a: U+1D4B6
  • Double-struck a: U+1D552
  • Fraktur a: U+1D51E
  • Monospace a: U+1D68A
  • Sans-serif a: U+1D5BA
  • Sans-serif bold a: U+1D5EE

Each of these is a distinct Unicode code point. When you paste "fancy text" into a plain text field, you are not pasting formatting -- you are pasting completely different characters that just happen to look like styled versions of the Latin alphabet.

Why it works (and where it breaks)

These characters render correctly on modern platforms because modern fonts include the Mathematical Alphanumeric Symbols block. Every iPhone, Android phone, modern browser, and recent OS has fonts that cover these code points.

Where it breaks:

  • Screen readers: Assistive technology reads each character individually. "Hello" in bold Unicode reads as "mathematical bold capital h, mathematical bold small e..." This is terrible for accessibility.
  • Search: Text in fancy Unicode characters does not match normal text searches. If your Instagram bio says your name in script characters, people searching for your name will not find it.
  • Older systems: Some older email clients, terminals, or legacy systems may not have fonts covering these code points and display boxes or question marks.
  • Copy-paste from fancy text: When someone copies your fancy text and pastes it into a system that processes it (search bar, database, form field), it often fails because the system expects ASCII or standard Unicode letters.

The character mapping

Creating fancy text programmatically involves mapping each regular character to its styled equivalent:

const boldMap = {
  'A': '\u{1D400}', 'B': '\u{1D401}', // ... etc
  'a': '\u{1D41A}', 'b': '\u{1D41B}', // ... etc
  '0': '\u{1D7CE}', '1': '\u{1D7CF}', // bold digits
};

function toBold(text) {
  return [...text].map(c => boldMap[c] || c).join('');
}
Enter fullscreen mode Exit fullscreen mode

Numbers also have styled variants in some styles (bold, double-struck, sans-serif, monospace) but not all (there are no italic or script digits in Unicode).

Beyond styled text

Other Unicode tricks that work on social media:

Combining characters: Adding combining diacritical marks to create "cursed" or "glitched" text. Stacking multiple combining characters on a single base character produces text that extends vertically.

Upside-down text: Mapping to rotated Unicode characters (mostly from Latin Extended blocks). Not perfect because most letters do not have true upside-down equivalents, so similar-looking characters are substituted.

Fullwidth characters: Unicode includes fullwidth versions of ASCII characters (originally for CJK compatibility). These create a spaced-out effect.

Small caps: Using characters from various Unicode blocks that look like small capital letters. Not all letters have true small cap equivalents.

The accessibility consideration

If your use case involves communication (not just decoration), avoid fancy Unicode text. It harms accessibility, breaks search, and makes your content harder to process programmatically. For social media bio decoration where the text is secondary, it is harmless.

The generator

For quick conversion to various Unicode text styles, I built a fancy text generator that maps your input to bold, italic, script, double-struck, and other Unicode styles with one click to copy.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)