Font family
The font-family property sets the font family to be used. For example:
body{
font-family: Arial;
}
In this case, the Arial font is set.
The font of the font-family property will only work if the user has the same font on their local machine. For this reason, it is not uncommon to choose standard fonts that are widely used, such as Arial, Verdana, etc.
It is also not uncommon to use the practice of multiple fonts:
body{
font-family: Arial, Verdana, Helvetica;
}
In this case, the main font is the first – Arial. If it is not supported on the user’s computer, then the second one is selected, and so on.
If the font name consists of several words, for example, Times New Roman, then the entire name is enclosed in quotation marks:
body{
font-family: "Times New Roman";
}
In addition to specific styles, general universal fonts can also be used, specified using the sans-serif and serif values :
body{
font-family: Arial, Verdana, sans-serif;
}
So, if neither Arial nor Verdana are supported on the user’s computer, then sans-serif is used – a universal sans-serif font.
Font types
Serif fonts
Serif fonts are so named because they have small serifs at the ends of their main strokes. They are considered to be suitable for large pieces of text, as they visually connect one letter to another, making the text more readable.
Common serif fonts: Times, Times New Roman, Georgia, Garamond. A generic serif font represents a serif value .
Sans serif fonts
Unlike serif fonts, fonts in this group do not have serifs. The most common fonts in this group are: Arial, Helvetica, Verdana.
Monospace fonts
The fixed-space font is mainly used for displaying program code and is not intended for displaying the standard text of articles. These fonts got their name from the fact that each letter in such a font has the same width. Examples of similar fonts: Courier, Courier New, Consolas, Lucida Console.
Font thickness
The font-weight property sets the weight of the font. It can take 9 numerical values: 100, 200, 300, 400,…900. 100 is a very thin font, 900 is a very dense font.
In reality, two values are most often used for this property: normal(non-bold plain text) and bold(bold):
font-weight: normal font-weight: bold;
Italics
The font-style property allows text to be italicized. For this, the value is used italic:
p {font-style: italic;}
If you want to cancel italics, then the value is applied normal:
p{font-style:normal;}
Font color
The color property sets the font color:
p {
color: red;
}