Fonts and CSS

There is a great deal of formatting that you can apply to plain-old text using CSS. This includes the font to use, the size of the font, and bold, italic, and underlined styling. In this section we’ll be going through all of these CSS properties in detail.

The first property you’ll need to know is the “font-size” setting. You can specify the size of the font in pixels, points, percent, or em. If you specify it in pixels, it will always look the same across browsers and devices, relative to the rest of your page. Points are better suited to printing pages, for example if you use a special CSS stylesheet for print media. Percent-based and em-based font-size settings are based on the default font-size for the document; percents over 100% or em > 1 increases the font-size for that element, relative to the document default; and the opposite effect is accomplished using percents < 100% or em < 1.

Here’s an example of using font-size:

                    	
a {
	font-size: 18px;
}
						
					

There are three important font settings that CSS provides: italics, bold text, and underlining. Here are those three styles being used:

                    	
p {
	font-style: italic;
	font-weight: bold;
	text-decoration: underline;
}

p.noStyle {
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
}
						
                    

“font-style” controls whether or not the element will have italic text; when it’s set to “italic” it does, and when it’s set to “normal” it doesn’t. “font-weight” sets whether the element has bold text; “bold” makes it bold, “normal” makes it normal. Finally, “text-decoration” underlines the text when it’s set to “underline”; it also has a setting for strikeout text, “line-through”. The horrifying blinking text effect can also be set using “text-decoration: blink”, but that particular effect is rarely used anymore.

Fonts themselves, such as Helvetica and Palatino, have tons of history behind them, dating back to the days when print publications were the standard choice - and the only choice. For the purposes of web development, you’ll find only a handful of fonts are widely available to end-users throughout the world.

There are four main groups of fonts used on the web: “serif”, “sans-serif”, “monospace”, and the uncommon “cursive”. A serif font has embellishments on the edges of each letter, which make font easier to read on paper. Sans-serif fonts have a somewhat blockier feel, and are considered easier to read on screens and electronic devices. Monospace fonts are essential for displaying programming code or other width-specific text, like ASCII text art, for example.

When you’re specifying a font-family, you could simply say “serif”, and a serif font would be selected by the browser. Here’s an example of doing precisely that:

                    	
p {
	font-family: serif;
}
						
					

In practice, you’ll probably want to specify a particular set of fonts - you just have to list your fonts in the order of precedence, separated by commas, like so:

                    	
p {
	font-family: Arial, Helvetica, sans-serif;
}
						
					

The most common fonts include Arial, Helvetica, Verdana, Palatino, Palatino Linotype, Georgia, and Tahoma. There are many others, some of which are used frequently, and some more rarely. Get creative with your typography, try new things, and over time you’ll find which styles best suit your work.