Font Size Calculator
Calculate ideal responsive font sizes based on viewport width and base size. Free font size calculator with px, rem, em conversion and WCAG compliance.
Browser default is 16px. Used for rem/em conversion.
Used for vw unit conversion. Common: 1920, 1440, 1366, 375.
| px | rem | em | pt | vw | |
|---|---|---|---|---|---|
| 8 | 0.5 | 0.5 | 6 | 0.4167 | |
| 10 | 0.625 | 0.625 | 7.5 | 0.5208 | |
| 12 | 0.75 | 0.75 | 9 | 0.625 | |
| 14 | 0.875 | 0.875 | 10.5 | 0.7292 | |
| 16 | 1 | 1 | 12 | 0.8333 | |
| 18 | 1.125 | 1.125 | 13.5 | 0.9375 | |
| 20 | 1.25 | 1.25 | 15 | 1.0417 | |
| 24 | 1.5 | 1.5 | 18 | 1.25 | |
| 28 | 1.75 | 1.75 | 21 | 1.4583 | |
| 32 | 2 | 2 | 24 | 1.6667 | |
| 36 | 2.25 | 2.25 | 27 | 1.875 | |
| 40 | 2.5 | 2.5 | 30 | 2.0833 | |
| 48 | 3 | 3 | 36 | 2.5 | |
| 56 | 3.5 | 3.5 | 42 | 2.9167 | |
| 64 | 4 | 4 | 48 | 3.3333 | |
| 72 | 4.5 | 4.5 | 54 | 3.75 | |
| 96 | 6 | 6 | 72 | 5 |
Formulas: rem = px / base, em = px / base, pt = px * 0.75, vw = (px / viewport) * 100
WCAG Size Compliance
Large text: 24px+ (or 18.66px+ if bold). Large text has lower contrast requirements.
Live Preview
The quick brown fox jumps over the lazy dog. 0123456789
About Font Size Calculator
Convert between font size units (px, rem, em, pt, vw) with a customizable base font size and viewport width. Check WCAG accessibility compliance for your font sizes and preview text at different sizes in real time.
How to Use Font Size Calculator
Open Font Size Calculator
Navigate to Font Size Calculator in your browser — no installation or sign-up required.
Enter your data
Type, paste, or upload the content you want to process into the input area.
Configure options
Adjust any available settings to customize the output to your needs.
Get your result
The result appears instantly. Copy it to your clipboard or download it as a file.
Frequently Asked Questions
Related Tools
PX to REM Converter
Convert between pixels and rem/em units online for responsive CSS. Free PX to REM converter with custom base font size support.
CSS Triangle Generator
Generate pure CSS triangles and arrows with customizable size, direction, and color. Free CSS triangle code generator with live preview.
Tailwind Color Finder
Find the closest Tailwind CSS color class for any HEX or RGB color. Free Tailwind color matcher with visual comparison and copy-ready class names.
Glassmorphism Generator
Generate glassmorphism CSS effects with adjustable blur, transparency, and border. Free glass UI generator with live preview and copy-ready code.
Neumorphism Generator
Generate neumorphic soft UI box shadows with adjustable depth, blur, and colors. Free neumorphism CSS generator with live preview and code output.
CSS Beautifier
Format and indent CSS code online for cleaner stylesheets. Free CSS beautifier with proper indentation and syntax organization.