🔤 Typography Units in CSS — ch, ex, cap, ic, lh, rlh

🌐 What Are Typography Units?

Typography units in CSS let you size elements based on font metrics— meaning they scale according to the characteristics of the current font. These units are incredibly useful for text-driven layouts, accessible sizing, and advanced typographic control.

>>“Typography units allow your design to adapt to the natural proportions of a font — making layouts more harmonious and readable.”

Note

✔ Fully responsive
✔ Font-aware, unlike px
✔ Great for text-heavy or editorial designs

📦 The 6 Typography Units

UnitBased OnUsage
chWidth of the “0” characterMeasure text areas, columns
exx-height of the fontRarely used, precise typography
capHeight of capital lettersTitle alignment & spacing
icAverage glyph advance widthCJK typography
lhLine-height of the elementVertical spacing
rlhRoot line-heightConsistent vertical rhythm

🔤 1. ch — Width of “0”

1ch equals the width of the character “0” in the current font. It’s perfect for controlling text widths and monospaced-style layouts.

ch Example

input {
  width: 30ch; /* enough for ~30 characters */
}

Great for form fields, code containers, and text-limited boxes.

🔡 2. ex — x-height

1ex = height of lowercase letter “x”. This unit reflects the visual height of lowercase text.

ex Example

.small-space {
  margin-top: 2ex;
}

Note

⚠️ Browser support varies
⚠️ Fonts differ widely → inconsistent in UI

🔠 3. cap — Capital Letter Height

1cap equals the height of uppercase letters. Perfect for aligning or spacing titles and headers.

cap Example

h1 {
  margin-bottom: 2cap; /* scales with font’s capital height */
}

Creates elegant spacing that reflects the actual typographic height.

🈶 4. ic — Ideographic Character Unit

1ic = width of one ideographic character (CJK: Chinese, Japanese, Korean). Optimized for East Asian typography.

ic Example

.cjk-box {
  width: 20ic;
}

Perfect for designing Japanese/Chinese text layouts with predictable line lengths.

📏 5. lh — Line Height Unit

1lh equals the computed line-height of the element. Fantastic for vertical rhythm and spacing that “breathes.”

lh Example

p {
  margin-bottom: 2lh; /* consistent spacing between paragraphs */
}

Note

⚡ lh references the element’s own line-height — NOT inherited.

📐 6. rlh — Root Line Height

1rlh equals the line-height set on the root (html). This ensures consistent spacing in entire design systems.

rlh Example

html {
  line-height: 1.5;
}

.section {
  padding-top: 3rlh; /* predictable across all components */
}

Perfect for global layout spacing and typographic scale systems.

🧪 Practical Use Cases

1️⃣ Perfect Text Inputs With ch

Text Field

input.email {
  width: 35ch;
}

Ensures field width fits actual character count intuitively.

2️⃣ Titles Aligned by Typographic Height (cap)

Cap-aligned Layout

h1 {
  padding-top: 1cap;
  padding-bottom: 1cap;
}

3️⃣ Perfect CJK Columns With ic

Japanese Layout

.article {
  width: 45ic;
}

4️⃣ Vertical Rhythm with lh & rlh

Vertical Rhythm

p {
  margin-top: 1lh;
  margin-bottom: 1lh;
}

.section {
  margin-bottom: 4rlh;
}

🎯 Which Typography Unit Should You Use?

Use CaseBest Unit
Form input widthsch
Precise lowercase spacingex
Title spacing aligned to fontcap
CJK layout consistencyic
Component internal spacinglh
Design system spacingrlh

⚠️ Common Mistakes

  • ❌ Using ex for UI spacing — inconsistent across fonts
  • ❌ Forgetting that lh depends on computed line-height
  • ❌ Using ch for buttons → width varies with font choice
  • ❌ Mixing typography units with px → inconsistent rhythm

Note

✔ Avoid ex for critical layout
✔ cap, lc (coming soon), and lh/rlh are excellent for typography systems

🔥 Summary

Typography units like ch, ex, cap, ic, lh, rlh create layouts that respond naturally to the characteristics of the font. They bring true typographic precision and consistency to modern CSS.

>>“Typography units help your layout breathe in harmony with the font.”

Learn more →MDN Docs 📘