Friday, June 26, 2009

The font Property

The font property can be used in two ways — as a shorthand property or as a regular property. In CSS, a shorthand property is one that that takes the values of several other CSS properties. Each of the values are separated by spaces or sometimes the forward slash character (/). Shorthand properties make CSS rules less verbose and more readable.

font as a shorthand property

Here is the syntax of font as a shorthand property:

font: font-style font-variant font-weight font-size/line-height font-family

The order of the values of the first three sub-properties — font-style, font-variant, and font-weight is not important. Therefore, font: italic small-caps bold 18px Arial; is the same as font: bold italic small-caps 18px Arial;

If any of the values of font-style, font-variant, and font-weight are omitted in a font declaration, the browsers assigns them the value normal. For example:

font: normal normal bold 18px Arial; is the same as font: bold 18px Arial;.

The values of the font-size and the font-family properties must be specified in the correct order - font-size first and font-family next. If they are omitted or the order is changed, the entire declaration is invalid and will be ignored by the browser. Therefore, the smallest valid font declaration will have only the font size and the font family specified. Example:

font: 18px Arial;

Note that the values font-style, font-variant, and font-weight have to appear before the font-size and the font-family values. Therefore, the following font declaration is invalid. font: 35px Verdana italic small-caps bold

Line height can also be specified using the font shorthand property. The value of line height is specified after the font size and is separated from it by a forward slash.

Example 1: font: 32px/1.5em Arial; Example 2: font: italic 2em/1.2 Verdana;

If line height is not specified, then the browser assigns the value normal to it.

Inheritance

The values of the properties of font are inherited by child elements.

font as a regular property

Here is the syntax of font when used as a regular property:
font: caption icon menu message-box small-caption status-bar inherit
The values caption, icon, menu, message-box, small-caption, and status-bar refer to the fonts used by the operating system (that the browser is running in) for certain interface elements. These are called system fonts. Thus, the font style, font variant, font weight, font size and font family of an operating system element can be applied to any (x)html element. Example: p { font: caption; }

font:caption

According to the w3.org specification for the font property, the value caption refers to the font used by the captions of control elements of the operating system. Examples of control elements are buttons, drop-down menus etc. This property is useful when one needs to make the (x)html elements appear similar to the buttons, drop-down menus, tabs, etc. of the user's operating system . The font:caption declaration can be used on any (X)HTML element.

Browser Support

Firefox 3 correctly assigns Windows XP's caption font to elements with the font:caption property. Internet Explorer 6, Internet Explorer 7 and Opera 9.6 incorrectly assigns Windows XP's title bar font to elements with the font:caption property. Safari 3.2.2 incorrectly assigns the font Lucida Grande at size 13px to elements with the caption property.

font:icon

According to the w3.org specification for the font property, the value icon refers to the font used for labeling icons. This property is useful when one needs to make (X)HTML elements appear similar to the user's operating system's icons. This property can be used on any (X)HTML element. Example: font: icon;

Browser Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign the correct font to the icon property. Safari 3.2.2 incorrectly assigns Lucida Grande 13px to it.

font: menu

According to the w3.org specification for the font property, the value menu refers to the font used in menus such as drop-down menus and menu lists. This property is useful when one needs to make (X)HTML menus appear similar to the user's operating system's menus. This property can be used on any (X)HTML element.
Example: font: menu;

Browser Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign the correct font to the icon property. Safari 3.2.2 incorrectly assigns Lucida Grande 13px to it.

font: message-box

According to the w3.org specification for the font property, the value message-box refers to the font used in dialog boxes of the user's operating system. This property is useful when one needs to make web page dialog boxes appear similar to the user's operating system's dialog boxes. This property can be used on any (X)HTML element. Example: font: message-box;

Browser Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign the correct font to the icon property. Safari 3.2.2 incorrectly assigns Lucida Grande 13px to it.

font: small-caption

According to the w3.org specification for the font property, the value small-caption refers to the font used for labelling "small controls" of the user's operating system. It is not clear exactly what "small controls" are. Windows XP does not appear to have "small controls". The w3.org specification states that when small captions don't exist in an operating system, a smaller version of the caption font must be selected by the browser for the small-caption font. This property can be used on any (X)HTML element.
Example: font: message-box;

Browser Support

Since Windows XP doesn't appear to have small captions, the browser is supposed to choose a font smaller than caption. Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign an incorrect font to the small-caption property in Windows XP — they just use the boldface version of the caption font. Safari 3.2.2 also incorrectly assigns Lucida Grande 11px to the small-caption property.

font: status-bar
According to the w3.org specification for the font property, the value status-bar refers to the font used in windows status bars of the user's operating system. This property is useful when one needs to make a web page element appear similar to the user's operating system's status bar. This property can be used on any (X)HTML element.
Example: font: status-bar;
Browser Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign the correct font to the status-bar property. Safari 3.2.2 incorrectly always assigns Lucida Grande 10px to it regardless of the font used by the operating system.

font: inherit

This w3 document states that The inherit value can be used to strengthen inherited values. Here is one way of doing this: p { font: inherit !important }
The above rule ensures that p elements' fonts are always inherited and can never be changed by any other CSS rule.

Browser Support
Firefox 3, Opera 9.6 and Safari 3.2.2 fully support the inherit value for font. Internet Explorer 6 and Internet Explorer 7 don't support the inherit value at all.

Font properties specified by system font values

In Firefox 3, Opera 9.6 and Safari 3.2.2, the system font values of font (caption, icon etc.) specify all the major font properties font-style, font-variant, font-weight, font-size, line-height, and font-family. In Internet Explorer 6 and Internet Explorer 7, the system font values of font only specify font-style, font-weight, font-size, and font-family. The properties font-variant and line-height are inherited even when the system font values are applied to an element.

Tuesday, June 2, 2009

Line Height

Updated: Oct 20, 2009

Glyphs

A glyph is a graphical unit of a typeface. For a more detailed description of glyphs see http://en.wikipedia.org/wiki/Glyph

Content Box Height

The height of a content box is between approximately 110% and 150% of the font size (depending on the font size and typeface). For example, here are the content box heights for some typefaces (normal font) in Windows XP.

Typeface at 25px, normalContent Box Height% over font size
Times New Roman29px116%
Arial28px112%
Verdana31px124%
Trebuchet29px116%
Impact32px128%
Courier New29px116%
Comic Sans MS34px136%
Tahoma30px120%

The height of a content box is constant for a particular font size and font, it does not depend on the actual size of the glyph. Therefore, the content box of a period (full-stop) will be the same size as the content box of the letter 'A'. The height of a content box of a particular font and font size cannot be changed using CSS.

Firefox 3, Internet Explorer 6, Internet Explorer 7, Opera 9.6, Opera 10, Safari 4 and Chrome 3 allocate the same content box height for a particular font and font size. However, Safari 3.2.2's content box height is sometimes more than, sometimes less than, and sometimes equal to that of the other browsers (for a particular font and font-size).

In most typefaces, the capital A with a circumflex reaches the highest possible point and touches the top of the content box and the @ glyph reaches the lowest possible point and touches the bottom of the content box.

Font Smoothing and Content Box Height

In Firefox 3, the content box height is unaffected by font smoothing — whether standard font smoothing, ClearType smoothing or no font smoothing.
In Internet Explorer 6, ClearType and Standard smoothed text have the same content box height (for a given typeface and font size). However, with smoothing disabled, the content box height is sometimes 1or 2 pixels more than that of smoothed text of the same typeface and font size. The extra pixels go on to the top of the line.
Internet Explorer 7 and Internet Explorer 8 always use ClearType and their content box height is the same as IE6 with smoothed text (for a given typeface and font size).

Opera 9.6's content box height is constant irrespective of font smoothing and is the same as IE7 (for a given typeface and font size).
Safari 3.2.2 always uses ClearType smoothing.

Safari 3.2.2 Content Box rendering bug

In Safari 3.2.2, the content boxes of some fonts are rendered with the wrong height. This causes the upper parts of capital accented characters (and other special characters) to spill out of the content box. Here is an example:
<p style="font-family:'Times New Roman';font-size:16px;background-color: green">16<spanclass="pink">&Eacute;&Acirc;&Ccedil;</span></p>
Note: This bug is NOT present in Safari 4.

The Line Box

A line box is the box created by the p element and the span element. The height of the line box is called the line height. In Firefox 3, Opera 9.6, Safari 3.2.2 and Internet Explorer 8 the default height of a single-line line box is equal to the height of the tallest content box in the line (provided there are no replaced elements). In these browsers, the line height of a p element is determined by the inherited font size and font face and a line will always have this height even if the line only contains a 1-pixel high gif (say) and no glyphs.

In Internet Explorer 6 and 7, line boxes don't have a default line height. In IE6 and IE7, the line box takes on the height of the tallest content box in the line (provided there are no replaced elements). In these browsers, if a p element only contains a one pixel-high gif (say), the line height of the p element will be one pixel.

The length of a line box varies — depending on the width of the containing parent element or the browser window width. The line box of a p element can be made visible by adding a background color to it. However, in a span element, the background color only fills the content box even though the span's line box height may be larger. In all browsers, wrapped line boxes (paragraphs or spans that contain more than one line) have a height that is equal to the sum of the heights of the constituent lines.

Here is an example of a line box.

Default line height bug in Firefox 3, Firefox 3.5, Safari 3.2, Safari 4 and Chrome 3

Firefox 3, Firefox 3.5, Safari 3.2.2, Safari 4 and Chrome 3 have a bug that causes them to allocate one or two extra pixels of default line height for the typefaces Times New Roman, Arial, and Trebuchet.

When the font is Times New Roman, these browsers add one extra pixel of default line height for font sizes 12px to 35px and two extra pixels for font sizes 36px to 50px.

When the font is Arial, they add one extra pixel of default line height for font sizes 16px to 45px and two extra pixels of line height for font sizes 46px to 50px.
When the font is Trebuchet, they add one extra pixel of default line height for font sizes 12px to 35px and two extra pixels for font sizes 36px to 50px.

Therefore, to have a consistent line height across Firefox 3, Firefox3.5, Safari 4, Chrome 3, Internet Explorer 6 and 7 and Opera 10, one has to decrease the line height by one or two pixels depending on the font and font size. However, Safari 3.2.2's rendering of lines containing text cannot be made completely identical with other browsers because of its content box bug (see above).

Example: For a paragraph containing text of font Arial at font size18px and default line height, one has to use the CSS declaration line-height:21px. This is one pixel less than the 22 pixels allocated by Firefox.
Note that the "extra" pixel of line height does not appear in content boxes. Below is an example showing this:

<div style="font-family:Arial"><p style="font-size:18px;background-color: green">The <span style="background-color:fuchsia">Five Boxing Wizards</span>Jump Quickly 0123</p></div>

We can see that the one "extra" pixel of line height goes on to the top of the line box in Firefox 3. However, this is not consistent – Firefox 3 sometimes puts the one "extra" pixel of line height at the bottom. Safari 3.2.2 always puts the one extra pixel of line height at the bottom of the line box.When there are two "extra" pixels, both Firefox 3 and Safari 3.2.2 put one pixel at the top and the other at the bottom of the line box.

In Firefox 3, the one extra pixel of line height can be made to switch from the top to the bottom is by putting one of the heading elements — <h1> to <h6> within the div that contains the paragraph. In the example above, the <h6> element will cause the extra pixel to go to the bottom of the line box.

Line Height and Font Style

In Firefox 3, Internet Explorer 6 and 7 and Opera 9.6, italic and bold face sometimes have content box heights that are one pixel more than that of the normal font. In Firefox 3, underlined or overlined text sometimes have a content box height one pixel less than that of normal text.

In Safari 3.2.2, normal, italic, bold, underlined and overlined text all have the same line height (for a particular typeface and font size).

Line Height Declarations

Line height can be specified on any block element or inline element using the CSS declaration line-height.
For example: p { line-height: 20px; } Line height can be specified using px, pt, pc, in, mm, percentages,em's, ex's and raw numbers. Negative values are not permitted.

Line Height Declarations on <p> elements

The line height of a <p> element can either be increased or decreased using the CSS line-height property. The line height of a line in a p element is normally determined by the largest font that it contains, by any span elements it contains or by any replaced elements — whichever takes the greatest amount of vertical space. The CSS line-height property allows one to override the line height that was allocated by the browser. When the line height is decreased or increased from the normal value, the browser adds or removes an equal number of pixels from the top and the bottom of the line box. When an odd number of pixels have to be added or removed, the extra pixel is added or removed from the top or the bottom, depending on the browser. The line-height property affects all the lines of the p element. Note that the dimensions of content boxes and replaced elements are not altered by the line-height declaration.

When the line height of a pelement is reduced, those parts of the glyphs in the line that don't fit within the reduced line height spill out of the top and bottom of the line box. This can be seen in the example below:
<p style="line-height: 8px; background-color:green">The<span style="background-color:fuchsia">Five</span></p>

The background color of the <p> element stays within the specified line-height. However, if the line contains a span with background color, the color extends outside the line box and fills the content box. The content box height cannot be reduced, it is determined by the font and font size. This can be seen in the example above.
When the contents of an element span multiple lines, the bottom half leading of one line does not merge with the top half leading of the line below it. Therefore, if a <p> element has a line height of 30px and has two lines containing text, the total height of the <p> will be 60px.

When there are colored span boxes in a paragraph of multiple lines of reduced line height, the color of the span will hide the descenders of the glyphs in the line above. The ascenders of the line below will overlap the descenders of the glyphs and the color of the span above.

Safari 3.2.2, Safari 4 and Chrome 3 always puts the baseline of the text contained in a <p> in the line box. Therefore, if the declared line height were so small that the baseline of the text in an element would be outside the line box, these browsers increase the line height beyond the declared value to accommodate the baseline.

Line Height Declarations on Spans

A span is an inline element that can be used to style text that is within a paragraph or other block element. By default, a span box's height is equal to the inherited line height or the tallest content box's height that it contains, whichever is greater (when it does not contain any replaced elements).
Increasing the line-height of a span to make it the tallest element in a line increases the line height of the entire line.

When a span's background color is specified, only the content box gets the color. This can be seen in the example below:
<pstyle="font-size:16px;background-color:green;line-height:22px">The<spanstyle="line-height:31px;background-color:fuchsia">Five</span>Boxing Wizards Jump Quickly</p>

When the difference between the <p> line height and the span's content box height is an even number, there will be an equal number of pixels above and below the content box. When it is an odd number, Firefox 3 sometimes puts the extra pixel at the top and at other times, at the bottom (depending on unknown factors). Internet Explorer 6 and 7 always put the extra pixel at the top. Opera9.6 and Safari 3.2.2 always put the extra pixel at the bottom.

When a span's line height is increased to make it the tallest box in a line, only those lines of the paragraph that contain the span have their line height increased. This can be seen below. In the example, the contents of the paragraph are wrapped to two lines. Since only the first line contains the span, only that line gets the increased line height.

<p style="font-size:16px;background-color:green;line-height:19px">The<span style="line-height:31px;background-color:fuchsia">Five</span>Boxing Wizards Jump Quickly</p>


Specifying a span's line height to less than the browser's default allocation has no visible effect. This is because there is no way of making the background color or image of a span fill up the entire line box. However, the reduced line box height of the span affects the way the span is positioned by the vertical-align property.

Line Height Declarations and Replaced Elements

Line height declarations on replaced elements are only used to calculate vertical-align percentage values, they do not affect the element in any other way.

Images are replaced elements. By default, the bottom of an image is aligned to the baseline of its parent element. When the height of an image exceeds the height of its parent element, the parent elements line box expands to accommodate the image fully.
Consider an element whose line height has been reduced such that the baseline falls out of the line box. If such an element contains an image, since the bottom of images are aligned to the baseline, the line box of the element is expanded such that the baseline (and the bottom of the image) is within the line box.

Example: <p class="test" style="font-family:'Times New Roman';font-size:35px;line-height: 20px">boxing @Â<img src="10x10.jpg" alt="10x10 image" /></p>
In the above example, even though the line height is declared as 20px, the line box is expanded to 22px to accomodate the bottom of the image which is aligned to the baseline.



In Internet Explorer 6, the height of the line box of an element that contains an image cannot be increased or decreased using the line-height declaration. This is a bug. However, if the text in the element spans multiple lines, those lines that do not contain images have their line box height altered by the line-height declaration. In Internet Explorer 7, this bug only affects elements of reduced line height (not increased).

Line Height of a <p> element with spans of different font sizes

By default, all the bits of text in a <p> element have their baselines aligned to each other. This is true even if a <p> element contains spans of text of different font sizes.

When there is a line height declared on an element that contains text of different font sizes, the height of the line box may be more than the declared line height. When text of different baseline heights are are aligned to each other's baselines, the midpoints of their content boxes sometimes fall out of alignment. Now, when line height is declared on an element, the value that is important is half the declared value, since the browser will create a line box whose height above and below the midpoint of the line is equal to half the line height.

Therefore, when the midpoints of two content boxes on a line are misaligned, the line box will have to expand to accommodate the top and bottom of both boxes. This will cause the height of the line box to be greater than the declared line height.

Example: <p style="font-family:'Times New Roman';line-height: 25px;font-size: 20px;">20px fontsize, 25px line-height Â@ <span style="font-size:50px;">font-size:50px Â@</span></p>

Each dot in the background image has a height of 4px.

Though the declared line height is 25px, the actual height of the line box will be 35px.

Line Height Inheritance

The default value for line height is normal. When the line height is declared using CSS on an element, it is inherited by all child elements. In the case of the relative length units em, exand percentages, it is the computed line height that is inherited. However, with raw numbers declarations, the raw numbers are themselves inherited, not the computed values.

Specifying line height in absolute units - pt, pc, in, cm and mm

These are the absolute 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 may not be equal to a real-world 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

Here is an example of line height specified using absolute units:
<p style="line-height:29pt">The Five Boxing Wizards Jump Quickly</p>

Firefox 3 and Internet Explorer 6 and 7 correctly handle absolute unit line height declarations. However, Opera 9.6 and Safari 3.2.2's support of absolute unit line height declarations is buggy — they sometimes allocate one pixel less than what was specified.

Specifying line height in relative units - percentage, em and ex

When line height is specified in percentages, em's and ex's, the line height is calculated with respect to the font size (inherited or declared) of the element. When using percentages, em's and ex's for line height declarations, it is the computed line height that is passed on to child elements.

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

Line Height specified in Percentages

Here is an example of line height specified in percentage:
<p style="font-size:16px;line-height:175%;">The Five Boxing Wizards Jump Quickly</p>

In the above example, the line will get a line height of 16px * 1.75 = 28px

Rounding

With percentage line-height declarations, Firefox 3 is inconsistent in its rounding off of calculated line heights that have a decimal portion —0.5px to 0.9px is not always rounded off to 1px. Internet Explorer 6 and Internet Explorer 7 correctly round off the decimal parts of computed line height with percentage line-height declarations.

With percentage line-height declarations, Opera 9.6 and Safari 3.2.2ignore numbers after the decimal place in computed line heights.

Line height in em's

Here is an example of line height specified in em's.
<p style="font-size:20px;line-height:1.05em">The Five Boxing Wizards Jump Quickly</p>

In the above example, the computed line height is 20px * 1.05 = 21px

Rounding

With em line-height declarations, Firefox 3 is inconsistent in its rounding off of calculated line heights that have a decimal portion — 0.5px to 0.9px is not always rounded off to 1px. Internet Explorer 6 and Internet Explorer 7 correctly round off the decimal parts of computed line height in em line-height declarations.
With em line height declarations, Opera 9.6's rounding off of computed line heights is buggy. With em line-height declarations, Safari 3.2.2 ignores numbers after the decimal place of computed line heights.

Second Decimal Place Support

Firefox 3's support of em-specified line height declarations with two decimal places is buggy — it doesn't always give the expected size. Internet Explorer 6 and 7, Opera 9.6 and Safari 3.2.2 support em declarations containing two decimal places.

Line Height Declarations using Raw Numbers

Line height can also be declared as a raw number — without any units. The raw number is multiplied with the font size to obtain the line height. Here is an example:
<p style="line-height: 1.04">The Quick Brown Fox Jumps</p> Unlike line height declarations using units, the raw number of  the line height declaration is itself inherited (not the computed values). Example:
<div style="font-size:20px;line-height:1.5"><p style="font-size: 26px">The Five Boxing Wizards Jump Quickly</p></div>
The line height of the p in the above example will be 26px * 1.5 = 39px

Rounding

Rounding off of computed line heights of raw number line height declarations in Firefox 3 and Opera 9.6 is buggy. Internet Explorer 6 and Internet Explorer 7 correctly round off the decimal parts of computed line height of raw number line-height declarations. With raw number line-height declarations, Safari 3.2.2 ignores numbers after the decimal place of computed line heights.

Second Decimal Place Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 support two decimal places in raw number line height declarations. Safari 3.2.2's support for raw number line height declarations is buggy.

Font Smoothing

In Windows XP there are two types of font smoothing - Standard and ClearType.
Standard font smoothing does not change the width of a glyph nor does it change its height. The smoothing effect is created by adding lighter colored pixels around a glyph. These smoothing pixels are all within the glyph box and therefore do not increase the glyph's width. In windows XP, standard font smoothing is applied starting from 18px when using the Times New Roman typeface.
ClearType font smoothing also does not change the width and height of glyphs, thus it has no effect on line height. ClearType is in effect from 10px itself. It works by adding red, green or blue sub-pixels around a glyph to make it look smoother. It only works on LCD monitors.
Internet Explorer 7 and Safari 3 use ClearType font smoothing by default on Windows.

The picture below shows how font smoothing looks when magnified.