Posted on

Fonts as a Design Element, Part 1

Choosing your font

The Pragmatic Web Designer uses fonts as a design element. Fonts like images, beautiful colors, and user-friendly navigation are design choices. 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 effective. 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 many fonts out there, so many that choosing a font for your website can be overwhelming. The choice is important, however. Certainly, 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. The font that you choose could determine how much text is read and how effective your site is.

Yes, there are thousands of fonts from which to choose, but only a few are successful on the web. Readability and availability are the 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 on a monitor, particularly at smaller sizes. Serif fonts have been used for centuries in printed books, magazines, and newspapers. Consider a serif font for your website if you wish to convey warm, personal, artistic, distinguished, traditional, conservative, or intellectual qualities. Serif fonts are effective as headings or for text and documents intended to be downloaded and printed. The most common serif font is Times New Roman and happens to be the default for most windows-based browsers.

Sans means ‘without’ in French, so naturally, a sans-serif font doesn’t have embellishments at the end of each stroke. Sans serif fonts are generally thought to be better for the web. This 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 technical, cool, clean, crisp, youthful, modern, or uncluttered qualities. 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.

The range of fonts that web admins can reliably select for their pages is not as wide as you may think. Some fonts look better on PCs (such as Arial), while others are best viewed on Macs (like Helvetica and Geneva). 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.

Serif

  • Times New Roman/ Times
  • Georgia

San Serif

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

Monospace

  • 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 to be used. In CSS, your font-family code might look something like this:

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

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

Technology advances

Google Web fonts are an amazing free resource for web designers, as seen at the LearnWebDevelopment and Fox News sites. A web with web fonts is more beautiful, readable, accessible, and open. This newer approach 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://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/.]

Breaking the rules

Occasionally, there will be times when the “artist” in us desires to break the design rules. Thus, if you absolutely 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 want to make any changes to the content, you will have to edit the image itself, which is much more tedious than going in and editing text. This should be done sparingly as search engines won’t recognize the text in the image. Using images for your text 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 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, your content is read, and you have made the right choices.

Dr. John Elcik is a 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. Rather, “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/or cuts (italic, condensed, etc.) work are good choices to become your personal “workhorse.”
Pragmatic Web Designer uses Fonts as a Design Element

Dr. John P. Elcik, IV
The Pragmatic Web Designer

Posted on

Fonts as a Design Element, Part 2

Enhancing site readability

You want people to read the useful content provided on your site. Aside from your choice in font family, there are additional things you can do to improve the readability of your text.

 

As a designer, one needs to decide how or whether to mix and match fonts. Most of the time, one typeface will do, especially if it’s one of the workhorses with many different weights that work together. If we reach a point where we want to add a second face to the mix, it’s always good to observe this simple rule: keep it the same, or change it a lot — avoid incremental, meaningless variations.

 

Font size

Now that you’ve chosen your fonts, it’s time to establish the size of your main body text, headings, sub-headings, and other text elements. Suggested font sizes for these text elements are:

  • Text: 10px or 12px
  • Main Headings: 14px, 16px or 18px
  • Sub-Headings: 12px or 14px
  • Captions: 8px, 9px or 10px

Better though is to use relative measurements like % or em. Relative measurements allow anyone to increase or decrease the size to one they find more readable. It’s a good idea for accessibility to assist those with poorer eyesight. Books have come in oversized print for years for a reason. Not everyone can read smaller print. Be kind and allow visitors to resize your text.

1.0em should be equivalent to 16px.  Most people find a font size of about 14px or 0.90em to be comfortable to read, but everyone has different preferences. To be on the safe side, set your default font size to something between 0.8em and 1.0em (12px – 16px) and then let your visitors adjust the size to their wishes.

Contrast

One essential thing is the contrast between the color of your text and the color of the background behind it. The more the two contrast, the easier the text will be to read. Black text on a white background will always be best, but it’s ok to use different colors. Just make sure your text color stands out against your background color.

Line length

Line length is another issue in readability. Too many words on one line make it hard to follow a block of text. With the increase in fluid designs and the lack of support for the max-width property in Internet Explorer, more and more sites are displaying long lines of text that are difficult to read. You can usually get away with a long line of text online than in print, but try to keep those lines from getting too long. 60-70 characters ought to be the maximum.

Your font choices, font size, contrast, and line length will make a huge difference in the readability of your site. And a sure way to lose visitors is to provide content they have trouble reading. How to manage your use of fonts You can add style and interest to your text by using “attributes.” These stylistic elements introduce variety and help you better convey your message. The most common font attributes are plain, bold, italic, underline, capitals, and color. When used, these elements become part of your site’s overall design. If used sparingly, they can be effective. When overused, your page can look cluttered and unprofessional. Be consistent when applying attributes, and always remember that “less is more.”

  • Plain: Use for main body text on white or light backgrounds and large headings.
  • Bold: Use for emphases, such as headings and sub-headings, keywords, and small blocks of words. Use sparingly.
  • Italic: Use for emphases, such as keywords, quotes, photo credits, captions, and titles. Too much italic is difficult to read, so use sparingly.
  • Capital letters: Use basic rules of grammar in applying capital letters in your text. Avoid using all capital letters except for concise words.
  • Underline: I totally avoid using underlines on web pages because underlined words can be confused with links.
  • Color: Use color sparingly to attract attention, emphasize a word, or select a group of words. Make sure your color choices complement your overall web design.

Research and apply the results

Consider the message you want your site to convey. Look at other websites in your industry that appeal to you and see if you can recognize the fonts. [Author’s note: Right-click on a page and choose “View source” to find out if you are right. Use the Edit/Find commands and look for “font.”] Chances are they will use one of the fonts from the recommended shortlist. When you view your site as an image, fonts are simply part of the overall “look” of the site.  Remembering this will help you better decide which font will fit best with your site.  In simple terms, do you like it?  Does it convey the right feeling for the subject matter?  One of the more interesting ways to explore fonts is to look at what fonts are used on some of your favorite sites and ask yourself why you like them.

  • Facebook: font-family:”lucida grande”,tahoma,verdana,arial,sans-serif
  • LearnWebDevelopment: Droid Sans, a Google sans serif typeface
  • Fox News: Lora, a Google serif typeface
  • Gmail: font-family:Arial,sans-serif
  • nytimes.com: font-family:Georgia,”times new roman”,Times,serif
  • Wikipedia: font-family:sans-serif
  • PragmaticWebDesigner: font-family:Tahoma,Arial,Helvetica,Sans-serif

You’ve done your research and have chosen your font(s). How did you arrive at your decision? Is it a factor of the rest of the page design? Why are there so many variations on these websites? What defines readability?

Dr. John Elcik is a 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. Rather, “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/or cuts (italic, condensed, etc.) work are good choices to become your personal “workhorse.”