In CSS, the font-weight and font-style properties are used to control the appearance of text on a web page.
The font-weight property is used to set the boldness of the font. The value for this property can be a number, such as 100, 200, 300, and so on, or one of the keywords normal or bold. The numeric values correspond to specific weights of a font, such as light, regular, medium and heavy. The higher the number, the thicker the text. The keyword normal corresponds to the normal (regular) weight of the font, while bold corresponds to the bold weight of the font.
p {
font-weight: bold;
}In this example, the text within the <p> element will be rendered with a bold font weight.
The font-style property, on the other hand, is used to control the style of the font. The value for this property can be one of normal, italic or oblique. The normal value corresponds to a font that is not italic or oblique, while italic corresponds to a font that is slanted to the right and oblique is a font that has been slanted slightly to the right.
p {
font-style: italic;
}In this example, the text within the <p> element will be rendered with an italic font style.
It's important to note that not all fonts support all variations of weight and style, and the browser will try to approximate the desired effect if the specific weight or style is not available. Also, some fonts may have more weight variations such as, black, ultra, heavy and light.
In summary, the font-weight property is used to set the boldness of the font, while the font-style property is used to control the style of the font, such as italic or oblique. These properties are independent and they can be set separately, or they can also be grouped and set together in a shorthand property font.
p {
font: bold italic 16px Arial, sans-serif;
}In this example, the text within the <p> element will be rendered with a bold, italic font style, with a font size of 16 pixels, and with font family Arial as the first choice and a fallback font family of sans-serif.
It is worth mentioning that it is recommended to use the font-weight property with keyword values (normal or bold) rather than numerical values, as some font faces may not have variations for every number. Using keywords ensures that the browser will use the closest available weight to the desired value.
Another thing to consider is that the font-style property applies to the entire font, while font-weight applies only to the font's boldness. It's possible to have a bold italic font, but the font-weight and font-style properties will control those specific aspects of the font independently.
It's also good practice to have a font-weight and font-style default values in your CSS, this way if some element in your html does not have one of these properties set, it will fallback to the default value.
Lastly, It is worth noting that font shorthand property, while convenient, it may not be suitable for all situations, particularly when working with advanced typography or when precise control over font-weight and font-style is required.
In conclusion, font-weight and font-style are two independent CSS properties that allow to control the font's boldness and style respectively. They can be set separately or together, depending on the requirements of the design. These properties can greatly enhance the design and readability of your text, and should be used together with font-size and font-family properties to achieve the desired typography.