48px = 3rem

CSS Example

/* 48px as rem */
.element {
  font-size: 3rem; /* 48px */
}

When to Use 48px (3rem)

A value of 48px (3rem) is commonly used for page titles (h1, h2), hero subheadings, and large display text. In responsive web design, using 3rem instead of 48px ensures your page 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 3rem instead of 48px, 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.