GeoffKnagge.com

Font properties

font-family

Valuecomma seperated list in priority order, containing either a family-name or a generic-family
Used Withall elements
InheritedYes
example BODY { font-family: "Times New Roman", serif }
  • Font names containing spaces must be quoted, otherwise only the first word is used
  • Values can be one of two types :
    • family-name : The name of a font which may be installed, such as Times New Roman.
    • generic-family : one of serif, sans-serif, cursive, fantasy, monospace. One of these should be offered as the last alternative.

font-style

Valuenormal | italic | oblique
Initialnormal
Used Withall elements
InheritedYes
example BODY { font-style: italic }

font-variant

Valuenormal | small-caps
Initialnormal
Used Withall elements
InheritedYes
example BODY { font-variant: small-caps }

font-weight

Valuenormal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initialnormal
Used Withall elements
InheritedYes
example BODY { font-weight: 900 }

Normal and 400 are the same, as are bold and 700. The bolder and lighter are values relative to whatever the inherited value would have been.

font-size

Value absolute-size | relative-size | length | percentage
Initialmedium
Used Withall elements
InheritedYes
Percentage Valuesrelative to parent element's font size
absolute-size is one of xx-small, x-small, small, medium, large, x-large, or xx-large.

relative-size is larger or smaller and represents an absolute-size, relative to what is inherited.

length is a positive number with the units em, ex or pt. Values are relative to what would have been inherited, but on other properties it refers to the font-size of the current element.

Examples:
  P { font-size: 12pt; }
  P { font-size: larger }
  P { font-size: 150% }
  P { font-size: 1.5em }

font

Value[ font-style || font-variant || font-weight ] font-size [ / line-height ] font-family
Used Withall elements
InheritedYes
ExampleP { font: 12pt/14pt sans-serif }
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.