CSS Units
Convert between px, rem, em, vw, vh, pt, and percentages, with live results.
Quick Presets
⚙️ Configuration & Viewport
Viewport Presets:
📐
Relative & Web
Pixels px
16Root Em rem
116px base
Em em
116px parent
Percentage %
100of 16px
🖥️
Viewport
Viewport Width vw
0.83331920px width
Viewport Height vh
1.48151080px height
📏
Physical (Print / Screen)
Inches in
0.1667@ 96 DPI
Centimeters cm
0.4233Millimeters mm
4.2333Points pt
12Picas pc
1Visual Preview
16px
Text size preview:
The quick brown fox
Features
- Convert between px, rem, em, vw, vh, and percentages
- Physical units: pt, pc, in, cm, mm
- Configurable base font size for rem/em calculations
- Viewport dimensions for vw/vh calculations
- Quick presets for common font sizes
- Clamp() generator for fluid typography
Common Use Cases
- Convert pixel values to responsive rem units
- Calculate viewport units for fluid layouts
- Generate CSS clamp() for fluid typography
- Convert print units (pt) to web units (px)
- Understand relative vs absolute CSS units
CSS Unit System
CSS units are divided into absolute (fixed size) and relative (based on other values) categories. Understanding when to use each type is crucial for responsive design.
Relative Units:
- rem: Relative to root font size (html element), best for consistent sizing
- em: Relative to parent font size, useful for component-relative sizing
- %: Percentage of parent element's dimension
- vw/vh: Percentage of viewport width/height, perfect for full-screen layouts
Absolute Units:
- px: Pixels, fixed size but scales with device pixel ratio
- pt: Points (1/72 inch), primarily for print
- in/cm/mm: Physical measurements, used in print stylesheets
Best Practices:
- Use
remfor font sizes and spacing—easier to scale globally - Use
emfor padding/margin within components - Use
vw/vhfor viewport-based layouts (hero sections, full-screen) - Use
pxfor borders and fixed-size elements - Use
clamp()for fluid typography that scales with viewport
Examples
Valid - Font Size Conversion
16px = 1rem (with 16px base) Valid - Viewport Units
1920px width: 100px = 5.21vw Valid - Fluid Typography
clamp(1rem, 2vw + 0.5rem, 2rem)Frequently Asked Questions
Should I use px or rem for font sizes?
Use rem for font sizes. It respects user browser settings (accessibility) and makes global scaling easier. If a user sets their browser to larger text, rem scales but px doesn't.
What's the difference between rem and em?
rem is always relative to the root (html) font size, while em is relative to the parent element. rem is more predictable; em can compound with nesting (2em inside 2em = 4× base size).
When should I use vw/vh units?
Use vw/vh for full-screen sections, hero images, or elements that should scale with viewport size. Avoid for body text—viewport units can become too small on mobile or too large on desktop.
What is CSS clamp() and when should I use it?
clamp(min, preferred, max) sets a value that scales between min and max. Use it for fluid typography that's readable on all screen sizes: clamp(1rem, 2.5vw, 3rem) scales with viewport but never goes below 1rem or above 3rem.
Do viewport units work in all browsers?
Yes, vw/vh have excellent support (IE9+). However, mobile browsers may calculate vh differently when address bars appear/disappear. Use svh (small viewport height) for more predictable behavior in modern browsers.
💡 Tips
- Set base font size to 16px (browser default) and use rem for all font sizes—easier accessibility
- Use clamp() for fluid typography: clamp(1rem, 2vw + 0.5rem, 2rem) scales smoothly across devices
- Avoid using em for font sizes—nesting compounds the multiplier. Use rem instead
- For consistent spacing, define a scale: 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem