ruben1405241511 0 Report post Posted October 31, 2005 EM vs. Pixel and why EM is better 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 sizes What 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. for example: <div style="font-size:21px;"> (21px absolut) <div style="font-size:0.9em;"> (90% = 18px) <div style="font-size:0.9em;"> (90% ≈ 16px) <div style="font-size:0.9em;"> (90% ≈ 15px) <div style="font-size:0.9em;"> (90% ≈ 13px) <div style="font-size:0.9em;"> (90% ≈ 12px) </div> </div> </div> </div> </div></div> Let's say if I get more than two feedback posts for this I will put up a HTML-version where you can really see the sizes! Whoever uses mostly CSS in his websites will now that the parental element for a lot of the content boxes is in most cases the <body>-Tag. So what to set up here? Since the em-implementation in problem child browser Internet Explorer is not 100% correct, you need to implement a little fix. <style type="text/css"> body { font-size: 100.1%; }</style>is the best setting. Other commonly used settings like 1em (not good for many browswers, but very common), 100% (problem reason in some browsers) ,1.01em (IE thinks this is the same as 1em) cause problems!But what does this mean 100.1%? Percent of what? Well, as you might have noticed, browsers give the possibilty to set up a default font size in the settings (default-setting will normally be 16px)! So 100.1% of the default font size (if someone has an extreme setting here, then he probably wants it like that. If you set up absolute font sizes you override his setting and his will and make him an unhappy customer. I don't like unhappy customers, do you?) The advantages of EM (for you and your users) First of all: The advantage for your users (customer is king ): 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! Then there is an advantage for you too, because sometimes life is fair (YES, m^e, sometimes it is ) If you set up your font-sizes like this: <style type="text/css"> body { font-size: 100.1%; } div#content { font-size: 0.8em; } h1 { font-size: 1.5em; } p { font-size: 1.2em; }</style></head><body><div id="content"> [SIZE=5] <h1>headline</h1>[/SIZE] [SIZE=4]<p>Textextext</p>[/SIZE] [SIZE=2]<span>footnote</span>[/SIZE]</divThen all sizes are dependent on the top level div-box: #content.If you notice now, that the sizes don't fit in your layout perfectly, than you have to make only one change for the div#content box (->0.9em for example) and all the sizes are changed (while the relations are kept)! It admit, sometimes this can also be bad, but I would say: Not as often as it is good! How To Make All Browsers display the same (relative) size A problem, which occurs from time to time, is that the same values are displayed differently in different browsers. You can avoid this by using awry values (like 0.63em) instead of rounded ones. This makes the browsers interprete them more precisely, but don't ask me why! To give you an impression how you can translate Pixel-Values to em, I hereby include a table. It assumes the settings: body { font-size: 100.1% } and the user-setting 16px for the font-size. font-size:10px -font-size:0.63emfont-size:11px - font-size:0.69emfont-size:12px - font-size:0.75emfont-size:13px - font-size:0.82emfont-size:14px - font-size:0.88emfont-size:15px - font-size:0.93emfont-size:16px - font-size:1emfont-size:17px - font-size:1.06emfont-size:18px - font-size:1.12emfont-size:19px - font-size:1.19emfont-size:20px - font-size:1.25emfont-size:21px - font-size:1.32emfont-size:22px - font-size:1.38emfont-size:23px - font-size:1.44emfont-size:24px - font-size:1.5emfont-size:25px - font-size:1.56emfont-size:26px - font-size:1.63emfont-size:27px - font-size:1.69emfont-size:28px - font-size:1.75emfont-size:29px - font-size:1.82emfont-size:30px - font-size:1.88emfont-size:31px - font-size:1.94emfont-size:32px - font-size:2.01em (It is a simple thing: Just multiplicate the Pixel value with: 0.06(period)27 and you get the em-value). If you want to build yourself a graph in some graphing application use this formula:1.38/22 * pixel = em And not only font sizes... Until now I only wrote about font sizes, but you should know that you can and should apply the em-values to other sizes in your document too! This implies that you have a quite flexible layout, but since this should be everyones ambition: Now you have a powerful standard to use, when creating flexible layouts. If you have for example a box with text in it, the box width:200px and the font-size:1em and you just change the font-size, then the text will be bigger than the box! (Some browsers don't do this behaviour but they are non-standardized â problem child MSIE again). This can be avoided by avoiding absolute values in widths and heights and whatever too: If your width in that box was 12em, then it would grow according to the font-size. The box would look precisely the same, just bigger! The relations stay! Of course you would not put too much text in a small box but, if a user zooms, then the same thing happens as if you did. So: Be prepared, use EM. You will not be able to use em-values for widths and height unless a parental element such as body has a percentage set as width. So use the default setting, that I described above (body { font-size: 100.1% } )! You should of course also use the em-value for padding, margin, border and wherever you can set up sizes. In every case the reason is: If someone enlarges your page he won't have to see a broken layout. Why EM and not EX or %? The reason against using %: % is dependant on the width of the parental element, not the font-size! EX(this stands for: height of the letter "x"). Normally 1em should be = 2ex, but this is not always true, since it is dependant on the used font (in Firefox for example). So ex can not be a standard size, since available fonts are not the same on every computer! The next step in flexible web design Still, you will notice that people might have to scroll horizontally, when they enlarge the contents. You can avoid this if you have a completely flexible layout, where you do not use "position:absolute" to position elements but more relative things like: float:left (for the menu on the left) and margin-left:4em (for the div-layer with the content in it). This way, if someone enlarges the website that much that there is not enough place for the content next to the menu, the content will just go to the next line. This is very convenient for users with low visual acuity, but it limits the possibilities of your webdesign of course. But if you have an completely CSS-based webdesign you can define different stylesheets for different media (@media), so you might want to use this. This tutorial is heavily inspired by a German article by Ingo Turski (The German Article), which is probably better and more complete. But I think, that the knowledge should be available to everyone here, so I rewrote it in my style in English. On his web-site you can find a good example of completely flexible web design and examples for the differences of em/ex/%. It doesn't require knowledge of the German language to see the layout! Share this post Link to post Share on other sites
twitch 0 Report post Posted November 1, 2005 This is a great tutorial. I am still learning bits of CSS, that I could not pick up from anywhere, and this em business is something I never understood, I thought it was just another form of pt. Share this post Link to post Share on other sites
miCRoSCoPiC^eaRthLinG 0 Report post Posted November 1, 2005 Yeah good one Ruben. I've always seen that "EM" dude around, but wasn't clear about what he did. Now I know Thanks Share this post Link to post Share on other sites
twitch 0 Report post Posted November 1, 2005 Let's say if I get more than two feedback posts for this I will put up a HTML-version where you can really see the sizes! 1064328161[/snapback] Looks like you have no choice now And m^e, I am glad I aint the only one that was warey of "him". Share this post Link to post Share on other sites
mzwebfreak 0 Report post Posted November 2, 2005 I, too, had seen the little EM on some sites I'd look at, but thanks for explaining what it was and why it's better than px...that plus, I've always found specifying in PX didn't give me as much versatility as I would have liked for the size of fonts...I mean, sometimes I wanted it small, but 6pt type in some fonts was still too big...one question tho. Does the PX vs. EM only work with HTML documents and the like (php, asp, etc) or do you know if you can apply it to, say, Photoshop? Share this post Link to post Share on other sites
ruben1405241511 0 Report post Posted November 2, 2005 Thanks folks! Yes, I'll put up a better version in HTML later this week (I don't know about you, but right now it's quite late in Sweden). The German article I referred to already has that stuff, but I'll come up with a nice graph too. As an answer to mzwebfreaks question: The EM is originally derived from typography, meaning the width of the letter "M" or the dash "–" (long dash, not short dash "-"), which usually had the same width in a font. Nowadays the meaning has extended (since M does not exist in Chinese for example). It now means the height of a font. Since it is derived from typography I thought it should be possible to define the size of a font in Adobe Photoshop or InDesign with 'em', but it is not possible (not for me at least, I tried!). I read some stuff about its history now and I think it goes way back in history to the time where they still placed little iron thingies on their printers and the em-quad was a space of the width of an –.. Something like that. Nowadays at least on the internet (what matters ) em is a relative size! I think it has lost its meaning in typography (which is the only meaning that would matter in Photoshop, because relativity does not mean anything to pictures). The new meaning means nothing in Photoshop or Indesign, because you create fixed Bitmaps, pixel for pixel, where there is no setting to which one could refer relatively (like the 16px/96dpi setting of a normal user browser). Did this make it clear? I hope so.. I'm a little tired.. if you don't understand, ask again and I will put some brain power on it Also interesting to read (found them only now) is the article by the W3 Consortium (for some reasons the links there are dead, but the article is interesting as is!) Share this post Link to post Share on other sites
ruben1405241511 0 Report post Posted November 6, 2005 Sorry for double posting, but I wrote it in HTML now.I included a little tool to calculate back and forth and I showed the different font sizes (be sure to try zooming).The JS tool came quite handy for my purposes, so I hope you can make a use of it too (if not, then your web-layout is EVIL )Pixel <ââ> em-quadIf you would like to see something where I tried to use only EM (except for images and google ads ), then check my Vocabulator TestThe English version exists already but I did not update it yet. Feedback welcome btw. Share this post Link to post Share on other sites
derouge 0 Report post Posted November 10, 2005 Very neat .. I'm just getting into CSS so this might be useful. Thanks for the tutorial! Any questions I have will be posted back here, so keep watching. Share this post Link to post Share on other sites
iGuest 3 Report post Posted November 15, 2005 Thank you for your clear and concise presentation of this topic. I will take note and begin implementing these suggestions immediately on my web sites. Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted October 27, 2006 Well, while i'm searching other information i just found this excellent topic, congrats, its very helpful and simple, so, i gonna implement it right now in a project that im working on.Best regards, Share this post Link to post Share on other sites
iGuest 3 Report post Posted January 27, 2008 Great information on this web page. Thanks ! Share this post Link to post Share on other sites
FirefoxRocks 0 Report post Posted April 10, 2008 I've read this informative tutorial throughly and found that this is a valuable concept to designing in CSS. In addition to font sizes, margins and paddings can also be specified in the relative unit of em, and more rarely width, height, border and positioning selectors. With regards to using %, it actually takes the font size of the parent element if you are specifying the value as a font size.As for specifying the page width to be 780px to accomodate the screen resolution of 800*600, I think that the idea is ok because most users screen resolutions are at 1024*768 up to 1280*1024. The layout shouldn't look too small in either of those layouts, with a width of 780px. And visually impaired users would probably set the screen to 800*600, which is perfect for the page. However the use of percents to set <body> width is still recommended as it is called "liquid design".Thanks for writing this informative post, I'll be sure to use these techniques when updating my CSS. Share this post Link to post Share on other sites
iGuest 3 Report post Posted July 2, 2008 Em vs px in modern browsers? Sizes In Webdesign: Em Vs. Px Hi there! Great article! But what about the latest browser editions such as FF3 which have some kind of new technique that zooms pages like "images" and where you can build your entire layout using px units and still have your page zoom proportionally? Is the difference between ems and pxs still an issue? Cheers! -question by EmFan Share this post Link to post Share on other sites
iGuest 3 Report post Posted July 2, 2008 Em vs px in modern browsers? Sizes In Webdesign: Em Vs. Px Hi there! Great article! But what about the latest browser editions such as FF3 which have some kind of new technique that zooms pages like "images" and where you can build your entire layout using px units and still have your page zoom proportionally? Is the difference between ems and pxs still an issue? Cheers! -reply by EmFan Share this post Link to post Share on other sites
Sensational 0 Report post Posted July 21, 2008 (edited) Em vs px in modern browsers? Sizes In Webdesign: Em Vs. Px Hi there! Great article! But what about the latest browser editions such as FF3 which have some kind of new technique that zooms pages like "images" and where you can build your entire layout using px units and still have your page zoom proportionally? Is the difference between ems and pxs still an issue? Cheers! -reply by EmFan im guessing with certain browsers it will still be an issue because some browsers still wont zoom proportionally with pxs.. but with FF3 it does zoom proportionally with pxs so there is no difference between ems and pxs.. so it just depends what browser the user is viewing the webpage in! Edited July 23, 2008 by Sensational (see edit history) Share this post Link to post Share on other sites
