14px to rem — Small Text and Secondary Content

14px = 0.875rem

14 / 16 = 0.875rem

14px is one of the most commonly used sizes for secondary text content in web design.

Where 14px Is Typically Used

• Helper text — Form field descriptions and hints below inputs
• Captions — Image captions, figure descriptions
• Table data — Dense data tables where space is at a premium
• Metadata — Timestamps, author names, tags
• Sidebar content — Navigation labels, category lists
• Code editor UI — VS Code and many IDEs default to 14px for code

Accessibility Considerations

14px is still readable for most users, but it approaches the lower limit for comfortable body text. WCAG 2.1 does not set a minimum font size, but the guidelines emphasize that text should be resizable up to 200% without loss of functionality. Using 0.875rem instead of 14px ensures the text scales properly when users adjust their browser font size.

Common Design System Tokens

Many design systems map 14px to a specific token:

Framework	Token / Class	Value
Tailwind	text-sm	0.875rem (14px)
Material UI	body2	0.875rem
Ant Design	@font-size-sm	14px
Bootstrap	small / .small	0.875em

14px in the 62.5% Base

If your root is 10px (62.5% trick):

14 / 10 = 1.4rem

Practical Tip

Avoid using 14px for body text on mobile devices. At smaller viewport widths, 14px can feel cramped. Consider using 16px (1rem) as the minimum body text size and reserving 14px for supplementary content only.