CSS Font

In this chapter we will speak about fonts.

We will explain the following properties:

When we write some information, some text or link in our webpage, we must give them styles. We use the above mentioned properties for text styles. Let's know more about these properties.

Font Family

For the font family of the text we use font-family property. This is the name of the font, which we want to use in our webpage.

Let's see one example:

p {
  font-family: Arial, sans-serif;
}

As you see we have given to our <p> tag font-family property. We differentiate two types of families:

  • generic family - a group of font families with a similar look (like "Serif" or "Sans-serif")
  • font family - a specific font family (like "Times New Roman" or "Arial")

When we use specific font family which consists of more that one word, we take the name in quotes (like "Times New Roman"). At the same time we must write more than one font-family, because in case the browser won't support your first font-family, you can have several other similar font-families.

Font Style

We use font-style property mostly for texts that we want to write italic.

Most of all we use the following values of the font-style property:

  • normal
  • italic

Let's see the code and its look on the browsers.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
    <p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
  </body>
</html>

By default our text will be font-style: normal, even without writing this value.

Font Size

For the size of our text, we use font-size property.

We need to give values to our property. The values are given by pixels or em. You need to know that 1em=16px. Most of all we use pixels (px).

Let's see some examples.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h3 style="font-size:40px;"> Some heading with font-size property.</h3>
    <p style="font-size:25px;"> Some paragraph with font-size property.</p>
    <a style="font-size:2em;"> Some link with font-size property.</a>
  </body>
</html>

You need to check it also by yourself. You can do that with our html online editor click here.

Line Height

We use line-height property for the space between lines. We give value to the line-height property using a pixel value.

Let's see the example.

This time we will write larger text in order to understand the meaning of the line-height.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="line-height:10px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
    <p style="line-height:20px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Font Weight

Now you know that when we have some text, and we want to make our text italic, we use font-style property.

Now let's learn want we can do for making our text bolder in case it isn't a heading, because by default the headings are bold.

For that we use font-weight property.

Mostly we use the follow values of the font-weight proparty:

  • normal
  • bold

The value can be given also by numbers.

Let's see the example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
    <p style="font-weight:normal">Some heading with the font-weight property with value normal.</p>
    <p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
    <p style="font-weight:normal"> Some heading with the font-weight property with value normal.</p>
  </body>
</html>

As you remember we have told that we can give value with numbers 100-900. Value 100 is the normal and 900 is the bold. And as much as the number grows between 100 and 900 the font becomes bolder.