72px to REM

rem stands for "root em": a size relative to the font size of the html element. To convert, divide pixels by the root font size.

72px is Tailwind's text-7xl and is used for oversized hero headlines and big statistics on landing pages. At this size, letter-spacing usually needs to be slightly tighter, and line-height closer to 1.0 to 1.1, so headings do not feel loose.

If you use 72px (4.5rem) for display headlines, a line-height of about 1.1 works well, which gives 79.2px between baselines. Larger type needs proportionally less line-height, because the gaps between lines are already big. At display sizes, also tighten letter-spacing slightly (around -0.01em to -0.02em) and test the headline on a narrow phone screen, where long words may need to wrap or the size may need the fluid clamp() version below.

For spacing below a block of 72px text, a margin of 0.75em to 1em (54px to 72px) keeps the rhythm consistent with the text size. Writing these values in em ties them to the font size, so they adjust automatically if the text size changes.

Instead of a fixed 4.5rem, you can let the size scale smoothly between a smaller value on phones and 72px on desktops. The CSS clamp() function takes a minimum, a preferred value and a maximum. The example below grows from 58px on a 375px-wide screen to 72px on a 1280px-wide screen, and never goes outside that range. Because the minimum and maximum are in rem, the size still respects the user's font settings.

A rem is relative to the root font size, so 4.5rem stays equal to 72px only while the root is 16px. When someone raises the default font size in their browser, say to 20px, the same 4.5rem becomes 90px, and your layout scales with it. A hard-coded 72px stays at 72px and ignores that preference.

That matters for accessibility. Many people with low vision rely on larger default text, and the WCAG resize text guideline expects content to remain usable when text is scaled up to 200 percent. Using rem for type and spacing is the simplest way to support that without extra work.

Here is how 72px might appear in real CSS. The hero headline uses 4.5rem, spacing uses rem values from the same 16px base, and the border stays in px so it remains a crisp hairline. If a visitor's default font size is 20px, the headline grows to 90px and the spacing grows with it, while the border stays 1px.

If you convert values often, let your tools do it. In Sass, a small function such as rem($px) that returns math.div($px, 16px) * 1rem turns rem(72px) into 4.5rem at compile time. In plain CSS, you can keep the pixel value readable with calc(72 / 16 * 1rem), which modern browsers resolve to 4.5rem.

In JavaScript, for example when generating inline styles or design tokens, divide by the root font size: 72 / 16 = 4.5. If you need the live root size (for users who changed their default), read parseFloat(getComputedStyle(document.documentElement).fontSize) instead of assuming 16.

Design systems rarely use raw numbers in components. Instead, 72px would live in a token such as --font-size-display-72 for type or --size-72 for spacing, defined once as 4.5rem. Components then reference the token, so a later change to the scale updates every use at once.

If your team uses Figma variables or a tokens file (for example in the W3C design tokens format), store the value in px for designers and generate the rem version in the build step. That keeps both sides speaking the same language while the shipped CSS stays accessible.

When the browser computes a rem value, it multiplies it by the computed font size of the html element. That font size starts from the user's default (16px unless they changed it), then applies whatever your CSS sets on html. So 4.5rem means "4.5 times the root size", and it is resolved once per page, unlike em, which is recalculated at every level of nesting.

Because the root is shared, rem values are predictable across the whole document: a 4.5rem gap in a sidebar is exactly the same size as a 4.5rem gap in a modal, regardless of the text size inside each.