CSS Fonts

The right choice of a font and style is very important for your website as it can have a huge impact on readers’ overall experience.

In this CSS tutorial, we will learn the most commonly used font properties which allow us to fully control font styles, font weight, font size, font color, and much more, which can eventually make the text easy to read and make a huge impact on reader’s eye.

Let’s discuss each property in detail:

CSS Font Family

CSS font-family property is used to specify the font family of the rendering text.

The font-family property accepts a list of comma-separated font names as a fallback system, so that, if your browser does not support the first font or the font is not available, it can use the second font. If the second font is also not supported or not available, it can use the third font and so on.

You should always start the font list with a font name and end with a generic font family which are – serif, sans-serif, monospace, cursive and fantasy.

If the font name contains multiple words, it should be enclosed within quotes. For example, “Times New Roman”, “Lucida Console”, “Courier New”, etc.

Try out the example below:

Example:

.p1{
  font-family: "Times New Roman", Times, serif;
}
.p2{
  font-family: Arial, Helvetica, sans-serif;
}

Note: serif and sans-serif are the most commonly used font families in web designing, as they make the text very easy to read.


CSS Font Style

CSS font-style property is used to specify the style of the font.

This property is generally used to make font italic. It can accept any of the following values:

  • normal – text is displayed normally. This is the default value.
  • italic – text becomes italic(slant version of the normal text).
  • oblique – It is almost similar to italic. But it’s less supported.

Example:

.p1{
  font-style: normal;
}
.p2{
  font-style: italic;
}
.p3{
  font-style: oblique;
}

CSS Font Size

CSS font-size property is used to set the font size of the text.

There are various methods which can be used to set the font size, such as, px, keywords, em, rem, cm, etc.

Let’s discuss each method in more detail:

Set Font Size using Pixels

Pixel is an absolute unit of measurement which defines a fixed length. This is the most commonly used unit for specifying the font size, as it gives you full control over the text size in pixels accuracy. Refer to the example below:

Example:

.p1{
  font-size: 40px;
}
.p2{
  font-size: 25px;
}
.p3{
  font-size: 15px;
}

Set Font Size using em Unit

The em is a relative unit of measurement. It refers to the parent element. Here, the font size is calculated from the font size of the parent element.

For example, If the parent element has a font-size of 20px, It will be referred to as 1em for the child element. This means, 1em = 20px, 2em = 40px and so on.

If you do not specify the font size anywhere on the web page, the browser will use the default value of font-size. Which is 16px. So, In this case 1em = 16px, 2em = 32px.

See the implementation in the example below:

Example:

.parent{
  font-size: 20px; 
}
.child1{
  font-size: 1em; /* 20px */
}
.child2{
  font-size: 1.5em; /* 30px */
}
.child3{
  font-size: 2em; /* 40px */
}

Set Font Size using rem(Root Element) Unit

The rem is also a relative unit of measurement. It refers to the root element, which is the <html> element itself. Here, the font size of the element is calculated from the font size of the root element i.e. the <html> element.

The font-size of the root element is 16px for most of the browsers. Therefore, a font size of 1rem = 16px, 2rem=32px and so on for all the elements.

See the implementation in the example below:

Example:

.p1{
  font-size: 1rem; /* 16px */
}
.p2{
  font-size: 1.5rem; /* 24px */
}
.p3{
  font-size: 2rem; /* 32px */
}

Set Font Size using percentage(%)

CSS font-size property can also be specified in percentage(%) value. It is also similar to em, except that it makes font size calculation easier.

Similar to em, % value is also calculated from the font size of the parent element.

See implementation in the below example:

Example:

.parent{
  font-size: 30px;
}
.child1{
  font-size: 120%; /* 120% of 30px = 36px; */ 
}
.child2{
  font-size: 90%; /* 90% of 30px = 27px */
}
.child3{
  font-size: 60%; /* 60% of 30px = 18px */
}

Set Font Size using inbuilt Keywords

CSS provides us a list of in-built keywords which can also be used to specify the font size of the element. These keywords are: xx-small, x-small, small, medium, large, x-large, xx-large. See implementation in the example below:

Example:

.large{
  font-size: large;
}
.medium{
  font-size: medium;
}
.small{
  font-size: small;
}

CSS Font Weight

CSS font-weight property defines the boldness or weight of the font. It can accept the following values:

  • normal
  • bold
  • bolder
  • lighter
  • inherit

Try out the example below:

Example:

.p1{
  font-weight: normal;
}
.p2{
  font-weight: bold;
}

The font-weight property can also accept numeric values. These values are 100, 200, 300, 400, 500, 600, 700, 800, 900.

Font weight 400 is same as normal and 700 is same as bold.

Example:

.p1{
  font-weight: 400;
}
.p2{
  font-weight: 700;
}

All Font Properties

PropertyDescription
font-familySpecifies the family of the font.
font-styleSets the style of the font such as normal, italic, oblique, etc.
font-sizeSpecifies the font size of the text.
font-size-adjustAllows you to maintain the font size if the specified font is not available and the next font is being used as a fallback.
font-weightSpecifies the weight of the font.
font-stretchThis property allows us to make text condensed or expended.
font-varientSpecifies whether the text should be displayed in small-caps format or not.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.