Pro HTML5 and CSS3 Design Patterns

CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!

Ratios Between Units of Measure at 96 dpi

Value Pixel Point Pica Inch Millimeter

1 pixel = 1px = 0.75pt (3/4) = 0.063pc (1/16) = 0.0104in (1/96) = 0.265mm

1 point = 1.333px (4/3) = 1pt = 0.083pc (1/12) = 0.0138in (1/72) = 0.353mm

1 pica = 16px = 12pt = 1pc = 0.1667in (1/6) = 4.233mm

1 inch = 96px = 72pt = 6pc = 1in = 25.4mm

1 mm = 3.779px = 2.835pt = 4.233pc = 0.039in = 1mm

Typical font-size Values at 96 dpi

CSS Ems Points Pixels Percent Heading HTML Physical Size

xx-small 0.50em 6pt 8px 50% 10 pixels

0.57em 7pt 9px 57% 12 pixels

x-small 0.63em 7.5pt 10px 63% h6 1 12 pixels

0.69em 8pt 11px 69% 13 pixels

(^) 0.75em 9pt 12px 75% (^2) 14 pixels
small 0.82em 9.75pt 13px 82% h5 16 pixels
(^) 0.88em 10.5pt 14px 88% (^) 17 pixels
0.94em 11.25pt 15px 94% 18 pixels
medium 1em 12pt 16px 100% h4 3 18 pixels
1.08em 13pt 17px 108% 20 pixels
large 1.13em 13.5pt 18px 113% h3 4 22 pixels
1.17em 14pt 19px 117% 23 pixels
1.25em 15pt 20px 125% 25 pixels
1.38em 16.5pt 22px 138% 26 pixels
x-large 1.50em 18pt 24px 150% h2 5 29 pixels
1.75em 21pt 28px 175% 34 pixels
xx-large 2em 24pt 32px 200% h1 6 38 pixels