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
| Property | Description |
| font-family | Specifies the family of the font. |
| font-style | Sets the style of the font such as normal, italic, oblique, etc. |
| font-size | Specifies the font size of the text. |
| font-size-adjust | Allows you to maintain the font size if the specified font is not available and the next font is being used as a fallback. |
| font-weight | Specifies the weight of the font. |
| font-stretch | This property allows us to make text condensed or expended. |
| font-varient | Specifies whether the text should be displayed in small-caps format or not. |
