30px = 1.875rem

CSS Example

/* 30px as rem */
.element {
  font-size: 1.875rem; /* 30px */
}

When to Use 30px (1.875rem)

A value of 30px (1.875rem) is commonly used for section headings (h2, h3), modal titles, and prominent UI text. In responsive web design, using 1.875rem instead of 30px ensures your headings 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.875rem instead of 30px, 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.