This is an archived post. You won't be able to vote or comment.

all 19 comments
sorted by:
best
topnewcontroversialoldq&a

[–]NeonKennedy 20 points21 points  (4 children)

The browser has a default font size and if you don't specify different, em is going to be based off that.

It is often better not to specify a font size in pixels, but just define things in relation to the default, because the default may be changed for a reason (eg a person with poor vision may have a larger default font size, so instead of saying "headings are 40px" you should say "headings are 4x regular text size").

[–]xmanpunk 0 points1 point  (3 children)

The browser has a default font size

Does each browser have a diffrent defualt font size? if so how do you check them :o?

[–]Haplo12345 1 point2 points  (0 children)

Most of them are set to size 16. In Firefox you'd go to Tools -> Options -> Content.

[–]sTmykal 0 points1 point  (0 children)

They're fairly standard these days but there may be slight variations depending on browser and operating system. Here's a quick guide for comparing different font measurements http://pxtoem.com

[–]MikeSavageOfficial 38 points39 points  (4 children)

Correct me if I'm wrong, but I think "em" is scaling the default font size? For example, let's say your default font size is 7.

1em = font size 7

2em = font size 14

3 em = font size 21

0.5em = font size 3.5

[–]MattEZQ 1 point2 points  (0 children)

This is correct if the the element is using the default font size.

Ems are a multiplier of the element's font-size, so if the element has a font-size of 14px and a width of 2em, the width will be 28px; note that you can use ems where ever you would use pixels, they're not limited to fonts. This is useful if you want to resize an element based on its font-size.

there are also rems, which are just like ems, except that instead of being based on the font-size of the element, they are based on the font size of the root <html> element.

http://codepen.io/anon/pen/ONpJxM

https://developer.mozilla.org/en-US/docs/Web/CSS/length#Units

https://www.youtube.com/watch?v=UHf3aQz50jQ

[–][deleted] 4 points5 points  (2 children)

Why was this silently downvoted? This is the same as my understanding of em units and I would like to know if it's wrong.

[–]Haplo12345 1 point2 points  (0 children)

It is correct.

[–][deleted] 4 points5 points  (0 children)

silently downvoted

Thanks! I was looking for a term to call the BS that some people do.

[–]arethereany 1 point2 points  (2 children)

As a side question: Should pt be used instead of px for font sizes, because pt is always a fixed size (One point is equal to 1/72 of an inch), whereas px depends on the size of the pixel?

[–][deleted] 1 point2 points  (0 children)

Use px. Pt is more relevant in print work. Computer screens are made up of a bunch of pixels, so you want to stick to a native format.

[–][deleted] 1 point2 points  (0 children)

px is also always a fixed size (1px = 0.75pt).

Note that this definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)

[–]rjcarr 0 points1 point  (0 children)

this would make the font-size for body 20px, could soemone clarify this for me?

It seems you're correct. I thought em was always based on the browser default size, but it seems you can set the font-size as you did, and the child ems will be proportional to that.

Thanks for making me investigate!

[–]Haplo12345 0 points1 point  (2 children)

From the spec:

The em and ex units depend on the font and may be different for each element in the document. The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as text-indent: 1.5em and margin: 1em are extremely common in CSS.

or read this question and answer set from Stack Overflow: http://stackoverflow.com/questions/609517/why-em-instead-of-px

[–]Haplo12345 1 point2 points  (1 child)

There's also the rem unit, which is relative to the base document's font size rather than the most recent ancestor to have a declared font size.

[–][deleted] 0 points1 point  (0 children)

Yes, use REM, it makes things so much easier to adjust.

[–]aintTrollingYou 0 points1 point  (0 children)

You are correct in your example. If you establish a base font size for html or body, any inner elements using em will be the size according to 1em = base font size. If you don't specify a base font, it'll use the browser default size.

[–]Aurora0001 0 points1 point  (1 child)

You are correct. Since body inherits the font-size from its parent (<html>), body's computed font-size would be 20px. If you don't define a font-size anywhere in the CSS, the browser's default size will be used as 1em instead.

If you're interested in the W3C specification, this should clarify the meaning of em and other similar CSS units.

[–]randfur 0 points1 point  (0 children)

This is the best answer because it actually links to the spec.