v131 · css
Presentation Modes
A complete side-by-side matrix of all four font-variant-emoji values — normal, text, emoji, and unicode — across multiple emoji categories, including composed sequences. Click a value card to highlight that column.
Feature detection: checking…
normal
😀 ❤️ ♠️
Browser / OS default. No override applied — system chooses presentation.
text
😀 ❤️ ♠️
Force monochrome text presentation. Dual-code-point glyphs lose colour; some may fall back to OS rendering.
emoji
😀 ❤️ ♠️
Force colour emoji presentation. Same as appending U+FE0F variation selector in markup.
unicode
😀 ❤️ ♠️
Respect the Unicode default presentation for each codepoint (VS-15 = text, VS-16 = emoji, no VS = unspecified).
Category:
| character | normal | text | emoji | unicode |
|---|
Why do some cells look the same? The
text value instructs the browser to prefer text presentation, but if the system font has no text glyph for that codepoint, it falls back to the colour emoji font. The visual result depends on OS, font stack, and Chrome version. Behaviour is most visible on dual-presentation characters like ♠ ♥ ☎ ✈.
/* Force all emoji to colour across the whole document */
:root { font-variant-emoji: emoji; }
/* Monochrome in specific contexts */
.icon, .toolbar, code { font-variant-emoji: text; }
/* Unicode-specified default (respects U+FE0E / U+FE0F) */
.user-content { font-variant-emoji: unicode; }