How to Choose the Best Font in CSS3 - dummies

How to Choose the Best Font in CSS3

By John Paul Mueller

Text, as an abstract presentation of concrete concepts, ideas, and objects, requires fonts for presentation. The font chosen in CSS3 for the text often does as much to convey an idea as the text itself. Spend some time looking at greeting cards and you find that the purveyors of these missives use fonts to present the message in unique ways.

A soft font accompanies a romantic message; a comical font helps us laugh at a funny message. You can find online sources such as Onextrapixel that look at the psychology behind using a font. The following list does help you understand the standard CSS properties at your disposal for obtaining access to fonts and using them on a page (in your own pages, make sure you use the capitalization shown):

  • font-family: Defines the name of the font. There are three font classifications typically used as part of CSS (and most CSS pages use all three unless you also specify the src property):

    • Specific: Provides a precise presentation wherever it’s used. For example, when you specify Arial as a font, you know that it will have a specific presentation everywhere you use it. A specific font must be installed on a system or the browser will ignore it.

    • Web safe: This is a font type that provides a less-precise presentation but is more likely to appear on the user’s machine. What you’re actually requesting is one of several fonts that have similar appearances. The presentation is often close enough to the original that the user won’t even notice.

    • Generic: A non-specific font that fits a general description of a type of font. Such font names include cursive, fantasy, monospace, sans-serif, and serif. What you actually end up seeing onscreen may not convey much of the original message at all, but these selections are guaranteed to work on every platform.

  • font-size: Determines the size of the font when compared to other fonts on the page, or provides a specific font size. You can use one of these techniques for defining the font size:

    • Specific size: As with most CSS objects, you can specify an exact size for a font, using pixels, ems, or some other absolute or relative measurement.

    • Percentage: Defines the size of a font as a percentage of a parent element’s font size. Specifying a size above 100% increases the font size, specifying a value below 100% decreases the font size.

    • Keyword: Specifies the font size using relative terms: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, and inherit (where the font size is inherited from the parent).

  • font-style: Determines the style of font that the browser creates. The browser must support the style and the font must supply the style in order for this property to take effect. The font style keywords are: normal, italic, oblique (normally a stronger italic), and inherit.

  • font-variant: Specifies whether the font should be presented in a variant form. Not all browsers and fonts support this feature. The keywords for this property are normal, small-caps, and inherit.

  • font-weight: Determines the relative darkness of the font and the width of its strokes. There are two methods for defining the font weight:

    • Numeric: A value specifying the relative weight of the font where a value of 400 is normal and 700 is bold. The numeric values are: 100, 200, 300, 400, 500, 600, 700, 800, and 900. In most cases, you must use the numbers precisely as specified here — a browser may ignore a value of 150.

    • Keyword: Specifies the font weight using relative terms: normal, bold, bolder, lighter, and inherit.