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

If you're talking about font-size then px and pt are not ideal.

Ems and Percent units are scalable, therefore they are far more accessible - friendly for the visually-impaired. They also scale down well for mobile phone users.

Px and Pt units do not scale upward for visually-impaired users, or downward for mobile phones.

If you're talking about layout or containers then it depends on the type of design you want - fluid or static - and there isn't necessarily a "right" answer.

Without going into an example, it's difficult to advice. Do you have a site in mind we could look at?

There's no real right or wrong, but as a rule of thumb:

• For anything you want a certain, fixed size, use PX
• For anything you want to scale with font-size, use EM
• For anything you want to scale to the available space in the window/container, use %

Each used to have specific advantages or disadvantages in different browsers when it came to users scaling the browser's base font-size/zooming, but more recent versions of the browsers by-and-large get around these issues by scaling everything, not just font-size.

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.