How do browsers convert a point-based font-size to pixels?

Question

If a browser has to deal with the following CSS: font-size: 12pt;, how does it calculate the effective size on the screen? Can it know the dpi's of the screen (via some OS function) or is it just an approximation?

If it is an approximation - is it always the same one (12pt = 16px) ?

Does some browser programmer team write about this? (A reference would be great)

Answer 1

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?

No, the units have nothing to do with the properties, but everything with the output media: screen or paper.

There is no restriction on which units can be used where. If a property accepts a value in px (margin: 5px) it also accepts a value in inches or centimeters (margin: 1.2in; margin: 0.5cm) and vice-versa.

The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc

The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It's better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you'll probably not get what you expect.

Also because units in pt can be only approximated on screen (from above text) it is not recommended for use on screen media.

Source: EM, PX, PT, CM, IN…