Picking units

Posted on 11 August 2006 (04:18 AM)

CSS provides a lot of different units to measure with. Of course there are pixel, point and centimeter (among others), which are fairly regular. Other interesting units are em and percent. The one big difference between those units is both em and percent are relative, as opposed to the absolute pixel and point. In this article I will provide some insight on the pros and cons of both groups.

Relative vs Absolute

In theory, it's better to use relative values in order to provide some more accessibility. Most major browsers come with an option to scale text on a webpage. This is of course ideal for visually impaired users, who need bigger text in order to read things properly. Hell, I myself use it sometimes on sites with poor contrast or a ridiculously small font-size.

This is where the danger of using px comes in. While most browsers are able to resize pixel-based font-sizes properly, the biggest player in the game, Internet Explorer, lacks this ability. 10px will stay 10px no matter what you do. Therefore, in order to provide maximum cross-browser accessibility, you should set font-sizes using em, percent, or one of the keywords "smaller", "small", "large" et cetera. But how much is 1em then? Due to its relative nature, it might be 11 pixels, 9.1 pixels, or .17 inch. You have to have a base font-size in order to use em.

Your base-size can be the browser's default. Most browsers ship with a 16 pixel default size. You can also use keywords, like I do with Whatstyle:

  1. body {
  2. font-size: small;
  3. }
  4. Download this code: /code/picking_units1.txt

Since the 16 pixel default is rather large for most people, I now base my font-sizes on the default small font-size as set by the browser. This works, because em relies on a set size in a parent element. For instance, considering the following HTML and CSS...

  1. div.someClass {
  2. font-size: 10px;
  3. }
  4. div.someOtherClass {
  5. font-size: 15px;
  6. }
  7. p {
  8. font-size: 2em;
  9. }
  10. Download this code: /code/picking_units2.txt
  1. <div class="someClass">
  2. <p>Some text</p>
  3. </div>
  4.  
  5. <div class="someOtherClass">
  6. <p>Some other text</p>
  7. </div>
  8. Download this code: /code/picking_units3.txt

...we can state that the first paragraph contains text of 20 pixels big, whereas the second paragraph contains text of 30 pixels big. See this effect in action.

Clients and designers

Once you've made yourself familiar with the use of relative font-sizes, you will irrevocably run into other obstacles: clients and graphical designers. Clients may have their own house style with predetermined, fixed font-sizes. Designers may have carefully arranged the typography on a website and want a pixel-perfect copy of their Photoshop mock-up to appear online. Both clients and designers are right, in fact. The visual appearance of a website is very important and can make a difference in how people react on the company behind the website.

Luckily, there's no need to make choices. You can be greedy and take the best of two worlds. I recently read this article on Gigadesign (note: the article is in Dutch), which provides a simple solution to this problem.

The solution

Using a simple calculation, we can set the base font-size (1em) to 10px: 16px - 62.5% = 10px. Apply this calculation in your CSS like this...

  1. body {
  2. font-size: 62.5%;
  3. }
  4. Download this code: /code/picking_units4.txt

...and from now on 1em will be 10px. Being more specific:

Don't believe me? Take a look at this example.

Nesting elements

As easy as this might seem, care must be taken when considering inheritence. Take a look at the following CSS:

  1. li {
  2. font-size: .83em;
  3. }
  4. Download this code: /code/picking_units5.txt

All text in a list-item will now be 8.3px, but when nesting one list-item in another, the font-size of text inside the second list-item will be 8.3px, reduced by .83em, leaving 6.8px as a result.

To solve this we have to overwrite the default value of inherit:

  1. li li {
  2. font-size: 1em;
  3. }
  4. Download this code: /code/picking_units6.txt

This way the nested list-item's text will once again be 8.3px.

Going beyond text

CSS provides numerous ways to make websites more accessible. Taking em-units in consideration, we can create flexible layouts. A good example of so-called "elastic" design can be found at this contribution to the CSS Zen Garden, by Patrick Griffiths. Try and increase or decrease the text-size in your browser and watch the layout scale along.

So there you have it; no more talk about dropping support for 800*600 resolution monitors! Using CSS you can create websites for everyone.

Back to top

Filed under HTML and CSS, Accessibility

Comments:

  1. 22 August 2006 (03:35 AM) by Sam

    This is a very helpfull article for those who want to understand textsizes better.

    It did help me!

    Thanks

  2. 02 December 2006 (02:41 PM) by Harmen Janssen

    Glad to be of service, Sam! ;)

Leave a comment

RE: Picking units

Note to spammers: rel="nofollow" will be added to links. If I consider your comment spam, your IP-address might get blocked.

HTML not allowed. URLS will be auto-linked. Maximum length is 1250 characters.

I understand this is inconvenient, but the spam I'm receiving on this website is driving me nuts. Please forgive me and cope with it until I find a better solution.

Mandatory fields are marked by an asterisk (*).

Increase textarea-size Decrease textarea-size

Back to top

Preferences

These settings will be saved for your convenience.