Most website visitors will make a three-second decision whether to stay on a web page based on the visual information and impression they receive. Consciously or not, their eyes will quickly scan a page for certain words, during which they are judging the page’s design for credibility. As typography and colors are a main factor in both these areas, the choices you make in the font-family and color palette are fundamental to the layout design.

A good sense of how the typography will work in tandem with your design is essential when designing any web page or graphic with text. The primary considerations are whether a font is easily readable, whether or not it is available to all your visitors (web-safe), and the impression it will convey about your business or organization (formal or casual).

small headline

Larger Headline

Once a font style is defined, the font renders so long as your visitor has it installed on their computer; if the initial font of the “font-family” is not installed the next font in the list is loaded, and if all are absent then the default font “Times New Roman” is used.

For web pages we typically recommend Sans-Serif fonts for readability, especially with body copy.  Serif fonts are often used for headings to provide differentiation between the headings and body copy.

Best Practices

It is important to be consistent in your use of typography, and be consistent across all your pages in font and styling.  This ensures that the pages look orderly and professional

  • Avoid the over use of colored text (especially red text).  Typically dark grey color is best, except where you need to bring attention to a “small” section of copy, for which the color should compliment the design.
  • Avoid the over use of capitalization, underlining, and bolding.  Capitalization is viewed as shouting on the Web so should only be used in rare instances, and while underlining or bolding a few words can be effective, much more than this just doesn’t work well.
  • Ensure that the text copy color is easily read by providing enough visual contrast.  For dark backgrounds use a white color value, and for light colored backgrounds ensure that the text color is dark.
  • And finally, ensure that the line height and vertical spacing between content blocks is ample enough that the copy avoids the “cramped” feel; this also helps with readability.

The following Serif and Sans-Serif font-families are presented in their type-face for assessment of how each would look in a web page.

Sans-Serif font-family

  • Arial, Helvetica, sans-serif
  • Lucida Sans Unicode, Lucida Grande, sans-serif
  • Arial Black, Gadget, sans-serif
  • Tahoma, Geneva, sans-serif
  • Trebuchet MS, Arial, Helvetica, sans-serif
  • Verdana, Geneva, sans-serif

Cursive font-family

  • Comic Sans MS, cursive

Serif font-family

  • Times New Roman, Times, serif
  • Palatino Linotype, Book Antiqua, Palatino, serif
  • MS Serif, New York, serif
  • Georgia, Times New Roman, Times, serif

Monospaced font-family

  • Courier New, Courier, monospace
  • Lucida Console, Monaco, monospace

Commonly employed CSS styling:

  • Font-style: Normal, Italic, Oblique
  • Font-variant: Normal, Small-Caps
  • Font-weight: Normal, Bold, Bolder, Lighter, 100-900
  • Font-size: 9 to 36px (typically); em often used (browser defined relational sizing)
  • Color: Set by HTML color name or hexadecimal value
  • Text-transform: Capitalize, Uppercase, Lowercase, None
  • Line-height: Sets the height of each line from the next (px or em)
  • Letter-spacing: Sets the space between each letter of text (px or em)

Less common options include:

  • font:caption: The browser font used in captioned controls
  • font:icon: The browser font used in icon labels
  • font:menu: The browser font used in dropdown menus
  • font:message-box: The browser font used in dialog boxes
  • font:small-caption: A smaller version of the caption font
  • font:status-bar: The browser font used in the status bar

Font-Family Property

The font-family property should hold several font names as a “fall-back” system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Serif, Sans-Serif, Monospace

Serif Fonts have fine cross lines at the end of the letters and Sans-Serif Fonts do not have anything at the end of the letters. Monospaced Fonts have the same amount of space between each letter.

Embedding Custom Fonts

Fonts were previously embedded either by applying them as a graphic, within Flash, or by using the CSS @font-face rule (Cufon font replacement). These practices are no longer recommended for SEO and accessibility reasons. Graphic fonts also look a little different from a system “code rendered” font. The new approach is to embed a font using Google Font replacement (linking to the desired font).

Color for the Web

When designing a web page it is important to recognize how the use of color will influence one’s perception, and emotional reaction to the pages. When color is applied correctly it engages the viewer and creates an inner sense of order, a sense of balance. When color is not harmonious, it is either boring and bland or chaotic and an irritant. In short, the human brain will reject what it can not organize, and color harmony provides both visual interest and a sense of order. There are three main perspectives about the use of color.

Colors that are analogous, complementary, or defined by nature

COLORS

Analogous colors are any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors predominates and the others are used as accent colors.

Complementary colors are any two colors which are directly opposite each other, such as red and green, and blue and orange. Opposing colors create maximum contrast and a feeling of stability.

Nature defined colors come from the pallet that a natural setting offers, and is a perfect opportunity for color combination exploration. What we like to do is select a natural photo that we like, and then take it into Photoshop and choose “pixelate”, “mosaic”, and then expand the color square sizes so the colors can be sampled for their hexadecimal or RGB values. We also sample colors when a client provides us a logo to ensure that the colors of the design are carried forward effectively in a website layout.

nature

Web-safe Colors

HTML color shades are a combination of red, green, and blue light values (RGB). Most modern browsers are capable of displaying at least 16384 different colors, though there is more than 16 million color options available.  Is it safe to use all of the combinations of red, green, and blue values?  No.

By default, there are 216 web safe colors. These will have very little color variation across monitors, so if you need to ensure that your color value looks the same to everyone, then web-safe is the right option. Experience has shown us that what looks like a royal blue on our high resolution screen may look purple or navy on a budget monitor.

For most websites a small degree of color variation won’t be an issue.

Accessibility

In the typography section I touched-upon the importance of providing good visual contrast between the page text and the background. If accessibility is important to you it is best to:

  • Maximize contrast in hue, value, and chroma
  • Use Dichromatic (two primary colors) schemes
  • Limit colors to three or four hues

As I noted above, providing good visual contrast ensures the readability of text, and when used in a design it helps your visitors with sighting issues to distinguish colors. As for color combinations:

  • Avoid combining yellow-green and green with reds, oranges, and yellow
  • Avoid combining blue-greens with magnetas, violets, and blues
  • Avoid combining light reds, magnetas, violets, or blues with dark hues such as greens, yellows, oranges, or cyans

Since analogous hues are similar in values it can difficult for people with color-deficient vision to distinguish between colors.