← Back to Menu

Understanding Responsive Typography

Why px fails for accessibility, and how rem and em scale gracefully.

Why Pixels Are Problematic

Pixels (px) are absolute units. If a user changes their browser's default font size for accessibility (e.g., from 16px to 24px because of poor vision), elements sized in pixels will not scale up. Relative units like rem and em respect the user's preferences.

Fixed Pixels (px)

Ignores both root and parent changes.

The quick brown fox jumps over the lazy dog. (Always 16px)

Root EM (rem)

Scales exactly with the Root font size.

The quick brown fox jumps over the lazy dog. (1 rem)

Element EM (em)

Scales with the Parent Context font size.

The quick brown fox jumps over the lazy dog. (1 em)