1
font-style – Controls the slant of text.
- Common values: normal (default), italic, oblique.
- Example: Emphasizing text with italics.
2
font-variant – Controls the use of alternate glyphs such as small-caps.
- Common values: normal, small-caps.
- Example: Making lowercase letters appear as uppercase but smaller.
3
font-weight – Controls the thickness or boldness of text.
- Common values: normal (400), bold (700), 100-900 for fine-grained control.
- Example: Emphasizing text visually without changing semantic meaning.

Example: Using font-style, font-variant, and font-weight

In this example, each property independently affects the text: italics for slant, small-caps for typographic style, and font-weight for thickness.

Key Takeaways

1
font-style is for slanting text (italic, oblique).
2
font-variant is for typographic alternates like small-caps.
3
font-weight is for boldness or lightness of text.
4
These properties can be combined for richer text styling.
5
Always use semantic HTML (<em>, <strong>) with CSS for accessible emphasis.

Difficulty: 5/10

Topics: font-style, font-variant, font-weight

0-2 years experience

1
You need to make a paragraph italic and also display small caps for a heading. Which CSS properties would you use and how would you write them?
2
If you set font-weight: bold; on a button but the text doesn't appear bolder, what could be causing that?

2-5 years experience

1
While implementing a style guide, a designer asks for 'light oblique' text. How would you achieve that, and what are the differences between font-style: oblique and font-weight: 300?
2
A bug appears where font-variant: small-caps works in Chrome but not in Safari. How would you investigate and fix it?

5-8 years experience

1
Our design system needs to support dynamic theming where font weight and style can be toggled at runtime. What considerations would you make to ensure consistency and performance across components?
2
We have a legacy codebase with many inline font-weight declarations causing specificity wars. How would you refactor the CSS architecture to manage font style, variant, and weight more cleanly?

8+ years experience

1
We're migrating a large enterprise product to a CSS‑in‑JS solution and need to map existing font-style, font-variant, and font-weight usages to a token system. What strategy would you use to avoid visual regressions and maintain cross‑team consistency?
2
How would you design a global typography framework that balances fine‑grained control (like small‑caps, italic, variable weight) with the goal of keeping the CSS bundle size minimal for a high‑traffic site?

❓What happens if the chosen font family doesn't provide the requested weight or variant?
❓How do browsers compute the final font weight when multiple values are specified?
❓Can you discuss any accessibility considerations when using heavy weights or small‑caps?