Font Size Chart
Universal typography scale covering points (pt), pixels (px), em, rem, percent (%), and physical millimeters across 6pt to 72pt.
Complete pt ↔ px ↔ em ↔ rem ↔ % ↔ mm Conversion Table
Calculated at standard 96 DPI with a 16px root font baseline:
| Live Sample | pt | px | rem | em | % | mm | Standard Application |
|---|---|---|---|---|---|---|---|
| Aa | 6 pt | 8 px | 0.50 | 0.50 | 50% | 2.12 | Micro print, copyright disclaimer |
| Aa | 7 pt | 9.33 px | 0.58 | 0.58 | 58.3% | 2.47 | Compact pocket Bibles, legal disclaimer |
| Aa | 8 pt | 10.67 px | 0.67 | 0.67 | 66.7% | 2.82 | Footnotes, tables, data badges |
| Aa | 9 pt | 12 px | 0.75 | 0.75 | 75% | 3.18 | Tailwind text-xs, form captions |
| Aa | 10 pt | 13.33 px | 0.83 | 0.83 | 83.3% | 3.53 | Book publishing standard novel body |
| Aa | 10.5 pt | 14 px | 0.88 | 0.88 | 87.5% | 3.70 | Tailwind text-sm, magazine body |
| Aa | 11 pt | 14.67 px | 0.92 | 0.92 | 91.7% | 3.88 | Academic journals, business letters |
| Aa | 12 pt | 16 px | 1.00 | 1.00 | 100% | 4.23 | Tailwind text-base, WCAG web body |
| Aa | 14 pt | 18.67 px | 1.17 | 1.17 | 116.7% | 4.94 | Tailwind text-lg, large print |
| Aa | 16 pt | 21.33 px | 1.33 | 1.33 | 133.3% | 5.64 | Tailwind text-xl, H4 sub-headings |
| Aa | 18 pt | 24 px | 1.50 | 1.50 | 150% | 6.35 | Tailwind text-2xl, H3 section headers |
| Aa | 20 pt | 26.67 px | 1.67 | 1.67 | 166.7% | 7.05 | Featured quotes, H3 major headings |
| Aa | 24 pt | 32 px | 2.00 | 2.00 | 200% | 8.47 | Tailwind text-3xl, H2 article titles |
| Aa | 28 pt | 37.33 px | 2.33 | 2.33 | 233.3% | 9.88 | Promotional banners, H1 titles |
| Aa | 32 pt | 42.67 px | 2.67 | 2.67 | 266.7% | 11.29 | Hero titles, conference slides |
| Aa | 36 pt | 48 px | 3.00 | 3.00 | 300% | 12.70 | Tailwind text-5xl, event posters |
| Aa | 48 pt | 64 px | 4.00 | 4.00 | 400% | 16.93 | Tailwind text-6xl, landing display |
| Aa | 60 pt | 80 px | 5.00 | 5.00 | 500% | 21.17 | Tailwind text-7xl, massive hero titles |
| Aa | 72 pt | 96 px | 6.00 | 6.00 | 600% | 25.40 | 1 inch physical display billboard |
Design System Typography Standards Compared
| Role | Tailwind CSS | Google Material Design 3 | Apple iOS (HIG) |
|---|---|---|---|
| Caption / Footnote | 12px (text-xs) | 11px (bodySmall) | 12px (Caption 2) |
| Secondary / Subtext | 14px (text-sm) | 14px (bodyMedium) | 15px (Subheadline) |
| Body (Primary) | 16px (text-base) | 16px (bodyLarge) | 17px (Body Regular) |
| Title (Small) | 18px (text-lg) | 18px (titleSmall) | 20px (Title 3) |
| Title (Medium) | 20px (text-xl) | 22px (titleMedium) | 22px (Title 2) |
| Heading (Large) | 24px (text-2xl) | 28px (headlineSmall) | 28px (Title 1) |
| Display Hero | 36px–60px (text-4xl+) | 45px–57px (displayLarge) | 34px (Large Title) |
Frequently Asked Questions (FAQ)
What is the standard font size for website body text?
The recommended web standard for body text is 16px (1rem / 12pt). This satisfies WCAG Level AA accessibility standards. Many modern publications use 17px to 18px for enhanced readability on high-DPI retina screens.
What font size scale is used in Tailwind CSS and Material Design?
Tailwind CSS and Material 3 both rely on a 16px baseline modular scale starting from text-xs (12px / 0.75rem) through text-base (16px / 1rem) up to display headers text-9xl (128px / 8rem).
What is 14px in pt and rem?
14px equals 10.5pt in print typography (14 × 0.75) and 0.875rem in web CSS (14 ÷ 16).
How do I choose the best font size for mobile vs desktop?
Keep body text at a minimum of 16px on mobile to avoid iOS Safari auto-zooming input fields. Use CSS clamp() (e.g., font-size: clamp(1rem, 2.5vw, 1.5rem)) for smooth fluid scaling between mobile and desktop displays.