24px to rem — Subheadings and Large UI Elements

24px = 1.5rem

24 / 16 = 1.5rem

24px is a workhorse value in web design, sitting comfortably between body text and large headings.

Common Uses for 24px

• H3 / H4 headings — Many design systems set H3 at 24px
• Large buttons — Primary CTAs with 24px font size stand out
• Icon containers — 24px is the default size for Material Icons and many icon systems
• Spacing — 24px (1.5rem) is a natural spacing unit in 8-point grids (3 * 8 = 24)
• Line height — 24px is often the line height for 16px body text (1.5 line-height ratio)

24px in Framework Defaults

Framework	Token / Class	Value
Tailwind	text-2xl	1.5rem (24px)
Tailwind	w-6 / h-6	1.5rem (24px)
Material UI	h5 variant	24px
Bootstrap	h4	~24px

The 8-Point Grid Connection

24px fits perfectly into the 8-point grid system used by Google Material Design and many other frameworks:

8px  → 0.5rem   (1 unit)
16px → 1rem     (2 units)
24px → 1.5rem   (3 units)
32px → 2rem     (4 units)

This makes 24px an ideal spacing value for padding, margins, and gaps because it maintains visual rhythm with other grid-aligned elements.

Icon Sizing

The 24px icon size is an industry standard. Google Material Icons, Feather Icons, and Lucide Icons all use 24px as their default. When styling icon containers with CSS, using 1.5rem instead of 24px ensures icons scale alongside surrounding text if the user adjusts their font size.

24px in the 62.5% Base

24 / 10 = 2.4rem