Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

Web Development

Font Management

, January 01, 2002


WebReview.com: Tag of the Week: CSS2: Font Management

More than any other feature of the Cascading Style Sheet specification, font management is probably the most important. Throughout the evolution of HTML, font control has become increasingly sophisticated and feature rich. Over the next few weeks, we'll examine the latest set of advancements in font management brought forth by the CSS2 standard.

Font Specification and Selection

In the dark ages of the Web, you got to pick the size and the style (bold or italic, but not both) of your font. There was no support for specific fonts, and authors gave up trying to use different fonts for different parts of their documents.

Over time, HTML and CSS provided control over font selection, allowing authors to indicate the font they wish to use and to provide greater control over its appearance. Now if you want 22 point Verdana Oblique, you can certainly ask for it. The problem is that you may not get it, and what you do get will be a disaster.

CSS2 has refined the font management process into two separate components: specification, where authors specify the font they wish to use in their document, and selection, where the browser tries to meet their needs. This is a big advancement over previous versions of HTML and CSS, where the specification process was fairly well defined, but the selection process often left a lot to be desired.

Since the specification process is so mature, there are only a few changes to it in CSS2. We'll address those first, and then finish with a discussion of the formal font selection process that CSS2 promotes.

Font Stretching

The first addition to the font specification model in CSS2 is the font-stretch property. You may recall that CSS1 supported an option, letter-spacing, which allowed you to control the spacing between letters in a word. Judicious use of letter-spacing let you stretch and shrink words to fit. Unfortunately, adjusting the space between letters did not change the letters themselves. The resulting changes were rarely attractive.

The font-stretch property, on the other hand, specifies a version of a font whose letters are appropriately stretched or squeezed. Using this version would presumably produce a wider or narrower word that is more attractive and consistent with the surrounding text.

When you specify the font-stretch property, you use one of nine values to determine the resulting font. These values, from narrowest to widest, are ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, and ultra-expanded. In addition to these absolute values, you can use the relative values narrower and wider to specify a font that is one step narrower or wider than the current font.

As with all font specification properties, you can ask for whatever your heart desires, but the browser will decide what you get. As we'll see in coming weeks, this is getting a lot better, but just because you ask for Lucida Sans semi-expanded doesn't mean you are going to get it. Even so, the addition of the font-stretch property to CSS2 gives authors one more tool to help make their pages appear exactly as they intended.

Next week, we'll look at font size adjustment, a major new feature that should make many pages more readable across more platforms.


Chuck is the author of the best-selling HTML: The Definitive Guide and now, the fourth and expanded edition, HTML & XHTML: The Definitive Guide. He also writes on a variety of Internet and Web-related topics for a number of online magazines.


Previously in Tag of the Week

CSS2 Standard Tour: Begin Here
Attribute Sectors in One Quick Bite
Print This!
Using CSS2 to Layout HTML Pages for Print
CSS2 Printing: Left and Right Layouts
Even More CSS2 Printing Power
Breaking Pages
Defining CSS Media Types
Lists, Bidirectional Text, and Quotation Marks


Of related interest: See the Web Review Style Guide, edited by Eric Meyer.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.