Twips primer

Whilst working for the website department of Dutch telecommunications company KPN, several months ago, we discovered an annoying CSS display problem concerning the resizing of boxes. We assumed it had to do with browser rendering problems, but the problem was a lot more interesting than that.

An archaeological expedition on the Internets by colleague Renato Etzi brought us to the root of the problem. It has nothing to do with rendering errors, but with the base-value conversion, and how browsers deal with it. Every browser out there has the rounding problem: they just deal with it differently. It all goes wrong because of the Twips to pixels conversion.

So what are twips? “Twip (twentieth of a point) is a screen-independent unit to ensure that the proportion and position of screen elements are the same on all graphical display systems. A twip is equal to a 20th of a printer’s point.”

Err. wha? 

The desk-top publishing point (DTP point) is defined as 1/72 of the Anglo-Saxon compromise inch of 1959 (25.4 mm), it is approximately 0.0139 inch or 0.3528 mm. Twelve points make up a pica, and six picas make an inch.The point is the standard unit for measuring font size and leading and other minute items on a printed page. This system was notably promoted by John Warnock and Charles Geschke, the inventors of Adobe PostScript, and therefore it is sometimes also called PostScript point.

In metal type, the point size of the font described the size (height) of the metal body on which the typeface’s characters were cast. In digital type, the body is now an imaginary design space, but is used as the basis from which the type is scaled (see em).

A measurement in picas is usually represented by placing a lower case p after the number, such as “10p” means “10 picas”. Points are represented by placing the number of points after the p, such as 0p5 for “5 points,” 6p2 for “6 picas and 2 points”, or 1p1 for “13 points” which is converted to a mixed fraction of 1 pica and 1 point.

To clarify:

  • 1 pica = 1/6 inch
  • 1 point = 1/12 pica
  • 1 twip = 1/20 point or 20 twips = 1 point
  • 1 twip = 1/567 centimetre or 567 twips = 1 centimetre
  • 1 twip = 1/1440 inch or 1440 twips = 1 inch

A printer uses points as print units of measurement. Points are a fixed physical size (1/72 inch), but the size of a pixel, onscreen, depends on the resolution of the particular screen. So, the conversion rate between pixels and points depends on the printer settings and whether the sprite is scaled. An unscaled sprite that is 72 pixels wide will print out one inch wide, with one point equal to one pixel, independent of screen resolution.

You can use the following equivalences to convert inches or centimetres to twips or points (a twip is 1/20 of a point):

  • 1 point = 1/72 inch = 20 twips
  • 1 inch = 72 points = 1440 twips
  • 1 cm = 567 twips

You might blink at the number 72: this is the standard resolution for most computer screens!

Why is this information useful for web-designers you ask? Any rounding errors in pixel widths are the product of Twips to Pixel conversions. As a pixel is 15 twips, you get even and odd numbers when resizing a box. This is because Firefox rounds odd twips numbers up, and Internet Explorer rounds them down.