Communication

CSS Font Properties Test

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 first published this document in February 1998. This page resided at http://danielgreene.com/fontprop.html from 1998–2010.
Standard

3 thoughts on “CSS Font Properties Test

  1. Pingback: CSS Font Properties Test « TerpTrans

Comments welcome

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s