Typography Unit Converter px ⇔ rem ⇔ em ⇔ pt ⇔ All 9 CSS Units — Live Bidirectional
Type any typography value in any unit field and all 9 units update instantly. Converts between px (pixels), rem (root em), em (parent em), pt (points), pc (picas), in (inches), cm, mm, and % of base. Set your project’s root font size (default 16px) to get project-accurate values. See a live text preview rendered at your exact converted size. Generate a modular type scale (Minor Third through Golden Ratio) with all values across px, rem, and pt. View the complete reference table for common px values and copy any row. Copy-ready CSS snippets. WCAG text size accessibility indicator. Tailwind CSS class mapping in the type scale. All calculations are browser-side — nothing sent to any server.
Type in Any Unit — All 9 Update Instantly
Bidirectional. Edit any field and everything recalculates. Adjust base font size to match your project.
The quick brown fox jumps over the lazy dog. Aa Bb Cc
| Step | Preview | px | rem | pt | Tailwind |
|---|
| px | rem | pt | pc | % | Copy |
|---|
Typography unit quick reference
0.75rem12px0.875rem14px1rem16px1.5rem24px2rem32px3rem48px9pt12px10pt13.3px12pt16px14pt18.7px18pt24px24pt32pxremFont sizes, spacingemComponent internalspxBorders, shadowsptPrint stylesheets%Widths, flex itemsRate this tool
px, rem, em, pt Explained — The Complete Guide for Designers & Developers
CSS offers two categories of length units: absolute units that have a fixed physical size regardless of context, and relative units that scale based on a reference value. For typography — font sizes, line heights, letter spacing — the choice between px, rem, em and pt has significant consequences for accessibility, responsiveness, and maintainability. Getting this right is one of the most important decisions in a front-end design system.
The four most important typography units
<html> element, which defaults to 16px in all major browsers but can be changed by the user. rem is predictable and globally consistent — 1rem always means the same thing anywhere on the page, regardless of nesting. This makes it ideal for font sizes, spacing (padding, margin, gap), and layout dimensions. When users adjust their browser default font size, all rem-based values scale proportionally — the page reflows correctly and WCAG 1.4.4 is satisfied.@media print), PDF generation tools (wkhtmltopdf, Puppeteer), and when designers specify sizes from print tools. Standard print body text is 10–12pt = 13.3–16px. Do not use pt for screen typography — use rem instead.px to rem, pt, em — Exact Conversion Formulas
| Convert from | Formula | Example | Notes |
|---|---|---|---|
| px to rem | rem = px / root-size | 16px / 16 = 1rem | Root size = 16px (browser default) |
| rem to px | px = rem x root-size | 1.5rem x 16 = 24px | Multiply by root font size |
| px to em | em = px / parent-size | 24px / 16 = 1.5em | Parent size matters |
| em to px | px = em x parent-size | 1.25em x 16 = 20px | Context-dependent |
| px to pt | pt = px x (72/96) | 16px x 0.75 = 12pt | At CSS 96 DPI standard |
| pt to px | px = pt x (96/72) | 12pt x 1.333 = 16px | At CSS 96 DPI standard |
| px to pc | pc = px / 16 | 32px / 16 = 2pc | 1 pica = 12 points = 16px |
| px to in | in = px / 96 | 96px / 96 = 1in | 96 CSS pixels per inch |
| px to cm | cm = px / 37.795 | 37.795px = 1cm | 96/2.54 = 37.795 |
| px to mm | mm = px / 3.7795 | 3.7795px = 1mm | 96/25.4 = 3.7795 |
px to rem reference table (base 16px)
| px | rem | pt | Tailwind class | Usage context |
|---|---|---|---|---|
| 10px | 0.625rem | 7.5pt | text-xs (approx) | Fine print, captions |
| 12px | 0.75rem | 9pt | text-xs | Small labels, footnotes |
| 13px | 0.8125rem | 9.75pt | — | UI secondary text |
| 14px | 0.875rem | 10.5pt | text-sm | Secondary body text |
| 16px | 1rem | 12pt | text-base | Body text (standard) |
| 18px | 1.125rem | 13.5pt | text-lg | Large body / lead text |
| 20px | 1.25rem | 15pt | text-xl | Large body / subheading |
| 24px | 1.5rem | 18pt | text-2xl | H3 / card title (WCAG large) |
| 30px | 1.875rem | 22.5pt | text-3xl | Section heading |
| 36px | 2.25rem | 27pt | text-4xl | H2 / page section |
| 48px | 3rem | 36pt | text-5xl | H1 / hero heading |
| 60px | 3.75rem | 45pt | text-6xl | Display heading |
| 72px | 4.5rem | 54pt | text-7xl | Poster / masthead |
Typography Units & Accessibility — Why rem Beats px for WCAG
WCAG 2.1 has specific requirements that directly affect which CSS unit you should use for font sizes.
Modular Type Scales — Building Harmonious Typography Systems
A modular type scale uses a single ratio to generate all font sizes in a design system. This creates visual harmony — every size is mathematically related to every other. Use the type scale generator above to explore any ratio.
| Scale name | Ratio | Character | Best for |
|---|---|---|---|
| Minor Second | 1.067 | Very subtle, barely noticeable difference between steps | Dense UIs, dashboards, data tables |
| Major Second | 1.125 | Subtle, clean, professional | Long-form reading, editorial |
| Minor Third | 1.2 | Gentle, warm, approachable | Blog posts, marketing sites |
| Major Third | 1.25 | Clear hierarchy, spacious | SaaS products, landing pages |
| Perfect Fourth | 1.333 | Strong hierarchy, expressive | Portfolio sites, bold brands |
| Augmented Fourth | 1.414 | Dramatic, very expressive | Posters, hero-led pages |
| Perfect Fifth | 1.5 | Very dramatic, large differences | Display-focused pages |
| Golden Ratio | 1.618 | Maximum contrast between steps | Short copy, poster typography |
LazyTools vs Other px to rem Converters
| Feature | LazyTools | remtopx.com | bug0.com | pacgie.com |
|---|---|---|---|---|
| Bidirectional (type any unit) | ✅ All 9 units | ⚠ px/rem only | ✅ 5 units | ✅ Yes |
| Live text preview | ✅ Rendered at exact size | ❌ No | ❌ No | ❌ No |
| Modular type scale generator | ✅ 8 scale ratios | ❌ No | ❌ No | ❌ No |
| WCAG accessibility indicator | ✅ Size classification + WCAG | ❌ No | ❌ No | ❌ No |
| CSS snippet generator | ✅ Copy-ready CSS | ❌ No | ✅ Yes | ❌ No |
| Tailwind class mapping | ✅ In type scale | ❌ No | ❌ No | ❌ No |
| Physical units (pt, pc, in, cm, mm) | ✅ All 6 | ⚠ pt only | ⚠ pt only | ⚠ pt only |
| No account required | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
Typography Unit Converter FAQ
Divide px by the root font size (default 16px). Formula: rem = px / 16. Examples: 8px=0.5rem, 12px=0.75rem, 16px=1rem, 24px=1.5rem, 32px=2rem, 48px=3rem. Type any px value in the converter above.
Multiply rem by the root font size (default 16px). Formula: px = rem x 16. Examples: 0.5rem=8px, 0.875rem=14px, 1rem=16px, 1.5rem=24px, 2rem=32px, 3rem=48px.
1rem equals 16px at the browser default root font size. If a user changes their browser font size, 1rem changes accordingly — this is what makes rem accessible. At a 10px root (62.5% trick): 1rem=10px.
Multiply px by 0.75 (= 72/96). At CSS 96 DPI: 16px = 12pt, 12px = 9pt, 24px = 18pt, 32px = 24pt. One point = 1/72 inch; one CSS pixel = 1/96 inch.
rem is relative to the root html element — always consistent, does not compound. em is relative to the parent element — compounds in nested elements (1.5em inside 1.5em = 2.25x). Use rem for global typography and spacing; em for self-contained components.
16px in all major browsers (Chrome, Firefox, Safari, Edge). This is why 1rem = 16px by default. Users can change this in browser settings — rem-based designs scale correctly when they do; px-based designs do not.
At 16px base: 1px=0.0625rem, 4px=0.25rem, 8px=0.5rem, 12px=0.75rem, 14px=0.875rem, 16px=1rem, 18px=1.125rem, 20px=1.25rem, 24px=1.5rem, 32px=2rem, 48px=3rem, 64px=4rem. See the full reference table above.
Use rem. rem scales with user browser font size preferences (WCAG 1.4.4 compliance). Use px only for borders, shadows, and elements that must not scale. This is the modern CSS best practice adopted by Tailwind, Bootstrap, and Material Design.
16px = 1rem at the default 16px base. At 10px base (62.5% trick): 16px = 1.6rem. Use the converter above and adjust the base font size to match your project.
Setting html{font-size:62.5%} makes root font size 10px (62.5% of 16px), making rem maths simpler: 1rem=10px, 1.6rem=16px. Set base to 10 in this converter to calculate values for that project setup.
At CSS 96 DPI: 1pt = 1.333px, 1px = 0.75pt. 12pt = 16px (standard body text). Points are primarily used in print stylesheets. 1pt = 1/72 inch; at 96 DPI, 1 inch = 96px, so 1pt = 96/72 = 1.333px.
A sequence of font sizes where each step uses a consistent ratio. Common: Minor Third (1.2x), Major Third (1.25x), Perfect Fourth (1.333x), Golden Ratio (1.618x). The type scale generator above shows 9 steps for any ratio in px, rem and pt.
Multiply em by the parent element’s font size. At 16px parent: 1em=16px, 1.5em=24px, 2em=32px. Set the parent font size in the converter above and type any em value to see the px equivalent.
px: borders, shadows, fixed elements. rem: font sizes, spacing, layouts (responsive and accessible). em: component-internal sizing. pt: print stylesheets and PDF generation. %: width, flex, grid column sizing.
14px = 0.875rem at 16px base (14/16=0.875). This is Tailwind text-sm. At 10px base: 14px=1.4rem. Common secondary text and UI label size.
12px = 0.75rem at 16px base (12/16=0.75) = 9pt for print. At 10px base: 12px=1.2rem. Common for captions, small labels, and secondary text. Below 12px is generally considered too small for body text accessibility.