Font Weight & Style

Font weight and style control the visual heaviness and slant of text, helping establish typographic hierarchy and emphasis.

font-weight

Accepts numeric values from 100 to 900 (in multiples of 100) or keywords: normal (400), bold (700), lighter, and bolder (relative to parent). Variable fonts support any integer weight.

font-style

normal, italic, and oblique. Italic uses a dedicated italic face if available; oblique slants the normal face programmatically.

font-variant

The shorthand font-variant and its longhand variants (like font-variant-numeric and font-variant-caps) enable OpenType features.

Example

/* Numeric weights for fine-grained control */
.light   { font-weight: 300; }
.normal  { font-weight: 400; }
.medium  { font-weight: 500; }
.semibold { font-weight: 600; }
.bold    { font-weight: 700; }
.black   { font-weight: 900; }

/* Italic for emphasis and captions */
.caption {
    font-style: italic;
    font-weight: 400;
    color: #666;
}

/* Variable font — smooth weight range */
@supports (font-variation-settings: normal) {
    body {
        font-family: "Inter Variable", sans-serif;
        font-weight: 350; /* non-standard weight */
    }
}

/* Small caps via font-variant */
.subheading {
    font-variant-caps: small-caps;
    letter-spacing: 0.08em;
    font-weight: 600;
}

CSS

Full Editor

Pro Tip

When using a variable font, you can animate font-weight smoothly with CSS transitions or animations — something impossible with static font files that only have specific weight stops.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned