Font Size Unit Converter
Convert font sizes between pixels, points, ems, rems, and more. Essential for web developers and designers working across screen and print.
Beautiful Typography
The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Classic contrast - Serif headings with sans-serif body
Beautiful Typography
The quick brown fox jumps over the lazy dog. Typography is the art and technique...
Modern contrast - Sans-serif headings with serif body
Beautiful Typography
The quick brown fox jumps over the lazy dog. Typography is the art and technique...
Bold statements - Display headings with clean body
Beautiful Typography
The quick brown fox jumps over the lazy dog. Typography is the art and technique...
Clean consistency - Same category, different weights
Beautiful Typography
The quick brown fox jumps over the lazy dog. Typography is the art and technique...
Traditional elegance - Same category, different styles
Beautiful Typography
The quick brown fox jumps over the lazy dog. Typography is the art and technique...
How the Font Size Converter Works
This tool converts font sizes between pixels (px), points (pt), em, rem, and percentages. Enter a value in any unit, set your base size, and see instant conversions to all other units.
The converter uses standard relationships: 16px = 12pt = 1em = 1rem = 100% at default base size. Changing the base size recalculates all conversions, since em and rem are relative units.
A visual preview shows how each converted size appears. Copy individual values or export a complete conversion table. Perfect for translating design specs between different CSS methodologies.
When You'd Actually Use This
Converting design mockups to CSS
Your designer provides specs in pixels, but your team uses rem. Quickly convert all font sizes to maintain consistency while respecting user browser preferences.
Working with legacy code
Older sites often use pixels or points. When modernizing, convert to rem for accessibility. This tool helps you translate without manually calculating each value.
Creating responsive typography
You need different base sizes for mobile and desktop. Convert your desktop rem values to pixels, then recalculate for mobile's smaller base size.
Matching print designs for web
Print uses points (pt). When adapting print materials for web, convert point sizes to pixels or rem to maintain visual consistency across media.
Building component libraries
Your design system needs typography tokens in multiple units. Generate a complete size scale in px, rem, and em for maximum flexibility across projects.
Debugging CSS inheritance issues
Nested em values compound unexpectedly. Convert to rem to see actual computed sizes, or calculate what em value you need for a specific pixel result.
What to Know Before Using
Pixels are absolute, everything else is relative.16px is always 16px. But 1em depends on parent element size, and 1rem depends on root (html) font size. Know which you're using.
Browser default is usually 16px.Most browsers default to 16px root font size. But users can change this. Using rem respects their preference; px does not.
Points are for print, not screens.Points (pt) assume 96 DPI and are meant for print. On screens, 1pt ≈ 1.33px, but this varies by device pixel density.
Em compounds in nested elements.If parent is 1.2em and child is 1.5em, the child is actually 1.8 times the base (1.2 × 1.5). This can cause unexpected sizing.
Accessibility tip: Use rem for font sizes to respect user preferences. Never use px for font-size unless you have a specific reason and understand the accessibility impact.
Common Questions
Should I use px, em, or rem?
Use rem for font sizes (respects user preferences). Use em for spacing relative to text size. Avoid px for fonts unless you need exact control and accept accessibility trade-offs.
What base size should I use?
Stick with 16px as your root font size. It's the browser default and expected by users. Changing it can break user font size preferences.
How do I convert pt to px accurately?
Standard conversion: 1pt = 1.333px (at 96 DPI). So 12pt = 16px. But remember, points are print units and don't translate perfectly to screens.
Why use percentages for font size?
Percentages work like em—relative to parent. 100% = 1em. They're less common now but useful for fluid typography that scales with container width.
Do these conversions work for all properties?
Yes, the unit relationships apply to any CSS property—padding, margin, width, etc. But this tool is optimized for font size workflows.
What about viewport units (vw, vh)?
Viewport units scale with screen size, not font size. They're great for responsive headings but don't convert directly to px/rem without knowing viewport dimensions.
How do I handle browser zoom?
Using rem automatically handles browser zoom. When users zoom, the root font size changes, and all rem values scale proportionally. No extra work needed.
Other Free Tools
Font Pairing Tool
Font Pairing Tool for Designers
Letter Spacing Tool
Letter Spacing & Kerning Tool
Line Height Generator
Line Height Calculator
Text Shadow Generator
CSS Text Shadow Generator
ASCII to Hex Converter
ASCII to Hex Converter: Text to Hexadecimal Translator
Barcode Generator
Free Barcode Generator
Binary to Text Converter
Binary to Text Converter
Free Printable Calendar Maker
Create & Print Your Custom Calendar
Pie Chart Maker
Free Pie Chart Maker Online