HTML Heading Sizes in rem (H1 through H6)

Heading Sizes: px to rem Reference

HTML headings have browser-default sizes defined as em multiples of the parent. Converted to px (assuming 16px base) and then to rem, the defaults are:

Browser Default Heading Sizes

Heading	Default (em)	px (base 16)	rem
H1	2em	32px	2rem
H2	1.5em	24px	1.5rem
H3	1.17em	~18.7px	~1.17rem
H4	1em	16px	1rem
H5	0.83em	~13.3px	~0.83rem
H6	0.67em	~10.7px	~0.67rem

Design System Heading Scales

Real-world projects rarely use browser defaults. Here are common heading scales in popular frameworks:

Tailwind CSS Typography:

Class	Size	rem
text-4xl	36px	2.25rem
text-3xl	30px	1.875rem
text-2xl	24px	1.5rem
text-xl	20px	1.25rem
text-lg	18px	1.125rem

Typographic Scale Ratios

Professional typography uses mathematical ratios to create harmonious heading hierarchies:

• Major Third (1.25): 16, 20, 25, 31.25 — subtle, elegant
• Perfect Fourth (1.333): 16, 21.3, 28.4, 37.9 — versatile, widely used
• Golden Ratio (1.618): 16, 25.9, 41.9, 67.8 — dramatic, editorial

Using rem values generated from these scales ensures consistent visual rhythm while remaining accessible. For example, a Perfect Fourth scale from 16px base:

:root {
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.333rem;    /* 21.3px */
  --text-xl: 1.777rem;    /* 28.4px */
  --text-2xl: 2.369rem;   /* 37.9px */
  --text-3xl: 3.157rem;   /* 50.5px */
}

Line Height Pairing

Each heading size should have an appropriate line height. A general rule is that larger text needs a tighter line height:

Heading size	Recommended line-height
32px+ (2rem+)	1.1 – 1.2
24px (1.5rem)	1.2 – 1.3
18–20px	1.3 – 1.4
16px (1rem)	1.4 – 1.6