One of the key elements of a good website design is the styling of the site's font. I think this is an area where many of the more 'mathematically inclined' web developers struggle. To help those out that are willing to take it, I'll show you how to take the default Times New Roman 16px font and make your design shine.
By default browsers will apply the following settings to your font out of the box:
body
{
color: #000000;
font-family: "Times New Roman";
font-size: 16px;
letter-spacing: 0px;
line-height: 18px;
text-align: left;
}
We're all familiar with the appearance of this font, and often times, are turned off by this font styling because of how common and boring it looks.
Gray is the New Black
First lets get rid of that default and obnoxious font color #000000. I recommend you choose a value between #888888 and #333333 for your website's font color. If you need help picking a color I recommend using Eric Meyer's Color Blend Tool. I would also like to point out that using a color lighter than #888888 will not have enough contrast on a white background and will be difficult for your users to read. On the flip side, a color darker than #333333 is starting to get into that loud and obnoxious range again. I personally like to choose #555555.
body
{
color: #555555;
}
Times New What?
Next lets 'can' Times New Roman for a different, less 'plain' font. A side note, Times New Roman is a great font, and there's a time and place for it, but being the browser default font, I tend to shy away from using it too often.
Font types can also be broke into two different groups. Serif and Sans Serif. Sans serifs fonts do not have the small tails after letters. An example of a sans serif font is Arial. An example of a serif font is Times New Roman. Below is a list of some of the more content-useful fonts to chose from when designing a website. Notice how some of the fonts take up more space than others:
Sans Serif
- ABCDEFGHIJKLMNOPQRSTUVWXYZ - Arial
- ABCDEFGHIJKLMNOPQRSTUVWXYZ - Verdana
- ABCDEFGHIJKLMNOPQRSTUVWXYZ - Tahoma
- ABCDEFGHIJKLMNOPQRSTUVWXYZ - Trebuchet MS
Serif
- ABCDEFGHIJKLMNOPQRSTUVWXYZ - Times New Roman
- ABCDEFGHIJKLMNOPQRSTUVWXYZ - Georgia
- ABCDEFGHIJKLMNOPQRSTUVWXYZ - Palatino Linotype
- ABCDEFGHIJKLMNOPQRSTUVWXYZ - Lucida Sans
Of the choices above, I find Arial to be the easiest on the eyes. If you want to be a bit edgier you can chose fonts 2-4 which are used a bit less than the others.
Need help? Check out my extremely useful Font Comparison Page to see which font you like best.
Size Matters
By default browsers will assign your font a font-size of 16px. While 16px is big enough that most users will find it comfortable to read, 12px is really the internet's de facto font-size. Visit some of your favorite websites and you'll discover that almost all of them use 12px as the main content's font-size. It's perfectly ok to use other font sizes, but for your main content I'd stick with 12px - 14px.
body
{
font-size: 12px;
}
Give Your Font Some Breathing Room With Line-Height
Probably the single most easy CSS change you can make to your font, with the biggest impact, is to adjust your line-height. Line-Height is the spacing between the lines of text on your web pages. By default browsers set this to 18px. At 18px you will have about 9px of space between your top and bottom line.
Line Height Comparison
The first block of text has the default line-height of 18px while the second block has a line-height of 27px. Notice how the second block of text is easier to read.
Straighten Out With Text-Align: Justify
My final recommendation is to experiment with the CSS property text-align, specifically with the justify value. By default, browsers will assign the value of text-align: left; to your text. Using the value of 'justify' we can make all of our blocks of text have straight edges on the left and right.
Text Align Comparison
The first block has text-align: left; while the second block has text-align: justify; I find that the justified text helps reinforce the grid layout in your web design.
Putting It All Together
Below is a summary of everything I've just went through. Also check out my step by step results page.
body
{
color: #555555;
font-family: Arial;
font-size: 12px;
line-height: 27px;
text-align: justify;
}
View the metamorphoses from Times New Roman to my example above. >>
