SEO Web Design by BardicMedia.com

The best practices for font usage on the web are a little different than for print. Although controlling fonts in a web page or blog is more limited and involved than in a page layout program, there’s a lot you can do to make your text layout look good.

For most purposes on the web, you’ll use sans-serif fonts. Sans-serif fonts for the body of your articles is probably the best way to go, since these are the easiest to read, especially those like Verdana which were designed for the screen.

Serif fonts can be used in the right size and color. The Washington Post uses a serif font to good effect for their main articles, giving the site a classy, serious look, but notice how everything else on the page is sans-serif. This keeps the page looking clean. Another use of serifs is to turn the print design maxim: ‘Serif for body text, Sans-serif for headers’ on it’s head. Since we’re already using sans-serif for body text, try a tasteful use of serif for headers, subheaders, or pull quotes.

Capitalization, small caps or title case can help make headers stand out when using the same font for both headers and text. Define the capitalization and font-weight in your Cascading Style Sheet (CSS.) Other cool font tricks include bolding a smaller font size for mini sub-headers and captions, and highlighting key words and phrases within an article to help the reader – just create a span class in CSS using font-weight or color. If you want spacing between paragraphs, don’t just add an extra return, define a top-margin in the paragraph tag in the style sheet. Alternating line-spacing for different sections, different information types and for navigation can make things clearer too, as can plenty of white space.

Avoid using too many text graphics for headers just to get to use a fancy fonts – search engines can’t see them. This goes for navigation, too. Those sexy roll-over nav-items with changing color graphics aren’t really helping anything, and there are some cool effects in CSS to achieve a similar purpose. Just be careful, don’t overdo it. Remember, keep it appropriate to the subject. If you’re a realtor you might not need to get too fancy with fonts, but if you’re a rock band, go for it.

Click here to learn more about using Cascading Style Sheets to control fonts in web pages.

Cascading Style Sheets (CSS) have become the industry standard for controlling the appearance of fonts.

Think of CSS as a control panel for all the fonts on an entire web site. CSS allows you to quickly change fonts, colors and other attributes globally. Not only can you create a more custom look and feel, even in wordpress templates, but your pages will load faster. The cleaner code in your html page – minus all those font tags – is easier to work with.

You can learn the basic of CSS in the book “CSS: The Definitive Guide,” published by O’Rielly or try out an online web design class. www.killerwebdesigncourse.com is a course that does a thorough job of covering what you need to know.

A good visual editing program for writing clean CSS code which will validate is Top Style Pro. There’s a free trial version for the PC on their website.

Fonts for the web can be a scary subject, but the best design practices are really pretty simple.

First, you should be using Cascading Style Sheet (CSS) in your web pages. Believe me, your life will be better for it.

When starting a project, figure out what you want the page to look like in a graphics program with good type tools. Photoshop will do. Determine what font colors, header sizes, line-height, paragraph-spacing and other attributes will look good for the type of web site. Once you know what you want, redefine the paragraph and header tags in your Cascading Style Sheet to recreate your design. Set the font to what you want, but give several choices, because not all fonts are loaded on every computer. For example: p { font-family: Verdana, Arial, Helvetica, sans-serif; } lets the browser choose which font to supply based on the user’s system. Now that you’ve redefined the tag, you can specify the font family, color, size, line-height – even letter spacing and margins – for your default paragraph in all your pages, before ever having to create custom styles.

Use only web-safe fonts. This limits your options, but also limits the damage you can do. Be creative with less and you’ll have a nicer final product.

Click here to learn more about best practices for font usage in web design.