font

by

CSS font shorthand is a convenient way to set multiple font properties in a single declaration. It combines the following individual properties into one:

  • font-family: Specifies the font to be used.
  • font-size: Sets the size of the font.
  • font-style: Defines the font style (normal, italic, oblique).
  • font-weight: Sets the font weight (bold, normal, etc.).
  • font-stretch: Adjusts the font width (condensed, expanded).
  • line-height: Sets the line height.

Basic Syntax

font: font-style font-variant font-weight font-size/line-height font-family;

Note:

  • You only need to specify the properties you want to change.
  • The order of the properties is important.
  • The font-size and line-height are separated by a slash (/).

Example

p {
  font: italic bold 16px/1.5 Arial, sans-serif;
}

This declaration sets the following properties for the paragraph:

  • font-style: italic
  • font-weight: bold
  • font-size: 16px
  • line-height: 1.5
  • font-family: Arial, sans-serif

Common Use Cases

  • Setting basic font styles:
body {
  font: normal normal 16px/1.5 sans-serif;
}
  • Creating headings:
h1 {
  font: bold 32px/1.2 sans-serif;
}
  • Styling specific elements:
button {
  font: italic 14px/1.2 serif;
}

Tips

  • Prioritize font-family and font-size: These are the most important properties.
  • Use relative units for font-size: Consider using em or rem for better responsiveness.
  • Test different font combinations: Experiment with different fonts, sizes, and styles to achieve the desired look.
  • Consider browser compatibility: Some properties might have limited support in older browsers.

Additional Notes

  • font-variant: This property is less commonly used and controls small caps and other stylistic variations.
  • font-stretch: While available, it’s not widely supported by browsers.

By effectively using font shorthand, you can streamline your CSS and improve readability.