The various effects of font related styles.

Effects of "font-variant"

font-variant: normal

font-variant: small-caps

Effects of "font-style"

font-style: normal

font-style: italic

font-style: oblique

Effects of "font-family"

font-family: Arial, Helvetica, sans-serif;

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

font-family: "Courier New", Courier, monospace;

Effects of "font-size"

font-size: 0.5em;

font-size: 1em;

font-size: 1.5em;

font-size: 2em;

Effects of "line-height"

line-height: 0.5em;

line-height: 1em;

line-height: 1.5em;

line-height: 2em;

Effects of "font-weight"

font-weight: lighter

font-weight: normal

font-weight: bold

font-weight: bolder

This item is a <p> or paragraph tag:

Paragraphs have linebreaks before and after. They set margins and padding. The text wraps automatically, but expands to take the available width of it's container.

This item is a <span> or text span: This span displays inline and has italic text.This span is inside the italic and has small-caps