How to Convert Font Size Units Online — Free (2026)

The brevio Font Size Unit Converter converts between px, rem, em, pt, %, and vw instantly. Enter any value in any unit and see all equivalents at once. Adjust the base font size and viewport width to match your project. Everything runs client-side.

CSS Font Size Units Explained

Conversion Formulas

All conversions use pixels as the intermediate unit. The standard browser default font size is 16px.

// px → rem (assuming 16px root font size)
rem = px / 16

// rem → px
px = rem × 16

// px → pt (96 dpi display)
pt = px × (72 / 96) = px × 0.75

// pt → px
px = pt × (96 / 72) = pt × 1.333...

// px → % (of parent font size)
% = (px / parent_px) × 100

// px → vw (of viewport width)
vw = (px / viewport_width) × 100

How to Convert Font Sizes Step by Step

1. Open the Font Size Unit Converter.
2. Enter your value and select the source unit. For example, enter 18 and select px.
3. Set your base font size. The default is 16px, which is the browser default for the html element. If your project sets html { font-size: 62.5%; } (a popular trick), the base is 10px.
4. Set viewport width. Only relevant for vw conversions. Set it to your design breakpoint — for example, 1440px for desktop or 375px for mobile.
5. Read the results table. All units are shown simultaneously. The row matching your input unit is highlighted.

rem vs em: When to Use Each

Use rem for most font sizes and spacing. rem is relative to the root html element, so it is consistent regardless of where the component sits in the DOM. It respects user browser zoom and default font size preferences.

Use em when you want the size to scale with the parent component's font size. This is useful for things like line-height, letter-spacing, and padding values that should stay proportional to the text size within a specific component.

Setting a Base Font Size in Your CSS

/* Approach 1: Explicit root font size */
html {
  font-size: 16px; /* 1rem = 16px */
}

/* Approach 2: 62.5% trick — makes 1rem = 10px */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem; /* 16px */
}

/* Approach 3: Fluid root font size */
html {
  font-size: clamp(14px, 1.2vw, 18px);
}

Fluid Typography with clamp()

Modern CSS clamp() lets you create font sizes that scale smoothly between a minimum and maximum value:

font-size: clamp(1rem, 2.5vw, 2rem);
/* Minimum: 16px, fluid: 2.5% of viewport, maximum: 32px */

Frequently Asked Questions

Should I use px or rem for font sizes?

Use rem for font sizes in most cases. rem respects the user's browser font size preference (many users increase their default font size for readability). Pixels override that preference. Using rem means your layout scales correctly when someone has set their browser default to 20px instead of 16px.

Is 1rem always 16px?

1rem equals the html element's font size. The browser default is 16px, but users can change this, and your CSS can override it with html { font-size: ... }. Always set your base explicitly in the converter if your project changes the root font size.

When should I use vw for font sizes?

vw is best for large display text — hero headlines, pull quotes, or titles — that should scale proportionally with the viewport. For body text, vw alone is problematic because text becomes unreadably small on mobile. Use clamp() to set a minimum and maximum size with vw for the fluid range.

What is the 62.5% trick?

Setting html { font-size: 62.5%; } makes 1rem = 10px at the browser default of 16px, which makes rem values mentally easy to calculate (1.6rem = 16px, 2.4rem = 24px). It still respects user preferences because the calculation is relative to the user's chosen base size.