Font Size Converter
Convert between px, rem, and em units instantly
This is the root font size used for rem/em calculations (default is 16px)
Common Font Sizes
Quick Reference (Base: 16px)
| Pixels | REM | EM |
|---|---|---|
| 12px | 0.7500rem | 0.7500em |
| 14px | 0.8750rem | 0.8750em |
| 16px | 1.0000rem | 1.0000em |
| 18px | 1.1250rem | 1.1250em |
| 20px | 1.2500rem | 1.2500em |
| 24px | 1.5000rem | 1.5000em |
| 32px | 2.0000rem | 2.0000em |
| 48px | 3.0000rem | 3.0000em |
| 64px | 4.0000rem | 4.0000em |
Developer & Verifier
Developed by
Marcus Rodriguez
Lead Developer
Verified by
Sarah Mitchell
Product Designer, Font Specialist
What is Font Size Conversion?
Font size conversion translates between CSS units — px, rem, em, pt, and vw — using a base size (default 16px) to calculate equivalent values for responsive, accessible typography. WCAG 1.4.4 requires text resizable to 200% without assistive technology — a requirement that pixel units fail to meet.
Pixel units do not respond to browser font-size settings — only browser zoom scales px-sized text. rem units respond to both browser zoom and user font-size preferences, where the default browser font size of 16px equals 1rem. This distinction matters for the estimated 2.2 billion people globally with vision impairments (WHO 2023) who increase their default browser font size.
Font size accessibility requirements mandate relative units for body text to support low vision users. Point units (pt) remain the standard for print: 1pt = 1/72 inch, translating to approximately 1.333px on screen at standard DPI.
Contrast ratios interact with font size: WCAG allows a lower 3:1 contrast ratio for large text — defined as 18pt (24px) or bold text at 14pt (approximately 18.66px). Understanding unit conversions ensures correct threshold calculations when evaluating CSS implementation against accessibility standards.
Enter a value in any unit — px, rem, or em — and the converter instantly calculates the equivalent values in all three units. The base font size slider (10–24px) adjusts all calculations in real time, reflecting how rem and em values change with different root sizes. Quick preset buttons for common sizes (12px through 64px) populate all fields instantly, and a dynamic reference table updates to show the full conversion scale for your chosen base size.
How to Use This Converter
Set Base Size
Adjust the root font size (default 16px) to match your project's base typography scale.
Enter Value
Type a font size value in PX, REM, EM, or PT to instantly see conversions across all units.
Copy Results
Click any converted value to copy it to your clipboard for use in CSS stylesheets.
Use Presets
Click preset size buttons for common typography scale values used in design systems.
Features
PX to REM Conversion Reference
| PX | REM (base 16px) | PT | Use Case |
|---|---|---|---|
| 10px | 0.625rem | 7.5pt | Small labels |
| 12px | 0.75rem | 9pt | Caption text |
| 14px | 0.875rem | 10.5pt | Body text (small) |
| 16px | 1rem | 12pt | Body text (default) |
| 18px | 1.125rem | 13.5pt | Large body |
| 20px | 1.25rem | 15pt | Subheading |
| 24px | 1.5rem | 18pt | Heading H3 |
| 32px | 2rem | 24pt | Heading H2 |
| 48px | 3rem | 36pt | Heading H1 |
| 64px | 4rem | 48pt | Hero text |
Frequently Asked Questions
What is the difference between REM and EM?
Why is the default base font size 16px?
How do I convert PX to REM?
When should I use EM vs REM?
Does using REM affect accessibility?
What about PT (points) for web design?
Related Tools & Guides
Font Weight Calculator
Calculate CSS font-weight values for your type system
@font-face CSS Generator
Generate @font-face CSS declarations with font-display
Font Preview Generator
Preview fonts at multiple sizes and weights
Font Size Requirements
WCAG accessibility requirements for text sizing
CSS Implementation Guide
Best practices for implementing web fonts in CSS
Contrast Ratios Guide
WCAG contrast requirements and font size interactions