Font Sampler

Property Description Values
font–family Defines a font family to be used in the display of an element’s text.
  • family–name
  • generic–family
  • inherit
Text which displays in family–name of Verdana, Arial & Helvetica or the generic–family of sans–serif code is font–family:Verdana, Arial, Helvetica, sans–serif;
Text which displays in the family–name of Georgia or the generic–family of serif
code is font–family:Georgia, serif;
font–size Sets the size of a font
  • word
  • pixels
  • inches
  • Percentage
Text which displays using a word – the code is font–size:small;
Text which displays at a fixed size of 20px – the code is
font–size:20px;
Text which displays at a fixed size of 0.105in – the code is
font–size:0.105in;
Text which displays at a relative size of 1.5em – the code is
font–size:1.5em;
Text which displays at a relative size of 150% – the code is font:size:150%;
font–style Sets the style of the font
  • normal
  • italic
  • oblique
Text which displays at font–style of "italic" – the code is font–style:italic;
Text which displays at font–style of "oblique" – the code is font–style:oblique;
Text which displays at font–style of "normal" – the code is font–style:normal;
(used to turn off a previous style of italic or oblique)

font–weight
 Sets the weight of a font
  • normal
  • bold
Text which displays at font–weight of "bold" – the code is font–weight:bold;
Text which displays at font–weight of "normal" – the code is font–weight:normal;
(used to turn off a previous style of italic or oblique)

font–variant
 Used to define small–caps font or a normal font
  • normal
  • small–caps
Text which displays at font–variant of "small–caps" – the code is
font–variant:small–caps;
Text which displays at font–variant of "normal" – the code is font–variant:normal;
(used to turn off a previous style of small–caps

font
 A shorthand property for setting all of the properties for a font in one declaration
  • font–style
  • font–variant
  • font–weight
  • font–size/line–height
  • font–family
Text which displays with a font shorthand – the code is
font:italic small–caps bold 14px/22px Arial, Helvetica, sans–serif;

Here is the code in an easier to read form –
font:small–caps italic bold 11px/18px sans–serif;

This code font:italic 12px/200% Georgia serif produces this text sample