What's the difference between px, rem, em?

Pixels are absolute and ignore user preferences — 16px is always 16px regardless of browser zoom or font size settings. Rem values scale with the root html element's font size, so users who've increased their default for accessibility get a properly scaled experience. Em values are relative to the parent element's font size, which makes them useful for component-internal proportions but means they can compound through the cascade in unexpected ways.

Which unit should I use for body text?

Rem is the right default for body text and most typography. It scales with user accessibility settings, stays consistent across components because it's always relative to the root, and produces a simpler mental model than em-based cascading. Pixels still make sense for things like borders or exact-pixel design needs that shouldn't scale, and em is occasionally useful for spacing within a component that should follow its own font size.

What's a modular type scale?

It's a mathematical progression where each heading level is the base size multiplied by a fixed ratio. A 1.25 ratio (the 'major third' from music theory) creates harmonious sizes that feel related; 1.125 produces a subtler scale, 1.333 a more dramatic one, and 1.618 follows the golden ratio. Design systems like Bootstrap, Tailwind, and Material Design all use modular scales to keep typography coherent across components.

What is fluid typography (clamp)?

Fluid typography uses CSS clamp(min, preferred, max) to make font sizes scale smoothly between viewport sizes without explicit breakpoints. An expression like clamp(1rem, 0.5rem + 1vw, 1.5rem) scales the font size based on viewport width, with the result clamped between 1rem and 1.5rem. The result is smooth visual progression as the screen size changes rather than the abrupt jumps you get from media-query-based size switching.

What's the minimum font size for accessibility?

16px is the widely accepted floor for body text in long-form content. Below that, readability suffers for aging users, anyone with mild vision issues, and people reading on smaller phones. WCAG doesn't mandate a specific number, but the consensus among accessibility practitioners is to stay at 16px or above for body and to avoid going below 12px for any incidental text. Always test on real devices, since rendering varies.

Should heading sizes vary by viewport?

In modern CSS, yes — fluid typography handles this elegantly. Headings can be larger and more impactful on desktop and proportionately smaller on mobile, all expressed as a single clamp() declaration. The older approach used explicit breakpoints with different sizes at each step, which still works but generates more CSS and produces visible jumps when the viewport crosses a threshold. Smooth scaling is generally cleaner.

Is the data sent anywhere?

No. The calculator does straightforward arithmetic in JavaScript that runs in your browser. Your design parameters and computed values stay local — there's no server-side component to be concerned about.

Font Size Calculator

Calculate ideal responsive font sizes based on viewport width and base size. Free font size calculator with px, rem, em conversion and WCAG compliance.

CSS Tools Calculators

Instant results

Base Font Size (px)

Browser default is 16px. Used for rem/em conversion.

Viewport Width (px)

Used for vw unit conversion. Common: 1920, 1440, 1366, 375.

Conversion Table

px	rem	em	pt	vw
8	0.5	0.5	6	0.4167
10	0.625	0.625	7.5	0.5208
12	0.75	0.75	9	0.625
14	0.875	0.875	10.5	0.7292
16	1	1	12	0.8333
18	1.125	1.125	13.5	0.9375
20	1.25	1.25	15	1.0417
24	1.5	1.5	18	1.25
28	1.75	1.75	21	1.4583
32	2	2	24	1.6667
36	2.25	2.25	27	1.875
40	2.5	2.5	30	2.0833
48	3	3	36	2.5
56	3.5	3.5	42	2.9167
64	4	4	48	3.3333
72	4.5	4.5	54	3.75
96	6	6	72	5

Formulas: rem = px / base, em = px / base, pt = px * 0.75, vw = (px / viewport) * 100

WCAG Size Compliance

Font Size (px)

Bold text

Normal text (not large)

Level AA: Pass(min contrast 4.5:1)

Level AAA: Check contrast(min contrast 7:1)

Large text: 24px+ (or 18.66px+ if bold). Large text has lower contrast requirements.

Live Preview

Preview Size: 16px (1.00rem)

The quick brown fox jumps over the lazy dog. 0123456789

About Font Size Calculator

Convert between font size units (px, rem, em, pt, vw) with a customizable base font size and viewport width. Check WCAG accessibility compliance for your font sizes and preview text at different sizes in real time.

How to Use Font Size Calculator

Choose calculation type

Pick the kind of math you need. The four common modes are px-to-rem conversion for individual values, modular type scale for generating an entire heading hierarchy from a base size, fluid typography for CSS clamp() expressions that scale smoothly across viewports, and accessibility checks against minimum size guidelines.

Enter parameters

The inputs depend on which mode you're in. Modular scale wants a base size (commonly 16px) and a ratio (1.25 for major-third, 1.333 for perfect-fourth, 1.618 for golden). Px-to-rem just needs the pixel value to convert. Fluid typography asks for the minimum size, the maximum size, and the viewport widths where each one should hit.

View calculated values

The calculator shows the resulting sizes alongside the formulas it used and the ready-to-paste CSS. For modular scales, that's the full heading hierarchy from H1 down through H6 plus body text. For fluid typography, it's the clamp() expression with the viewport-width coefficient already computed. Most calculators also suggest reasonable line-height values that pair well with each font size.

Apply in CSS

Copy the generated values into your stylesheet. The output drops cleanly into design system declarations, component styles, and responsive typography sections. Documenting which ratio and base size you used makes the design system easier for the next person on the team to extend without breaking the harmony of the existing scale.

When to Use Font Size Calculator

Responsive typography

The modern way to handle font size across screen sizes is fluid scaling — smooth interpolation between a minimum on mobile and a maximum on desktop, with no breakpoint jumps in between. CSS clamp() handles this with a single declaration, but the math is finicky enough that getting the right viewport-width coefficient by hand is error-prone. The calculator does that math for you and outputs ready-to-paste CSS.

Modular type scale

Design systems typically pick a base font size (often 16px) and a ratio that governs the progression up through H6, H5, H4, and on to H1. Common ratios are 1.125 for subtle progression, 1.25 for moderate, and 1.333 for pronounced — each producing a different feel. The calculator generates the full scale from those two inputs, which saves the trial-and-error of doing each level by hand. Bootstrap, Tailwind, and Material Design all follow this pattern.

REM/EM conversion

Designers usually think in pixels, but accessible CSS often wants you to write in rem so that user preferences for browser font size scale the entire interface. Converting back and forth is easy in principle (16px = 1rem at the default root size) but tedious in practice when you're doing it for forty different declarations. The calculator gives you bulk conversions and explains when em is preferable to rem.

Accessibility verification

WCAG doesn't mandate a specific minimum font size, but most accessibility audits flag body text below 16px for long-form reading. The calculator lets you check your design system against that bar quickly, especially when working between Figma (where designers often pick smaller sizes that look fine on a high-DPI laptop) and the implemented site (where the same sizes feel cramped on a phone).

Font Size Calculator Examples

Fluid clamp

Input

Min: 14px (mobile), Max: 18px (desktop), Viewport scaling

Output

font-size: clamp(0.875rem, 0.75rem + 0.625vw, 1.125rem);

Fluid typography in a single line. The min and max bound the size on small and large screens, while the middle term — combining a fixed rem value with a viewport-width coefficient — handles the smooth transition. The tool computes the coefficient so the size hits exactly the min at your chosen mobile breakpoint and exactly the max at desktop.

Type scale generation

Input

Base: 16px, Ratio: 1.25 (major third)

Output

Body sits at 16px (1rem). H6 matches body at 16px. H5 climbs to 20px, H4 to 25px, H3 to 31.25px, H2 to 39.06px, and H1 lands at 48.83px.

A modular scale built on the major third musical interval. Each step is the previous size multiplied by 1.25, which produces a progression that feels harmonious rather than arbitrary. Other common ratios include 1.125 for a subtle scale, 1.333 for the perfect fourth, and 1.618 for the golden ratio.

PX to REM

Input

Convert 24px (with base 16px)

Output

1.5rem (24 ÷ 16). The same value as em is also 1.5em, but em is relative to the parent's font size rather than the root.

Standard conversion math. Picking rem over px is what makes your typography respect a user who's bumped their browser's default font size up for accessibility — px ignores that preference, rem honors it. The em unit cascades from the parent, which is occasionally what you want but more often a source of bugs.

Tips & Best Practices for Font Size Calculator

1.Reach for rem for body text by default. Users who've increased their browser's default font size for accessibility reasons get a scaled experience for free. Pixels look identical to that user, which is exactly the wrong behavior.
2.Don't go below 16px for body text. Smaller sizes work in tightly designed marketing pages but cause real readability problems in long-form content, on small phones, and for users with mild vision issues. The 16px floor is widely accepted across accessibility guidelines.
3.A modular scale produces harmony for free. Sizes related by a consistent ratio feel coherent in a way that hand-picked sizes rarely do. Pick a ratio you like and stick to it across the design system rather than tweaking each level independently.
4.Validate on real devices, not just the browser inspector. The same 14px text behaves differently on a 6-inch phone in bright sunlight than on a 27-inch monitor at arm's length. A quick QA pass on actual hardware catches problems the calculator can't.
5.Pair font size with appropriate line height. Roughly 1.5 for body text and 1.2 for headings is a reliable starting point. Longer line lengths benefit from slightly more leading; tighter columns can get away with less.
6.Fluid clamp() typography reduces media query sprawl. Instead of stepping the size up at 768px and again at 1024px, one clamp() declaration handles the whole range. The CSS is leaner and the visual transitions are smoother.

Frequently Asked Questions

It handles the typography math you don't want to do by hand — pixel to rem and em conversions, modular type scales where each heading size derives from a base size and ratio, fluid typography clamp() expressions for responsive sizing, and reasonable line-height suggestions. Useful for setting up a design system, dialing in responsive typography, and verifying that your sizes meet accessibility recommendations.

Font Size Calculator

WCAG Size Compliance

Live Preview

About Font Size Calculator

How to Use Font Size Calculator

Choose calculation type

Enter parameters

View calculated values

Apply in CSS

When to Use Font Size Calculator

Responsive typography

Modular type scale

REM/EM conversion

Accessibility verification

Font Size Calculator Examples

Fluid clamp

Type scale generation

PX to REM

Tips & Best Practices for Font Size Calculator

Frequently Asked Questions

Related Tools

PX to REM Converter

CSS Triangle Generator

Tailwind Color Finder

Glassmorphism Generator

Neumorphism Generator

CSS Beautifier