Design

Font Size Converter

Convert between px, pt, em, rem, %, and vw units instantly. Includes a conversion table for common typography sizes.

Quick Answer

At the default 16px base: 1rem = 16px = 12pt = 100%. Enter any value in any unit and get the equivalent in all six units.

Convert Font Size

Enter a value and unit to convert.

About This Tool

The Font Size Converter is an essential reference tool for web designers, front-end developers, and anyone working with CSS typography. It converts between the six most common font size units — pixels (px), points (pt), em, rem, percentages (%), and viewport width (vw) — using your custom base font size and viewport width settings for accurate, context-aware results.

Why Font Size Units Matter

CSS offers multiple units for font sizing, each with different behavior. Choosing the right unit affects responsive design, accessibility, and maintainability. Pixels provide exact control but ignore user font preferences. Rem units scale with the user's browser settings, improving accessibility. Em units create component-relative sizing but can compound unexpectedly in nested elements. Viewport units enable fluid typography that scales with screen size but need careful clamping to remain readable.

Pixels (px) — The Fixed Standard

CSS pixels are the most intuitive unit: 16px means sixteen pixels on the screen. On standard displays, one CSS pixel maps to one device pixel. On Retina and high-DPI displays, one CSS pixel may span 2x or 3x device pixels (handled automatically by the browser). Pixels are ideal when you need precise control — for example, matching a design mockup exactly. However, px-based font sizes do not respect the user's browser font size setting, which is an accessibility concern.

Rem — The Modern Best Practice

Rem (root em) is relative to the font size of the root <html> element, which defaults to 16px in all browsers. Because rem always references the root, it avoids the compounding problem of em units. When a user with low vision sets their browser default font to 20px, all rem-based sizes scale proportionally. This is why most modern CSS frameworks (Tailwind, Bootstrap 5, MUI) use rem for font sizes and spacing. The conversion is simple: px / base = rem. At a 16px base, 24px = 1.5rem.

Em — Component-Relative Sizing

Em is relative to the computed font size of the parent element. If a div has font-size: 20px, then 1.5em inside that div equals 30px. This makes em useful for building self-contained components where internal spacing and text scale proportionally to the component's root font size (like buttons where padding should scale with text size). The danger is compounding: nested em values multiply. A 1.2em inside a 1.2em inside a 16px root equals 23.04px, not 19.2px.

Points (pt) — The Print Standard

Points are a traditional typographic unit where 1 point = 1/72 of an inch. In CSS, at the standard 96 DPI reference, 1pt = 1.333px. Points are primarily used in print stylesheets and when converting designs from print software like InDesign or Illustrator. The common print body text size of 12pt translates to 16px on screen — which is why 16px became the browser default. Use points when preparing CSS for print media queries or when translating print specifications.

Viewport Width (vw) — Fluid Typography

The vw unit equals 1% of the viewport width. On a 1440px viewport, 1vw = 14.4px. Viewport units are used for fluid typography that scales smoothly between breakpoints, often within a CSS clamp() function: font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem). This creates type that grows with the viewport but never becomes too small or too large. Without clamp, pure vw typography is inaccessible: it can be microscopic on small screens and enormous on ultrawides.

Frequently Asked Questions

What is the difference between px, pt, em, and rem?
Pixels (px) are fixed-size units tied to the screen's physical pixels. Points (pt) are traditionally used in print typography where 1pt = 1/72 of an inch; on screens, 1pt equals 0.75px at standard DPI. Em units are relative to the font size of the parent element — if the parent is 16px, then 1em = 16px. Rem (root em) is relative to the root element's font size (usually the <html> tag), making it more predictable than em because it doesn't compound through nested elements. Each has its use case: px for pixel-perfect control, rem for scalable responsive designs, em for component-level relative sizing, and pt for print stylesheets.
Why is 16px the default base font size?
All major browsers (Chrome, Firefox, Safari, Edge) set their default font size to 16px. This became the de facto standard because it provides readable body text on most screens at typical viewing distances. When CSS specifies font-size: 100% or 1rem on the root element, it resolves to 16px. Many CSS frameworks and design systems use 16px as their base because it makes rem calculations simple: 1rem = 16px, 0.5rem = 8px, 2rem = 32px. If you change the root font size (e.g., html { font-size: 18px }), all rem-based values scale proportionally.
When should I use rem vs px in CSS?
Use rem for most typography and spacing to respect user preferences — when a user sets their browser to a larger default font size (for accessibility), rem-based layouts scale appropriately while px-based layouts do not. Use px for borders, shadows, and other decorative elements where exact pixel values matter and scaling could look wrong. Use em inside components where text elements should scale relative to their parent's font size (like buttons with padding proportional to their text). Many modern CSS methodologies recommend rem for all font sizes and spacing, with px reserved for hairline borders and box shadows.
How do percentage font sizes work in CSS?
Percentage font sizes are relative to the parent element's computed font size. If the parent is 16px, then font-size: 150% equals 24px. Unlike em, percentages are only used for font-size (not padding, margin, etc. in the same way). Percentage font sizes compound — if a parent is 120% (19.2px from 16px base) and a child is 120%, the child is 120% of 19.2px = 23.04px. This compounding behavior is why many developers prefer rem, which always references the root font size regardless of nesting depth.
What is the vw unit and when should I use it?
The vw (viewport width) unit equals 1% of the viewport's width. On a 1920px-wide viewport, 1vw = 19.2px. It is primarily used for fluid typography that scales smoothly with the browser window. A common technique is to use CSS clamp() with vw: font-size: clamp(1rem, 2.5vw, 3rem) — this sets a minimum of 1rem, scales fluidly with viewport width, and caps at 3rem. Avoid using vw alone for body text because it can become unreadably small on mobile or absurdly large on ultrawide monitors. Always pair vw with a clamp or min/max to ensure accessibility.
How do I convert pt to px for web design?
The standard conversion at 96 DPI (the CSS reference pixel density) is: 1pt = 1.333px (or equivalently, 1px = 0.75pt). This comes from the relationship between points (1/72 inch) and CSS pixels (1/96 inch): 96/72 = 1.333. So 12pt (a common print body text size) equals 16px on screen. When a designer hands you a print layout with point-based typography, multiply each point value by 1.333 to get the CSS pixel equivalent. Note that on high-DPI (Retina) displays, CSS pixels are virtual — one CSS pixel may map to 2 or 3 device pixels — but the pt-to-px conversion ratio remains the same in CSS.

You might also like

Tax & Finance

Self-Employment Tax Estimator

Calculate your quarterly SE tax payments and deductions.

⏱ 2 minFinance

Compound Interest Calculator

See how your money grows with compound interest over time.

⏱ 1 minCareer

Freelance Rate Calculator

Find your ideal hourly, daily, and project rates.

⏱ 3 min