An Introduction to Style Sheets: Font Styles
|
|
An Introduction to Style Sheets: Font Styles |
|
Not every effect will be visible in every browser.
Text must be important; there are four pages on this site dealing with the look of the text. And we have not got to the spacing, colour, background, and image styles, all of which can be applied to "text" tags like p and h1 .
On this page we are going to look at styles that can be applied to text, no matter what the font or the size. Remember the message at the top of the page: not every effect will be visible in every browser.
Font-Style has three possible values: normal, italic, oblique. Normal is the default so will not be discussed. Using the italic value should force the browser to select a font labelled italic . Using the oblique value should force the browser to select a font labelled oblique . Some browsers will automatically convert a normal font to an italic or oblique version as the page is built.
Or do you prefer the oblique? Can you see a difference in your browser?
Font weights are more distinctive than Italic and Oblique, at least some them are. There is normal, the default, and bold that you have probably used before. There are two relative values: bolder, lighter. And there is a range of nine numerical values, which are used to increase the weight of a font. Most fonts do not have the full range of nine weights so some compromises have been made to accomodate font design and browser appearance. These are noted in the table.
| Value | Effect | Variant |
|---|---|---|
| normal | normal text | Medium or Normal or Roman or Book |
| bold | bold text | |
| bolder | bolder than what | |
| lighter | lighter than light | |
| 100 | Value: 100 | if unassigned and 200 assigned then 200 value, otherwise 400 |
| 200 | Value: 200 | if unassigned and 100 assigned then 100 value, otherwise 300 |
| 300 | Value: 300 | if unassigned and 200 assigned then 200 value, otherwise 400 |
| 400 | Value: 400 | Medium or Roman or Normal |
| 500 | Value: 500 | Medium |
| 600 | Value: 600 | if unassigned becomes Bold |
| 700 | Value: 700 | Bold |
| 800 | Value: 800 | if unassigned becomes Bold or the 900 variant |
| 900 | Value: 900 | if unassigned becomes Bold |
Don't all those decisions look like fun? Your browser will be busy if all font weights are expressed by numerical values. Most current browsers ignore most of these values and work with bold when it is used, assume font-weights higher than 400 or 500 are bold and ignore the rest. Very few fonts, particularly the free ones used on most web sites, and installed in most computers, have a full range of weights so these "assumptions" on the part of the browsers are reasonable.
Font Family | Font Size | Font Style | Text Style | Vertical Spacing | Horizontal Spacing
| Other Possibilities | |
|---|---|
| Start of site | Style Sheet Home |
| Resources of note | |
| Send email | Robert Boardman |