CODEWITHSUNDEEP
htmlcssfont-size
SaidbakR
SaidbakR

Reputation: 13534

What is "the currently chosen font size" in em definition?

In this question: Why em instead of px? in The answer of the best vote up, em is defined as:

em is not an absolute unit - it is a unit that is relative to the currently chosen font size. Unless you have overridden font style by setting your font size with an absolute unit (such as px or pt), this will be affected by the choice of fonts in the user's browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.

Use em when you specifically want the size of something to depend on the current font size.

In my website home page, I have a h1 tag with font-size equals to 2.1 em in the header of the page (the website name) which it seems smaller than h2 tag with font-size equals to 1.9 em. The following screen shot demonstrates the situation using Google Chrome browser:

enter image description here

My question is: What does it mean the current font-size regarded in the em definition? In other word, How could I know that current font-size?

Upvotes: 0

Views: 828

Answers (2)

seannachie
seannachie

Reputation: 137

Just to add a "baseline" note here, if you set your site's base font size to 100% in your CSS, this equates to roughly 16px in size. You also need to remember that you if you use "em" as your unit of measurement, it will cascade. This means that if you set a font size on a container element, any font sizes set on its children are calculated off of that font-size instead.

For example, let's say you set the site base font size set to 100%/16px. Then you create a container with its own base font size of .75em (roughly 12px, 12px/16px = .75). Then within that container you want to create a heading element that is roughly 24px in height. To determine the "em" value, you need to base it on the font size of the container, not the base site font size. So it would NOT be 1.5em (24px/16px, 16px being the site default font size), but would instead be 2em (24px/12px, 12px being the font size set on the container).

Upvotes: 1

What have you tried
What have you tried

Reputation: 11138

This means that em is based off of the font size of the closest relative parent. Therefore, the font-size set by the <h2>'s parent must be larger than that of the <h1>'s parent.

So, if the parent of the <h2> has a font-size of 40px, for example, and the parent of the <h1> has a font-size of 20px, 1.9em of the 40px will be larger than 2.1em of the 20px

Read more here to learn about how font-sizing works

Update / Note to consider

If you want to guarantee the size of your fonts throught your page, you should consider using px to set the font-size property. Using px will guarantee that the font-size is absolute, rather than relative which is what using em gets you.

Upvotes: 4

Related Questions