Pixels vs. Points in HTML/CSS
Solution 1:
Use px or em
- CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Generally, 1em = 12pt = 16px = 100%.
[Conclusion]
The winner: percent (%).
- JohnB note: this is for TEXT. Obviously you asked about "things like margins." (I assume you mean
paddingalso.) For that, I would recommendpxorem. Personally, I switch, depending on the particular situation.
MORE ARTICLES
- px – em – % – pt – keyword
Point values are only for print CSS!
(Comment further down)
Points are for print? Nope.
Points are not for print exclusively. Theoretically, points are for defining an absolute measure. Pixels are not absolute, since depending on your screen and chosen definition (not resolution), the resolution (pixels per inch) can go from a lot (150dpi) or very little (75dpi). Which means your pixels can be a size, or maybe half that size. Which means that text you design to be perfectly legible on your screen may look too big on your client’s screen (“please make the text smaller, ok?”) or too small to be readable on your neighbor’s screen (“hey, the website you told me about the other day? the one you said you had worked on… well i couldn’t read the text very well, it’s so small”).
Points are a solution to this issue. But browsers and operating systems need to manage those. Basically, it means:
browsers have to calculate the display size in pixels using the given value (say, 10pt) and the screen’s real resolution; operating systems have to communicate the real current resolution, and not a default value.
Also:
- CSS: Comparing Font Size, Percentage, Em, Point, and Pixel
Solution 2:
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
Solution 3:
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).