CSS `font`: The All-in-One Typography Shorthand
The font property is a single CSS declaration for setting multiple type styles at once, like size, weight, and family. Use it to define base typography for your site or components.
Why it exists
Manually setting font-size, font-weight, font-family, and other properties on every element is verbose and error-prone. The font shorthand was created to bundle these common properties into a single, concise declaration, making stylesheets cleaner and easier to manage.
The mental model
Think of the font property as a complete "typography preset." Instead of adjusting individual knobs for style, weight, and size, you apply a pre-configured setting in one go. It's a shortcut that enforces a specific combination of font attributes, but it resets everything else.
How it works
The font property requires at least two values: font-size and font-family, in that order. You can optionally prefix these with font-style, font-variant, and font-weight. The line-height can be added after font-size, separated by a slash (e.g., 16px/1.5). The font-family must always be the last value. For example: italic bold 16px/1.5 "Helvetica", sans-serif;. It can also accept a single keyword, like caption, to use a system font.
When to use it
Use it to define global font styles on the body or html element. It's also perfect for creating utility classes or component-level styles where you want to enforce a complete typographic treatment, such as for headings (h1, h2) or buttons.
When not to use it
Avoid using the font shorthand when you only want to change a single property. For example, if you just want to make some text bold, use font-weight: bold;. Using font: bold 16px sans-serif; would incorrectly reset the font-style, line-height, and other properties you might have inherited, causing unintended side effects.
One canonical example
A common use is setting the base font for an entire website. In your CSS, you might write: body { font: 400 16px/1.5 "Inter", -apple-system, sans-serif; }. This single line sets the weight to 400, size to 16px, line height to 1.5 times the font size, and provides a prioritized list of font families. Any properties not specified (like font-style) are reset to their initial values.
Interview question
In which scenario would using the CSS font shorthand property be ill-advised?
- a.When you only want to modify font-weight without affecting other inherited font styles.Correct
- b.When creating a reusable style for a specific UI component like a button.
- c.When setting the default typography for an entire webpage.
- d.When you need to explicitly define font-size, line-height, and font-family in one declaration.
Why? this is the answer
The card explicitly states to avoid using the font shorthand when only changing a single property, as it would reset other inherited font styles to their initial values. Options A and C describe recommended use cases for the shorthand, while option D describes its primary function, not a reason to avoid it.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #typography
- #shorthand
- #web development
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles