As a web developer, one of the most important things you need to know is how to control the size of your text on a website.
In this CSS tutorial, we’re going to explore two common ways of setting font size in CSS: percent and em.
First, let’s talk about using percent to set font size.
The syntax for this is fairly simple:
font-size: 50%;
This will set the font size to 50% of the parent element’s font size.
So, if the parent element’s font size is 16px, the child element’s font size will be 8px (50% of 16px).
One of the benefits of using percent is that it allows for easy scaling of text.
For example, if you want to make all text on a website larger or smaller, you can simply adjust the percent value on the body element.
However, there is a drawback to using percent: it can lead to unexpected results when nested elements have different font sizes.
For example, if a child element’s font size is set to 50% and its parent’s font size is set to 25%, the child element’s font size will be 12.5% (50% of 25%).
Now, let’s talk about using em to set font size.
The syntax for this is slightly different:
font-size: 1.5em;
This will set the font size to 1.5 times the parent element’s font size.
So, if the parent element’s font size is 16px, the child element’s font size will be 24px (1.5 times 16px).
One of the benefits of using em is that it allows for consistent scaling of text.
For example, if you want to make all text on a website larger or smaller, you can simply adjust the em value on the body element.
However, there is a drawback to using em: it can be more difficult to understand the actual font size.
For example, if a child element’s font size is set to 1.5em and its parent’s font size is set to 25px, the child element’s font size will be 37.5px (1.5 times 25px).
In conclusion, whether you choose to set font size in percent or em depends on your specific needs.
Percent is a good choice if you want to easily scale text, while em is a good choice if you want to ensure consistent scaling of text.
