DEV Community

Cover image for Cool Fonts Are Not Fonts: The Complete Guide to Unicode Text Styles
Iris Khan
Iris Khan

Posted on

Cool Fonts Are Not Fonts: The Complete Guide to Unicode Text Styles

The first time I built a "font generator," I felt like a fraud. There was no font anywhere in my code. No font file, no CSS, no typeface loading in the background. There was just a table: a list of ordinary letters on one side, and a list of strange, beautiful lookalike characters on the other. When someone typed their name and hit copy, my code quietly swapped every letter for its lookalike, and the result pasted neatly into an Instagram bio as if real styling had happened.

That swap is the entire technology behind cool fonts, and once you see it, you cannot unsee it. Every cursive bio, every gothic gaming name, every circled username you have ever admired is built from characters that Unicode created for completely different jobs: mathematics, television broadcasting, phonetic transcription, and lining up text next to Chinese characters. This guide is everything I have learned about those characters while building with them.

What cool fonts really are

A font is a set of drawings. It tells a device how to paint a character: the letter A stays the letter A, and the font decides whether it gets serifs, curves, or sharp gothic corners. Change the font and the text underneath does not change at all, which is why fonts cannot travel. Paste styled text from a word processor into a plain bio field and the styling falls off, because only the characters made the trip.

Cool fonts work the opposite way. The characters themselves change. When a generator turns "Cool" into ๐‚๐จ๐จ๐ฅ, it has not bolded anything. It has replaced C (U+0043) with ๐‚ (U+1D402, MATHEMATICAL BOLD CAPITAL C), and done the same for every other letter. The output is a different string that happens to look like your word wearing a costume.

This single fact explains everything else in this guide:

  • The style survives copy and paste, because the style is the text.
  • No app needs to support fonts for it to work. Every modern app already renders Unicode.
  • Nothing can unstyle it. There is no formatting layer to remove, only different characters to replace.
  • Machines that read text literally, like search engines, screen readers, and databases, see the costume, not your word.

Where the styles actually come from

None of these characters were designed for bios. Each family of styles was borrowed from a serious job, and knowing the original job predicts how the style behaves.

The mathematics block. Most of the big styles, bold, italic, script, Fraktur, double struck, monospace, and the sans serif family, live in one Unicode block called Mathematical Alphanumeric Symbols, U+1D400 to U+1D7FF. Unicode added it in version 3.1, back in 2001, so mathematicians could treat styled letters as different symbols. In mathematics, an italic ๐ด and a bold ๐€ in the same formula can mean two different things, so they had to be different characters, not one character in two fonts. The block holds 997 assigned characters, and Unicode's own documentation says they are meant for mathematical notation, expressly recommending against using them in ordinary text as a substitute for real formatting. The whole cool fonts industry is, technically, a misuse the standard warned about in advance.

The borrowed letters. The math block has holes, and the holes are my favorite detail in all of Unicode. Some styled letters were never added to the block because they already existed in an older block called Letterlike Symbols. So the script capital H in your name is โ„‹ (U+210B, SCRIPT CAPITAL H), the script e is โ„ฏ (U+212F), and the italic small h is โ„Ž (U+210E), which is officially the Planck constant from quantum physics. In total, 24 characters that belong to the math alphabets actually live in the Letterlike block, and their math block slots are reserved forever. Every good generator stitches the two blocks together so quietly that you never notice. Every bad generator leaves boxes where those letters should be.

The television letters. Circled and squared letters come from Enclosed Alphanumerics (U+2460 to U+24FF) and its supplement. Part of that family was encoded for compatibility with ARIB STD B24, the Japanese digital broadcasting standard, whose symbols labeled broadcast services and program types on screen. The humble bubble letter in a cute username is, by ancestry, Japanese TV infrastructure.

The wide letters. Fullwidth text (๏ผฃ๏ฝ๏ฝ๏ฝŒ) comes from the Halfwidth and Fullwidth Forms block, created so Latin letters could share the grid width of Chinese, Japanese, and Korean characters. The vaporwave look is a side effect of lining text up with kanji.

The small letters. Small caps are not really small capitals. They are lookalikes assembled from the IPA and phonetic extension blocks, characters linguists use to transcribe speech sounds. Unicode never promised a full set of them, and there is famously no true small capital X, so generators leave a plain x in its place.

The marks. Strikethrough, underline, and zalgo effects use a different trick entirely: combining marks. These are characters with no width of their own, from blocks like Combining Diacritical Marks (U+0300 to U+036F), that attach to the character before them. One mark gives you รฉ. One overlay mark per letter gives you Cฬถoฬถoฬถlฬถ. Dozens of marks stacked on every letter gives you zalgo, the horror effect named after a 2004 internet meme, which works because Unicode never set a limit on how many marks may pile onto one character.

The styles chart

Here is every major style from the verified mapping table my own tools use, one phrase per row. Notice the script and Fraktur rows quietly borrowing their capital C, F, and H from the Letterlike block.

Style Specimen Where it lives Best first use
Bold ๐‚๐จ๐จ๐ฅ ๐…๐จ๐ง๐ญ๐ฌ Math block Bio headings, short emphasis
Italic ๐ถ๐‘œ๐‘œ๐‘™ ๐น๐‘œ๐‘›๐‘ก๐‘  Math block Quotes, soft emphasis
Bold italic ๐‘ช๐’๐’๐’ ๐‘ญ๐’๐’๐’•๐’” Math block Names that must stand out
Script ๐’žโ„ดโ„ด๐“ โ„ฑโ„ด๐“ƒ๐“‰๐“ˆ Math block + Letterlike Weddings, beauty, signatures
Bold script ๐“’๐“ธ๐“ธ๐“ต ๐“•๐“ธ๐“ท๐“ฝ๐“ผ Math block Cursive names with better coverage
Fraktur โ„ญ๐”ฌ๐”ฌ๐”ฉ ๐”‰๐”ฌ๐”ซ๐”ฑ๐”ฐ Math block + Letterlike Gothic and gaming names
Bold Fraktur ๐•ฎ๐–”๐–”๐–‘ ๐•ฑ๐–”๐–“๐–™๐–˜ Math block Dark aesthetics, metal vibes
Double struck โ„‚๐• ๐• ๐• ๐”ฝ๐• ๐•Ÿ๐•ฅ๐•ค Math block + Letterlike Techy names, outline look
Sans ๐–ข๐—ˆ๐—ˆ๐—… ๐–ฅ๐—ˆ๐—‡๐—๐—Œ Math block Clean, modern profiles
Sans bold ๐—–๐—ผ๐—ผ๐—น ๐—™๐—ผ๐—ป๐˜๐˜€ Math block The safest strong style
Sans italic ๐˜Š๐˜ฐ๐˜ฐ๐˜ญ ๐˜๐˜ฐ๐˜ฏ๐˜ต๐˜ด Math block Minimal captions
Sans bold italic ๐˜พ๐™ค๐™ค๐™ก ๐™๐™ค๐™ฃ๐™ฉ๐™จ Math block Bold with a lean
Monospace ๐™ฒ๐š˜๐š˜๐š• ๐™ต๐š˜๐š—๐š๐šœ Math block Dev and retro profiles
Circled โ’ธโ“žโ“žโ“› โ’ปโ“žโ“โ“ฃโ“ข Enclosed Alphanumerics Playful short names
Small caps แด„แดแดสŸ ๊œฐแดษดแด›๊œฑ Phonetic blocks Aesthetic captions, subtle style
Fullwidth ๏ผฃ๏ฝ๏ฝ๏ฝŒใ€€๏ผฆ๏ฝ๏ฝŽ๏ฝ”๏ฝ“ Fullwidth Forms Vaporwave, spaced-out headers

A few styles also restyle digits. Bold gives you ๐ŸŽ๐Ÿ๐Ÿ๐Ÿ‘๐Ÿ’๐Ÿ“๐Ÿ”๐Ÿ•๐Ÿ–๐Ÿ—, double struck gives you ๐Ÿ˜๐Ÿ™๐Ÿš๐Ÿ›๐Ÿœ๐Ÿ๐Ÿž๐ŸŸ๐Ÿ ๐Ÿก, and circled gives you โ“ชโ‘ โ‘กโ‘ขโ‘ฃโ‘คโ‘ฅโ‘ฆโ‘งโ‘จ. Italic and script never got digit sets at all, so generators leave your numbers plain in those styles. One more reason to keep prices and dates in normal text.

How generators work under the hood

Under the marketing, a generator is three small ideas stacked together.

Idea one: the mapping table. For block styles, the table is almost embarrassingly simple. Each style starts at a known code point, and every letter is a fixed offset from there. Bold capital A is U+1D400, so bold capital B is U+1D401, and so on. A converter walks your text one character at a time, checks the exceptions list first, then does arithmetic. For assembled styles like circled and small caps, there is no arithmetic, so the table stores the full alphabet as a string and picks by position.

Idea two: the exceptions. This is where beginners get bitten, and I got bitten. If you do pure offset math for script text, the capital H lands on a reserved code point that renders as a box, because the real script H lives in Letterlike Symbols. The fix is a small hand-checked exceptions map: before doing any arithmetic, look the character up, and if it is one of the borrowed letters, use the borrowed code point. It is maybe twenty lines of data, and it is the difference between a generator that looks professional and one that quietly breaks on the name "Hannah."

Idea three: counting honestly. Almost every character in these blocks sits above U+FFFF, outside the Basic Multilingual Plane. In JavaScript and every UTF-16 system, each one is stored as a surrogate pair, two code units. I verified this against my own table while writing this guide: the four visible letters of ๐‚๐จ๐จ๐ฅ report a .length of 8, while spreading the string into code points gives the true count of 4. Any code that measures, slices, or validates styled text must count code points (Array.from(text).length), or limits will lie and slices will cut characters in half.

After conversion, one more invisible thing can happen to your text: normalization. Some systems run input through a Unicode process called NFKC, which folds compatibility characters back to their plain forms. I tested this too: NFKC turns ๐‚๐จ๐จ๐ฅ, โ’ธโ“žโ“žโ“›, and ๏ผฃ๏ฝ๏ฝ๏ฝŒ all back into "Cool". But it does nothing to แด„แดแดสŸ, because small caps characters are real phonetic letters with no plain equivalent to fold into. This is why the same styled name can survive in one app and come out plain in another.

The hidden costs

Cool fonts are not free. You pay in three currencies, and anyone using them deserves the full price list.

Cost one: accessibility

A screen reader cannot see your costume. It reads the actual characters, and for math block letters that usually means reading the full Unicode names, one letter at a time. A bold name can be announced as "mathematical bold capital A, mathematical bold small m..." all the way through the word, and some tools skip the characters entirely and read nothing at all. Neither outcome is your name.

This is not just a vibe, it is a documented failure. The W3C's accessibility guidelines include a named failure, F71, for using lookalike characters without a text alternative, under Success Criterion 1.1.1 (Non-text Content). The official example is a word that looks like "cook" but is built from Greek and Cyrillic letters, which a screen reader announces as "Greek small letter lunate sigma, Cyrillic small letter o, Greek small letter omicron, k." Accessibility writers list social media text styled with mathematical alphanumeric symbols as the same failure pattern, and Braille displays have it worse, because Braille cells follow the actual characters too. One styled line in a bio is a decoration. A styled paragraph is a locked door.

Cost two: nobody can find you

Search works on characters, so a styled word is a different string from the word people type. Your styled display name will not match a normal search for your name, a styled hashtag will not join the real hashtag's feed, and Ctrl+F on a page will sail straight past styled text without matching it. Whether a platform rescues you depends on whether it normalizes text behind the scenes, which is inconsistent and undocumented in most apps. My rule from experience: style for the people already looking at your profile, and keep at least one plain line, your real name, your niche, your city, for the people still trying to find you.

Cost three: the security shadow

The same lookalike trick has a dark mirror. Unicode publishes a file called confusables.txt, maintained under its security standard UTS #39, cataloguing characters that look alike across scripts, because attackers register domains and usernames with Cyrillic or Greek letters swapped in for Latin ones. These IDN homograph attacks have been known since a 2001 paper demonstrated the idea by registering a lookalike of a major software company's domain, and browsers still defend against them by sometimes showing a domain's ugly punycode form instead of the pretty one. Fancy math letters are a small, mostly harmless corner of this world, but the lesson transfers: text that looks identical is not necessarily the same text, and duplicate checks and moderation filters that compare raw strings can be fooled by styled spam. Use the costume for yourself, never to look like somebody else.

Where cool fonts work, and where they break

Behavior varies by platform, because every platform made its own choices about validation, fonts, and normalization. The patterns I rely on:

  • Instagram and TikTok bios: the natural habitat. Styled display names and bio lines render well on modern phones. Keep hashtags plain, because styled hashtags do not join the real feed; the searchable username underneath stays plain Latin anyway.
  • X (Twitter): display names accept styled characters, but X's published weighting system charges more for characters outside the basic ranges, so styled text eats your limit faster than it looks.
  • Discord: display names and server nicknames are the playground; the actual username is restricted to lowercase letters, numbers, underscores, and periods, so no style survives there. Server admins can also rename you, and people need to be able to type your name to @mention you.
  • Games: the strictest filter of all. Many games allowlist plain ASCII plus a few scripts for usernames and reject everything else, or show boxes. Bold and sans styles have the best survival rate; exotic styles and heavy zalgo get rejected or clamped first.
  • LinkedIn and professional profiles: the characters usually render, but think twice. Recruiters search by plain text, applicant tracking systems parse by plain text, and a styled headline can quietly remove you from both. Keep the name and headline completely plain here.
  • Email and documents: styled text in a subject line can trip spam filters (styled letters have shown up in spam for years, because lookalikes dodge keyword filters), and in documents it breaks find, sorting, and copy into other systems.

Underneath all of this sit two forces: font coverage (no glyph means an empty box, called tofu, and older budget Android phones are the classic victims, especially for circled letters) and the platform's own pipeline, which may normalize your text back to plain on save or clamp long combining mark runs, so your zalgo arrives tamer than you sent it.

How to use cool fonts well

Everything above compresses into one checklist, the same one I give everyone.

  1. Style names and headings, never body text. One or two styled lines per profile. The moment information matters, plain text takes over.
  2. Keep a plain twin. Your real name or keyword, typed normally, somewhere on the same profile. Decoration for the eye, plain text for the machines.
  3. Never style anything that must match exactly. Email addresses, discount codes, booking references, Wi-Fi passwords, and hashtags. Styled characters break matching silently.
  4. Pick boring styles for important places. Sans bold and bold are the most widely supported and the most readable. Script and Fraktur are treats for short strings only.
  5. Count double. Budget two characters for every styled letter wherever a limit is tight.
  6. Test like a stranger. Paste the result on the oldest phone you can borrow, and once, just once, listen to your profile through a free screen reader. Ten minutes that will permanently change how much you style.
  7. One accent per name. A styled word or two inside a mostly plain name reads as personality. A fully styled everything reads as a puzzle.

Which style for which job

  • Wedding, beauty, celebration: script for elegance, bold script when you need it to survive more phones. Keep it to names.
  • Gaming: Fraktur or bold Fraktur for the dark look, double struck for a cleaner outline style. Check the game's filter with a throwaway name first.
  • Business and creators: sans bold for headings. Intentional, professional, and it renders almost everywhere.
  • Playful and cute: circled letters, in short bursts. Weakest support on old devices, so never for your only name.
  • Subtle and aesthetic: small caps. The quietest style here, and the one that survives normalization filters because the characters are real letters. Still invisible to search, so pair it with plain text.
  • Retro and vaporwave: fullwidth and monospace. Maximum spacing, maximum nostalgia.
  • Memes and horror: zalgo, lightly. A little goes a long way, heavy zalgo is hostile to screen readers and gets clamped by platforms anyway.

FAQ

Are cool fonts safe to use? Will I get banned?
The characters are ordinary Unicode text, not hacks or exploits, and mainstream platforms allow them in display names and bios. What can get you in trouble is impersonation: styling your name to look like someone else's fools people the same way a lookalike domain does. Be yourself, just fancier.

Why does my styled text turn into boxes on some phones?
The phone has no glyph for those code points, so it draws an empty box called tofu. It is a font coverage problem on the viewing device, not something wrong with your text. Simpler styles, especially bold and sans bold, are covered by far more devices.

Why did my styled name become plain text after I saved it?
The platform probably normalized your input with NFKC or a similar process, which folds most styled characters back to plain letters. Small caps and upside down styles often survive, because their characters have no plain form to fold into. If a name matters, test it on the actual platform before announcing it.

Do styled letters count as one character or two?
One character to a human, two code units to JavaScript and other UTF-16 systems, because each is stored as a surrogate pair. That is why limits drain at double speed, and why developers count code points instead.

Can I use cool fonts in hashtags and usernames?
Hashtags, no: a styled hashtag is a different string and will not join the real conversation. Usernames, mostly no: platforms like Discord restrict usernames to plain lowercase letters, numbers, underscores, and periods. Display names are where the styling belongs.

Is there a way to make styled text accessible?
On the open web, yes: pair the styled text with a real text alternative, which is exactly what WCAG failure F71 asks for. In a bio field, you cannot attach alternatives, so the practical fix is the plain twin rule: the same information, in normal characters, right next to the styled version.

By Iris Khan, beginner web dev, writing the build in public.

Related Guides

  1. The Hidden Price of Fancy Text: What Those Curly Bio Letters Actually Cost You
  2. How Unicode Text Styling Actually Works
  3. Bold Text Generator: Bold Fonts for Captions, Bios and Posts
  4. Fancy Letters A to Z: Copy and Paste
  5. Fancy Font Styles: the open chart and code resource behind the styles in this guide, with the full mapping table you can copy into your own projects.

Top comments (0)