Styling Text With CSS
Font & Text Properties

Applying Fonts
• Single Font Names:
body {font-family: Verdana;}
• Font Family Keywords:
body {font-family: serif;}
• Multiple Font Names:
body
{font-family: Arial, Helvetica,Verdana, san-serif;
}

Sizing Fonts - Keywords
Uses font-size property.
Absolute Keywords
• Browser computes the font size.
• Available keywords: xx-small, x-small, small,
medium, large, x-large, xx-large.
Ex. body {font-size: small;}

Sizing Fonts - Keywords
Absolute Keywords
• Medium is browser default for font size.
• Medium is equivalent to about 16 points.
• Scaling factor of 1.5 between each keyword.
• Scale remains constant irrespective of the
physical size the text is rendered in.

Sizing Fonts - Keywords
Relative Keywords
• Only two possible values: larger and smaller.
• Values are relative to the size of parent
element.
body {font-size: medium;}
h1 {font-size: larger;}
In the above example, h1's size will
increase to the keyword large.

Sizing Fonts - Lengths
Length Values
• Can be either relative or absolute values.
• Relative length values are:
• em: relative to the font-size of parent
element.
• ex: relative to height of letter x in
specified font.
• px: relative to the resolution of the device.

Sizing Fonts - Lengths
Absolute Length Values
• Useful primarily when creating print-version
of web document.
• Absolute length values are:
• inches (in)
• centimeters (cm)
• millimeters (mm)

Sizing Fonts - Percentages
• Always used relative to keyword or length
value.
Ex:
body {font-size: small;}
h1 {font-size: 150%;}

Sizing Fonts - Techniques
• Most common method is to combine
percentages with either keywords or ems.
• Set a base font size with the body tag, then
increase/decrease text size as desired using
percentages. (Recommended method).
• Base font size of small is recommended
(corresponds to about 12 px).
• Avoid setting font size in pixels as IE does
not scale pixels; users will not be able to
increase or decrease font size.

Font Weight & Style
Font Weight
• How bold a font is (or not).
• Uses font-weight property.
• Can be set in numeric values from 100-900.
• 100 - very light
• 900 - darkest
• 400 - normal
• Can be set in keywords:
• normal (corresponds to 400)
• bold (equivalent to 700)
• bolder and lighter

Font Weight & Style
Font Weight
Only use number values that correspond
directly to known weights:
400 for normal
700 for bold
Ex:
h1 {
font-size: 150%;
font-weight: bold;
}

Font Weight & Style
Font Styles
• Uses font-style property; alters font face.
• Values are:
• normal - default and typically does not need
to be set.
• oblique - only applied when available on user
computers.
• italic: most commonly used.
Ex
h2 {font-size: 130%; font-style: italic;}

Aligning Text
• Uses text-align property.
• Values are:
• left - browser default.
• center - Useful for header, captions,
etc. Not recommended for body text.
• right: most commonly used.
• justify: equal space on left and right
sides, but spacing can be awkward.
Ex
h1 {text-align: center;}

Text Decoration
• Uses text-decoration property.
• Values are:
• none - primarily used to remove
underlines from links in navigation.
• underline: underlines selected text.
• overline: places line above selected
text.
• line-through: Strikethrough.
a {text-decoration: none;}

Line Height
• Uses line-height property.
• Sets spacing between lines in a section of
text.
• Can be set using length, percentage,
number, or em.
• Default line height for web pages is
around 1.2 em.
body {line-height: 1.5;}