In CSS, there are totally 5 font families, each has its purpose.
Serif fonts
These fonts are proportional and have serifs. Use them for titles and headers.
Sans-serif fonts
These fonts are proportional and do not have serifs. Use them for contents.
Monospace fonts
Monospace fonts are not proportional. Use them when try to emulate typewritten text.
Cursive fonts
These fonts attempt to emulate human handwriting.
Fantasy fonts
Such fonts are not really defined by any single characteristic other than our inability to easily classify them in one of the other families. Use them when you are writing something fantastic!
I just created a demo page to use all these font families. Enjoy!
http://www.highub.com/lab/css-font-families.php
