Unicode in CSS

What is Unicode in CSS?

CSS has multiple mechanisms for working with Unicode characters: escape sequences for inserting characters by code point, the content property for generated text, unicode-range for selective font loading, and properties that control writing direction and script rendering. Understanding these tools is essential for building multilingual, internationalized web interfaces.

CSS Unicode Escape Sequences

CSS uses a backslash-based escape syntax to insert Unicode characters by code point. The format is \ followed by one to six hexadecimal digits, optionally followed by a space:

/* Checkmark ✓ (U+2713) in generated content */
.item::before {
  content: "\2713  ";
}

/* Copyright symbol © (U+00A9) */
.footer::after {
  content: "\A9 2024 My Company";
}

/* Emoji via code point (🌍 = U+1F30D) */
.global::before {
  content: "\1F30D";
}

The trailing space after the hex digits is required if the next character is also a valid hex digit, to prevent ambiguity. Modern CSS also accepts the notation \{1F30D} with curly braces in some contexts, but browser support for this form is uneven.

The content Property and Unicode

The CSS content property (valid on ::before and ::after pseudo-elements) accepts literal Unicode strings or escape sequences. You can mix them:

.required::after {
  content: " \2733";  /* ✳ */
  color: red;
}

@font-face unicode-range

The unicode-range descriptor inside @font-face tells the browser to download a font file only when the page contains characters in the specified range. This is the backbone of efficient multilingual font loading — it prevents loading a full Japanese font just because a page has one Japanese character.

@font-face {
  font-family: "MyFont";
  src: url("latin.woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

@font-face {
  font-family: "MyFont";
  src: url("japanese.woff2");
  unicode-range: U+3000-9FFF, U+F900-FAFF;
}

The browser matches code points in the document against the declared ranges and downloads only the relevant font files.

Writing Mode and Direction

CSS controls text flow direction through three core properties:

/* Horizontal top-to-bottom (default) */
.latin { writing-mode: horizontal-tb; }

/* Vertical right-to-left (Traditional Chinese, Japanese) */
.vertical-cjk { writing-mode: vertical-rl; }

/* Right-to-left base direction (Arabic, Hebrew) */
.arabic { direction: rtl; }

CSS Counters with Non-Latin Numerals

The list-style-type property and counter() function support dozens of non-Latin numeral systems:

ol { list-style-type: cjk-decimal; }      /* CJK numerals: 一, 二, 三 */
ol { list-style-type: arabic-indic; }     /* ١, ٢, ٣ */
ol { list-style-type: devanagari; }       /* १, २, ३ */

Quick Facts