Reference & Lookup Tools

100% Client-Side • 100% Client-Side. Calculations and conversions execute instantaneously in-browser.

CSS Unit Reference & Live Calculator

W3C CSS Values and Units Level 4 cheatsheet with interactive px/rem/em/vw converter

Interactive CSS Unit Converter (W3C Level 4)

Live bi-directional converter between px, rem, em, pt, in, cm, and viewport units with custom base root font-size.

Value:

From Unit:

To Unit:

Base Root Font (px):

Conversion Result:

1 rem

pxabsolute

Pixels

Canonical CSS reference pixel unit based on standard viewing distance.

1px = 1/96th of 1 inch

Recommendation: Best for thin borders (1px), box shadows, and fixed micro-elements.

ptabsolute

Points

Traditional typographic point unit used in print stylesheets.

1pt = 1/72th of 1 inch (4/3 px)

Recommendation: Use primarily for @media print styles.

pcabsolute

Picas

Traditional typographic unit equal to 12 points.

1pc = 12pt = 16px

Recommendation: Rarely used in modern web development; print only.

inabsolute

Inches

Physical inch measurement mapped to 96 CSS pixels.

1in = 96px = 2.54cm

Recommendation: Use for physical print page setup (@page size: 8.5in 11in).

cmabsolute

Centimeters

Metric physical centimeter measurement mapped to CSS pixels.

1cm = 96px / 2.54 = 37.795px

Recommendation: Use for print stylesheets and physical card templates.

mmabsolute

Millimeters

Physical millimeter measurement in CSS.

1mm = 1/10th of 1cm = 3.7795px

Recommendation: Use for print margins and bleed dimensions.

qabsolute

Quarter-Millimeters

Quarter millimeter unit introduced in Japanese typography.

1q = 1/4th of 1mm = 0.945px

Recommendation: Niche Japanese print layout typesetting.

remfont-relative

Root Em

Relative to root document font size. Predictable and independent of parent hierarchy.

1rem = computed font-size of <html> root (default 16px)

Recommendation: Industry standard for responsive typography, spacing, and layouts.

emfont-relative

Em

Relative to current or parent element font size. Compounds recursively with nested elements.

1em = computed font-size of current element

Recommendation: Best for component-relative padding, icons, and button margins.

chfont-relative

Character Width (0)

Width of zero character. Represents typical monospaced glyph width.

1ch = width of glyph "0" in current font

Recommendation: Ideal for limiting line lengths of text content (e.g. max-width: 65ch).

exfont-relative

X-Height

Typographic x-height of current font face.

1ex = height of lowercase "x" in current font

Recommendation: Fine typographic adjustments for superscripts or accents.

capfont-relative

Cap Height

Height of uppercase Latin capital letters (e.g. "H").

1cap = height of capital letters in current font

Recommendation: Aligning icons cleanly to capital letter heights.

icfont-relative

Ideograph Count

Relative to the full-width ideographic character advance in CJK typography.

1ic = advance measure of CJK ideograph 水

Recommendation: East Asian typography text column constraints.

lhfont-relative

Line Height

Relative to the line-height of the element itself.

1lh = computed line-height of current element

Recommendation: Creating baseline grids and vertical typographic rhythm.

rlhfont-relative

Root Line Height

Relative to the line-height of the root element.

1rlh = computed line-height of <html> root

Recommendation: Universal vertical rhythm spacing across layout modules.

vwviewport

Viewport Width

Percentage of the browser window visible viewport width.

1vw = 1% of viewport width

Recommendation: Fluid full-width hero sections and horizontal typography scaling.

vhviewport

Viewport Height

Percentage of the browser window visible viewport height.

1vh = 1% of viewport height

Recommendation: Hero sections, full-screen backdrops, and sticky modals.

vminviewport

Viewport Minimum

Smaller of 1vw or 1vh. Scales smoothly across portrait and landscape.

1vmin = min(1vw, 1vh)

Recommendation: Square responsive UI components and popups.

vmaxviewport

Viewport Maximum

Larger of 1vw or 1vh.

1vmax = max(1vw, 1vh)

Recommendation: Background elements that must cover regardless of orientation.

dvhviewport

Dynamic Viewport Height

Dynamically adapts as mobile browser address bar expands/contracts.

1dvh = 1% of dynamic viewport height (CSS Level 4)

Recommendation: Best for 100dvh mobile layouts preventing address bar clipping.

svhviewport

Small Viewport Height

Shortest possible viewport height when mobile URL bars are fully expanded.

1svh = 1% of viewport height when browser chrome is visible

Recommendation: Guarantees elements stay visible above mobile navbars.

lvhviewport

Large Viewport Height

Tallest possible viewport height when user scrolls and mobile URL bar retracts.

1lvh = 1% of viewport height when browser chrome is hidden

Recommendation: Full-bleed scrolling backgrounds.

cqwcontainer

Container Query Width

Relative to nearest parent container defined with container-type: inline-size.

1cqw = 1% of query container width

Recommendation: Reusable micro-components that adapt to their container instead of screen.

cqhcontainer

Container Query Height

Relative to height of the query container.

1cqh = 1% of query container height

Recommendation: Vertical container query responsive designs.

cqicontainer

Container Query Inline

Relative to inline (writing direction) dimension of container.

1cqi = 1% of container inline size

Recommendation: Internationalized responsive component design (LTR/RTL/Vertical).

degangle

Degrees

Standard angular degree unit for CSS transforms and gradients.

360deg = 1 full circle

Recommendation: CSS linear-gradient angles and transform: rotate(45deg).

radangle

Radians

Mathematical radian angle unit.

2π rad = 360deg ≈ 6.283rad

Recommendation: Canvas animations and scientific trigonometry calculations.

turnangle

Turns

Full circular turns. 0.5turn = 180deg, 1.25turn = 450deg.

1turn = 360deg

Recommendation: Intuitive keyframe spin animations (transform: rotate(2turn)).

stime

Seconds

Time unit in whole or decimal seconds.

1s = 1000ms

Recommendation: CSS transitions and animation-duration.

mstime

Milliseconds

Time unit in thousandths of a second.

1ms = 0.001s

Recommendation: Micro-interactions (e.g. 150ms hover effects).

About CSS Unit Reference & Live Calculator

Comprehensive reference guide for all W3C CSS Values and Units Module Level 4 specifications. Explore absolute units (px, pt, in, cm, mm), font-relative units (rem, em, ch, cap, lh), viewport units (vw, vh, dvh, svh, lvh), container query units (cqw, cqh), angles, and time units. Includes a real-time bi-directional unit conversion calculator.

Key Capabilities & Features

Complete cheatsheet for all 40+ CSS units across absolute, relative, viewport, and container queries
Interactive bi-directional unit converter between px, rem, em, pt, in, cm, vw, and vh
Custom root font size configuration (default 16px) for accurate rem calculations
Clear explanations of modern CSS Level 4 units (dvh, svh, lvh, cqw, cqi)
Practical responsive design recommendations and layout best practices

How to Use CSS Unit Reference & Live Calculator

Explore Units

Filter units by absolute, font-relative, viewport, or container query categories.

Use Live Converter

Enter any numeric value and select your source and target units.

Adjust Base Root (px)

Change the base root font size if your project uses a custom base (e.g. 10px or 16px).

Copy Converted CSS

Copy the calculated CSS value directly into your stylesheet.

Privacy & In-Browser Execution Guarantee

100% Client-Side. Calculations and conversions execute instantaneously in-browser.

Frequently Asked Questions

Why should I use rem instead of px for font sizes?

rem units scale proportionately with the user browser font size preferences (critical for accessibility), whereas hardcoded px units ignore user browser zoom and accessibility settings.

What is the difference between dvh and vh on mobile devices?

vh is fixed to the initial viewport height and gets cut off when mobile address bars expand. dvh (Dynamic Viewport Height) automatically adapts as browser navigation bars retract and expand.

Related Tools in this Suite

Measurement Reference & SI Metric Prefixes

BIPM International System of Units (SI) cheatsheet, metric prefixes (quecto to quetta), and unit converter

CSS Color Code Reference & Contrast Checker

W3C CSS Color Module Level 4 named colors with HEX, RGB, HSL, and WCAG contrast scoring

File Extension Lookup & Magic Bytes Directory

Search file extensions, format specifications, developer organizations, and magic byte signatures