Font sizes: EM vs Pixel Published on January 19, 2010

Reduzir tamanho de letra Aumentar tamanho de letra Impressão optimizada do artigo Enviar por email

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

NOTE:  I’m not the original author of this article, nor intend to pass by it. I’ve found it on the web a couple of years ago, and kept it as TXT for future reference to my trainees. By publishing it here, I only wish to share this excellent article, to spread some light over this issue that still causes many stress to web designers and developers worldwide, and is a major accessibility issue on User Interfaces.

Go ahead! Leave your comment on this subject!

Fields marked with (*) are mandatory!

Spam Protection by WP-SpamFree

Goodies & Infos
Earn Extra Money!

Get an extra income with your vacation photos!

TIP: go to Shutterstock, submit your photos and make an extra income every month. - I do!





External Resources
Twitter Updates
    © 2010 - WDMAC A Blog about Web Design & Development. WordPress development. Tutorials - "Proudly powered by WordPress!"