Prev Next

CSS Font Shorthand

The font shorthand property lets you set multiple font properties (size, line-height, family, style, weight) in one declaration. This simplifies code and ensures a consistent typographic setup.

Key Topics

Shorthand Syntax

For example: font: italic small-caps bold 16px/1.5 "Open Sans", sans-serif; sets style, variant, weight, size, line-height, and family at once.

Required Values

You must specify font-size and font-family in the shorthand. Other values are optional.

<style>
    p {
        font: italic bold 16px/1.5 "Open Sans", sans-serif;
    }
</style>
<p>This paragraph has multiple font properties set in one line.</p>

Explanation: The shorthand saves time and reduces clutter, ensuring all font properties are easily managed in a single rule.

Key Takeaways

  • Efficiency: One property for multiple font settings.
  • Clarity: Keeps typographic definitions concise.
  • Flexibility: Easily tweak size, style, weight, and family from a single declaration.
Prev Next