Font Size Converter

Choosing the right CSS unit for font sizes is one of the most practical decisions in front-end development. The wrong unit leads to inaccessible typography, broken layouts at unusual zoom levels, or designs that look great in Figma but don't translate well to a browser. This font size converter gives you instant equivalents across all six common CSS units so you can pick the right one for your context.

Step 1: Enter Your Font Size

Type any numeric value in the input box and select its unit from the dropdown — px, pt, em, rem, %, or vw. All other unit equivalents update immediately in the conversion cards below. You can also click any conversion card to make that unit the active input, which is useful when you want to start from a specific rem or pt value.

Step 2: Adjust Base Size and Viewport Width

By default the tool assumes a 16px root font size — the browser default. If your project uses html { font-size: 10px; } (a common Tailwind-free pattern for easy math) or any other custom root size, change the "Base font size" field. The rem and em equivalents will recalculate automatically. Similarly, vw conversions depend on the viewport width — set the "Viewport width" field to match your design breakpoint for an accurate pixel equivalent.

Step 3: Preview the Size Visually

The live text preview renders sample text at the exact computed pixel size. This is especially helpful when working with very small captions (10–12px) or large display headings (48–64px) where numbers alone don't give you a feel for the visual weight. You can change the preview text to match your actual content — for example, paste your real heading text to see exactly how large it will look.

Step 4: Copy the CSS Snippet

The CSS snippet shows font-size declarations in all six units simultaneously so you can pick the one you need and paste it directly into your stylesheet. Click "Copy CSS" to copy the entire block, or simply select the line you want. The CSS uses the exact values shown in the conversion cards, rounded to four decimal places for accuracy.

Step 5: Generate a Typographic Scale

The type scale generator creates a harmonically proportioned set of font sizes from a base size and a multiplier ratio. Common ratios like the Perfect Fourth (1.333) or Golden Ratio (1.618) produce scale steps that feel visually balanced when used together for headings, subheadings, body text, and captions. Enter your base size, choose a ratio, and the tool generates a full scale from three steps below the base up to five steps above, with px, pt, and rem equivalents for each step. Copy the output as CSS custom properties (--font-size-sm, --font-size-base, etc.) ready to paste into your :root block.

Which CSS Font Size Unit Should I Use?

Use rem for most font sizes — it's relative to the root, scales with user preferences, and avoids the cascading compounding of em. Use em only when you intentionally want an element to scale relative to its parent (e.g., margin or padding on a component). Use px for fixed UI elements like icons or borders where exact sizing is critical. Use pt only for print stylesheets. Use vw for fluid display headlines that should grow with the viewport, often combined with a clamp() function to set minimum and maximum bounds.