Fonts

CSS font properties

The font property is known as a shorthand property and can combine several subproperties into a single line of code.

For example:

font: normal italic small-caps bold 16px/120% "Helvetica", sans-serif;

The code above is equivalent to the following:

font-stretch: normal;
font-style: italic; 
font-variant: small-caps; 
font-weight: bold; 
font-size: 16px; 
line-height: 120%; 
font-family: "Helvetica", sans-serif;

It’s not necessary to declare each property. However, because it’s a shorthand property, they need to be in the correct order. Let’s review each of these properties in more detail.

The font-family property

The font-family property defines the element’s default font family.

The selected font isn’t a singular font face but is instead an entire group of sub-fonts, such as sans-serif, Helvetica, Arial, and so on. This group of sub-fonts makes up a “family.”

body {
    font-family: Helvetica;
}

The font-family used should match a font that has either been embedded on the page or is already available on the user’s system. We can also choose multiple fonts, as shown below:

body {
    font-family: Helvetica, Arial, sans-serif;
}

The browser chooses the next font in the list if the first can’t be used. This may happen if it isn’t found on the user’s local machine or if the font’s server is down.

Font types are typically classified as Serif, Sans-Serif, or Monospace. Some of the most popular fonts include the following:

• Serif: Times New Roman and Georgia.
• Sans-Serif: Arial, Verdana, and Helvetica.
• Monospace: Courier and Lucida Console.

Let’s return to our example. The browser first looks for Helvetica, then Arial. If neither one is found, the browser selects the default Sans-Serif font.

If you want to guarantee that the user’s browser chooses the correct font, you can embed the font in your CSS in the following way:

/* definition */
@font-face {
  font-family: MyCustomFont;
  src: url('fonts/MyCustomFont.eot');
  src: url('fonts/MyCustomFont.eot?') format('☺'),
       url('fonts/MyCustomFont.woff') format('woff'),
       url('fonts/MyCustomFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* use */
body {
    font-family: MyCustomFont, Tahoma, serif;
}

Note: In the code above, eot, woff, and ttf are the font files for MyCustomFont. They need to be copied to the .../fonts folder. You can generate these files from any font usingg Font Squirrel.

The line-height property

The line-height property defines the amount of space above and below an element. It can be written as follows:

p {
    line-height: 1.5;
}

In the code above, we set a line-height that’s 1.5 times the default. We can also use the normal and none keyword values. We can also use a number, length (any valid CSS unit), or percentage (the element’s font size multiplied by the percentage).

The font-weight property

The font-weight property sets the width (or thickness) of each character in a font. We can use values such as:

• normal
• bold
• bolder
• lighter

The values bolder and lighter are relative to the element’s parent. Both set the font-weight to one relative unit bolder or lighter.

The numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900 can also be used, with 100 being the lightest and 900 being the boldest. A value of 400 is equivalent to normal and a value of 700 is equivalent to bold.

The font-stretch property

With the font-stretch property, we can choose a narrow or wide face for the font, assuming the font being used contains the corresponding font faces.

Possible values include:

• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded
• font-style

The font-style property

The font-style property accepts three values: normal, italic, and oblique.

For example, we can set our font to italic very easily:

p {
  font-style: italic;
}

There’s very little difference between italic and oblique—both apply a sloping effect to the text.

The font-size property

The font-size property is used to set the font size. For example we can set the font size to the following:

p {
  font-size: 20px;
}

We can use either a valid length value (such as px, rem, em, or a percentage) or a value keyword, such as:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• smaller
• larger

Both smaller and larger are relative to the parent element’s set size, roughly by the ratio used to determine sizes xx-small to xx-large. This is based on the user’s default (medium) font size.

Keep in mind that font-size is a mandatory value. When using the font shorthand, the size must be set or it will be invalid.

The font-variant property

The font-variant property is an older property of CSS. It was originally used to set text to small caps and had three values: normal, inherit, and small-caps. The normal value is the default. The inherit value defaults to yes. The small-caps value sets the text to small caps, as in the example below.

Example

Try experimenting with the values using the code sample below: