glunty

CSS Units Reference

A searchable reference of CSS length, viewport, and function units and what each one does.

Unit What it does
px Pixels; the basic CSS length. It is a device-independent reference pixel, not always one hardware dot.
pt Points; 1pt equals 1/72 of an inch. Common when styling for print.
pc Picas; 1pc equals 12 points or 1/6 of an inch.
cm Centimeters; 1cm equals about 37.8px by the CSS definition.
mm Millimeters; one tenth of a centimeter.
in Inches; 1in equals exactly 96px or 2.54cm in CSS.
Q Quarter-millimeters; 1Q equals one quarter of a millimeter.
em Relative to the current font-size, so 2em is twice as big; on the font-size property it is relative to the parent.
rem Relative to the root (html) element font-size, ignoring how deeply nested the element is.
ex The x-height of the current font, roughly the height of a lowercase x.
ch The advance width of the 0 (zero) character in the current font.
cap The cap height of the current font, the height of a flat capital letter.
ic The advance width of the CJK water ideograph in the current font.
lh The computed line-height of the current element.
rlh The computed line-height of the root element.
vw 1% of the viewport width.
vh 1% of the viewport height.
vmin 1% of the smaller viewport dimension, whichever of width or height is shorter.
vmax 1% of the larger viewport dimension, whichever of width or height is longer.
svw 1% of the small viewport width, the width when browser UI bars are shown.
svh 1% of the small viewport height, the height when browser UI bars are shown.
lvh 1% of the large viewport height, the height when browser UI bars are hidden.
dvh 1% of the dynamic viewport height, which updates as browser UI bars appear or hide.
% A percentage of a reference value, such as the parent width, parent height, or font-size.
fr A fraction of the leftover free space in a CSS grid container.
auto Let the browser choose the size from the content and surrounding layout.
min-content The smallest size the content can take without overflowing, such as the longest word.
max-content The size the content would take with unlimited room and no wrapping.
fit-content Size to the content but never larger than the available space.
calc() Do arithmetic that mixes units, such as calc(100% - 2rem).
clamp(min, pref, max) Use the preferred value but keep it between a minimum and a maximum bound.
min() Use the smallest of several comma-separated values.
max() Use the largest of several comma-separated values.
var() Insert the value of a custom property, such as var(--gap).
deg Degrees; a full circle is 360deg.
rad Radians; a full circle is 2 pi radians, about 6.283rad.
turn Turns; 1turn is one full circle, equal to 360deg.
grad Gradians; a full circle is 400grad.
s Seconds; a time unit for animation and transition durations.
ms Milliseconds; 1000ms equals one second.
Hz Hertz; a frequency unit of cycles per second, used by speech media.
dpi Dots per inch; a resolution unit for media queries.

Runs entirely in your browser. Nothing you type is sent anywhere; open DevTools and watch the Network tab to verify zero requests.

What this tool does

This is a searchable quick reference for CSS units, from fixed lengths like px and font-relative units like em and rem, to viewport units like vh, grid fractions like fr, and value functions like calc() and clamp(). Each row pairs the exact unit with a plain-English note on what it does. Type in the filter box to search across both columns, or tap a category button to focus on one family. The whole list is built into the page, so it works offline and sends nothing anywhere.

How to use it

Start typing in the Filter box. Entering rem jumps straight to the root-relative unit; entering viewport surfaces every screen-relative unit; entering grid highlights fr. The category buttons (Absolute, Font-relative, Viewport, Layout, Functions, Angle and time) narrow the table to one family and combine with the text filter, so you can pick Viewport and type small to zero in on svh and svw. Clear the box to see the full reference again.

Common use cases

  • Deciding between px, em, and rem for a font-size or spacing value.
  • Recalling which viewport unit avoids the mobile toolbar jump, such as dvh instead of vh.
  • Looking up how fr divides free space when building a CSS grid.
  • Checking the exact syntax of clamp() for responsive typography.
  • Confirming the conversion between physical units like in, cm, and px.

Common pitfalls

  • Compounding em values. Because em is relative to the current font-size, nesting sized elements multiplies the effect. Use rem when you want a value that stays constant regardless of nesting depth.
  • Full-height layouts with vh on mobile. The classic vh can shift when browser toolbars slide in and out. Prefer svh, lvh, or dvh to match the behavior you actually want.
  • Assuming physical units are physical. On screens cm, in, and pt are defined against the CSS pixel, not real millimeters, so they do not measure true physical distance on a display.
  • Missing spaces in calc. The - and + operators inside calc() require whitespace around them, so calc(100% - 2rem) works but the same expression without spaces does not.

Frequently asked questions

What is the difference between em and rem?
Both are font-relative, but they measure against different things. em is relative to the font-size of the current element, so it compounds when you nest sized elements inside one another. rem is always relative to the font-size of the root html element, so it stays predictable no matter how deep the element sits. Use rem when you want a value that does not drift with nesting, and em when you deliberately want sizing to scale with the local text.
What is the fr unit in CSS Grid?
fr means one fraction of the free space in a grid container after fixed sizes and gaps are subtracted. A track list of 1fr 2fr splits the remaining space so the second column is twice as wide as the first. Unlike percentages, fr automatically accounts for gaps and fixed tracks, which makes it the cleanest way to divide leftover room in a grid.
When should I use px versus rem?
Use rem for anything that should scale with the user preferred text size, such as font-size, spacing, and container widths, because rem grows when someone raises their default font size in the browser. Reach for px only when you need a fixed value that must not scale, such as a 1px hairline border. Building layouts in rem keeps a page accessible for people who rely on larger text.
What does vh mean?
vh stands for viewport height: 1vh equals 1% of the height of the browser viewport, so height: 100vh fills the whole visible screen. On mobile the classic vh can jump when toolbars slide in and out, which is why newer units exist: svh uses the small viewport (bars shown), lvh uses the large viewport (bars hidden), and dvh updates dynamically as the bars move.
What is calc used for?
calc() lets you do arithmetic inside a CSS value and, crucially, mix different units. For example calc(100% - 2rem) means the full width of the parent minus a fixed 2rem, which is impossible to express with a single unit. It supports addition, subtraction, multiplication, and division, and you can nest it with functions like min(), max(), and clamp() for responsive sizing.
Does this reference send anything to a server?
No. The entire unit list is baked into the page and every search and filter runs in your browser with JavaScript, so nothing you type leaves your device. Open your browser DevTools and watch the Network tab while you use it to confirm there are zero requests.

Embed this tool

Free for any use; attribution appreciated. Paste this on your site:

The embed runs the same tool that lives at this URL. No tracking; no ads inside the embed. Resize height as needed for your layout.

Cite this tool

For academic, journalistic, or technical references. Pick a format:

Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.

Embedded tool from glunty.com