An Introduction to Style Sheets
Font Size
|
|
An Introduction to Style Sheets
|
|
Not every effect will be visible in every browser.
To quote Steve Mulder, "There are, to the delight of Web designers everywhere, a number of different ways to define the size of text." ( Web designer's guide to style sheets, p. 95) These ways are:
Each of these is dealt with separately below.
The coding for the Style sheet is the same no matter which method of measurement you use: font-size: "size_value". Feel free to look at the source of this page.
Point sizes are familiar to all who design documents on paper, and that includes most people who use word processors and spreadsheets. Point sizes in a style sheet need follow two rules.
Here are some tests to see what your browser does with various point sizes.
This is ordinary text in an ordinary paragraph.
This is ordinary text at 4 points.
This is ordinary text at 8 points.
This is ordinary text at 12 points.
This is ordinary text at 16 points.
This is ordinary text at 20 points.
This is ordinary text at 24 points.
This is ordinary text at 28 points.
This is ordinary text at -8 points.
If you can, look at this page (and all pages on this site) with more than one browser. There are some significant and important differences between the various browsers and even between various versions of the same browser.
There are seven absolute keywords which can be used in style sheets. They correspond to the seven values that were acceptable in HTML 2 and HTML 3 for font sizes.
The Style sheet specification recommends that each value is 150% of the value below it. If medium is defined as 12 points, then large should be 18 points and small should be 9 points. How your browser deals with these seven levels you will have to learn by experimentation. (As a side note, I continue to regret that I cannot show you side-by-side tests of various browsers and browser versions. If you have two browsers loaded on your computer you can do a side-by-side test yourself.)
This is ordinary text in an ordinary paragraph.
This is ordinary text at xx-small.
This is ordinary text at x-small.
This is ordinary text at small.
This is ordinary text at medium.
This is ordinary text at large.
This is ordinary text at x-large.
This is ordinary text at xx-large.
On a test machine, Internet Explorer 5 seems to do what the Style Sheet specifications require.
There are only two relative keywords: smaller and larger. However, they are the only two that are required. Each one changes the existing size to the next smallest or largest size in the list of absolute sizes. Smaller reduces the size of the font by 150%. Larger increases the size of the font by 150%. One can step up or down through a range of sizes using either larger and / or smaller. Theoretically it should be possible to increase xx-large or reduce xx-small. Larger and smaller act on the current font size.
This is ordinary text in an ordinary paragraph. This is ordinary text with larger applied.
This is text set to "smaller". This is "smaller" text with larger applied.
Here is a paragraph using larger followed by a regular paragraph.
Here is the following paragraph. Note that the style from the previous paragraph is not used here. This paragraph uses the regular sized font.
Because of the lack of support from Version 3 browsers, and the variety of other methods for setting type size, length units have not often been used. There are two possibilities.
If a font-size is expressed as 1.5 em, then the current font size is increased 1.5 times. For example, 12 pt type would increase to 18 pt. Other fractions can be used, like 1.3 em or 2.1 em. This gives "em" much more flexibility than either absolute or relative sizes. This flexibility is welcome by designers, but was not supported by browser developers.
Version 3 browsers either ignored or misinterpreted this method of changing type size. Netscape ignored it. Internet Explorer either ignored the current type size and based the change on 12 pt type or used the "em" size as the point size. See how your current browser works with "em" and "ex."
Here is ordinary text without any special style.
Here is a text set at 12 pt with a section set at 1.7 em. and then back to 12 pt.
Here is a text set at 8 pt with a section set at 1.7 em. and then back to 8 pt.
Here is a text set at 12 pt with a section set at 1.3 ex. and then back to 12 pt.
What does your browser do? Internet Explorer 5 seems to have no trouble with the size changes using "em" but shrinks the section using "ex" considerably.
Any whole number percentage can be used to increase or decrease the current font size. Application is very straightforward.
Here is ordinary text without any special style.
Here is a text set at 12 pt with a section set at 130%. and then back to 12 pt.
Here is a text set at 10 pt with a section set at 200% and then back to 10 pt.
Again, early browsers dealt with "font-size: percent" in different ways. Internet Explorer 3 based its calculations on a default size of 12 pt, negating the inheritance of font size. Early versions of Netscape changed the percent size directly to point size, i.e. 200% became 200 pt, obviously not a desirable result
Font Family | Font Size | Font Style | Text Style | Vertical Spacing | Horizontal Spacing
| Other Possibilities | |
|---|---|
| Start of site | Style Sheet Home |
| Start of site | Style Sheet Home |
| Send email | Robert Boardman |