Elastic Design

by Patrick Griffiths

69 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. This was an extremely helpful arcticle. Thanks :D

    Copy & paste the code below to embed this comment.
  17. 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.
  18. 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.
  19. 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.