Pixels vs. Points in HTML/CSS

Question

When creating an HTML page, should I specify things like margins with pixels or with points in CSS?

Is one of them considered to be better practice than the other? Any advantages or disadvantages to either one?

Answer 1

I think it depends on what you're trying to do.

I find the key question is does the distance need to resize with the window? Some units are relative, some (like pixels and points) are not - a brief description is here.

I haven't seen points used much, px seems more common when an absolute measurement is needed.

Answer 2

Points are great since they are 1/72 inch tall. You know how tall your text will be. Problem with pixels is that they get smaller the higher the resolution. Pixels are great if you want to wrap text around a background picture. Takes some work but it can make a nice looking page. I have heard that pixels are not resizable in IE - so if they want to increase the font size they can't. Don't use IE, so I can't say. Remember hearing that. EM's leave you at the mercy of how the person has that defined font sizes in their browser. Ems and percentages make it easy. I always use points.

[...]

No, points are not the best. To anyone who finds this thread, forget that you ever read that. This is a web design forum. For displaying pages on screen media. Points are included in CSS solely for the purpose of print design. For print media stylesheets. They are not scalable as % and ems are. If you are any sort of web designer you should be working to make your pages accessible and using points is a strike against that right off the top.

http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html

It's funny, everyone answer "pixel or %/em" and not "pixel or points".

I didn't know there was a difference between both.

more info

Edit : even more info... official ones!

Do not specify the font-size in pt, or other absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties (e.g print).

Answer 3

John B's answer above is the best and most accurate. I just wanted to point out a possible confusion created by the answer above his. An "em" in typography is the width of the letter "m" in the font that you've chosen. To specify height for a font, printers/typesetters used the "x height", which is the height of the lower case x for a font.

As John points out, pt's are a fixed unit of measure equal to 1/72nd of an inch. Since monitors have varying pixel densities (72/inch, 96/inch...) it isn't generally a good way to size things in HTML docs.

The em relates directly to the old typography unit and makes an excellent relative measure. As your screen size is scaled, the font sizes scale with it. If you use em's for margins, they scale relative to your font sizes, which is generally a good thing.

But, for margins, padding and all things not directly font related, it's best to use rem's, or "relative ems". The best way to do this is declare a default font size for your body or html tag initially. Something like body font-size = 16px is a good place to start. Then everywhere else in the document use em's for text, and rem's for everything else. Or, use percentages. Either will work fine. Like em's and rem's, your % is relative to that original 16px = 100% font size.

Everything in the document will scale relative to your initial setting for your 100% font size at 16px. That way you only use a pixel measurement once in the document. This comes in handy if you later want to set media queries to adjust your sizes and margins to accommodate different pixel densities across different device displays. You only have to have queries for that one initial declaration in the body tag. Everything else will adjust relative to that and won't need to be changed.

just a thought, maxw3st

Answer 4

I use pixels for nearly everything.

For me, it "feels" like I have more precise control.

For the few things that I need to dynamically resize with the window, I use percent.

EDIT:

What is "em"?

Answer 5

The rules of thumb is:

Pixels for screen display; points for printing.

'em' or '%' (and the lesser known rem) are better for a more flexible layout.

em is a unit of measure based on the size of the letter 'm' in the current font. Specifying sizes in em allows you to have a size based on the font size, meaning that you can change the font, and the layout will change to follow suit.

But there are plenty of times when you need to use a fixed size. In that case, px is usually going to be best, as most web pages are displayed on a pixel-based screen. But if you're planning to have a page which is printed a lot, then you could have a print-specific stylesheet with a point-based layout.

Generally I'd recommend em over px or pt. If you're using px, it is because you have elements on your page which are sized in pixels such as images, which you need the rest of the layout to conform to. In this case, because the images are in pixels, so should the stylesheets. In addition, because points are a printing unit of measure, there's no guarantee how they'll appear on the screen: px is screen-based, so will give you a much more consistent look on-screen cross-browser and cross-platform.

By the way, this page might give you some further info: http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

Answer 6

Pixels is more aesthetic for me, and I believe it's considered better practice...