CSS Font Properties

Choosing a typeface is only the start of typography. Once you have a font, a whole set of CSS properties control how it actually looks: how big the text is, how bold, whether it is italic, how far apart the lines and letters sit, and more. Used together, these properties turn a bare font into a deliberate, cohesive typography system. This article covers the core properties you will reach for daily, the finer controls for polish, and the shorthand that lets you set several at once, finishing with the habits that keep type consistent across a project.

The core properties

A handful of properties do most of the work. The first, font-family, sets the typeface itself as an ordered stack ending in a generic fallback, which has its own dedicated article, so here it is enough to note that it anchors everything else.

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Next is font-size, and the important choice is the unit. Rather than fixing sizes in pixels, prefer relative units like rem and em, which scale with the user’s settings and make your whole type system easy to resize from one place.

p {
  font-size: 1rem;   /* 16px if the base size is 16px */
}

A rem is relative to the root font size, so 1rem is the base size, 1.5rem is half again as large, and changing the root rescales everything proportionally, which is far more maintainable than hard-coded pixels scattered through your stylesheet.

font-weight controls boldness. You can use the keywords normal and bold, but the numeric scale from 100 to 900 gives finer control, where 400 is normal and 700 is bold, and many modern fonts offer the in-between weights too.

h1 {
  font-weight: 700;   /* bold */
}

font-style switches text between normal, italic, and oblique, with italic being the one you reach for almost always.

em {
  font-style: italic;
}

And line-height sets the vertical space between lines, which has a bigger effect on readability than people expect. The best practice is to give it a unitless number, which multiplies the element’s font size, so a value of 1.5 means one and a half times the text size and scales correctly if the font size ever changes.

p {
  line-height: 1.5;
}

Finer control

Beyond the core, several properties add polish. letter-spacing adjusts the gap between characters, useful for loosening tight headings or adding a touch of elegance, and expressing it in em keeps it proportional to the font size.

h2 {
  letter-spacing: 0.05em;
}

text-transform changes the case of text without changing the underlying content, so you can display a label in uppercase while keeping it lowercase in your HTML, which is cleaner and easier to change later.

.button {
  text-transform: uppercase;
}

font-variant enables typographic variations, most commonly small caps, where lowercase letters render as smaller capitals, a refined effect for headings and labels.

h3 {
  font-variant: small-caps;
}

And font-stretch adjusts the width of the characters, from condensed to expanded, though it only takes effect when the font actually provides those widths.

h1 {
  font-stretch: expanded;
}

The shorthand font property

When you are setting several of these at once, the font shorthand lets you combine them into a single declaration.

p {
  font: italic small-caps bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;
}

That one line sets the style to italic, the variant to small caps, the weight to bold, the size to 16 pixels, the line height to 1.5, and the family to the stack at the end. The shorthand is concise, but it comes with rules that trip people up. The order matters, with style, variant, and weight coming first in any order, then the size and line height written together as size/line-height, and finally the family. More importantly, the font size and the font family are both required, and any property you leave out is reset to its default rather than left unchanged. That last point is the real gotcha: because the shorthand resets the omitted properties, using it can silently undo something you set elsewhere, so reach for it when you are defining a complete font specification rather than tweaking one part.

Habits that keep type consistent

A few practices turn these properties into a maintainable system. Favour relative units, rem and em for sizes and unitless multipliers for line height, so the whole scale can be adjusted from one place and respects the user’s preferences. Always pair your fonts with fallbacks and a generic family, so text renders sensibly even when a font is missing. Centralise your typography decisions, ideally in CSS custom properties or a single base stylesheet, defining your font sizes, weights, and families once and referencing them everywhere, which is what keeps a large project visually coherent rather than a patchwork of one-off values. And test across devices and browsers, because the same declarations can render with subtle differences, and confirming your type looks right everywhere is what separates polished typography from typography that only worked on your screen.

Conclusion

CSS font properties are how you shape a typeface into real typography. The core set, font-family, font-size, font-weight, font-style, and line-height, covers most of what you do, while letter-spacing, text-transform, font-variant, and font-stretch add the finer control. The font shorthand bundles them into one line, provided you respect its required size and family and remember that it resets anything you omit. Lean on relative units, define your settings in one central place, always provide fallbacks, and test widely, and your text will be consistent, readable, and on-brand across your whole site.

See you soon.