22px = 1.375rem

CSS Example

/* 22px as rem */
.element {
  font-size: 1.375rem; /* 22px */
}

When to Use 22px (1.375rem)

A value of 22px (1.375rem) is commonly used for subheadings (h3, h4), card titles, and section labels. In responsive web design, using 1.375rem instead of 22px ensures your subheadings and card titles scale proportionally when users change their browser font size settings.

Why Use REM?

REM units are relative to the root element's font-size, making them ideal for accessible, responsive designs. When you write 1.375rem instead of 22px, your layout respects user preferences — if someone sets their browser to a larger font size for readability, all your rem-based values scale up proportionally.