Typography Fine-Tuning

Besides popular rem and px, there are specific units tied to font anatomy.

1. ch (Character)

Equals the width of the " 0 " character in the current font.

  • Why: Perfect for limiting text block width to a " readable " character count (usually 60-80).
article { max-width: 70ch; }

2. ex (X-height)

Equals the height of the lowercase " x " character. Useful for vertical icon alignment relative to text.

3. cap (Cap-height)

Height of capital letters. Helps perfectly " fit " an icon into the heading height.

4. ic (Ideographic)

Equals the size of a " full-width " ideograph in Asian fonts.

Note

The ch unit is your best friend in creating responsive typography. It guarantees a line of text won't become too long and tiring to read.