Grow your CSS skills. Land your dream job.

Em units for page layout

  • # May 8, 2008 at 2:04 pm

    hey everyone. I thought I’d see if I can get people’s opinions on using the "em" unit for page layout, image sizing, etc…

    I started reading about using ems to set font-size, and then got into some articles about using it to size and position everything on a page. This allows easy resizing on PDAs, for the visually impaired, etc.

    Here’s an article:

    http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm

    I guess I can see it all depending on what site your building and what audience you’re focusing on. But there is a large group of people starting to use Blackberries and iPhones to browse sites online, and this would theoretically allow a site to look exactly the same on a PDA as it does on a full screen browser…

    So, what do you think?

    # May 8, 2008 at 5:36 pm

    Yesterday I started with making a new set-up for my website, also totally using em’s. I am not finished yet, but I really do love the effect. Here is another good article about it: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

    # May 8, 2008 at 7:21 pm

    as far as I can see, the em is a relative measure. I found the Jon Tangerine article mentioned
    above previously, and tried it out on my own example. I really did not realize that the em is a
    relative measurement and the visual results of my example were surpising to me.

    I tried using ems in a header with a floated image and text, the image I wanted to use in the header
    was 149×148 and I wanted the text font size to be specified in ems.

    I tried

    #header {font-size: 4em;}
    img {float: left; width: 9.31em; height: 9.31em;}

    based on 16px/em.

    <div id="header">
    <img src="images/logo.jpg" alt="My Logo" />
    Header text
    </div>

    when I did this, it really exploded the size of the image to almost full screen size, and looking at that
    article more closely noticed that the width and height ems seem to be multiples of the inherited font-size
    i.e. the image size seems to show as 600×600, not 149×148.

    so something to watch out for and plan around in your layout,

    Al

    # May 8, 2008 at 8:44 pm

    I think stuff like this comes down to personal opinion unless theres a very specific effect you’re looking for. I personally dont like using ems bc i just dont trust them. I like knowing my px will be the size of the px i say.

    for fonts i do use em’s

    # May 9, 2008 at 3:50 am

    I am still forming my opinion about it. As I said, I love the effect of it, that resizing the font won’t break the design, but on the other hand like al_m473 told, you need bigger images to let it still be ok when the font is resized very big… Another question is: how far do you go? I think 2-3 steps is allready alot, if somebody sets the font-size 4 or more times bigger, he/she can expect things won’t look perfecft, isn’t it?

    # May 9, 2008 at 6:34 am

    Personally I prefer using em’s on font-sizes, paddings and margins only. The combination of fixed/fluid is easy to control and gives users room enough to resize the font-size. Still, for Iphones and mobile devices, I’d like to just design plain sites. Easy, without heavy colour-mixtures, and easy to navigate. I’ve done some surfing on my old cellphone, and I got to say alot of sites you should be able to use on a cellphone’s browser, doesn’t work at all.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".