Knowledge of Font – Part 1

fountain-of-knowledgeA font refers to the typeface that is used to display text.  For CSS, there are 5 major groupings of these: serif (letters have brackets on their ends), sans-serif (no brackets), monospace (each letter takes up the same amount of space, programming code is often displayed this way), script (like cursive handwriting), and fantasy (usually used for headings).  In CSS, this can be defined with font-family property or as part of the font property which also lets you define the font-style (normal, italic, oblique), font-variant (normal, small-caps), font-weight (normal, bold, bolder, lighter, or by number 100-900), and font-size/line height  (words, units of length, or %).

On my first web site, I found a beautiful font to use for my headings.  It was a variant of Ondine.  When I was done, I was very pleased until I checked out the site on another computer.  My heading were in the default serif font.  In those days, if the font you were utilizing was not on the user’s computer, a default font was displayed instead.  This is when I found out about web safe fonts and font stacks.  Web safe fonts were fonts that were included with most operating systems so they were likely to be present on most machines.  The serif fonts included “Times New Roman” and Georgia.  Sans serif includes Arial, Helvetica, Tahoma, and Verdana.  These changed over time as typefaces became more widespread.  Notice that names with more than one word need to be enclosed in quotes.

Font stacks in your CSS allow you to specify your preferred font but designate back-ups in case that font is not on the user’s system.  These stacks usually end with the family name so that if none of the named fonts are found the default for that family can be used.  For example, body {font- family: Arial, Helvetica, sans-serif; } would tell the browser to use Arial for the body text.   If Arial is not found, try Helvetica and, if all else fails, use the default sans-serif font.  The HTML tag has been deprecated as this has more to do with presentation than content.

In general, it is probably best to limit the number of fonts that you use on a page.  Beyond 2 or 3, it is probably going to get distracting.  If you are going to use 2 different fonts.  You should use them for 2 different purposes like headings versus body text.  Also, the two should be distinct from each other like serif and sans-serif or script and sans-serif.  If they are too similar, it can be actually detract rather than add to the visual appeal and you should just pick one.

Fonts, like images, have owners.  You do not have free rein to use any font you happen to find on your computer or on the web.  If you are using a font, it is best to be sure that you have the rights to use it in that way.

About Robert

Robert is a novice web site developer. A lack of professional training has not prevented him from creating some very nice websites for small businesses who would otherwise have gone without a web presence.


Subscribe to our e-mail newsletter to receive updates.

No comments yet.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.