Cool symbols split into a few families: text marks, emoji, styled letters, sequences and invisibles. Each behaves differently when you paste it.
The short version
Start here if you only have one minute. The full guide below explains each point.
Five families
Text symbols, emoji, styled letters, sequences and invisibles.
They behave differently
Only plain text symbols follow your font and colour.
Match family to job
Use text marks wherever the layout matters.
01
Plain text symbols
These are the arrows, stars, hearts, mathematical signs and punctuation marks. They behave exactly like letters do.
You can style them with CSS, they take the colour of the text around them, and they line up in a monospace grid. This is the safest family by a wide margin.
- Follow your font and your text colour
- Widely supported, often for three decades
- The right choice for documents and interfaces
02
Emoji
Emoji are Unicode characters that carry emoji properties. The operating system draws them from a colour font, and your stylesheet cannot touch them.
They are the most expressive family and the least predictable. A recent emoji is a blank rectangle on a phone that stopped getting updates.
03
Styled letters
Bubble, cursive, Fraktur and small-capital text are not fonts. They swap each letter for a different Unicode character that happens to look styled.
That substitution is why the effect survives copy and paste, and equally why a search for the plain word stops matching.
✦Styled text is a different character for every letter. Never use it for a name, a heading or anything someone needs to find.
04
Sequences
Some symbols are several characters joined together. A flag is two regional letters. A skin-toned gesture is a hand plus a modifier. A family emoji is several people joined by invisible characters.
Copy the whole value or it comes apart into its pieces, which is exactly what a half-selected paste produces.
05
Invisible characters
A few characters occupy no space and draw nothing. Zero-width spaces and joiners do genuine typographic work in scripts such as Arabic and Hindi.
They are also the easiest thing to carry by accident, which is why running an inspector over text from an unfamiliar source is worth the ten seconds.
06
Which family to reach for
Choose a plain text symbol when the mark sits in running text or has to line up in a column. Choose an emoji when the colour picture is the entire point.
Use styled letters for short decoration only, and treat sequences as one indivisible unit whenever you move them.
How each family behaves
The practical differences side by side. This is the table to check before committing a symbol to a job that matters.
| Family | Follows your font | Matches a plain search | Typeable |
|---|---|---|---|
| Plain text symbols | Yes | Yes | Yes |
| Emoji | No | Yes | Picker only |
| Styled letters | No | No | Copy only |
| Sequences | No | Partly | Copy only |
| Invisible characters | Not applicable | No | Copy only |
Styled letters are the family that quietly fails the search test. A decorated display name is invisible to anyone searching for the ordinary spelling.
07
Copy the symbols discussed in this guide
This guide explains the topic. Use emoji symbols for the main copyable set, compare it with cursive letter symbols, and browse invisible characters for another useful angle. Each collection includes searchable Unicode names and HTML references.
08
Questions, answered
Which family is safest?+
Plain text symbols. Many were encoded in the early 1990s and render on almost every device made since.
Why can I not change an emoji's colour?+
It is drawn from a colour font supplied by the platform, so CSS colour rules have no effect on it.
Is fancy text a font?+
No. It substitutes different Unicode characters for your letters, which is why search cannot match them back to the plain word.
09
Sources and review notes
Reviewed against Unicode terminology for characters, code points, glyphs, sequences and presentation behavior.