Eye of Design helps users find information on web design and development along with feature a gallary of works created by Gary R. Hess.

Font Properties

No matter if you are a beginner or expert in CSS you will want to change font properties. Using CSS you may change the font's style, variant, weight, size and/or family.

Font Style
Example: font-style: italic;
The font style may be used as either normal, italic or oblique.

Font Variant
Example: font-variant: small-caps;
Font variant may either be in normal or small-caps.

Font Weight
Example: font-weight: bold;
Bold is the most common font-weight however these may be used:

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300 up to 900
The numbers 100-900 may be used to indicate the darkness of the font. Although, I have personally tested each of these and the only ones that seem to work properly in browsers other than Internet Explorer are normal, bold and lighter.

Font Size
Example: font-size: 10px;
px,em or pt may be used when changing the font size in CSS.

Font Family
Example: font-family: "Times New Roman", Times, serif;
Atleast one generic family name should be listed. Generic meaning either serif or sans-serif. Also atleast three fonts should be listed and font names which have spaces should be surrounded by paranthesis. For a list of web safe fonts see browser safe fonts.

Font Shortcut
Instead of listing out all the font properties seperately you may use the font shortcut to list them all in one line. To do this, you must list the properties in this order:

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size
  5. font-family
For an end result looking like: font: normal small-caps bold 24px "Times New Roman", Times, serif;. You don't have to include the properties you do not use.

In addition, line height may be specified within the font property. To do so, use /line-height directly after the font-size. Where line-height equals the percentage or absolute value. For example: font: normal small-caps bold 24px/1.5 "Times New Roman", Times, serif;.