CSS1 fonts test page

This page tests the font properties in CSS1. The gridlines in the background are spaced at 20 pixel intervals.

1 font-family

These are the five generic font families in CSS1. The text below should appear in their respecive font family:

1. serif font family
2. sans-serif font family
3. monospace font family
4. cursive (if there is no cursive font available, a slanted serif is a possible replacement. Then, even if 'font-style' has a value of 'normal', the font could be slanted)
5. fantasy (if there is no fantasy font available, the most "characteristic" font family should be used as a replacement. In X11, this is arguably the scalable courier

2 font-style

This paragraph has 'font-style' set to 'normal' and should be upright

This paragraph has 'font-style: italic; font-family: sans-serif' and should be slanted.

This paragraph has 'font-style: italic; font-family: serif' and should be slanted.

This paragraph has 'font-style: oblique; font-family: sans-serif' and should be slanted.

This paragraph has 'font-style: oblique; font-family: serif' and should be upright.

3 font-variant

This paragraph has 'font-variant: normal'.

This paragraph has 'font-variant: small-caps' and should therefore be set in small-caps fonts. If a small-caps variant of the font family in use is not available, the UA can generate it by scaling uppercase glyphs. As a last resort, uppercase letters will be used.

4 font-weight

4.1 absolute values

This paragraph is bold.

This paragraph is normal.

4.2 relative values

This paragraph is 'normal'

This paragraph is 'bolder' so it should at least not be any lighter than the line above

This paragraph is 'lighter' so it should at least not be any darker than the line above

This paragraph is 'lighter' so it should at least not be any darker than the line above

This paragraph is 'lighter' so it should at least not be any darker than the line above

4.3 numerical values

1. 'font-weight' is set to 100 and the text should be no darker than the next line
2. 'font-weight' is set to 200 and the text should be no darker than the next line
3. 'font-weight' is set to 300 and the text should be no darker than the next line
4. 'font-weight' is set to 400 and the text should be no darker than the next line
5. 'font-weight' is set to 500 and the text should be no darker than the next line
6. 'font-weight' is set to 600 and the text should be no darker than the next line
7. 'font-weight' is set to 700 and the text should be no darker than the next line
8. 'font-weight' is set to 800 and the text should be no darker than the next line
9. 'font-weight' is set to 900 and the text should be no darker than the next line

5 font-size

5.1 absolute keyword sizes

The table below contains P and H? elements with 'font-size' set to absolute keyword values. Text on the same row should have the same size, and the size should correspond to the keywords.

P elements	H? elements
font size is set to 'xx-small'	font size is set to 'xx-small'
font size is set to 'x-small'	font size is set to 'x-small'
font size is set to 'small'	font size is set to 'small'
font size is set to 'medium'	font size is set to 'medium'
font size is set to 'large'	font size is set to 'large'
font size is set to 'x-large'	font size is set to 'x-large'
font size is set to 'xx-large'	font size is set to 'xx-large'

The recomended scaling factor between the keywords above is 1.5 for screens. For bitmap fonts, the UA may want to make the table based on the available font sizes.

5.2 relative keyword sizes

This paragraph is 'medium'

This paragraph is 'larger' so it should at least not be any smaller than the line above

This paragraph is 'smaller' so it should at least not be any larger than the line above

This paragraph is 'smaller' so it should at least not be any larger than the line above

This paragraph is 'smaller' so it should at least not be any larger than the line above

5.3 pixel values

1. This paragraph is 20px.
2. This paragraph is +15px.
3. This paragraph is 10px.
4. This paragraph is 5px.
5. This paragraph is 0px and should not be visible.

5.4 point and pica values

In the table below, text on the same rows should have the same size:

This paragraph is 2pc.	This paragraph is 24pt.
This paragraph is 1pc.	This paragraph is 12pt.
This paragraph is 0.5pc.	This paragraph is 6.0pt.

5.5 absolute length values

In the table below, text on the same rows should have the same size:

This paragraph is 2cm.	This paragraph is 20mm.	This paragraph is 0.78in.
This paragraph is 1cm.	This paragraph is 10mm.	This paragraph is 0.39in.
This paragraph is 0.5cm.	This paragraph is 5.0mm.	This paragraph is 0.19in.

This paragraph is 0 and should not be visible.

5.6 em and percentage values

In the table below, the text on the same rows should have the same size:

6 font

The text strings below denote the values that should be derived from the shortcut 'font' declarations:

• font-style: italic; font-variant: normal; font-weight: bold; font-size: medium; font-family: sans-serif;
• font-style: italic; font-variant: normal; font-weight: bold; font-size: medium; font-family: sans-serif
• font-style: normal; font-variant: small-caps; font-weight: normal; font-size: medium; font-family: sans-serif

7 Invalid declarations

All declarations set on the text below are invalid and should be ignored. I.e., all text should be upright, monospace, have normal width and use the same font size.

1. upright, monospace, normal width, uniform size
2. upright, monospace, normal width, uniform size
3. upright, monospace, normal width, uniform size
4. upright, monospace, normal width, uniform size
5. upright, monospace, normal width, uniform size
6. upright, monospace, normal width, uniform size
7. upright, monospace, normal width, uniform size
8. upright, monospace, normal width, uniform size
9. upright, monospace, normal width, uniform size
10. upright, monospace, normal width, uniform size