Which Unit I Should Use in CSS When Designing a Web Page

Which unit I should use in CSS when designing a web page

Different units depending on context. If there was one that was best for every situation, then there wouldn't be so many units.

As rules of thumb go:

If you are working on screen media:

Use % for font sizes
Use px for images
Use px, %, or em for box sizes
Use ratios for line height

If you are working in print media:

It might be wise to avoid px (this is not a hard rule by any means) and everything else is fair game. It really depends how much control you want.

What is best css unit to make the the webpage look good even after zooming?

If you want to zoom everything (containers as well as fonts) you could use em. Beware though that it is notoriously difficult to maintain. If you change one parent size then all children sizes will be affected.

It could be partly solved by avoiding nesting tags as much as possible. Of course it's unavoidable most of the time, but don't go too deep if you don't have to.

What measurement unit should I use for responsive design?

To answer your question, responsive design doesn't have an inherint unit of measurement that would cause this. You can use whatever you like in your CSS, pixels, ems, %, ...

From what you describe, the first thing I would check is that you have included a viewport tag in the head of your page. Something like the following would get you started.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If you omit this, smart phones will typically scale the page to make it fit, which isn't what you want for responsive design.

Also, although I don't think it's related to your problem, using min-device-width or max-device-width can sometimes complicate your life, especially if you are new to RWD.

You may find it easier to stay with min-width or max-width. Here's a little more info on the difference and how it relates to retina display. http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Hope this helps!

Should I use px or rem value units in my CSS?

TL;DR: use px.

The Facts

First, it's extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.
CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the px unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.
That said, up until 2010 (and the mobile zoom situation notwithstanding), the px almost always did equal one physical pixel, because all widely available displays were around 96dpi.

Sizes specified in ems are relative to the parent element. This leads to the em's "compounding problem" where nested elements get progressively larger or smaller. For example:

  body { font-size:20px; } 
  div { font-size:0.5em; }

Gives us:

  <body> - 20px
      <div> - 10px
          <div> - 5px
              <div> - 2.5px
                  <div> - 1.25px

The CSS3 rem, which is always relative only to the root html element, is now supported on 99.67% of all browsers in use.

The Opinion

I think everyone agrees that it's good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it's easier to read.

In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as ems). This is because the browser's font size menu simply changed the root font size. Thus, if you specified font sizes in px, they wouldn't scale when changing the browser's font size option.

Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.

Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that's a very esoteric way of going about it and I'd wager nobody¹ does it. (In Chrome, it's buried under the advanced settings, Web content, Font Sizes. In IE9, it's even more hidden. You have to press Alt, and go to View, Text Size.) It's much easier to just select the Zoom option in the browser's main menu (or use Ctrl++/-/mouse wheel).

^{1 - within statistical error, naturally}

If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It's much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don't have to worry about compounding. ("I was told there would be no math" – there's dealing with having to calculate what 1.5em actually works out to.)

One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout.

So my answer is use pixel units. I use px for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use ems anyway.

Unit for sizes in CSS

TL;DR:

Use % for horizontal page layout
em works great for vertical spacing
Use anything you prefer for font-size (I like em)
Use em for media queries

CSS Measurement Units

I find that my usage of different CSS measurement units varies with the area of measurement I'm dealing with: horizontal, vertical, typography, or media query.

Horizontal measurements

The horizontal space gives structure to the page. Thus, horizontal measurements work well with units relative to the page width (%). For example, it's great for giving some basic breathing room to the main content:

#main {
  width: 90%;
  margin: 0 auto;
}

More complex layouts (columns, for example) also work well when one or all of the horizontal measurements are proportional to the page or to their container.

.column-main {
  width: 61.8%; /* The golden ratio is pretty awesome. */
}

.column-secondary {
  width: 38.2%;
}

There's a corollary to this idea, which is that if you set up your container structure well, you won't have to do much horizontal sizing on the contents. You basically let the block-level elements fill the width of their container, as they like to do, and you're all set.

Vertical measurements

Vertical space is more about the structure of the content (i.e. how close elements in the document flow are to one another), and I think these measurements work fine with both fixed and relative units (px or em).

However, using relative units here helps give you a vertical rhythm, which can be very pleasing. It also allows you to make changes to your content (read: font-size) and keep your vertical spacing proportional.

p, ul, ol, dl {
  margin: 0 1em; /* gives you proportional spacing above and below, 
                    no matter the font size */
}

Typographic measurements

Font measurements fall into their own category, maybe because font-size acts as the base for all other measurements in em. I've seen advocates for different strategies, but from what I've seen any measurement will work fine, as long as you know what you're doing.

px

Setting font-size in px is extremely reliable and easy to calculate. In the post-IE6 age, it also scales nicely, so there's really no reason not to use px if that's what you prefer.

The only problem I see in using px is that it doesn't take advantage of the CSS cascade. In other words, once I've specified sizes in px, I have to go back and change each one of them individually if I want to make any large-scale changes.

em

Despite any drawbacks, I think em can be a really good way to specify font-size. What I like is that it lets me quickly see the relationship between my font sizes. A lot of times I don't care what the exact size of the font is because the most important thing for me is the relationship of that size to all of the other sizes on the page.

The important thing about using em is to set the sizes as close to the end tag as possible. That means I avoid setting font units on containers:

aside { font-size: 0.8em; } /* This can mess me up */
...
aside p { font-size: 0.8em; } /* Way too small! */

And mostly set sizes on headings and text items:

h1 { font-size: 2.5em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
...

Anyway, I like that I can see clearly and easily the relationship between the sizes there.

rem

Sizing things based on the browser's base font size seems like the web-standards thing to do, because then you allow for browsers whose optimal base font size might not be 16px. In practice, though, it kind of works the other way. From what I've seen, browsers use 16px as the base font size because that's what everyone expects, and set the actual size of that CSS measurement to look decent in the browser.

The biggest drawback here I see is browser support. If you code for browsers that don't support rem, you'll be adding your rules twice:

p {
  font-size: 16px;
  font-size: 1rem; /* I kind of hate repeating myself here,
                      but a good CSS preprocessor might ease that pain. */
}

Font Spacing

Other font measurements are a lot easier to figure out once you've got your font-size since most other font measurements fall into the category of either vertical or horizontal measure. For example:

h1 {
  font-size: 2.5em; /* Change this, and everything below stays proportional.
                       (Use whatever measurement unit you prefer.) */
  margin-top: 0.618em;
  margin-bottom: 0.3em;
  line-height: 1.2; /* The only unit-less measure in CSS */
}

Media queries

In most cases, there is little difference between the way browsers handle em and px in media queries. This holds true even when a user uses text zoom to resize the page.

HOWEVER, if someone has changed the default text size in their browser settings, things behave very differently. See my answer to a related question and my codepen demo for a longer explanation.

In short, while px works well for media queries in most cases, it's definitely safer to go with em.

Other cases

There are certainly cases where the above general comments don't apply. For example, you may find that ems come in handy any time you want things proportional to the font size, like the following:

h1.title {
  font-size: 2em;
  width: 20em; /* Resizing the font also resizes its container properly. */
  background-color: #d00d1e;
}

@media (min-width: 400px) {
  h1 {
    font-size: 2.5em; /* Woot! Didn't have to touch the width! */
  }
}

Or maybe you want to constrain line lengths for readability:

p {
  max-width: 42em;
}

Also, as mentioned in other comments, px still works well for borders and things like that. It can also be good for padding, especially when you pair it with box-sizing:

.example {
  width: 80%;
  box-sizing: border-box; /* Padding is NOT added to total width. Huzzah! */
  padding: 10px;
}

Best units to responsive layout

The "best" is more of a subjective thing but here is a pretty good article in defense of using ems.

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

and if it seems tedious to do all the conversions, I've found this tool plenty helpful

http://pxtoem.com/

Why em instead of px?

The reason I asked this question was that I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested in how to define styles on any given block element on the page.

As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.

Using px to define the width

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

A simple implementation would defining the width of the date-box class in px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

The problem

However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px.

Using em instead

A smarter way is to define the width in ems instead:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

Which Unit I Should Use in CSS When Designing a Web Page