Modify Fonts with CSS

< Previous - Add a Style Sheet | Quick CSS Course (5 days) | Beginning CSS Articles | Next - Adjust Text with CSS >

The font family defines the face of the font, such as Geneva, Times New Roman, or fantasy. You list the font families you'd like your property to use in order of preference separated by a comma, with multiple word font names indicated in quotes:

font-family : "Times New Roman", Courier, serif;

• What is a Font
• Syntax of the font-family Property
• What are generic font families
• How to Decide Which Font Family to Use
• The font-family Property

Defines the size of the font. There are four types of sizes:

• absolute - based on the browser default (medium):
  xx-small, x-small, small, medium, large, x-large, and xx-large
• relative - relative to the current size:
  smaller or larger
• length - a number with a unit of measure:
  points (pt), pixels (px), centimeters (cm), milimeters (mm), inches (in), ems (em), or exes (ex)
• percentage - a number relative to the current size
  %

• How do you define the size of a font?
• The font-size Property

Defines the boldness of the font. It can be normal (the default), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, or 900.

• Font Weight
• The font-weight Property

Defines if the font is italic or oblique. It can be defined as normal (the default), italic, or oblique.

• Font Style - Italics and Emphasis in Web Typography
• The font-style Property

Changes the font to small-caps. It can be defined as normal (the default) or small-caps.

• Small Caps - A Font Variant
• The font-variant Property

This is a shorthand property. It allows you to define all of the above font styles, plus the line height of your text.

font: font-style font-variant font-weight font-size/line-height font-family;

• Syntax of the Font Property
• The font Property

CSS 3 brings us a lot of additional font properties to style fonts. Some work now and some don't. Always be sure to test in your browsers.

• font-size-adjust
• font-stretch
• font-effect
• font-smooth
• font-emphaisize-style
• font-emphasize-position
• font-emphasize

Dynamic fonts allow you to define a font face or property that isn't necessarily on the customer's computer. They are also sometimes called embedded fonts. They are not widely supported, so be sure to test before you rely on them.

• Dynamic Fonts

< Previous - Add a Style Sheet | Quick CSS Course (5 days) | Beginning CSS Articles | Next - Adjust Text with CSS >