Elastic Design

by Patrick Griffiths

69 Reader Comments

Back to the Article
  1. <<<<
    I am not all that happy with sites laid out in ems, because often when I up the font size (e.g. on that ZenGarden elastic layout or at nthposition.com) the stuff on the right moves off-screen and and I get a scroll bar. I hate scrolling right to left,…
    >>>>

    This is a good reason for developers to use max-width. I know it isn’t supported by IE but there is a hack that can be used for IE that doesn’t affect non-IE browsers at http://www.svendtofte.com/code/max_width_in_ie/ . I also use this method to support min-width.

    Copy & paste the code below to embed this comment.
  2. My site is currently using an elastic sidebar. The main content area is liquid (with em sized margins). I’ve used an em sized max-width to keep it looking nice on large displays (too bad for IE; but hey, IE users can resize their windows if the lines are too lont). The only problem is if the font is HUGE, the sidebar (about 10 ems) will fill the screen leaving very little room for the content. One solution would to give a min-width (perhaps in pixels) to the content area, causing hoizontal scroll to view either the sidebar or the content.

    Copy & paste the code below to embed this comment.
  3. The article says, “The default height of text in a browser is generally 16 pixels”, but this is only the case for archaic browsers such as MSIE 5,6 and NN4. Opera, Firebird, Mozilla, and Konqueror all show 1em to be significantly smaller than 16px. Opera is around 13px and the Geckos are about 12px.

    Copy & paste the code below to embed this comment.
  4. The article says, “The default height of text in a browser is generally 16 pixels”, but this is only the case for archaic browsers such as MSIE 5,6 and NN4. Opera, Firebird, Mozilla, and Konqueror (Safari?) all show 1em to be significantly smaller than 16px. Opera and Konqueror are around 13px and the Geckos are about 12px.

    Copy & paste the code below to embed this comment.
  5. I notice both your demo page and Mr. Briggs use an XHTML Doc type. Is this necessary for this type of css? When I had no Doc type I got one result, and when I used the default html Doc type I got another result (different type sizes) for the elastic type .

    Copy & paste the code below to embed this comment.
  6. Roxanne wrote:

    >>When I had no Doc type I got one result, and when I used the default html Doc type I got another result (different type sizes) for the elastic type

    Roxanne:

    DOCTYPE affects how strictly (i.e. how accurately) a browser will interpret your CSS. See this ALA article for more:

    http://www.alistapart.com/articles/doctype/

    Copy & paste the code below to embed this comment.
  7. Adrian wrote:
    >>>
    I want to see the text either the way you envisioned it, or at my default size. If you use pixels, great! I get to see your masterpiece. If you use ems, you’re tapping into my preference for unstyled sites and getting it wrong.
    <<<

    I see what you’re getting at: Pixel sizes are optimal for the designer, and for users who wish to see exactly what the designer intended. Default sizes are optimal for the user*. Em/percent sizes other than 1em/100% are optimal for neither.

    However, I don’t see this as a big problem; if the site is to be able to look good and be fully usable with the users default font size, it has to accommodate for a wide range of sizes, since not all users have the same default. This means that it should also be able to look good and be usable with a font size that is proportionally bigger/smaller than your default (80% of your default is 100% of someone else’s default).

    And if a site is NOT able to look good and be fully usable with any other font sizes than the designer’s, then it’s only optimal to those who are able to comfortably read in that size, right?

    Here comes the asterisk: *Default sizes are only optimal for those users who have set their default size, and it appears to me that few users have, or are even aware that they can. I’d be happy to be proven wrong, though.

    To summarize the pros and cons of different font sizing methods:

    Pixel pros:
    + Allows the designer to create a subjectively perfect design that users are able to see as intended, provided they don’t override the font-size with e.g. !important directives.

    Pixel cons:
    – Suboptimal font sizes for those who don’t have the same taste and eyesight as the designer.
    – Does not allow users of IE to change the font size from site to site. (You might say that they could just use e.g. !important, but even assuming users know how to do that, they might only have trouble reading a FEW sites, and might have no desire to override ALL sites’ settings because of this.)

    Default size pros:
    + Always optimal font size for those users who’ve set a default size.

    Default size cons:
    – Suboptimal for those who haven’t, and they are probably many.

    Em/percent pros:
    + Provided it’s sensible (like, never smaller than 0.8em/80%), and provided that users who set default sizes realize that the default size should be a BIT bigger than “just about readable without squinting”, it should be CLOSE to optimal (VERY close or even spot on for a lot), no matter if the users prefer 10px or 100px text, no matter if they’ve set a default size or not, without any modifications from site to site.

    Em/percent cons:
    – Well, it’s still suboptimal.

    Feel free to add to the list, and remember (all of you) that we’re only talking about base font sizes; it’s never a bad thing to use relative font sizes e.g. to make headings (sensibly) bigger than body text. And ems vs pixels vs percents for sizing other things than fonts is an entirely different subject.

    Now, I really do think that the best solution would be if everyone just set their default sizes so that they could comfortably read unstyled text (and leave some room for smaller text like copyright notices and such), and that designers just left the base font size at 100%. But unless both these things happen at once, there’s going to be suboptimal font sizes for a lot of users at a lot of sites. And while it might be fair to ask web designers to do their part, I don’t think it’s fair to ask users to “please set your font sizes to show web designers we mean business, even if it means that text becomes too small on sites that don’t respect your settings”.

    There is the argument that users who go to the trouble of setting a default font size should be rewarded, and that those who don’t take advantage of their browsers configurability have themselves to blame. I think this argument is mostly valid, but I also think there’s validity to the counter-argument that modern browsers often provide quick ways to specify both a fixed font size (a la !important) and a minimum font size, making sure that text is never too small, and that hardcore power users can create their own stylesheets.

    So, my opinion is still that no method of font sizing is perfect, but today, ems/percents (or keywords, for that matter) come the closest, with default sizes a close second. Pixel sizing comes a long way down, because its benefit is only a benefit to the designer, to those users who share the designers taste and eyesight, and to those users who are more interested in looking at a beautifully designed site than actually reading or using it.

    Copy & paste the code below to embed this comment.
  8. Vigil wrote:
    >>>
    “The default height of text in a browser is generally 16 pixels”, but this is only the case for archaic browsers such as MSIE 5,6 and NN4. Opera, Firebird, Mozilla, and Konqueror (Safari?) all show 1em to be significantly smaller than 16px.
    <<<

    Under Windows, I’ve installed Opera, Mozilla and/or Firebird alongside IE 4-6, without changing font sizes in any of them, and when I view em-/%-sized text, the size is equal in all of them. Under GNU/Linux, it seems to be a different story; even when I set Opera and Mozilla to the exact same value in pixels, sizes differ.

    Copy & paste the code below to embed this comment.
  9. My rule of thumb for deciding whether a layout “works” is:

    - it looks good at viewport widths from 650px to 1024px with IE text size set to “Smaller” (which my husband uses) or “Medium” (which I use).

    - no content areas overlap when IE text size is “Largest” and viewport is maximized on a 800×600 screen.

    I contend that if a web designer’s layout does not fulfill at least the first requirement it doesn’t matter how pretty or effective the design is on their home system, it is an objectively bad design for the WWW.

    Copy & paste the code below to embed this comment.
  10. It seemed like you reversed your self twice in mid article between using ems, using pxs, and going back to ems, so that it appears that the issue is still in that ‘not quite yet standardized’ stage that was a problem for early CSS and NN4.  I get the feeling I should just use px for another year and wait till this whole thing just gets sorted out and the developer tools catch up with some kind of decision. I don’t really have time for experimentation while keeping clients happy. 
    I’m learning CSS-p right now, but it is still troubling enough to get it to layout right that there is a lot of trial and error involved. Without a solid position and decision on font sizing, and standardized methods for implementation, it makes the whole enterprise somewhat questionable for use of time.

    The odd thing is that px fonts scale just fine in IE 5 for Mac. There’s no problem in Safari. It would seem that if M$ would just cooperate, we could all use px and be done with it.

    Copy & paste the code below to embed this comment.
  11. Jefferis Peterson wrote:
    >>>
    It seemed like you reversed your self twice in mid article between using ems, using pxs, and going back to ems
    <<<

    He was just retelling the history of font sizing methods. Em sizes COULD have been used on their own, except that IE/Win has a bug that makes em-sized text too small to read when the user sets the font size to less than medium.

    HOWEVER, the only thing you have to do is to set the font size in percents for the BODY element, and then you can use ems in all of the rest of the document, and it will work perfectly in IE. Or you could just set all font sizes in . 100 = 1em, after all.

    >>>
    I get the feeling I should just use px for another year and wait till this whole thing just gets sorted out and the developer tools catch up with some kind of decision.
    <<<

    My opinion is still: Do NOT use pixels for setting font sizes. Use a combination of % and em, OR keywords, OR don’t set font sizes at all.

    >>>
    It would seem that if M$ would just cooperate, we could all use px and be done with it.
    <<<

    But that’s not the goal we should be heading for. The goal we should be heading for is to give each user exactly what he/she wants. We’re never going to reach that goal, but that’s no reason to stop trying.

    Copy & paste the code below to embed this comment.
  12. Peterman wrote:

    <<<
    Pixel cons:
    – Suboptimal font sizes for those who don’t have the same taste and eyesight as the designer.
    >>>

    But, in a proper browser, the user can adjust fonts “on the fly” to their desired taste.

    <<<
    – Does not allow users of IE to change the font size from site to site. (You might say that they could just use e.g. !important, but even assuming users know how to do that, they might only have trouble reading a FEW sites, and might have no desire to override ALL sites’ settings because of this.)
    >>>

    The crux of the matter. IMHO If this is a problem for IE users they can abandon their browser in favour of a modern one. Simple (in theory).

    <<<
    Em/percent pros:
    + Provided it’s sensible (like, never smaller than 0.8em/80%), and provided that users who set default sizes realize that the default size should be a BIT bigger than “just about readable without squinting”, it should be CLOSE to optimal (VERY close or even spot on for a lot), no matter if the users prefer 10px or 100px text, no matter if they’ve set a default size or not, without any modifications from site to site.
    >>>

    Well, if the user prefers 10px, it will come out as 8px on an 80% site. They may be physically capable to read that size text but computers cannot always be relied upon to display it at that size. Too many provisions here IMHO for this to work as intended.

    <<<
    So, my opinion is still that no method of font sizing is perfect, but today, ems/percents (or keywords, for that matter) come the closest, with default sizes a close second.
    >>>

    I disagree but thank you anyway for considering things from my perspective. Overall though it is a good analysis of the trade-offs for each method. In the end, do what you think is best for your visitors.

    Copy & paste the code below to embed this comment.
  13. Great comments and info. I find that most users who need text to be larger because of slight issues, etc, understand that you can change your browsers resolution even if designers used fixed px values (as I do, sorry…I am evil). Also, Windows (95% users) allows you to globablly change type sizes through-out the OS, no matter what you set your test values to.

    Like print design, web design does need to consider some basic rules of typography. Line length for instance. I hate fluid pages bacause you get 20-30 word line lengths on larger monitor settings (if you adjust the browser). This is not good typography and is very hard to read. I prefer to set the width and center the page (as this site does) to make up for larger res settings.

    finally, users tend to “print” long text pages (more than two or three window scrolls). I do for sure. I hate reading long text on screen. Even with LCD flat monitor, etc., it is a strain. And again to typography: it is easier to read san serif type on screen and serif type in print (don’t ask me why), so I tend to offer print-formatted pages if possible.
    Thanks!

    Copy & paste the code below to embed this comment.
  14. This is the first article I’ve read covering the very important subject of making the text and the page scalable, and having the page scale with the text. 

    That’s exactly what I did with my site, I set the font sizes with keywords (small, medium, large, etc.), and set the dimensions of the containers in em so it would scale with the text.

    That worked great, but I still had a problem.  I need some graphics that I had on the front page menu to scale with the text so they wouldn’t interfere with a small display.  I thought of something I was sure wouldn’t work, but it did, just not in IE.  :P

    I set the width and height of the images in em, and got it close, but on the large side of correct.  Then I set a max-width and max-height in pixels that matched the regular size of the images.  This allowed the graphics to get smaller, but not go past full size.  It worked perfectly until I tried it in Windows in IE 6.  IE 6 ignores the max-width and max-height.

    I left the graphics anyway, and did one of my picture gallerys for a sample.  You can check it out at my site.  If M$ would get it’s act together this would be a great solution for making the entire site scalable.

    Copy & paste the code below to embed this comment.
  15. If I am sight impaired and site after site does not resize with the “text-size” option, wouldn’t I investigate another browser? It seems to me you should stop catering to this browser, no matter how popular it is. Curious as to what the pros think about this. Thanks for all the info, “A List Apart” is amazing.

    Copy & paste the code below to embed this comment.
  16. I have used 80% font size for <body> in a style sheet and 0.8 em for on a couple of different websites and it seems to work well. However, although I have read the Owen Briggs article a few times, I am still puzzled about the effect of the % value for <body>. If I change this % value, it seems to have little effect on text sizes. In fact I omitted it in one style sheet – and changed IE text settings and there was no effect. Can someone explain why setting % in <body> is important ? I have obviously missed something here.

    Copy & paste the code below to embed this comment.
  17. I meant when using the Owen Briggs method in conjunction with tables for layout (I know tables are a bad thing – but they are still used)

    Copy & paste the code below to embed this comment.
  18. The technique presented here doesn’t work in all browsers as is says it does since some browsers (on some platforms) do not default to 16px, although they do default to 16pt. 16pt==16px iff the screen resolution is 72dpi, which it almost never is.

    Most browsers just assume this to be the case, and so it works. But, Mozilla and Konqueror on Linux do not work as they appear to take there DPI from X, which sets it correctly.

    The answer to this problem is:

    html
    {
      font-size:16px;
    }

    body
    {
      font-size:X%;
    }

    h1
    {
      2em;
    }

    … etc


    Hope that helps anyone who runs into problems on Linux.

    Copy & paste the code below to embed this comment.
  19. I really enjoyed this article, and found it to be a great choice in designing your pages for great accessibility.  My only question would be how do you handle image maps when you want your image to scale as well?  I realize if the image remains the same size in pixels this isn’t a problem.  But when you specify an image’s dimensions in terms of em, is there any way to get an image map to scale with the picture?

    Any feedback on this would be greatly appreciated!

    Copy & paste the code below to embed this comment.
  20. Good article, though a little light on actual layout side of things.

    One thing I have been thinking about it is, wouldn’t using a combination of ems (for say margins and padding) and pixels (for the borders) make implementing the box model hack for IE5 a real pain?

    If you used all ems or all pixels for a box it would easy to work out fake width and height values you need to feed IE5 but not if you used a mixture or do I have this all wrong?

    Copy & paste the code below to embed this comment.
  21. When in doubt, take a look at the source.  The anchor tag has a background image of a dotted underline.  The a:hover has switches that to an animated version.  Quite a nice effect if a little extraneous.

    Copy & paste the code below to embed this comment.
  22. I’ve seen solutions to this problem using IEs proprietary ‘expression’ extension to CSS. IE uses width: [removed]) and the rest of the world uses max-width. I think that’s a reasonable use of IEs expressions.

    Copy & paste the code below to embed this comment.
  23. A very good article. After I use the font size approach, the font appears in the same size in both IE 5.0 and Netscape most of time (I have tested so far). A problem on the Netscape 7.1 is that the percentage seems to be ignored sometimes. Font on one page is small, it may be bigger on the next page. How to work around this problem?

    Here is my CSS code segment:
     
    body {

      font-family: Helvetica, Arial, san-serif;
    font-size: 80%;  /* IE 6.0 */
    }
    html>body {font-size: 80%;} /* Mozilla, Opera */ 

    h3 {
      font-size:1.2em;
      text-align:center;}
     
    .TitleText { 
      font-size:1em;
    font-weight: bold;}

    Copy & paste the code below to embed this comment.
  24. I’ve used this technique before actually reading this article.

    this is another example of how it may be used:

    ps: I know the “buttons” should have been list items, but didn’t have time – had to hand this stuff in minutes :P

    Copy & paste the code below to embed this comment.
  25. I’m not a designer, just an amateur who got tired of comments like “It looks fair to horrible on my big monitor…” So I got around to making a liquid layout using percentages for dimensions and absolute positioning (in progress)
    http://www-personal.usyd.edu.au/~ctillam/japanland/3puzzles/3puzzles.html
    Then I found this article, and am now experimenting with ems as a layout and text dimension: great.  So nice to see the container expand with the text. Just one thing…

    On a mac, using IE5, I had my body style set at 100% and a div which wraps all the text set at 1.2em; within, there’s a nested div with a margin-top of 1em.

    Guess what: blank screen. No text at all.

    Then I scrolled down, and there was the text, about one-third of the scroll-bar’s travel downwards.  A top-margin of 1em on the nested div translated into, at a guess, 1200 pixels.
    NS6 and Mozilla render as styled.

    This behaviour is consistent for font sizes greater than 1.13em and less than 1.25em.
    One of life’s little mysteries.

    IE6 Win and points
    And while we’re on text-resizing capabilities: I happily accepted what you see written everywhere, including ALA, that Internet Explorer will resize text set in points.  This is a miserable and misleading half-truth, as you too can find out for yourself if you investigate the settings at Tools/Internet Options/Accessibility.

    Yes, IE6 will resize text set in points—if you tell it to ignore the incoming font-size; then it gives you its own five-step range. But if you tell it to honour the incoming font-size, you’ll see what “no-resize” really means.

    Sigh.

    : }

    Copy & paste the code below to embed this comment.
  26. This was an extremely helpful arcticle. Thanks :D

    Copy & paste the code below to embed this comment.
  27. Go to agree with Lee, read the article, experimented with the ideas on my website and I like what I see! Cheers!

    Copy & paste the code below to embed this comment.
  28. I just got my new laptop with a screen resolution of 1920×1200 pixels, one of those wiiiide screen things, websites with a table width 0f 100% are unreadable, i almost have to move my laptop from right to left over the table to read text (if i want to keep my head still), but i also can flip the screen (in windows xp you can for these tablet pc’s) than you get a really long and small website, I’m still figuring out what the is the best solution to make a website readable on both screens..

    Copy & paste the code below to embed this comment.
  29. I was glad that this article finally gave us a way to make the most of em’s without compromising too much, but one thing struck me as a result of it – as well as providing for a liquid/elastic design, what would you do if someone was browsing your site with a Page Zoom level set way high? Sure your text will flow, but sometimes it might be better to tailor the content based on the font size also.

    For example if you’re showing the first X words of an article – at a “standard” font size you could display perhaps the first 30 words. With a “large” font size, perhaps the first 20 words instead for claritys sake.

    So I wrote a script to detect the font size the visitor has set, to the pixel, and report it back again. It can handle Mozilla/Firefox Page Zooming as well as font-resizing. More details here if anyone is interested (especially in helping to test/refine it further):

    http://www.launchcode.co.uk/fontheight/

    Copy & paste the code below to embed this comment.