Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is 1.0em the same as 100% for font sizes?

Tags:

css

font-size

I am trying to debug why having font-size: 1.0em in jquery-ui is causing my font sizes for my page to go huge(over 16px) without me doing any actual resizing of the fonts. Well, in Firebug I saw a weird thing for an accordion.

At the base, it had font-size: 1.0em but later that was overriden by font-size: 100%. Could that cause some sort of problem with font sizing? I was always under the impression that 100% was the same as 1.0em

like image 967
Earlz Avatar asked Feb 05 '10 21:02

Earlz


People also ask

What is 1em equal to?

An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .

What is em for font size?

An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px. The em square is the “box” that each glyph is sized relative to. So, at 12 points, the em square is 12 points wide.

Which value of the font size is the same as 1 em in CSS?

So, by default 1em is equivalent to 16px , and 2em is equivalent to 32px .

Should I use em or px for font size?

If you use px as the unit for fonts, the fonts will not resize whereas the fonts with rem / em unit will resize when you change the system's font size. So use px when you want the size to be fixed and use rem / em when you want the size to be adaptive/dynamic to the size of the system.


1 Answers

Yes.

1em and 100% mean the same thing (for font-size) — "The same font-size as the parent element" (which is not the same thing as the font size the user has selected unless you are talking about the HTML element).

There are bugs in Internet Explorer when em is used and the font size picked from the view menu is not medium.

like image 104
Quentin Avatar answered Oct 02 '22 18:10

Quentin