Sunday, October 19, 2008

Font Size - Absolute Length Units - pt, pc, in, cm, and mm

The absolute length units are those units that are independent of inherited font size. There are five absolute length units:
point (pt)
In CSS, one point is defined as 1/72 of an inch. Therefore, one point is 1.333 pixels (since 1 inch is equivalent to 96 pixels)
pica (pc)
One pica is 12 points. In CSS, one point is 1/72 of an inch, therefore, one pica is 1/6 of an inch. One pica is 16 pixels (since 1 inch is equivalent to 96 pixels)
inch (in)
Windows and Mac computers assume 96 pixels to be one inch (even though 96 pixels on a screen may not be equal to an actual inch)
centimeters (cm)
One inch is 2.54 centimeters. Therefore, in CSS, one centimeter is 37.79 pixels
millimeters (mm)
Ten millimeters make one centimeter. One inch is 25.4 millimeters. Therefore, in CSS, one millimeter is 3.779 pixels

point (pt)

All major browsers render 1pt as 1.3333px when displaying on screen. When the computed font size is a floating point number (example: 19.3px), the browser rounds off the number to a whole number when rendering the text. After the decimal point, any number greater than 4 (that is, numbers 5 to 9) is rounded off to 1px (example: 19.5px is rendered as 20px text).
However, it is the "unrounded" computed font sizes that are inherited.

Example: div{font-size:12pt}

Font sizes in points can be specified as floating point numbers too. A floating point size is multiplied by 1.3333 and then rounded-off in the usual way before rendering. All major browsers accurately render floating point font sizes in points of two decimal places (example: font-size: 19.25pt). When sizing text with points and relative length units, point sizes of two decimal places are required to avoid unexpected results.

pica (pc)

All major browsers render 1pc as 16px on the screen.When the computed font size is a floating point number (example: 19.3px), the browser rounds off the number to a whole number when rendering the text. After the decimal point, any number greater than 4 (that is, numbers 5 to 9) is rounded off to 1px (example: 19.5px is rendered as 20px text).
However, it is the "unrounded" computed font sizes that are inherited.

Example: td{font-size:1.2pc;}

Opera 9.6 bug: Opera 9.6 incorrectly sizes 2.1pc text to 33pixels. The computed value of 2.1pc text should be 2.1*16=33.6px which should be rounded off to 34px . However, due to the bug, Opera 9.6 renders the text in 33px .

Font sizes in picas can be specified as floating point numbers too. A floating point pica size is multiplied by 16 and then rounded-off in the usual way.
All major browsers accurately render floating point font sizes in picas of two decimal places (example: font-size: 1.25pc;). However, when sizing text with picas and relative units, pica sizes of three decimal places are required to avoid unexpected results . Firefox 3 and Safari 3.1 accurately render pica font sizes of three decimal places. Opera 9.6, Internet Explorer 6 and Internet Explorer 7 ignore the third decimal place in pica font sizes.
Therefore, one must avoid mixing picas with relative length units when sizing text.

inch (in)

All major browsers assume 1in to be 96 pixels. When the computed font size is a floating point number (example: 19.3px), the browser rounds off the number to a whole number when rendering the text. After the decimal point, any number greater than 4 (that is, numbers 5 to 9) is rounded off to 1px (example: 19.5px is rendered as 20px text).
However, it is the "unrounded" computed font sizes that are inherited.

Example: h1{font-size:0.5in}

Font sizes in inches can be specified as floating point numbers too. A floating point inch size is multiplied by 96 and then rounded-off in the usual way.
All major browsers correctly render floating point font sizes in inches of two decimal places (example: font-size: 0.52in). However, when sizing text with inches and relative length units, inch sizes of three decimal places are required to avoid unexpected results.
Firefox 3, Internet Explorer 6, Internet Explorer 7, and Safari 3.1 accurately render inch font sizes of three decimal places. Opera 9.6 however, ignores the third decimal place in inch font sizes of three decimal places.

centimeter (cm)

All major browsers compute 1cm as 37.79px when rendering on the screen.When the computed font size is a floating point number (example: 19.3px), the browser rounds off the number to a whole number when rendering the text. After the decimal point, any number greater than 4 (that is, numbers 5 to 9) is rounded off to 1px (example: 19.5px is rendered as 20px text).
However, it is the "unrounded" computed font sizes that are inherited.

Example: p{font-size: 0.5cm}

Font sizes in centimeters can be specified as floating point numbers too. A floating point centimeter size is multiplied by 37.79 and then rounded-off in the usual way. All major browsers correctly render floating point font sizes in centimeters of two decimal places (example: font-size: 0.52cm). However, when sizing text with centimeters and relative length units, centimeter sizes of three decimal places are required to avoid unexpected results. Firefox 3, Internet Explorer 6, Internet Explorer 7, and Safari 3.1 accurately render centimeter font sizes of three decimal places. Opera 9.6 however, ignores the third decimal place in centimeter font sizes of three decimal places.

millimeter (mm)

All major browsers compute 1mm as 3.779px when rendering on the screen.When the computed font size is a floating point number (example: 19.3px), the browser rounds off the number to a whole number when rendering the text. After the decimal point, any number greater than 4 (that is, numbers 5 to 9) is rounded off to 1px (example: 19.5px is rendered as 20px text).
However, it is the "unrounded" computed font sizes that are inherited.
Example: td {font-size:3.5mm}
Font sizes in millimeters can be specified as floating point numbers too. A floating point millimeter size is multiplied by 3.779 and then rounded-off in the usual way. All major browsers correctly render floating point font sizes in millimeters of two decimal places (example: font-size: 2.55mm). When sizing text with millimeters and relative length units, millimeter sizes of two decimal places are required to avoid unexpected results.

Absolute length unit sized text - resizing by the user

Firefox 3, Opera 9.6 and Internet Explorer allow the user to zoom text that has been sized with points, picas, inches, centimeters and millimeters.
Safari 3.1 allows the user to use the "Make text bigger" or "Make text smaller" feature to resize text that was sized with points, picas, inches, centimeters and millimeters.
Internet Explorer 6 and Internet Explorer 7 do not allow the user to resize text that was sized with points, picas, inches, centimeters and millimeters. However, IE7's zoom feature does work here.

Advantages and Disadvantages

One disadvantage of using the absolute length units to size text is they are unintuitive - one CSS "inch" is not the same as a real-world inch - the same goes for points, picas, centimeters and millimeters. Another disadvantage is Internet Explorer 6 does not allow the user to resize text that was sized with the absolute length units.
However, the absolute length units are useful when specifying text size on web pages that are meant to be printed because printers will render CSS inches (and the other absolute length units) in the same size as their real-world counterparts.

No comments: