Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help


Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 6
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 9998 times and has 5 replies Next Thread
Male Junkie
Stranger




Joined: Apr 2, 2006
Post Count: 8
Status: Offline
Reply to this Post  Reply with Quote 
em vs px - which one for setting widths?

I've noticed a bunch of people using "em" instead of pixels when defining text, especially text used in CSS menus. Why is this? Is it more accurate? I've always used px, but wondering if I should switch to using em's.

[Apr 2, 2006 9:45:26 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male LSW
Advanced Member
Member's Avatar

USA
Joined: Nov 27, 2003
Post Count: 6285
Status: Offline
Reply to this Post  Reply with Quote 
Re: em vs px - which one for setting widths?

EM was originally defined as the size of the Capital "M" based on the default size and the font used.

Pixel is a solid unit of fixed size, it is not designed for fonts, which are usually defined in Points. Pixel is a measurment that should never be used for text as it is meaningless for text. It is like measuring weight using inches/centimeters.

Pixel, Point etc are fixed sizes. Some users have poor eyesight, or maybe sit farther away from the monitor. Fixed sizes set the text size to something you choose and not what the user wants or needs. Firefox and Opera will enlarge the text in fixed units, IE6 will not, so the sizes can not be changed for them.

EM and % are both flexible units based on the chosen font and size the user has in their browser, this means each user will see the size as they chose it and not as you chose it. The text size can be changed to fit their wishes/needs as it is flexible.

But that has it's price, you must create your web site to be flexible as well. Normally you use em/% for text, &/pixel for width of structural elements. However if you create say a menu flexible, then the box holding it must be flexible as well to stretch with it or at larger text sizes it will overspill. So is a case like that you can define the box in em as well so that it grows at the same rate as the em text when enlarged.
[Apr 2, 2006 10:41:28 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male Junkie
Stranger




Joined: Apr 2, 2006
Post Count: 8
Status: Offline
Reply to this Post  Reply with Quote 
Re: em vs px - which one for setting widths?

EM was originally defined as the size of the Capital "M" based on the default size and the font used.

Pixel is a solid unit of fixed size, it is not designed for fonts, which are usually defined in Points. Pixel is a measurment that should never be used for text as it is meaningless for text. It is like measuring weight using inches/centimeters.

Pixel, Point etc are fixed sizes. Some users have poor eyesight, or maybe sit farther away from the monitor. Fixed sizes set the text size to something you choose and not what the user wants or needs. Firefox and Opera will enlarge the text in fixed units, IE6 will not, so the sizes can not be changed for them.

EM and % are both flexible units based on the chosen font and size the user has in their browser, this means each user will see the size as they chose it and not as you chose it. The text size can be changed to fit their wishes/needs as it is flexible.

But that has it's price, you must create your web site to be flexible as well. Normally you use em/% for text, &/pixel for width of structural elements. However if you create say a menu flexible, then the box holding it must be flexible as well to stretch with it or at larger text sizes it will overspill. So is a case like that you can define the box in em as well so that it grows at the same rate as the em text when enlarged.




Thanks. Makes a lot of sense. So, if I was doing a horizontal navbar, is there any reason why I should choose em? Seems like I could get everything aligned just perfectly the way I want and then some grandma is going to render the site with huge text which would make the navbar text and buttons huge and all out of alignment. What would be the solution to that? Px maybe? What do you think?
[Apr 2, 2006 5:47:50 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male LSW
Advanced Member
Member's Avatar

USA
Joined: Nov 27, 2003
Post Count: 6285
Status: Offline
Reply to this Post  Reply with Quote 
Re: em vs px - which one for setting widths?

Exactly, but not just older people with eyeproblems, also younger people, people with migranes might enlarge the text, also people with physical difficulties who can not work a mouse to small text/images, they may enlarge text to make the "Hot" area larger.

There is a borderline one meets. Unless it is but a few links, at some point the text will push the fold so the last link or two will drop down. Tis you simoly must accept as fact, anyone with the text enlarged to that extent will be used to it.

Some say you should be able to enlarge the text 200% without breaking the site, after that chances are someone would choose to use ascreenreader for the site instead. I would say at least that you should be able to switch to large (IE) or enlarge the text say 3-4 times in IE before it breaks.

Just remember that it is not just width, but height that as to enlarge as well or the link will hang over the content. Horizontal links are the hardest to control, one idea is the few main links horizontal and the rest verticle.
[Apr 2, 2006 6:26:22 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male Junkie
Stranger




Joined: Apr 2, 2006
Post Count: 8
Status: Offline
Reply to this Post  Reply with Quote 
Re: em vs px - which one for setting widths?

Exactly, but not just older people with eyeproblems, also younger people, people with migranes might enlarge the text, also people with physical difficulties who can not work a mouse to small text/images, they may enlarge text to make the "Hot" area larger.

There is a borderline one meets. Unless it is but a few links, at some point the text will push the fold so the last link or two will drop down. Tis you simoly must accept as fact, anyone with the text enlarged to that extent will be used to it.

Some say you should be able to enlarge the text 200% without breaking the site, after that chances are someone would choose to use ascreenreader for the site instead. I would say at least that you should be able to switch to large (IE) or enlarge the text say 3-4 times in IE before it breaks.

Just remember that it is not just width, but height that as to enlarge as well or the link will hang over the content. Horizontal links are the hardest to control, one idea is the few main links horizontal and the rest verticle.





Hmmm, verrrry interesting indeed. Of course, I do want my design to work for all sorts of people that change their preferred font size, but there is a limit to how much time I spend designing for them... which btw, is not a whole lot.

Sooo, is there a way I can still use em and basically force a certain font size on them without them having the ability whatsoever of changing it???
[Apr 2, 2006 8:43:29 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male LSW
Advanced Member
Member's Avatar

USA
Joined: Nov 27, 2003
Post Count: 6285
Status: Offline
Reply to this Post  Reply with Quote 
Re: em vs px - which one for setting widths?

No, Opera and Firefox will change the size anyways, even if you use PX or PT, IE6 will not, IE7 I have not yet tested.
[Apr 2, 2006 9:25:35 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread