13 replies [Last post]
slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Hi,

I've trying to make sure I use ems in my layouts more as they are more easily scaled in IE/Win but the trouble I'm having is knowing what to size in ems and what to size in pixels.

Richard Rutter thought of a very effective technique to make em sizing quite easy (http://clagnut.com/blog/348/) but should ems just be used when setting font sizes and line-heights or should they be used instead of pixels throughout your entire layout and styling?

Mike Jolley writes another useful article on the subject (http://blue-anvil.com/archives/going-elastic-with-ems-layout-techniques) where the text, layout, and spacing is all sized in ems but then his own style sheets are sized in pixels.

How do you know when and where to size in pixels and ems?

Thanks

slip

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I reckon everything should

I reckon everything should be in ems vertically; whether you use ems horizontally will depend on what type of layout you want - fixed, fluid, elastic or a hybrid. If it's fixed, use pixels; if it's fluid, use %; if it's elastic, use ems and if it's a hybrid, it'll be a combination of % with max & min values probably set in ems and pixels respectively. Which is best may well vary from site to site.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Would it be wrong to use a

Would it be wrong to use a combination of the both in the same stylesheet? For instance, I'm working on a left-aligned layout 960px wide. Because I know the width I want it to be I've set it in pixels. I've also got 3 columns so I've set these widths as pixels too because I know the size I want to set them as. I've set font sizes and line-heights as ems to allow for IE/Win scaling and I've also set some containing elements such as the navigation bar (along the top) and the header in ems so they scale with the text as it resizes.

Is this a good way to do it or should I generally try to style in ems?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Look at the content, the

Look at the content, the purpose of the measurement and the container it lives within.

I wouldn't regard mixing them a problem in itself. Many of my margin or padding shorthand statements will include ems for vertical spacing and pixels for horizontal. What this means is elements will align their left and right edges but will be spaced vertically in proportion to their font-size - kind of the ideal situation Wink

For line-height, em units not necessarily a good idea. Line-height can be specified as a ratio (a number without units). That ratio is applied to the font-size to determine the line-height of the element. If the line-height is specified in em units it is fixed at the value calculated for that particular element's font-size. Any children using line-height:inherit (the default) will use that precalculated values rather than one based on their own font-size.

abates
Offline
Enthusiast
Buffalo NY
Last seen: 13 years 44 weeks ago
Buffalo NY
Timezone: GMT-4
Joined: 2007-10-19
Posts: 79
Points: 0

I've been doing alot of

I've been doing alot of reading about this very issue also. I'm new to the CSS thing, but not to graphic design or html. I'm trying to adopt good habits as I start so that I will not have to do it later. I validate my CSS/XHTML at regular intervals. I read somewhere (I'm sorry I can't cite the source) that as a general rule of thumb, border widths and fixed div widths can be coded as px, whereas everything else should be em. Just what I read, I'm sure there are exceptions, but everyone has different ways of interpreting this, and the above way seems to work well for me.

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Thanks for the tips and

Thanks for the tips and feedback guys. It seems as a general rule you should try and size in ems rather than pixels and I think that abates' rule is probably a good guideline to go by.

The one thing I'm thinking of in my particular case however is that I'm working on a fixed width site of 960px. It would be good to allow the user to scale the text whilst keeping some structure to the layout. The best way of doing this would be to size the width in ems and then allow it to scale with the text. However this would make it wider and if someone is viewing it on a 1024 resolution and they wanted to simply make the text bigger they would end up having to scroll horizontally which would be very annoying.

In this case would it be better to size the width in pixels (meaning that a x3 size increase would "break" the layout) or allow it to expand with the text meaning that viewers on a 1024 screen would be presented with a horizontal bar?

Cheers

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

slippy wrote:meaning that a

slippy wrote:
meaning that a x3 size increase would "break" the layout

Why would the layout break? If you've done things correctly you can resize the text quite a lot with breaking fixed width layouts.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Well another rule of thumb

Well another rule of thumb I've heard is that generally websites should be able to cope with a 3x text increase without breaking. Mine copes with two increases and then "breaks" on the third. By breaking I mean one of the columns shifts position on top of the other two instead of along side the other two (3-col layout). With the fixed width of 960px and the increase in text sizing something has to give unless I size the 960px width in ems and allow it to expand horizontally. This will however cause the problem I mentioned of horizontal scrolling for viewers at a 1024 resolution.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A good user experience comes

A good user experience comes way higher than ems v px.

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Well that's what I'll be

Well that's what I'll be using as my getout line when people complain complain about it breaking some way or the other. It seems incredibly difficult to please everyone.

So in my particular case would you go with sizing the 960px as 96em, allow it to increase horizontally and risk annoying visitors at a 1024 resolution or would you keep the width as pixels and risk annoying the short sighted who want that third font size increase? Decisions, decisions..... Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I don't see your questions

I don't see your questions as the right ones.
- Who owns a screen capable of 96em at 24px?
- How are your graphics (esp. backgrounds) going to scale?
- 10px as your std. font-size is likely too small.

Horizontal scrolling is generally considered undesirable. Under those circumstances you want your layout to remain within one screen width irregardless of the font-size chosen. For me that means your best choice is percents for the layout elements with minimum widths set in pixels. For simplicity of graphics, your second best choice (and most likely most cost effective choice) is fixed pixel width and pixels (or percents - its the effectively the same with fixed width) for layout elements.

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Hi Chris, Thanks for your

Hi Chris,

Thanks for your feedback. With regards to the questions:

1) I'd certainly like a screen capable of 96em at 24px! Smile Sorry, slight misunderstanding here. I should have mentioned that I usually use set font-size to 62.5% in the body selector to round 1em off to 10 pixels. This makes em sizing much easier. So basically 96em = 960px (the width of my layout).

2) Fortunately for this particular project its of the minimalistic approach and graphics are few and far between. The bg is plain white so easily scalable.

3) I can't remember saying anything about 10px as a std font-size. Generally I do the em conversion and then use 1.1em as a standard starting font-size depending on the type of website, how much content is present, whether its content driven (like a blog) etc. So this can go up to 1.2em or more as a result.

Exactly, I know horizontal scrolling is definitely not preferable but this would only occur if people were viewing in a 1024px resolution and I sized in ems (96ems in this case). I'm not too sure on perceptage widths though, I'd quite like to keep a certain amount of layout control. The only thing I'm allowing for is increase in text size (when the user presses ctrl & +). My layout stays intact until they press Ctrl & + 3 times and then one of the divs starts to overlap on the main one. This isn't too bad though so it looks like I'll have to make do with this solution.

I was just wandering if there were any better solutions or general rules of thumb which would persuade me to choose one method over another. There seems to be compromise involved in all choices so I think I've got the best solution taking it all into consideration. I could probably do with more practice into designing for all types of CSS layout though to fully understand the pros and cons of each.

Thanks for the tips

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

slippy wrote:I should have

slippy wrote:
I should have mentioned that I usually use set font-size to 62.5% in the body selector to round 1em off to 10 pixels. This makes em sizing much easier.

What it does is make the default text size too small for most older folks to even read. Thus they will leave your site and go somewhere else. Do you really want to drive away a demographic group that has quite a lot of money to spend? Or is old folk's money somehow tainted for you?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

slippy wrote:My layout stays

slippy wrote:
My layout stays intact until they press Ctrl & + 3 times and then one of the divs starts to overlap on the main one.

It would probably save a lot of toing and froing if we could actually see the site and then make suggestions as to how to fix this.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference