Font Size & CSS Units

The font-size property accepts many unit types. Choosing the right unit is important for accessibility and responsive design.

Absolute Units

px (pixels) are fixed and independent of the user's browser font preference. Avoid using px for body text — it breaks accessibility because it ignores the user's default font-size setting.

Relative Units

em — relative to the current element's font-size (or parent's, for non-font properties). Compounds through nesting.
rem — relative to the root element (<html>) font-size. Predictable and accessible.
% — relative to the parent's font-size.

Viewport Units

vw, vh, vmin, vmax are relative to the viewport and useful for fluid typography combined with clamp().

Example

/* Root size — 1rem = 16px by default */
:root {
    font-size: 100%; /* respect user browser setting */
}

/* Body text in rem — scales with user preference */
body {
    font-size: 1rem;    /* 16px default */
    line-height: 1.6;
}

/* Headings relative to root */
h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem;   }   /* 32px */
h3 { font-size: 1.5rem; }   /* 24px */

/* em — useful for component-internal sizing */
.btn {
    font-size: 1rem;
    padding: 0.6em 1.2em; /* scales with button font-size */
}

/* Fluid headline with clamp() */
.hero-title {
    font-size: clamp(1.8rem, 5vw, 4rem);
}

CSS

Full Editor

Pro Tip

Set font-size: 100% on the :root or html element rather than a pixel value — this ensures your rem-based layout respects the user's browser default font-size preference, which is a WCAG accessibility requirement.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned