Working with fonts — Content layout fundamentals

• Font family
• Installing new fonts
• Font style
• Lower case characters
• Line spacing
• Shorthand rule
• Using one or more rules

A designer's and layout designer's worst nightmare is when a client says, “play around with fonts”. Many people have heard this phrase, but what's the deal with playing around with fonts? CSS provides many rules for styling fonts. Some properties you'll already know are font-weight and font-size.

Besides thickness, CSS allows you to control the following settings:

• Font family
• Font style
• Lower case character style
• Font size
• Line spacing

Don't be too scared of these properties, you don't have to use them all straight away. Some of them are used quite rarely.

Font family

CSS allows you to specify the fonts to be used on the site. The font-family property is used for this. It takes a list of fonts that can be uploaded to the site. It can be one font family or several at once. If multiple fonts are specified, the browser will read them from left to right until it reaches the first font it can use. Other fonts will be ignored. For example:

.font {
  font-family: Georgia, "Times New Roman";
}

If the user has the Georgia font in their system, then that font will be used. Otherwise, the browser will look for Times New Roman font. Now, two situations are possible:

• If the user has the Times New Roman font installed in their system, then that font will be applied to the page
• If the user doesn't have Times New Roman installed in their system, then the browser will use the font from the main settings in their browser. This is necessary to be able to display content on the page

What font will the browser choose? It all depends on the settings. The standard font may be a different type. This can break the visual part of the site. All fonts can be divided into three large groups:

• Antiqua or serif fonts. These fonts are most often used in books and news sites. In CSS it's designated as a serif
• Grotesque or sans serif fonts. The main font type on most websites. Right now, you are reading this type of font. In CSS, it's designated as sans-serif
• Monospace font. Fonts in this family all have symbols of the same width. You may see this font in terminals or code editors. In CSS, it's designated as monospace

When choosing fonts, you can also specify the main font family. If none of the specified fonts can be found, the browser will pick a system font from the family that was specified. Let's add a default font family to the example. The example uses fonts from the antiqua family, so it's worth adding an appropriate value.

.font {
  font-family: Georgia, "Times New Roman", serif;
}

Always specify a default font family. This is considered good practice because not all fonts may be present on the user's system.

Installing new fonts

You don't have to rely wholly on system fonts. Projects may use all sorts of various fonts, and a layout designer should be able to add them. The font itself is a file. There can be several such file formats, and it's important to know which browsers support them.

• .woff/.woff2 – Web Open Font Format. A common format supported by most modern browsers
• .ttf - TrueType. This format was invented in the 1980s and is now used to support older browsers. It's compatible with modern browsers. It's the Goldilocks font format
• .eot - Embedded OpenType. This is the oldest format. This only needs to be used in older browsers, such as Internet Explorer 6.0, which are supported by your website. This is quite rare, so it's rarely used

The @font-face rule is used to set the font. It allows you to add the font in various extensions, and define the name and path to the file. We'll use this construction with the Roboto font as an example.

Let's give our project a fonts directory with font files inside it.

project/
├── css/
│   └── style.css
├── fonts/
│   │── Roboto-Regular.ttf
│   │── Roboto-Bold.ttf
│   └── Roboto-Light.ttf

It's good practice to specify @font-face at the beginning of the CSS file, rather than just before the font is used. This allows you to structure CSS better. @font-face takes two properties:

• font-family⁣ – the name of the font to be added. This is where you can access it after the font's been added
• src⁣ – path to the font file

You can use the font once you've specified these properties. Add Roboto-Regular.

@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

body {
  font-family: 'Roboto Regular', sans-serif;
}

The next step is to add the other two font styles. You can use the example above. Then our CSS will look like this:

@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
  font-family: 'Roboto Bold';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: 'Roboto Light';
  src: url('../fonts/Roboto-Light.ttf');
}

body {
  font-family: 'Roboto Regular', sans-serif;
}

h1 {
  font-family: 'Roboto Bold', sans-serif;
}

h2 {
  font-family: 'Roboto Light', sans-serif;
}

Although this method works, it's a little complicated. Instead of using one font name and the font-weight property to control the font thickness, you have to specify three different names for each font style separately.

@font-face allows you to specify font thickness using font-weight. This allows you to add all the font styles using just one name. Otherwise, the entry is no different from what was in the last example.

@font-face {
  font-weight: 400; /* This corresponds to normal */
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
  font-weight: 700; /* This corresponds to bold */
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-weight: 300;
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf');
}

body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-weight: bold;
}

h2 {
  font-weight: 300;
}

Font style

In addition to the standard font style, CSS allows you to set another way of displaying the font - italic. Use the font-style property for this, it can take one of three values:

• normal is the standard value. It's the standard way of displaying the font and is the style you're reading right now
• italic This font has slanted letters, unlike the normal style. This is what italic text looks like
• oblique is also italic. It's often exactly the same as the italic value

But why are there two similar values for italics? Actually, they're not that similar. Italic, which is set using italic, is a separate font with its own separate file in the system or on the server. It refers more to cursive text, whereas oblique artificially tilts the characters of the current font.

.italic {
  font-style: italic;
}

Lower case characters

You can use CSS to set the lowercase capital type as small caps.

Small caps are lower case letters whose size is the same as (or close to) the size of capital letters. This is often used for style. Look at this paragraph:

Small caps text

In terms of height, this phrase is no different from a simple set of lowercase characters, but stylistically they look more like capital letters. Small caps are set using the font-variant property. It has two possible values:

• normal is the standard lowercase character style
• small-caps gives small caps

p {
  font-variant: small-caps;
}

Line spacing

Line spacing, A.K.A. interline spacing, is the vertical distance between the bottom of one character and the top of another in neighboring lines. This is how the difference between the lines is created. One important element when creating a design is having sufficient space between lines. More often than not, it's 150% of the font-size value. For example, if the font is 16 pixels, then the line spacing should be at least 24 pixels. This value is not a required rule, and you can always diverge from it if you so wish.

The line-height property is used to specify line spacing. It can take values with various units of measurement. Typically, a number is used to indicate how much bigger the line spacing is than the font size.

p {
  font-size: 16px;
  line-height: 1.5;
}

Shorthand rule

Now you know all the main rules for working with fonts. They are as follows:

• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family

You can specify them not only individually, but also altogether using a single CSS rule, font. It's six different rules within one! This can be very handy if you really need all the values. You don't have to specify all values. The only limitation is that it must include font-size and font-family. The other values can be omitted. Let's specify values for all these properties inside the font rule:

p {
  font: italic small-caps bold 16px/24px Roboto, sans-serif;
}

Pay attention to where it says 16px/24px. This is how the font-size and line-height properties are denoted within the font rule.

Using one or more rules

This section applies not only to the font rule but to all the abbreviated rules you will learn in the course. On the one hand, it may seem that using one rule reduces the number of lines used in CSS. This is true, but there are two major problems with using such properties:

1. Remembering the correct order of values. When using abbreviated properties, you should always remember the correct order of property values. It's easy to get that wrong in the early stages of learning. You could try using all the individual properties, but writing them in the order they're used in the abbreviated property. As you gain more experience, you can switch to one rule.
2. Abbreviated properties override individual ones. If you specify font-variant: small-caps; and then apply font: 16px/24px sans-serif; to the same element, the small caps will be reset to their default value.

You should only use shorthand property once when setting standard or general page styles. For example, the font property will work fine for the body selector, and text modifications can be done using individual properties.