Browser-onlyNo uploadsAlways free
About Us·Contact

100+ tools · No signup · Always free

Smart CSS Unit Converter

Convert PX, REM, EM, %, VW, and VH instantly. Generate responsive typography scales and production-ready CSS.

Live ConversionTypography ScaleResponsive CSSTailwind SupportCSS Ready

How to use

1

Enter a value and pick a unit

Type any number in the Value field and select its unit — PX, REM, EM, %, VW, or VH. All other units update instantly in the results grid below.

2

Adjust context settings if needed

Click Context Settings to change the root font size (default 16px), parent/context size for EM and % calculations, and viewport dimensions for VW/VH.

3

Generate a typography scale

Set a base size and choose a modular scale ratio. The scale table generates 8 harmonically related sizes — from xs to H1 — with PX, REM, and EM values.

4

Copy CSS-ready output

Use the Responsive Font Generator for a clamp() value, or the CSS Export panel to copy Standard CSS, CSS Variables, SCSS, or Responsive CSS with one click.

5

Check the reference table

The Common Values table shows 15 frequently used sizes with PX, REM, EM, and Tailwind class. The active row highlights the value closest to your current input.

When developers use this tool

Translating Figma designs

Designers work in PX. Developers write in REM. The Figma → CSS helper converts any Figma pixel value to REM and the matching Tailwind class in one step.

Building fluid layouts

The clamp() generator creates viewport-fluid font sizes that scale smoothly between any two sizes without a single media query breakpoint.

Setting a type system

The scale generator creates a harmonically consistent type ramp — from caption to display — that you can drop straight into a design system or Tailwind config.

Working with Tailwind CSS

Tailwind's text-* classes are REM-based. The Tailwind mapping table shows exactly which class maps to which PX value at any root font size.

Accessibility & scaling

REM units respect browser font-size preferences. Use this tool to convert PX designs to REM to keep layouts accessible for users who need larger text.

Exporting to design tokens

Copy CSS Variables or SCSS variables for your entire type scale and paste them straight into your design token file or theme configuration.

How it works

Pixel-first math

Every input is first converted to a pixel value using the current context (root size, parent size, viewport). All other unit outputs are derived from that canonical PX value — so conversions are always consistent.

Configurable context

Root font size (default 16px), parent element font size, and viewport dimensions are all configurable. Change any one and all conversion results, scale values, and Tailwind mappings update in real time.

Modular type scale

The scale generator multiplies a base size by a fixed ratio at each step — the same algorithm used by Modular Scale and Type Scale.app. Eight steps give you xs through H1, all mathematically harmonious.

Fluid clamp() formula

The responsive generator builds a CSS clamp() expression from min/max values and a VW percentage. The output is immediately copy-ready and previews live in the browser so you can see the rendering before pasting.

Related tools

CSS Gradient Generator

Create linear, radial and conic CSS gradients with live preview, presets and Tailwind export.

CSS Flexbox Generator

Visual flexbox playground with 8 layout templates and responsive preview.

CSS Box Shadow Generator

Build multi-layer shadows, neumorphism and glow effects with CSS and Tailwind output.

CSS Font Generator

Upload TTF/OTF and generate @font-face CSS, font stacks and Tailwind font config.

Frequently asked questions

Quick answers about this free online tool.

REM stands for 'root em' — it's relative to the font-size set on the <html> element (the root). If the root font-size is 16px, then 1rem = 16px and 1.5rem = 24px. The key advantage over EM is that REM values are consistent throughout the page because they always reference the single root, never a parent element. This makes REM the go-to unit for scalable typography and layout.

EM is relative to the font-size of the current element's parent (or the element itself when used for non-font-size properties). If a parent div has font-size: 20px, a child with font-size: 0.8em computes to 16px. The compounding nature of EM can be tricky in nested elements — 0.8em inside 0.8em becomes 0.64em of the root. For typography, prefer REM for predictable results; use EM for component-scoped spacing like padding and margins that should scale with the component's own font size.

Use REM for font sizes in production. PX is an absolute unit — it ignores the user's browser font-size preference. Accessibility guidelines (WCAG 2.1) recommend that text can be resized up to 200% without loss of content. When a user sets their browser to a larger base font size, REM-based layouts scale correctly; PX-based layouts do not. Use PX sparingly for decorative details, borders, and shadows where sub-pixel precision matters more than scalability.

16px is the browser default and the industry standard — stick with it unless you have a strong reason to change. Some teams use a 62.5% trick (html { font-size: 62.5%; } makes 1rem = 10px for easier mental math), but this breaks browser accessibility zoom and is now considered an anti-pattern. A better approach: keep root at 16px and use this converter for the math. For Tailwind projects, the framework assumes 16px root and its text-* classes are sized accordingly.

clamp(min, preferred, max) locks a value between a minimum and maximum, with a fluid preferred value that scales with the viewport. For typography: font-size: clamp(1rem, 2vw, 1.5rem) means the text is never smaller than 1rem, never larger than 1.5rem, and fluidly scales at 2% of the viewport width in between. This eliminates the need for media-query breakpoints for typography and produces buttery-smooth responsive text across any screen size.

A practical combination: REM for font sizes (respects browser preferences, scales predictably), % or REM for layout widths (fluid, relative to container), VW/VH for full-screen sections and hero areas, and PX for fine details like borders, shadows, and minimum touch-target sizes (where absolute control matters). Avoid using VW for font sizes without a clamp() wrapper — a 2vw font on mobile becomes illegibly tiny. The clamp() generator on this page handles the formula automatically.

Tailwind's text-* classes use REM values based on a 16px root: text-xs = 0.75rem (12px), text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px), text-xl = 1.25rem (20px), text-2xl = 1.5rem (24px), etc. You can customize these in tailwind.config.js under theme.fontSize. The Tailwind Mapping table on this page shows the full mapping and lets you see how each size maps to REM and PX at your chosen root font size.

A type scale is a sequence of harmonically related font sizes generated by multiplying a base size by a fixed ratio at each step. The ratio determines how dramatic the size jumps are. Minor Second (1.125) gives subtle differences suitable for dense UI. Minor Third (1.25) is the most popular for web products — noticeable hierarchy without dramatic jumps. Perfect Fourth (1.333) gives a bold, editorial feel. Golden Ratio (1.618) is very dramatic, best for landing pages and marketing. Start with Minor Third (1.25) with a 16px base for most projects.