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.
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...
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 149x148 and I wanted the text font size to be specified in ems.
<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 600x600, not 149x148.
so something to watch out for and plan around in your layout,
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.
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?
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.
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?
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 149x148 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 600x600, not 149x148.
so something to watch out for and plan around in your layout,
Al
for fonts i do use em's