How to Use Typography in Websites
Typography---or, put simply, making text look good---is one of the most important facets of web design, but it's also one of the most overlooked. Making your content clear and readable not only aids your design, it subconsciously makes the content on your site more enjoyable and will keep readers coming back for more. It's not hard, either: If you know what rules and elements to add to your web pages' style sheets, you can vastly improve the look of your text in five minutes.
Other People Are Reading
Instructions
-
-
1
Decide what fonts you want to use before you touch your website code. The web has a limited number of font families that all browsers can recognize; see Resources below for a list of web-safe fonts. It's also helpful to understand the difference between serif and sans-serif fonts. Serif fonts, such as Times New Roman, look like traditional newsprint or magazine fonts---letters have little tails on the edges. Sans serif fonts, such as Arial, do not, and look blockier. Combining one serif and one sans serif font---for example, using a serif font for your site's headings and a sans serif for the article bodies---usually produces an aesthetically pleasing typographic style.
-
2
Add font stacks to your website's style sheet (usually a CSS file). Font stacks are lists of fonts that serve as instructions to web browsers. If the browser's computer recognizes the first font, use it; if it doesn't, use the second font, and so on. To declare a universal set of fonts in the <body> section of your HTML pages, the syntax will look like this:
body {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
The style sheet first tells the browser to use Lucida Sans Unicode. If it doesn't recognize that font---for example, Macs don't have it installed by default---it moves on to the similar font Lucida Grande (which Macs do recognize). If for some reason it doesn't recognize either of those, like on certain Linux setups, it uses the computer's default sans serif font. -
-
3
Declare the line-height and font-size elements for your text as well. On most browsers, the default line height is too cramped. On the other hand, you might think the default font size is too big. But make sure not to set it to anything less than 11 pixels. Not everybody's eyes are as good as yours, and some people like to lean back when they read.
-
4
Change the default color of your fonts. If you're using a dark background, you'll want to make your font lighter, but don't just leave your font black. High contrast can be an effective style when done correctly, but usually you'll find that text is easier to read when it's a shade of gray as opposed to fully black or white.
The following is a set of style rules you can place on your style sheet that use all of these elements together:
body {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size:12px;
line-height:1.8em;
color:#555555;
}
h1 {
font-family: Georgia, serif;
}
On the left of the picture, you can see what an article would look like without any formatting. On the right, you can see what the same text looks like with the above style rules.
-
1
