Quick! CSS question!
- Started
- Last post
- 6 Responses
- jevad
what is the 'em' property in the font-size attribute? I always use px - when/why use em?
- dc0
bit of a complicated one really...
"em" stands for "em-height" which are common typographical measurements, however, in CSS they have meaning you may not expect if you are familiar with typography.
one "em" is the value of font-size for a given font - so if the font-size is 14 points, then one "em" for that element is 14 points. so you may set the margin for a paragraph of 18point text as 1em - this would give a margin of 18 points.
furthermore, when setting the font. "em" is relative to the parent element. so you may set a class for some small print, which is slighly smaller that the surrounding text. in which case you could say:
small {font-size: 0.8em;}
the moral of the story is, stop wondering about what "em" is and stick with points and pixels!
- matthiuz0
Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. For example, the long dash often found in American texts (--) is known as "em-dash" since it historically has had the same width as the letter "M". Its narrower cousin (-), often found in European texts is similarly referred to as "en-dash".
- jevad0
words guys - thanks. FOund this too:
Depreciated and deprecated! "Well, then what is the best replacement?"¡ªThere is no single correct answer. What works best is determined by application. The ALA site for example freely "mixes 'n matches" using both .px and .em units of length. The W3C CSS2 page employs .em and % (percentage) for font-size management. To best understand the pros and cons, a better understanding of the units of measure is needed (see W3C CSS2 Specifications Section 4 CSS2 syntax and basic data types: 4.3.2 Lengths). http://www.w3.org/TR/REC-CSS2/sy… ¡ý
There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer). - W3C Relative units are:
em: the 'font-size' of the relevant font
ex: the 'x-height' of the relevant font
px: pixels, relative to the viewing device
The .em unit can be troublesome, though theoretically it is ideal. Read the following em from the W3C specs and note the potential pitfalls: The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)
- sp0
It is a form of font-size measurement. Unlike px, which is relevant to the device (hence why fonts on MAC, Linux and Win look different - even though their 'px' size is the same). Instead, em is font-size relevant to the font.
In this case, using em is a more ideal choice for usability...since it will scale accordingly. Although, unfortunately, it doesn't work as well as it should.
- o0o0
deprecated huh? I used x-small, xx-small in my last project just for usability... so that folks could resize the text if needed...
what are the drawbacks of that technique?
- g0
o0o: it's a good idea, but the tranlation of those values is different amongst browsers...going from memory here, but it's something along the lines of Netscape and IE having a different opinion of "small" thus render them differently.
It's only really a problem if you're fixing your page widths and are relying on a fixed layout...if a user makes their text HUGE it may have adverse effects on the page layout...
especially when you use Text / CSS in your navigation system; in this case you are usually limited to one line height and wrapping may be an issue
I think I saw some javascript somewhere that makes these terms browser ambiguous...but I decided to just stick with pixels