px or em?
- Started
- Last post
- 32 Responses
- Shepstar15
I did a lot of websites and in the last year i saw that a more and more people use em for font sizes instead of px.
Whats the advantage?I read it has something to do with the base size of a font and so it resizes relative to the font height.
or something like that.
- digdre0
what does EM even mean?
- anxiousarms0
the EM tag is used in place of italics. not font size. it's to EMbellish or EMphasize text with italics
- Jaline0
"EM vs. Pixel
A lot of the leading websites nowadays have fixed sizes, made to fit into a 800*600px resolution screen, but this has disadvantages: People with an unusually high resolution, see a tiny website or people with limited visual acuity have problems reading the text. Normally this should not be a problem because all leading browsers have the ability to zoom (Opera even zooms pictures).
But, a problem that probably everyone has encountered when zooming a random webpage is the following: The sizes grow unproportionally and in the end you end up with different text fields covering each other. The whole layout is completely messed up!
Why is that? Because most of us use pixels to define the sizes of their different boxes and fonts!
You can avoid this bad behaviour by using em-Quads for sizesWhat is an em-quad?
The name is onomatopoetic for M wideness. But this is not the real meaning anymore, nowadays, we use em as a percentage of the size of the parental element.""Writing with Em-quads is barrier free. Every user can zoom your website and view it best for his visual acuity, even if they use Internet Explorer which does not support zooming of absolute values!"
- anxiousarms0
and if i'm sizing text in html i'm using 'font size = whatever' - not EM or PX or anything else....
- do you use the blink tag too?fugged
- no, i don't do html to be honest. that's why i'm so wrong here.anxiousarms
- So, so wrong.brains
- ↓neverblink
- voiceof0
em comes from print terminology. It used to be roughly the size of a capital 'M'. Now an em is the the height of a capital letter, so an em space for a 12px font is 12px high by 12px wide.
- kult0
@anxiousarms.. I think you really.. really need to learn CSS.
- Shepstar150
ok thanks, at least I now know what it means. Do you guys use em or px?
- digdre0
PX
- Jordy0
use search first:
http://www.qbn.com/topics/561028…
and then again anxiousarms is wrong .. the "em" we talk about here is about relative font size and not about style elements.
http://www.w3.org/QA/Tips/font-s…
in other words .. using em's is better for usability but not always for aesthetics, because the user setting matters a lot. then again, if you execute this properly and anticipate to different user settings, your layout can become very flexible / liquid and usable.
- Iggyboo0
Quite technical. I always wondered thanks for the explanation. I been using px for now.
- hiatus0
- what's with the hotel logo?monNom
- http://www.superfamo…monNom
- hmmm, is that not from the corners korean flag? http://www.paulnoll.…Point5
- i ching
http://en.wikipedia.…scarabin
- Stugoo0
em's are scaleable use them for font sizes.
set on body { font-size:62.5%;}
then
your font sizes wil then be 10% of the pixel size.
so 1.4 em = 14px
2.6em = 26pxdo it and be beter at web design.
- lol better*Stugoo
- interesting. where did you get this formula?Point5
- http://www.maratz.co…IRNlun6
- 5timuli0
I use ens. Usually two of them.
- brains0
always em. and what stugoo said. works great.
- janne760
em is better for resizing, and easier to change all font sizes at once.
for instance, in the body the size is defined 67.5%, the rest 1em, which is the size defined in the body, 1.2em is the size in the body times 1.2 and so on.
if you then change 67.5% to 100%, the rest will change accordingly.
- boobs0
I charge extra for em sizing.
- blackspade0
I thought it was { font-size: 76%;} in the CSS from the get go ???
- why would you throw that curve ball?Point5
- 67.5% 62.5 or 76!??????blackspade