Welcome Guest ( Log In | Register )



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Sizes In Webdesign: Em Vs. Px, and why em is better
Rating 5 V
ruben
post Oct 31 2005, 05:44 PM
Post #1


Wheeeeeeee!
Group Icon

Group: Members
Posts: 245
Joined: 19-October 05
From: DG, Belgium
Member No.: 9,200
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:
CODE

<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.
CODE
<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 smile.gif ):
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 wink.gif )
If you set up your font-sizes like this:
CODE
<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]
</div

Then 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.

CODE

font-size:10px -font-size:0.63em
font-size:11px - font-size:0.69em
font-size:12px - font-size:0.75em
font-size:13px - font-size:0.82em
font-size:14px - font-size:0.88em
font-size:15px - font-size:0.93em
font-size:16px - font-size:1em
font-size:17px - font-size:1.06em
font-size:18px - font-size:1.12em
font-size:19px - font-size:1.19em
font-size:20px - font-size:1.25em
font-size:21px - font-size:1.32em
font-size:22px - font-size:1.38em
font-size:23px - font-size:1.44em
font-size:24px - font-size:1.5em
font-size:25px - font-size:1.56em
font-size:26px - font-size:1.63em
font-size:27px - font-size:1.69em
font-size:28px - font-size:1.75em
font-size:29px - font-size:1.82em
font-size:30px - font-size:1.88em
font-size:31px - font-size:1.94em
font-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!
Go to the top of the page
 
+Quote Post
twitch
post Nov 1 2005, 06:32 AM
Post #2


Veteran Nut
Group Icon

Group: Members
Posts: 527
Joined: 4-October 05
From: UK
Member No.: 8,895
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.
Go to the top of the page
 
+Quote Post
miCRoSCoPiC^eaRt...
post Nov 1 2005, 06:36 AM
Post #3


PsYcheDeLiC dR3aMeR
Group Icon

Group: Admin
Posts: 2,242
Joined: 29-January 05
From: Nakorn Chaisri, Thailand
Member No.: 2,411
Yeah good one Ruben. I've always seen that "EM" dude around, but wasn't clear about what he did. Now I know smile.gif Thanks
Go to the top of the page
 
+Quote Post
twitch
post Nov 1 2005, 07:37 AM
Post #4


Veteran Nut
Group Icon

Group: Members
Posts: 527
Joined: 4-October 05
From: UK
Member No.: 8,895
QUOTE(ruben @ Oct 31 2005, 05:44 PM)
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!
*


Looks like you have no choice now cool.gif

And m^e, I am glad I aint the only one that was warey of "him".
Go to the top of the page
 
+Quote Post
mzwebfreak
post Nov 2 2005, 03:06 PM
Post #5


Advanced Member
Group Icon

Group: Members
Posts: 123
Joined: 7-April 05
From: Tampa
Member No.: 3,732
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?
Go to the top of the page
 
+Quote Post
ruben
post Nov 2 2005, 11:41 PM
Post #6


Wheeeeeeee!
Group Icon

Group: Members
Posts: 245
Joined: 19-October 05
From: DG, Belgium
Member No.: 9,200
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 smile.gif) 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 smile.gif

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!)
Go to the top of the page
 
+Quote Post
ruben
post Nov 6 2005, 12:10 PM
Post #7


Wheeeeeeee!
Group Icon

Group: Members
Posts: 245
Joined: 19-October 05
From: DG, Belgium
Member No.: 9,200
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 tongue.gif)
Pixel <——> em-quad

If you would like to see something where I tried to use only EM (except for images and google ads smile.gif), then check my Vocabulator Test
The English version exists already but I did not update it yet. Feedback welcome btw.
Go to the top of the page
 
+Quote Post
derouge
post Nov 10 2005, 01:21 AM
Post #8


Advanced Member
Group Icon

Group: Members
Posts: 111
Joined: 26-August 05
Member No.: 8,098
Very neat .. I'm just getting into CSS so this might be useful. Thanks for the tutorial! wink.gif Any questions I have will be posted back here, so keep watching. tongue.gif
Go to the top of the page
 
+Quote Post
jlhaslip
post Nov 15 2005, 09:20 AM
Post #9


Advanced Member
Group Icon

Group: Members
Posts: 179
Joined: 15-November 05
From: Inland from the Left Coast of Canada
Member No.: 9,627
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.
Go to the top of the page
 
+Quote Post
TavoxPeru
post Oct 27 2006, 06:34 AM
Post #10


Super Member
Group Icon

Group: [HOSTED]
Posts: 713
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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,
Go to the top of the page
 
+Quote Post
« Next Oldest · Websites and Web Designing · Next Newest »
 

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. What Is The Best Free Webdesign Software(14)
  2. What Are Some Good Books On Webdesign?(11)
  3. Future Of Webdesign: Html & Css Or Xml & Xsl?(20)
  4. My Webdesign Using Photoshop Cs2(6)
  5. Is My Webdesign Too Boring? Your Opinion Please(17)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 6th July 2008 - 11:45 PM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation