CSS: Font based units (rem rcap rch rex ric)

Font based units (relative unit)

Font based units changes with the font size user set in their browser or operating system. For example, if user sets default font to 20px, then rem has value of 20px.

🟢 TIP: often it's better to use rem unit instead of pixels. On phone or laptop, many people have enlarged font, via system or browser. If you design a box with rem, that size grows or shrink with user's font size. But if you use pixels, it doesn't, so text overflows. This is especially important for @media query.

Root element's font size: rem

rem

Font size of Root Element.

by default is 16px. But its common for user to change it via operating system text scaling or in browser.

When used as value on font-size property of the Root Element, rem refer to the property's initial value. (in browsers, it's 16px).

/* set rem length */
:root { font-size: 18px; }

Length unit based on root element's font size

rch

Width of digit 0 of font size of Root Element. If writing direction is vertical, it is the height.

rex

Height of lowercase letter x of font size of Root Element.

rcap

Height of capital letters of the Root Element.

ric

Height of Chinese character for water 水 of the Root Element.

Length unit based on current element's font size

em

The length of em is:

• em is equal to the computed value of the font-size property of the element on which it is used. For example, if you say width: 50em on a paragraph, it means, 50 times the computed value of font-size property of the paragraph.
• If em occurs in the value of the font-size property itself, it refers to the computed value of font-size of the parent element.
• If used on the Root Element, 1em equals to the font-size property's initial value (which is 16px).

🛑 WARNING: Values compound when nested. Meaning, in nested element, if they all have font-size set to em unit, they grow on each other. It's better to always use rem instead.

Example

font size of 1.2em nested 5 times, became almost 40px.

abc

.x1e1fc {
 font-size: 1.2em;
}

<div class="x1e1fc">
 <div class="x1e1fc">
  <div class="x1e1fc">
   <div class="x1e1fc">
    <div class="x1e1fc"> abc </div>
   </div>
  </div>
 </div>
</div>

ch

Width of digit 0 of current font. If writing direction is vertical, it is the height.

ex

Height of lowercase letter x of current font.

ex is equal to current font's “x-height”, usually the height of the letter x. Typically about half of em, depending on current font.

Like em, the length of 1ex depends on parent's font-size.

cap

Height of capital letters of the current element's font.

ic

Height of Chinese character for water 水 of the current element.