• Gender: Male
  • From: Canada
  • Registered: January 30, 2010
  • Posts: 24

Topic: Em vs. px

This being my first post, I'm going to ask something simple but important (at least to me).

History... I have been building simple HTML websites for my own small business(es) since the mid 90's. All the layout has been done with tables, everything sized in pixels, nothing fancy just WYSIWYG design using Composer, a bunch of hand coding and some javascript I wrote myself.

Now ... it is a new millennium, my site doesn't look good on a CrackBerry, gotta learn some CSS and relaunch my site. No more tables. I will be using KompoZer because it is cheap, familiar and after working with it for a few weeks seems to suit my style.

But ... a decision .. should I construct with a layout based on pixels? Or do I switch to ems for all the layout. What are the pros and cons of each?

Thanks in advance. I tried the search function but it couldn't seem to get any hits for ems.

Vote up Vote down

  • From: Montreal Canada
  • Registered: December 19, 2008
  • Posts: 3,543
  • Reputation: 3

Re: Em vs. px

I think your question is a larger one related to CSS - you have to learn basic CSS.

In terms of pixels vs ems ... that is related to fonts and these days, all the browsers can resize pixel based font sizes, so use either or.

PS:I know what you mean about updating old sites; we are currently in the middle of that process as we speak. The above site that I linked to (csstutorial.net) is just one example - the new version should be up any day.

Stefan

Practical web design training videos: KillerSites University

Vote up Vote down

  • Gender: Male
  • From: Canada
  • Registered: January 30, 2010
  • Posts: 24

Re: Em vs. px

Thanks for the info. I have worked my way through that tutorial and it was a valuable starting point. I started with the basic "Killer Handbook" layout and then experimented quite a bit adding things like backgrounds, floating parts here and there, clearing floats, etc.
I look forward to seeing the updated site.
So I can choose to do all my margins, paddings, heights, etc in either pixels or ems and it won't matter (as long as I consistently use one or the other I assume).

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: Em vs. px

So I can choose to do all my margins, paddings, heights, etc in either pixels or ems and it won't matter (as long as I consistently use one or the other I assume).

Yes, I'd say that is correct. I usually find that pixels are easier to work with, but it's personal preference.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: Em vs. px

I agree that px for all sizes is probably easier to code if you are a beginner.

IE won't let a viewer change only the text size if the font is px, but Firefox and other browsers allow you to increase text size without increasing images or the text containers (so text may overflow or get cut off but the containers and page size remains the same).

IE7 and IE8 have a zoom, like Firefox and most other browsers, which increases everything on the page, so you have to scroll a lot more but nothing should overflow the container if it fitted originally.

ems is related to the default font size, so it's a good idea to size everything in ems like divs, tables, images, margins, padding, etc. as well as text. Then if the default font size is changed, everything changes in proportion.

Remember that if you have a default font size of 1em and then a style (say for a p tag) of 0.8em and then a class used within a p tag also with 0.8em, the text will have the 0.8 applied to the parent's 0.8 so the text size will be 0.64 of the default size.

It's very easy to forget that when using classes within parents that both have a different em size from the default.

Vote up Vote down

  • Gender: Male
  • From: Canada
  • Registered: January 30, 2010
  • Posts: 24

Re: Em vs. px

Thanks for that. I found the Zoom tool on the Firefox menu, and now have another tool to see how my page looks in different views.. I have already been using the View No Style to emulate the look on a small device like a BlackBerry, even using it to look at other sites .. and have learned valuable lessons regarding separating not only position but images as well from textual content.

In dealing with images (.jpg, .gif, etc), do you:
a) size the image in em x em in the file or,
b) do you have an image in px x px that is sized on the page by the display in ems

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: Em vs. px

I don't use ems except in very special cases, I find it inconvenient to code.

I use px for everything. Now that modern browsers have a zoom, a person with bad eyesight can use it and still see everything on the page in the same relationship.

Before zooms, people could only increase text size which made the relationship of text to images and container sizes all wrong, so some coders used ems to get over that problem.

I recommend that you either use px for everything or ems for everything, don't mix them.

Vote up Vote down

  • Gender: Male
  • From: Canada
  • Registered: January 30, 2010
  • Posts: 24

Re: Em vs. px

Wickham wrote:

I don't use ems except in very special cases, I find it inconvenient to code.

<snip>

I tried. It certainly is disconcerting when you are used to visualizing in pixels. Based on what I have tried, and the opinions expressed here, pixels are good enough for my small. owner-maintained website.

Vote up Vote down