This is a step by step description of the options in the CSS Rule Definition dialog from Dreamweaver CS3. Today we are covering the options related to the "Type" panel where you set up behaviors for your fonts.

You can download a PDF version of this article here.

CSS Rule Definition: Type

This is the basic rule definition dialog for Dreamweaver CS3. It has 8 categories down the left hand side, each one will present you with a range of options in the main part of the dialog. This paper describes the "Type" section.

Dreamweaver CS3 will allow you to define things like fonts, type size, color and alignment directly in the property inspector at the bottom of your screen, but using the property inspector method bypasses this dialog and can produce unpredictable (and hard to correct) results. You should always manage the type on your web pages through the CSS rules either directly in the CSS code on your CSS page, or through the CSS interface that includes this dialog.

Font

Clicking on the popup menu next to the Font field, you are presented with a list of fonts that are all good choices for your web project. Dreamweaver ships with the options in the picture, but you are always free to add your own either manually or by editing the menu.

Every computer on the web uses the fonts it has installed to display the page. If you use a fancy font that few people have installed on their machines, then you will only have a few people see your website the way you designed it. It’s best to stick with standard fonts so that everyone sees the same design. Those offered by Dreamweaver are excellent choices for this.

Why are there three fonts listed in each option? Again it’s because every computer has different fonts. In the example, the first option lists "Arial, Helvetica, sans-serif". This means the computer viewing the web page will first try to use Arial for the font. If Arial is not installed on the computer then it will try to use Helvetica. If it can’t find Helvetica either, then it will just use the generic sans-serif font that is defined for that machine.

Any time you give it your own choice of fonts, you should always end with one of the five font categories: sans-serif, serif, monospace, fantasy, and cursive. This way the end-user’s computer can always have a default if it can’t find a copy of your font.

Size

Choosing a font size depends on your design. Choosing xx-small, x-small, small, medium, etc., will rely on a browser default or base the size on the parent CSS element. If you want to nail the size down to something specific you should choose a specific number (or type a specific number in the blank and not use the popup menu at all).

Units for Size

If you choose (or type) a number, you will need to choose a measurement. Different designers argue over which one is best, but the truth is that none of them is the single best answer in every condition. For best cross-platform/cross-browser consistency, pixels works best. 12 pixels on a PC in Firefox is roughly equivalent to 12 pixels on a Mac using Safari. If you choose points, then your fonts will vary in size by somewhere around 20% between a Mac browser and a Windows browser. Inches, Centimeters, Millimeters and Picas all depend on screen resolution, so they can vary wildly as well. "Ems" is pronounced just like it sounds. It stands for the width of the capital letter "M". Many web developers swear that designing using Ems is the only way to go. The advantage of using Ems is that it keeps everything proportional to the font. "Exs" is the same thing, except the unit is the letter X instead of the letter M. Finally, using % means the measurement will be based on the enclosing CSS element (referred to as the Parent). So a font that is set to 10% will always use 10% of the available space.

Style

The style field lets you choose "normal", "italic", and "oblique". For all practical purposes in today’s browsers, Italic and Oblique are the same thing. Use which ever one you like. If the parent element has already set Italic or Oblique and you want to override that setting, you should choose Normal. Otherwise you can leave it blank if you like.

Line height

Type a number to change the line height of the font, or choose normal to override the parent element’s setting. If you type a number, you’ll have to choose a unit of measurement from the menus beside it (like the font size, the options are pixels, points, in, cm, mm, picas, ems, exs, and %). Leaving it blank will allow it to inherit the settings from its parent.

Weight

Choosing a specific weight for web text has long been a designer’s dream. The mechanism is there now, but many web browsers do not support it. The specification says 500 is normal, lower numbers are lighter, higher numbers are darker. In practice, you are pretty much limited to "normal" and "bold".

Variant

Turning on small-caps will make every letter a capital letter. In this case, the capital letters are all normal capital letters, the lower case letters are slightly reduced in size but still have the shape of the capital letters. This effect does not show up in Dreamweaver’s design window. You’ll have to preview the final page in your browser to see the effect.

Case

Here you can choose to capitalize every word, convert everything to lowercase or to uppercase, or you can choose none to override the parent. Often this is used for menu items that are text so that they will have have the same case structure.

Color

Choose a color from the palette for your text. You can also choose a color from anywhere on the screen using the eyedropper. The colors that show up on this palette are the 216 "websafe" colors. Websafe means they won’t be dithered in the event that someone with 8-bit color is looking at the website. Websafe is still exists as a concept, but there’s not a lot of practical need for it any more. Every computer sold in the last five years or so can display significantly more than 8-bit color (8-bit color means the computer can only display 256 different shades of color on the screen at one time). 16- and 24-bit color has been around for almost 20 years, allowing modern computers to display millions of colors at once. The "websafe" palette is really a throwback to the 1990s. Feel free to use these colors or any other on your website.