A Demonstration of CSS Font Properties
| Property | Value | Display in Your Browser |
|---|---|---|
| Property | Value | Display in Your Browser |
| font-family | serif | The quick brown fox jumps over the lazy dog. |
| sans-serif | The quick brown fox jumps over the lazy dog. | |
| cursive | The quick brown fox jumps over the lazy dog. | |
| fantasy | The quick brown fox jumps over the lazy dog. | |
| monospace | The quick brown fox jumps over the lazy dog. | |
| font-style | normal | The quick brown fox jumps over the lazy dog. |
| italic | The quick brown fox jumps over the lazy dog. | |
| oblique | The quick brown fox jumps over the lazy dog. | |
| font-variant | normal | The quick brown fox jumps over the lazy dog. |
| small-caps | The quick brown fox jumps over the lazy dog. | |
| font-weight | normal | The quick brown fox jumps over the lazy dog. |
| bold | The quick brown fox jumps over the lazy dog. | |
| bolder | The quick brown fox jumps over the lazy dog. | |
| lighter | The quick brown fox jumps over the lazy dog. | |
| 100 | The quick brown fox jumps over the lazy dog. | |
| 200 | The quick brown fox jumps over the lazy dog. | |
| 300 | The quick brown fox jumps over the lazy dog. | |
| 400 | The quick brown fox jumps over the lazy dog. | |
| 500 | The quick brown fox jumps over the lazy dog. | |
| 600 | The quick brown fox jumps over the lazy dog. | |
| 700 | The quick brown fox jumps over the lazy dog. | |
| 800 | The quick brown fox jumps over the lazy dog. | |
| 900 | The quick brown fox jumps over the lazy dog. | |
| font-size <absolute-size> |
xx-small | The quick brown fox jumps over the lazy dog. |
| x-small | The quick brown fox jumps over the lazy dog. | |
| small | The quick brown fox jumps over the lazy dog. | |
| medium | The quick brown fox jumps over the lazy dog. | |
| large | The quick brown fox jumps… | |
| x-large | The quick brown fox… | |
| xx-large | The quick brown… | |
| font-size <relative-size> |
larger | The quick brown fox jumps over the lazy dog. |
| smaller | The quick brown fox jumps over the lazy dog. | |
| font-size <length> (arbitrary examples— non-scalable values) |
12pt | The quick brown fox jumps over the lazy dog. |
| 1pc | The quick brown fox jumps over the lazy dog. | |
| 72pt | The… | |
| 1in | The… | |
| 10mm | The quick… | |
| 1cm | The quick… | |
| 12px | The quick brown fox jumps over the lazy dog. | |
| font-size <length> (arbitrary examples— scalable values) |
1em | The quick brown fox jumps over the lazy dog. |
| 1.2em | The quick brown fox jumps over the lazy dog. | |
| 1ex | The quick brown fox jumps over the lazy dog. | |
| 1.2ex | The quick brown fox jumps over the lazy dog. | |
| font-size <percentage> (arbitrary examples) |
100% | The quick brown fox jumps over the lazy dog. |
| 120% | The quick brown fox jumps over the lazy dog. | |
| 150% | The quick brown fox jumps over the lazy dog. | |
| 225% | The quick brown… | |
| 338% | The quick… |
Using the Shorthand font Property
{ font: 150% serif; }
The quick brown fox jumps over the lazy dog.
{ font: italic bold 100%/200% "Lucida Sans", Verdana, sans-serif; }
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. (Lines repeated to demonstrate the extra line-spacing, or “leading.”)
{ font: normal small-caps large Braggadocio, "Broadway BT", fantasy; }
The quick brown fox jumps over the lazy dog.
{ font: lighter x-large "Lucida Calligraphy", "Brush Script MT", "English 157 BT", cursive; }
The quick brown fox jumps over the lazy dog.
Daniel Greene 
Comments
2 responses to “CSS Font Properties Test”
[…] find it best to use the CSS font tags to set my font size. Daniel Greene’s excellent CSS Font Properties is a good page to look at the CSS medium font. From here I have a good reference on what size to […]
LikeLike
[…] my font size. I’ve talked about this before but this seems a better place for it. Check out Daniel Greene’s CSS Font Properties and look for font-size medium and set your default font, and […]
LikeLike