Subscribers
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.
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;
}
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:
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.
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;
}
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.
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.
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.
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.
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. >>
Great article, other than putting "Lucida Sans" under the serif fonts. I especially agree with the justify alignment - I've been using it constantly on typed homework assignments since middle school - it works well on the web too, makes a page look more tidy and less chaotic. Increasing line height/spacing helps when you are reading on a wide layout - you can easily jump to the next line.
with justify, you get insane space betwen words.
her's a great article abour vertical rythm
http://www.alistapart.com/articles/settingtypeontheweb
@Chris, thanks for pointing that out, I will correct that.
@Paul: I think there's a time and place for justify. If you have a very narrow column, say 100-300px wide, then I wouldn't use it. For large area's of text such as your main content DIV, I think today's browsers do a wonderful job with justifying it compared to other software I've used such as graphical editing programs like Adobe Fireworks.
