In this lesson, we are going to discuss how to customize the fonts using CSS.
Font size
In most cases, the font you choose comes in various styles, weights, and sizes. There are a few properties available in CSS that allow you to customize it. For instance, you can change the font size using the font-size property:
1p {
2 font-size: 16px;
3}In this case, the font size is defined with the unit px (pixels). In fact, there are other interesting units you can use. You can learn more about units in CSS here.
Font units
When defining the font size, the most commonly used units are em and rem. em is a relative unit, relative to the font size of the parent element. For instance,
1<body>
2 <p class="p1">
3 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
4 reprehenderit?
5 </p>
6 <div>
7 <p class="p2">
8 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, libero.
9 </p>
10 </div>
11</body>1div {
2 font-size: 10px;
3}
4
5p {
6 font-size: 2em;
7}In this example, we have two <p> elements, p1 and p2, and their font sizes are defined as twice the size of their parents (2em).
p1 has the parent <body>, whose font size is not defined in this case. If not defined, the font size will be 16px by default, which means p1 will be 32px.
The parent of p2 is <div>, whose font size is defined as 10px, which means p2 is 20px.
rem, on the other hand, is relative to the root element. This will give you a consistent reference across the entire HTML document, making it the most popular method for defining font size.
Font weight
Next, you can also define the weight (the thickness of the strokes) of the font using the font-weight property. The accepted values include lighter, normal, bold, bolder.
1p {
2 font-weight: bold;
3}
Or you can use numeric values 100, 200, to 900, with 100 being the lightest and 900 being the boldest. However, you should know that most fonts do not have this many variants. You must ensure the fonts you are using have the variants you need.
1p {
2 font-weight: 800;
3}
Font style
The font-style is used to define italic text. It can be either normal, italic, or oblique. oblique is similar to italic but less supported, so it is rarely used.
1p {
2 font-style: italic;
3}
The reason that oblique exists is that, if the browser supports it, it allows you to define an angle, enabling you to specify precisely how much you want the letters to be tilted.
Font variant
Lastly, the font-variant property defines whether or not the text should be displayed in a small-caps form, where all lowercase letters are converted to uppercase but in a smaller form.
1p {
2 font-variant: small-caps;
3}