
The px unit got its name from those screen pixels. To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like a book? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). It is not related to the current font and also not related to the absolute units. My own way of thinking about it: 1 px is the size of a thin line intended by a designer to be barely visible. (That article is fresh, last updated 2014-10.) The meaning of px varies by hardware and resolution. Read this article from the W3C, EM, PX, PT, CM, IN…, about how px is a "magical" unit invented for CSS. At least, not in the simple physical sense. Contrary to intuition, in CSS the px is not pixels.
CSS: Comparing Font Size, Percentage, Em, Point, and PixelĪll of these answers seem to be incorrect. Operating systems have to communicate the real current resolution, and not a default value. Basically, it means:īrowsers have to calculate the display size in pixels using the given value (say, 10pt) and the screen’s real resolution But browsers and operating systems need to manage those. 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”). Which means your pixels can be a size, or maybe half that size. 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). Theoretically, points are for defining an absolute measure. Personally, I switch, depending on the particular situation. Obviously you asked about "things like margins." (I assume you mean padding also.) For that, I would recommend px or em. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.).