Web design development. Everything about Font Size and Weight

The font-size property uses four different ways to specify the size of your text: relative, absolute, and percentage.

You can use sizes ranging from xx-small to xx-large, providing seven sizes of text. The range of sizes should fit most any need:

Size	Sample
`xx-small`	Sample text
`x-small`	Sample text
`small`	Sample text
`medium`	Sample text
`large`	Sample text
`x-large`	Sample text
`xx-large`	Sample text

You can use the values larger and smaller to adjust the size of the text to be one size larger or smaller than the surrounding text. This is a handy tool, since you can create style classes whose size tracks the size of the surrounding text. In general, larger moves up one size on the size chart, while smaller moves down. These values correspond to using values of +1 and -1 with the <FONT> tag.

For example, the style class:

     .yell {font-size: larger;}

works whether you are yelling in a tiny font or a big one. Consider this example:

     <span style=yell>Hey You !</span> 

     <span class=yell>Over There !</span>

If the base font size is very small, the result looks like:

Hey you ! Over There !

If we started in a larger font, things still work out:

Hey You ! Over There!

Keep in mind that larger and smaller stop working when you get to the largest and smallest sizes (xx-large and xx-small).

If you like the idea of larger and smaller sizes, but aren't happy with the predefined increments used, try using percentages. For this, all you need to do is provide a percent value for the size. Want text that is 21% larger than the surrounding text? Just use:

     .p121 {font-size: 121%;}

and you'll get text that's 21% bigger. With percentage values, your only limit is the font-scaling capabilities of the client's machine, which should at least support a range from 25 to 200 percent.

Finally, true typographers can get what they always wanted: Absolute font sizing uses points. Need 37 point text? Try this:

     .p37 {font-size: 37pt;}

and you've got it. Keep in mind that any style sheet unit can be used, so quarter-inch text can be achieved with:

     .p25 {font-size: 0.25in;}

You might get what you wanted, but not all browsers can handle these kinds of units. To get what you need, stick with font sizes using points.

How to control weight size

The boldness of a font, or the lack thereof, is known as the weight of the font. The font-weight property gives you three ways to specify boldness: simple, relative, and fancy.

The simple way is to just ask, using

     .b {font-weight: bold;}

Presumably, the browser will select an appropriately bold version of the current typeface. If you want better control, try using the values bolder and lighter, which determine the boldness based upon the boldness of the surrounding text.

Finally, you can use a numeric boldness scale, based on values that are multiples of 100 ranging from 100 to 900. Using 100 gets a very light version of the type face, 400 is considered the normal version of the face, 700 is the "regular" bold version, and 900 is as bold as it gets. Keep in mind that nine bold versions of a font rarely exist, so many of these numeric values map to the same level of boldness.

<< BACK

Dealing With Font: Font Size and Weight