CSS Font

In CSS, font is a shorthand property that allows you to specify various font-related properties in a single declaration. These properties include font-size, font-family, font-weight, font-style, line-height, and text-transform.

Here's an example of how you can use the font property to set the font for all text on a web page:

body {
    font: 16px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

In this example, we're setting the font size to 16 pixels, the line height to 1.5 (which is 150% of the font size), and the font family to a stack of fonts ('Helvetica Neue', Helvetica, Arial, sans-serif) that will be used in order of availability on the user's computer. If the user doesn't have Helvetica Neue, the browser will try to use Helvetica, then Arial, and finally a generic sans-serif font.

Here's a breakdown of the different font-related properties that can be set using the font shorthand:

  • font-size: sets the size of the font (e.g. 16px, 1.2rem, 100%)
  • font-family: sets the font family (e.g. 'Helvetica Neue', Helvetica, Arial, sans-serif)
  • font-weight: sets the weight of the font (e.g. normal, bold, 600)
  • font-style: sets the style of the font (e.g. normal, italic, oblique)
  • line-height: sets the height of each line of text (e.g. 1.5, 24px)
  • text-transform: sets the case of the text (e.g. uppercase, lowercase, capitalize)

It's worth noting that while the font shorthand can make it easier to set multiple font-related properties at once, it can also make it harder to override specific properties later on. If you need more granular control over the font properties of an element, it's often better to set them individually using separate CSS declarations.

Next Article ❯