52

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?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
user541686
  • 205,094
  • 128
  • 528
  • 886
  • 1
    Neither is considered "best practice". Using `em` or `%` values is generally encouraged. – ceejayoz Jun 17 '11 at 18:10
  • @ceejayoz: Well, `%` for a margin doesn't really work well. What's `em` though? Haven't seen that one before. – user541686 Jun 17 '11 at 18:10
  • 3
    @Mehrdrad - `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. – Spudley Jun 17 '11 at 18:20
  • 4
    I still haven't seen any answer talking about how browsers perform *scaling*. To a *browser*, a pixel is a *relative unit of measure*, which is why I consider half the answers below bunk. If a *pixel is a relative unit of measure*, why use it (or not use it) over a point? Do the scaling rules change? Does using one or another provide for a better *reference*? –  Jun 17 '11 at 18:29
  • @Spudley: Interesting, I had no idea... if that were an answer I'd upvote it (though probably not accept it :P), thanks for the info! :) – user541686 Jun 17 '11 at 18:30
  • @pst: You have not seen an answer talking about scaling because you're not the OP and the OP did not ask about scaling. And if you know more about this than the answers below, please enter your own answer for scrutiny. – Sparky Jun 17 '11 at 18:31
  • @Sparky672 And yet most of the answers below are *incorrect* because they *do not* talk about scaling and somehow *assume the 1-1 pixel correspondence* and *fixed DPI* (modern DPIs range from anywhere 90-300, even without scaling). I was simply hoping in foster better answers that deal with **pixels** and **points** (in web-browsers) and why using one is advantageous over the other. –  Jun 17 '11 at 18:37
  • 1
    @pst: Typically when a user knows more about the correct answer they post it as an answer so everyone can benefit. – Sparky Jun 17 '11 at 18:41
  • @Mehrdad - I'll edit my answer to include that detail. – Spudley Jun 17 '11 at 18:41

8 Answers8

38

Use px or em

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 padding also.) For that, I would recommend px or em. Personally, I switch, depending on the particular situation.

MORE ARTICLES

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:

Community
  • 1
  • 1
JohnB
  • 18,046
  • 16
  • 98
  • 110
  • 2
    If that from a *real reference*? That article then goes on to say the very inaccurate "how pixels are dead-accurate on monitors for font-sizing" which is clearly false. Imagine 1) the iPhone/iPad/Android with dynamic zooming 2) the ability of any modern browser to perform full scaling. Thus, I have doubts about using it as a source. –  Jun 17 '11 at 18:34
  • 2
    +1 Thanks for the edit. Still not an answer, but some interesting links to fuel the flames ;-) –  Jun 17 '11 at 18:42
  • 1
    Sorry, I added my personally preference, which for `margin` or `padding` is `px` or `em`. – JohnB Jun 17 '11 at 18:46
  • 4
    This answer is prehistoric. Using pixels scales perfectly on all common browsers. – soupagain Oct 13 '12 at 11:15
10

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

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • 1
    What difference does it make (to use a *pixel* over a *point*) if most web-pages are displayed on pixel-based screens if *DPI is not guaranteed or constant*? –  Jun 17 '11 at 18:22
  • 2
    generally I'd recommuend `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. – Spudley Jun 17 '11 at 18:39
  • minor correction: an em traditionally referred to the width of the block of metal or wood the capital letter 'M' was placed on. Though these days, on the web, it refers to the default font size. – DA. Jun 17 '11 at 20:30
  • 1
    also, while it's true that px is screen measurement and pt, print, neither is necessarily more consistent than the other across browsers or platforms as they are both virtual measurements. Ie, 1px does not HAVE to mean one physical pixel on the screen. – DA. Jun 17 '11 at 20:31
  • Don't use ems unless you are a CSS purist fantasist. Pixels display and scale perfectly in all common browsers. – soupagain Oct 13 '12 at 11:16
6

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).

Community
  • 1
  • 1
Kraz
  • 6,910
  • 6
  • 42
  • 70
  • A points *guaranteed* to be 1/72th inch or is this too adapted to scaling like a pixel-screen DPI? –  Jun 17 '11 at 18:24
  • 2
    According to what I've read, it's __not guaranteed__ to be 1/72th inch, except when printed... Look up the "_more info_". – Kraz Jun 17 '11 at 18:30
  • Heh, then back to when to use a *pixel* vs a *point* ... nice links though. –  Jun 17 '11 at 18:32
  • Don't use ems unless you are a CSS purist fantasist. Pixels display and scale perfectly in all common browsers. – soupagain Oct 13 '12 at 11:17
3

Anybody who tells you to use pixels is wrong. Pixels work fine, but they are simply not required... Ever! Points are a perfectly fine way to specify an absolute measure, and for the scale we are commonly working at on the web they are more often then not the preferred measure.

Beside points, there is also pica, inch, centimeter and so forth. Choosing one of these over the other is a lot like saying, "should I measure this room in feet or inches?" Let common sense be your guide. They'll all get the job done.

Em, which came up in some of the answers, should be reserved for when it's appropriate. That is to say, "when this thing scales, I want this other thing to scale". That's what relative measures are for. I know that is beyound the scope of your original question, but I had to address some of the nonsense about "always using em".

BTW, pixels don't equal physical pixels. Today, px in a stylesheet means 1/96th of an inch. This is why I say don't use them. Most people don't know this. They use them thinking they're specifying actual pixels. I can't take these people seriously with this being apparent (Although I don't blame the people, I blame the confusing nature of the state of things which is why I campaign for pixels to disappear.). Furthermore, if pixels really meant pixels, they'd be a horrible way to specify dimensions. Talk about the fact that things would randomly shrink and grow based on uncontrollable arbitrary screen resolutions. Yikes! Stay away from pixels!!! In practice they work, but only due to fudging an unseen efforts on the part of browser makers and OS folks, in theory they're a horribly ambiguous way of specifying your intentions.

Blake Taylor
  • 9,217
  • 5
  • 38
  • 41
2

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

Max West
  • 755
  • 7
  • 11
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.

brabster
  • 42,504
  • 27
  • 146
  • 186
  • Pixels and points are both absolute. A percentage value, for example, is relative.I guess it's just the difference between a more computer-based concept (pixels) and a more typographically-based concept (points). – brabster Jul 08 '11 at 13:11
0

The answer is: It depends. What are you using your margins for? Are they an integrated part of a balanced, resizable layout, or do they just provide a gutter around the edges? Percentages work better in the first case, and pixels work well in the second.

You should try the different possibilities and determine which works best for your document. Since there is no "right and wrong" in this case, you can choose the answer that works best for you.

George Cummins
  • 28,485
  • 8
  • 71
  • 90
  • 1
    @Mehrdad: I understand, but the answer still holds. The only thing I would add i re: points is that a point is a valid measure in the print world where page and font sizes are static, but not so much in the dynamic world of the web. – George Cummins Jun 17 '11 at 18:19
  • @Geroge Cummins I still don't get how that differs between a *pixel* and a *point* :( In both cases they are mapped to some defined -- and constant-per-page -- scale. –  Jun 17 '11 at 18:20
  • 1
    @pst: A pixel is a computer-specific measurement. Each monitor/screen has a certain number of pixels it can display. A point, on the other hand, is a measurement of size (there are usually 72 points in an inch). A measure of physical size does not translate well when comparing a site on a 4-inch phone screen or a 22-inch desktop monitor. – George Cummins Jun 17 '11 at 18:22
  • @Geroge Cummins Neither does a pixel from a 75DPI 15" to my 150DPI 15"... screen size and DPI are independent (even if DPI is *still* in a relatively fixed range) -- actually, the iPhone 4 has a DPI of *over 300*. –  Jun 17 '11 at 18:24
  • @pst: Printers (and O/S) have built-in fonts that are sized in "points". Monitors render screen content using "pixels". – Sparky Jun 17 '11 at 18:25
0

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"?

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • @Mehrdad: AFAIK, points are typically used in the context of fonts & printing. See my edit for an explanation of "em". – Sparky Jun 17 '11 at 18:18
  • @pst: It does not relate to points. I'm sorry you don't get it. – Sparky Jun 17 '11 at 18:28
  • @Sparky672 I would like to "get it". Where in your answer does it talk about **points**? (Talking about **em** does not address this question.) –  Jun 17 '11 at 18:40
  • @pst: Please read the OP's question again. My answer does not talk about points because answering the question does not require it. He asked _"pixels OR points?"_ and about advantages & disadvantages of **EITHER** one. Mentioning "EM" is in direct response the OP's comment, _"What's em though?"_. – Sparky Jun 17 '11 at 18:50