Now let’s learn how to style fonts in CSS. In this lesson, we will learn about the following properties: font-family, font-size, font-weight, font-style, text-align, text-decoration, text-transform, line-height and letter-spacing.
There are many more properties that you can use to style fonts in CSS, but these are the most commonly used properties. You can find a complete list of font properties on the MDN Web Docs.
Font Properties#
The font-family Property#
The font-family property is used to set the font family for text on a web page. You can use the name of a font, or a list of font names, separated by commas. If the first font name is not available, the browser will use the next font name in the list, and so on. If none of the font names are available, the browser will use the default font.
Here is an example:
h1 {
font-family: "Times New Roman", Times, serif;
}
The font-size Property#
The font-size property is used to set the size of text on a web page. You can use absolute units, such as pixels, or relative units, such as ems. The default font size is 16 pixels.
Here is an example:
h1 {
font-size: 24px;
}
The font-weight Property#
The font-weight property is used to set the weight or thickness of text on a web page. You can use the keywords normal and bold, or you can use a number between 100 and 900.
Here is an example:
h1 {
font-weight: bold;
}
The font-style Property#
The font-style property is used to set the style of text on a web page. You can use the keywords normal and italic.
Here is an example:
h1 {
font-style: italic;
}
The color Property#
The color property is used to set the color of text on a web page. You can use color names, hexadecimal codes, RGB values, or HSL values.
Here is an example:
h1 {
color: #ff0000;
}
Text Properties#
The text-align Property#
The text-align property is used to set the horizontal alignment of text on a web page. You can use the keywords left, right, center, and justify. The default value is left.
Here is an example:
h1 {
text-align: center;
}
The text-decoration Property#
The text-decoration property is used to set or remove decorations from text on a web page. You can use the keywords none, underline, overline, and line-through.
Here is an example:
h1 {
text-decoration: underline;
}
The text-transform Property#
The text-transform property is used to set the capitalization of text on a web page. You can use the keywords none, uppercase, lowercase, and capitalize. The default value is none.
Here is an example:
h1 {
text-transform: uppercase;
}
The line-height Property#
The line-height property is used to set the height of lines of text on a web page. You can use absolute units, such as pixels, or relative units, such as ems. The default value is normal. As a general rule, you should use a value that is at least 1.5 times the font size. Also, as we have seen before, this property will affect the size of inline elements.
Here is an example:
h1 {
line-height: 1.5em;
}
The letter-spacing Property#
The letter-spacing property is used to set the spacing between letters in text on a web page. You can use absolute units, such as pixels, or relative units, such as ems. The default value is normal. As a general rule, you should use a value that is at least 0.1 times the font size.
Here is an example:
h1 {
letter-spacing: 0.1em;
}
Activity#
Now it’s your turn to practice what you have learned. Take your personal website that you created in the previous lesson, and add some CSS to style the fonts. You can use the following properties: font-family, font-size, font-weight, font-style, text-align, text-decoration, text-transform, line-height and letter-spacing. You can also use the color property to set the color of the text.
Next Lesson#
In the next lesson, we will learn how to create more complex layouts using CSS.