What the heck are em's?

[Gillie]

Help!!

I have too small a font size on my main site and am looking to make it more readable but when I head to the stylesheet - its in em's ... px I understand, but what em equates to say 12 or 14 px ?

Or should I just sit here all night and just invent numbers?

And this seemed like such a good idea this morning!! Pah!! :mad:

[Employment Law Clinic]

I'm only a casual coder, so do look for more replies Gillie, but I think <em> is emphasis - the nature of which you can set in your CSS, or leave the browser to revert to its own preference (which might be bold or italics).

I'm sure the format of these can be easily set in the CSS, so you need to determine what format you want - italics, bold, size, font, etc.


Karl Limpert

[Gillie]

In my style sheet though, it doesnt give the px for the body it gives 0.75em for size which is confusing me!

[WarringtonWebsiteDesign]

Try this site (http://pxtoem.com/) for conversions between the two.

Basically em is another way of defining font size and I would suggest using it over px for accessibility reasons.

[Employment Law Clinic]

Oh, that's something else!


Again not entirely sure about it, but I believe that has something to do with zooming in: rather than specify a certain pixel size, em is more versatile, and changes according to other parameters on the page. Perhaps some browsers accept the CSS and not zoom if px is used, while if coded to em, the whole page will increase in size together.


(:| I'm not confident I just typed the above, certainly not while knowing what it means. Guess I must have read something like that once, along with something that covered where & how the px or em things should be used! )

I am fairly confident that the "0.75" is 75% - which means the font will be something like 75% of the...




Where are the clever people on a Friday night (or at least the players on bridge4money, so I wouldn't be here, confusing Gillie & me)?


Karl Limpert

[Gillie]

Try this site (http://pxtoem.com/) for conversions between the two.

Basically em is another way of defining font size and I would suggest using it over px for accessibility reasons.

Rob, that link is wonderful!!

Saves me picking a number and seeing if it works!

Thank you!

[WarringtonWebsiteDesign]

@Karl you were right with the <em> tag. It normally puts the text in itallics to emphasise where as the <strong> tag normally puts a heavier weight to the font (bold). ;)

In the case asked it is about the measurement em as opposed to px or pt or %.

As a guide for Gillie 1em or 1.25em will probably be good for the default font.

[Gillie]

@Karl you were right with the <em> tag. It normally puts the text in itallics to emphasise where as the <strong> tag normally puts a heavier weight to the font (bold). ;)

In the case asked it is about the measurement em as opposed to px or pt or %.

As a guide for Gillie 1em or 1.25em will probably be good for the default font.

Yes changed it to 1em and now it just looks too big - although I don't need my glasses anymore! I suppose its probably the ideal size for most then.

[cmcp]

think of em like a %.

when you set a font size on your stylesheet to px, it is absolute. eg that font will be 16px in size (for example).

when you set it to 1em, it is relative to the base font size of the parent element. browsers generally have a base font size of 16px by default, so if you set your body tag font-size to 1em (100%), the elements you set to 1em will be equal to 16px.

taking the body font size to be set at 1em, if you wanted your paragraph tag to be 12px, you'd work out what the relative size in ems would be. divide 12 by 16 = 0.75em.

so you've got the base font size set at 1em (16px) and the paragraph tag set at 0.75em. the paragraph tag will be 0.75em of the 1em (16px) = 0.75 x 16 = 12px.

If your base font size is set to 1em, here's a quick run down:

16px = 1em
15px = 0.9375em
14px = 0.875em
13px = 0.8125em
12px = 0.75em

[Matt1959]

think of em like a %.

when you set a font size on your stylesheet to px, it is absolute. eg that font will be 16px in size (for example).

when you set it to 1em, it is relative to the base font size of the parent element. browsers generally have a base font size of 16px by default, so if you set your body tag font-size to 1em (100%), the elements you set to 1em will be equal to 16px.

taking the body font size to be set at 1em, if you wanted your paragraph tag to be 12px, you'd work out what the relative size in ems would be. divide 12 by 16 = 0.75em.

so you've got the base font size set at 1em (16px) and the paragraph tag set at 0.75em. the paragraph tag will be 0.75em of the 1em (16px) = 0.75 x 16 = 12px.

If your base font size is set to 1em, here's a quick run down:

16px = 1em
15px = 0.9375em
14px = 0.875em
13px = 0.8125em
12px = 0.75em

Craig, my blog is showing much bigger font in IE than in FF. *Could* this be anything to do with this Em issue as I have read about this somewhere else?

[FireFleur]

em is just short for em-height, it is a relative size to the base font of the element, as cmcp has explained.

There is ex as well which x-height, and that is based on the height of x in a font.

em use to be based on the width of M in a font, though in CSS it is just based on point size of the font.

[mobyme]

Text sizes in different browsers is a real can of worms, however you may find this link useful http://www.alistapart.com/articles/howtosizetextincss

[WarringtonWebsiteDesign]

The best solution is to use a different style sheet for IE and define styles/font sizes specifically for the browser. As IE is so not standards compliant there is probably a whole load of stuff you would want to put in the style sheet for IE as well.

[cmcp]

Craig, my blog is showing much bigger font in IE than in FF. *Could* this be anything to do with this Em issue as I have read about this somewhere else?

It could be a number of issues, but if you didn't build the site it'll be hard to determine without looking at the code.

Front end web developers code defensively, that is we know all the little browser inconsistencies and can build to avoid them.

When building for a wide range of browsers I'd recommend using a base stylesheet to reset some of the default box + text inconsistencies, which would give you a more solid foundation to build on.

[ComputerCoders]

It's 75%. 1em is 100%.