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.

Friday, October 17, 2008

Font Size - Relative Length Units - px

Pixels (px) are considered relative length units because the CSS specification defines a pixel as 1/96th of an inch on the display screen. Since the number of dots per inch on screens varies, the actual size of the CSS pixel would have to vary to conform to the specification. Thus, the size of a pixel, in CSS, is relative to the dots per inch of the display device. All major browsers do not conform to this CSS specification when rendering a web page on the screen - they consider one CSS pixel to be equal to one actual pixel on the screen. However, many browsers do render pixels relatively when printing web pages.
The font size of an element can be specified in pixels in the following way:
p{font-size:15px}
No minimum or maximum value is specified for font size pixel values. However, negative values are not permitted. Opera 9.5 does not render text in sizes less than 9px when the font size is declared in pixels.
Floating point numbers are allowed (example: p{font-size:16.5px}).However, the major web browsers differ in their handling of floating point px values.
Firefox 3 and Safari 3.1 round off the font size in this manner: 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 floating point size that is inherited by descendant elements.
Internet Explorer 6, Internet Explorer 7, and Opera 9.6 ignore the decimal portion of the font size property's value. In these browsers, a font size value of 15.6px , for example, is considered as just 15px .
Note: Internet Explorer 6 and Safari 3.1 do not allow the user to increase the size of text that is sized with pixels. Firefox 3, Opera 9.6 and Internet Explorer 7, however, allow this with the "zoom" feature. This zoom feature also increases the size of everything else on the web page.

Advantages and Disadvantages of Using Font Size Pixel Units

Sizing text using pixel values can be done with consistent results if non-integral values and sizes below 9px are avoided. However, text sizing with pixel values also makes web pages less accessible because Internet Explorer and Safari 3.1 don't allow users to resize the text.

Tuesday, October 14, 2008

Font Size - Relative Length Units - ex

One of the relative length units that can be used with the font-size property is ex. ex refers to the x-height of the font.
The x-height is the distance between the base line and the mean line of a font.
The base line is the line on which most of the letters of a typeface "stand". The descenders extend below the base line.
The mean line is where the tops of lower-case letters end (excluding the ascenders). The ascenders extend above the mean line.
A typeface's x-height is usually (but not always) equal to the height of the character lowercase "x".
Here is an example of a CSS font size declaration that uses ex units: p{font-size: 2.5ex}
Font sizes in ex units can be floating point numbers, too. All the major browsers recognize up to two decimal places in ex font size declarations (example: font-size:0.36ex).
Each browser handles font size declarations in ex units differently - the resulting font size with a given font size declaration in ex varies between browsers. Here is how each of the major web browsers handles ex units.

Firefox 3

In Firefox 3, one ex is exactly equal to the vertical height of the lowercase letter "x". Therefore, when an element's font size is set to 1ex , the font size of the text will be equal to the height of the letter "x" in the inherited font.
Example:<div style="font-size:20px;font-family:Arial"><p style="font-size:2ex">the quick brown fox...</p>
When the font size of Arial is 20px , the height of the letter "x" is 11px . Therefore, in the above example, one ex will be 11px . The font size of the text in the p element will be 2ex or 22px .
Note that in Firefox 3, 1ex will never be a non-integral number because the height of the letter x will always be a whole number when measured in pixels.
Font size can be specified in ex units using floating point numbers too. Firefox 3 correctly renders font size declarations in ex with two decimal places (example: font-size: 3.25ex).

Internet Explorer 6, Internet Explorer 7 and Opera 9.5

IE6, IE7 and Opera 9.5 take 1ex to be equal to 0.5em or half the inherited font size. These browsers completely ignore the actual height of the letter "x".
Example: <div style="font-size:20px;font-family:Impact"><p style="font-size:2ex">the quick brown fox...</p>
The font size of the text in the p element will be 2opx (1ex = half the inherited font size, therefore 2ex = inherited font size). The same paragraph in Firefox 3 would have a font size of 26px.
In IE6, IE7, and Opera 9.5, 1ex can be either a whole number or a non-integral number, depending on whether the inherited font size is an even number or an odd number.
When using ex units, Opera 9.5's computed font size does not go below 9px.
Font size can be specified in ex units using floating point numbers too. Internet Explorer 6, Internet Explorer 7 and Opera 9.5 correctly render font size declarations in ex with two decimal places (example: font-size: 3.25ex).

Safari 3.1

Safari 3.1's calculation of 1ex is approximately equal to the height of the lowercase letter "x". It is not known exactly how Safari 3.1 determines the value of 1ex. Font size can be specified in ex units using floating point numbers too. Safari 3.1 correctly renders font size declarations in ex with two decimal places (example: font-size: 3.25ex).
Important note for Firefox 3 and Safari 3.1: The size of 1ex is determined by the inherited font size and typeface, even if the current element has a different font family declaration.

Advantages and Disadvantages of using ex units in font size declarations

Using ex units to size fonts does not result in consistent sizes across browsers and should therefore be avoided.

Sample data

The following table shows the number of pixels in 1ex in each of the major browsers for an inherited font size of 20px.
Size of 1ex in pixels for an inherited font size of 20px and various typefaces
Font FamilyTimes New RomanArialVerdanaComic Sans MS Courier NewGaramondGeorgiaImpactLucida SansMicrosoft Sans Serif
Measured font height18192020171819182020
height of the letter "x"91111109810131111
1ex in px in Firefox391111109810131111
1ex in px in IE6, IE7 and Opera9.510101010101010101010
1ex in px in Safari3.11010111111910131110

Monday, October 13, 2008

Font Size - Relative Length Units - em

One of the relative length units that can be used with the font-size property is em. In CSS, one em is equivalent to 100%. Therefore, 0.01em is 1%, and so on. Like percentage values, the em unit specifies the font size relative to the inherited font size.
Example: div {font-size: 1.5em}
Font sizes in em's specify the text size of an element relative to the inherited font size.
Font size declarations in em's can be floating point numbers (example: 0.625em). When sizing text using em's, there are times when three decimal places are required to avoid unexpected results. However, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 ignore the third decimal place. These browsers only recognize two decimal places in em font size declarations. Inherited font sizes and calculated font size values from em declarations can be non-integral. Therefore, browsers round off the value.
All browsers round off this way: 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 floating point size that is inherited by descendant elements.
One must avoid using font size declarations that result in computed values containing more than one decimal place because this brings out the bugs in browsers, giving unpredictable results.
Example: Ancestor font size: 35px, Parent font size: 0.91em (computed value = 31.85px), Child font size: 0.8em (computed value = 25.48px, rounded off actual value = 25px). Browsers round off this value to 25px when rendering the text. However, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 render the font in 26px .
One way of avoiding computed sizes with many decimal places is by specifying the em values with up to two decimal places in order to obtain a calculated value that is nearly a whole number. In the above example, the child font size can be specified as 0.79em, which gives a computed font size of 25.16px . All browsers round this off correctly.
Note: For a given inherited font size, the final font size obtained when using em values is dependent on the inherited font size in pixels. Whether a given inherited font size in pixels is obtained by using inches, keywords or any other units is unimportant.

Font Size - Percentage Values

The value of the CSS property font-size can be specified as a percentage. Negative percentages are not allowed.
Example: p {font-size: 120%;}
Specifying font size in percentages sizes the text of an element relative to the inherited font size.
Font size declarations can be floating point percentages too (example: font-size:62.5%). However, Internet Explorer 6 and Internet Explorer 7 ignore the fractional part in percentage font size declarations. This could cause problems - using percentages can sometimes give unexpected results in Internet Explorer 6 and Internet Explorer 7. Careful calculation of inherited and computed sizes can prevent this.
Inherited font sizes and computed values from percentages can be floating point numbers. Therefore, browsers round off the value when rendering the text.
All browsers round off this way: 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 floating point size that is inherited by descendant elements.
One must avoid using font size declarations that result in computed values containing more than one decimal place because this brings out the bugs in browsers, giving unpredictable results.
Note: For a given inherited font size, the final font size obtained when using percentages is dependent on the inherited font size in pixels. Whether a given inherited font size in pixels is obtained by using inches, keywords or any other units is unimportant.

Friday, October 10, 2008

Font Size - Relative Size Keywords With Relative Length Units (px, em, ex) and Percentage Values

The relative size keywords can be applied to text whose inherited size was specified using percentage values or the relative length units px, em and ex. Unfortunately, with a given combination of relative size keywords and relative length units (or percentage values), the resulting font size varies across browsers.
In a particular browser, whether the font size is inherited from relative length units or percentage values, for a particular computed font size, the relative size keywords behave the same (except for IE6 and IE7 when the computed size is 18px).
Example 1:<p style="font-size:0.9em">Text at the inherited size and <span style="font-size:larger">larger text</span> and <span style="font-size:smaller">smaller text</span></p>

Example 2:<p style="font-size:9px">Text at the inherited size and <span style="font-size:larger">larger text</span> and <span style="font-size:smaller">smaller text</span></p>

Example 3:<p style="font-size:90%">Text at the inherited size and <span style="font-size:larger">larger text</span> and <span style="font-size:smaller">smaller text </span></p>

Example 4:<p style="font-size:1.8ex">Text at the inherited size and <span style="font-size:larger">larger text</span> and <span style="font-size:smaller">smaller text</span></p>
Advantages and Disadvantages: The application of relative size keywords to text whose inherited size was specified using percentage values and the relative length units px, em and ex results in inconsistent font sizes across browsers. Therefore, this combination must be avoided if consistent appearance across browsers is desired.

Notes and Example Data:
Firefox 3: If the keywords larger or smaller are applied to text whose computed size corresponds to an absolute keyword font size (9, 10, 13, 16, 18, 24 and 32 pixels), then FF3 "upgrades" or "downgrades" the text to the nearest absolute keyword's font size.
For other computed sizes, FF3 multiplies or divides the computed font size by a number ranging from 1.11 to 1.5 .
Opera 9.5: Opera's relative keyword scaling of 9, 10, 13, 16, 18, 24 and 32 pixels sized text is also consistent with its absolute keyword scaling. For other px sizes, Opera 9.5 multiplies or divides with a number ranging from 1.11 or 1.29 .
IE7 and IE6: The relative keyword scaling of 9, 10, 13, 16, 18, 24 and 32 pixels sized text is not consistent with its absolute keyword scaling. The scaling of 10px and 13 px with the keyword smaller does not match the scaling of x-small and small with smaller.
IE6 and IE7 multiplies or divides the relative keywords with a number ranging from 1 to 1.5
Safari 3.1: Safari's relative keyword scaling of 9, 10, 13, 16, 18, 24 and 32 pixels sized text is largely consistent with its absolute keyword scaling with the exception that font sizes are allowed to go below 9px.
Safari 3.1 does relative keyword scaling by multiplying or dividing by a figure ranging from 1.12 to 1.29
Internet Explorer 6 and 7 relative size keyword bug:
largerlarger-larger
parent style: font-size: 18px18 24
ancestor font size = 10px inherited font size: 1.8em or 3.6ex or 180%2432

The first row shows the resulting font size in pixels when the inherited font size was specified as 18px. The second row shows the resulting font size when the ancestor font size was 10px and the inherited font size was specified as 1.8em or 3.6em or 180% (which results in a computed value of 18px).
The resulting font size is supposed to the same - that is, both the rows should have the same pair of values. This is an IE6 and IE7 bug.
Here is a table that shows the resulting font size when the relative keywords are applied to text with various inherited font sizes. All font sizes are in pixels. The columns smaller-smaller and larger-larger indicate nested relative keywords ie. the relative keyword was applied twice through nested elements.
Table Caption: Relative sizing of text with inherited font size from relative length units or percentage values
inherited font sizesmallersmaller-smallerlargerlarger-larger
9871013Firefox 3
10981316
11981417
121091517
131091618
141191720
1512101722
1613101824
1715122128
1816132432
1916142535
2418163248
3224184872
9871113Opera 9.5
10981214
11981316
121091517
131091619
141191720
1512101822
1613101923
1714112024
1814122226
1915122327
2419152935
3226203846
9641013IE6 , IE7
10741013
111071316
121071316
131071316
1413101618
1513101618
1613101824
1716131824
1816132432
1918162432
2418163248
3224184872
9761113Safari 3.1
10871214
11981316
121081417
131191619
1412101720
1512101822
1613111923
1714122024
1815122226
1917132327
2420172935
3227223846

Wednesday, October 8, 2008

Font Size - Relative Size Keywords with Absolute Keyword Sized Text

The relative size keywords can be applied to text whose inherited size was specified using the absolute size keywords. Each browser handles this combination differently.

Firefox 3 and Internet Explorer 6 and 7

When the larger keyword is used with absolute keyword sized text, Firefox 3 and Internet Explorer 6 and 7 will "upgrade" the text size to the next higher absolute keyword's size.
Example: <p style="font-size:medium">Some text here <span style="font-size:larger">larger span text</span>
In this example, the inherited font size is medium which translates to 16px. Therefore, Firefox 3 or Internet Explorer 6 and 7 will increase the span text's font size to 18px which is equivalent to the absolute size keyword large.
When the keyword larger is applied to text sized with xx-large, Firefox 3 and Internet Explorer 6 and 7 multiply the font size by 1.5.
Example: <p style="font-size:xx-large">Some text here <span style="font-size:larger">larger span text</span>
The keyword xx-large corresponds to a font size of 32px. If to this the keyword larger is applied the resulting font size is 32 * 1.5 = 48px .
When the smaller keyword is used with absolute keyword sized text, Firefox 3 and Internet Explorer 6 and 7 will "downgrade" the text size to the next lower absolute keyword's size.
When the keyword smaller is applied to text sized with xx-small Firefox 3 divides the font size by approximately 1.13 .
Example: <p style="font-size:xx-small">Some text here <span style="font-size:smaller">larger span text</span>
The keyword xx-small corresponds to a font size of 9px. If to this the keyword smaller is applied, the resulting font size is 9 / 1.13 = 8px (approx.). However, Internet Explorer 6 and 7 don't behave this way. Therefore, using the relative size keyword smaller with text whose inherited font size is xx-small is not recommended.

Opera 9.5

When the larger keyword is used with absolute keyword sized text, Opera 9.5 does not "upgrade" the text size to the next higher absolute keyword's size. Instead, it multiplies the font size by approximately 1.2 .
When the smaller keyword is used with absolute keyword sized text, Opera 9.5 does not "downgrade" the text size to the next lower absolute keyword's size. Instead, it divides the font size by a number ranging from 1.1 to 1.29 .

Safari 3.1

When the larger keyword is used with absolute keyword sized text, Safari 3.1 does not "upgrade" the text size to the next higher absolute keyword's size. Instead, it multiplies the font size by approximately 1.2 .
When the smaller keyword is used with absolute keyword sized text, Opera 9.5 does not "downgrade" the text size to the next lower absolute keyword's size. Instead, it divides the font size by approximately 1.2 . However, if the resulting font size is less than 9px , it is ignored and the font size is made 9px . Therefore, the font size is never less than 9px .

Advantages and Disadvantages

There is no consistency across browsers in the application of the relative keywords to text that has been sized with absolute keywords. Therefore, this combination of keywords must be avoided.
Here is a table showing the resulting font sizes when the relative keywords are applied to text that was sized with absolute keywords. All the sizes are in px, smaller smaller and larger larger indicate nested relative keywords ie. the relative keyword was applied twice through nested elements.
Relative sizing of text that was sized with absolute size keywords
keywordsizesmallersmaller-smallerlargerlarger-larger
xx-small9871013Firefox 3
x-small10981316
small131091618
medium1613101824
large1816132432
x-large2418163248
xx-large3224184872
xx-small9871113Opera 9.5
x-small10981214
small131091619
medium1613101923
large1814122226
x-large2419152935
xx-large3226203846
xx-small9641013IE6 , IE7
x-small10741316
small131071618
medium1613101824
large1816132432
x-large2418163248
xx-large3224184872
xx-small9991113Safari 3.1
x-small10991214
small131191619
medium1613111923
large1815122226
x-large2420172935
xx-large3227223846

Font Size - Relative Size Keywords

There are two font-size relative size keywords - smaller and larger which decrease or increase the font size of text with respect to the inherited size.
Example 1: <p>Some text here <span style="font-size: larger">span text</span></p>
Example 2: <p style="font-size:small">Some text here <span style="font-size:larger">larger span text</span></p>
Example 3: <p style="font-size:15px">Some text here <span style="font-size:smaller">smaller span text</span></p>
There are 5 ways to use relative size keywords on an element:
  • On their own - the ancestors of the element do not have their text sized using the font-size property
  • With absolute size keywords - the ancestors of the element have their text sized using the absolute sized keywords
  • With absolute length units - the ancestors of the element have their text sized in in, cm, mm, pt or pc
  • With relative length units - the ancestors of the element have their text sized in em, ex or px .
  • With percentages - the ancestors of the element have their text sized in percentages.