Posted on

Fonts as a Design Element for Websites, Part 1

Web DesignChoosing your font

Fonts like images, beautiful colors, and user-friendly navigation are a design element. A font can either enhance or detract from the theme and feel of your web design. Successful web designers understand this and know or learn which typefaces are most active. The rules in the web environment are anything but arbitrary, so they need to be followed if a website is to engage the reader rather than turn them away.

There are a lot of fonts out there, so many that choosing a font can be overwhelming. The choice is essential, however. Indeed, you want people to read the useful content provided on your site. The intricate details of a font, such as weight, kerning, axes, strokes, and counters affect how we read, although we are rarely conscious of it. Yes, there are thousands of fonts from which to choose, but only a few are thriving on the Web. Readability and availability are issues. First, consider the difference between two popular font types: serif and sans serif.

Serif or sans serif

Serif fonts are fonts that have fine cross lines at the ends of the letters. Because the lines make each character more distinctive, serif text is typically easier to read in print, but generally harder to read on a monitor, particularly at smaller sizes. Serif fonts have used for centuries in printed books, magazines, and newspapers. Consider a serif font for your website if you wish to convey qualities like warm, personal, artistic, distinguished, traditional, conservative, or intellectual. Serif fonts are useful as headings or for text and documents intended to be downloaded and printed. The most common serif font is Times New Roman and just happens to be the default for most Windows-based browsers.

Sans means ‘without’ in French, so naturally, a sans-serif font doesn’t have the embellishments at the end of each stroke. Sans serif fonts generally thought to be better for the Web. This thought was particularly true when computer screens didn’t have a high enough resolution to capture the fine details of the serifs. They could appear blurred and unclear. Even today, on a screen, sans-serif fonts appear more readable. Sans serif fonts convey qualities like technical, fresh, clean, crisp, youthful, modern, or uncluttered. The most popular web font at the moment seems to be Verdana. It is a sans serif font and looks good on both PCs and Macs. Because of this, it is one of the most popular, widely-used fonts on the Web.

Availability constrained by technology.

Some fonts look better on PCs (such as Arial), while others look better on Macs (like Helvetica and Geneva). The range of fonts that webmasters can reliably select for their pages is not as wide as you may think. Even more limiting than avoiding Serif fonts (perhaps less of a requirement with today’s hardware), web designers have long been limited by what fonts website users have installed on their computers.

The list of universally available fonts is slowly growing, with additional fonts such as Cambria and Candara coming into the picture. In an ideal world, all fonts would be loaded onto all systems to open up design possibilities. Until then, conventional wisdom suggests that you use Web safe fonts from the following list.


  • Times New Roman/ Times
  • Georgia

San Serif

  • Arial Black
  • Arial/Helvetica
  • Comic Sans
  • Tahoma
  • Trebuchet MS
  • Verdana


  • Courier New/ Courier

By selecting one or more of these fonts for your website, you will be able to control somewhat how your text will appear in most browsers. Using Cascading Style Sheets, which is the underlying technology used by a web page to control its appearance, web designers can specify a list of fonts. In CSS your font-family code might look something like:

p{font-family: Verdana, Arial, Helvetica, Sans-serif}

The first three fonts are pretty standard, and chances are most computers will have at least one installed, but in case one doesn’t, you provide the generic sans-serif font for the browser to use.

Technology advances

Google Web fonts are fantastic free resources for web designers, as seen at the LearnWebDevelopment and Fox News sites. A web with web fonts is more beautiful, readable, accessible, and open. Web fonts are a newer approach that makes it quick and easy for everyone to use a broader selection of web fonts, over 500 font families, and counting. Google’s API service makes it easy to add Web fonts to a website in seconds. The service runs on Google’s servers, which are fast, reliable, and tested. Google provides this service free of charge. [Author’s note: To learn how to add Google Web fonts in WordPress themes the right way, optimized for the performance go to Http://]

Breaking the rules

Occasionally, there will be times when the “artist” in us desires to break the design rules. Thus, if you want to ensure your text displays in a specific font, you will need to make that text an image. Just be aware that if you’re going to make any changes to the content at all, you’re going to have to edit the image itself, which is much more tedious than going in and writing text. Do this sparingly as search engines won’t recognize the text in the picture. Using images for your document will also increase the download time of your pages. However, there are places where it’s appropriate to use an image to display text. A good example would be your company logo.

Remember, you are the designer.

While fonts may not seem as important as a design element as color and graphics, thoughtful consideration should go into your selections. The fonts will convey important information about your company, products, and services. They will help visitors successfully navigate your site and interact with you. Most importantly, the right fonts will contribute to your site’s overall visitor experience. If it’s positive, people will read your content, and you have made the right choices.
Fonts as a Design Element for Websites, Part 1Dr. John Elcik is the Pragmatic Web Designer. He is passionate about the application of web technologies to marketing communication issues. His specialties include web design, social media, and customer relationship management technologies. His search for the “right” font has been a pragmatic one. It has never been about looking for something unique and distinctive that expresses his particular aesthetic taste. Instead, “appropriateness” is the acid test that guides his choice of font. His favorite fonts are: Takoma, among the san serif, faces for body text, and Georgia, among the serif faces for headings. Typefaces that have several weights (light, regular, bold, etc.) and cuts (italic, condensed, etc.) work are good choices to become your personal “workhorse.”