Ten Great Fonts and How to Create a Custom Font

Designing a website consists of tying together a plethora of design details into a single user-friendly experience. One of these important design details involves the font used to communicate the website's content to the visitor. Each font "says" something different about the website's brand, voice and credibility. Read on to discover the top ten go-to fonts for websites in 2011 and beyond.

Web-Safe Fonts

Unless visitors have the fonts on your website already installed on their computers, they won't be able to view the site content in the font you've intended as the designer. Therefore, there are certain web-safe fonts designers should use, because they ship standard with nearly every operating system and browser.

1. Georgia - Perhaps the most common serif font on the Internet, Georgia imparts a sense of depth and materiality to a website. Serif fonts are typically used in print, while sans-serifs are typically used online, so if you'd like for your website to look like a printed page, Georgia is a great font to use. The reason that serif fonts aren't usually used on the Internet is that they tend to be too complex and take up too much space, so Georgia is only good on sites that aren't already overly "busy" with various items, images and colors. It might work for a bare-bones blog or understated official business site.

2. Verdana - Verdana is probably the most commonly used sans-serif font online, and it is best described as an eminently readable version of the common fonts Arial and Helvetica. It's well-known that sans-serif fonts are better for "scanning" than serif fonts because the letters take up less space, but sometimes these fonts sacrifice readability for the speed at which they can be read. Verdana spaces the sans-serif letters apart, making each letter more readable. If you want a balance of scannability and readability, Verdana is a great choice. It brings emphasis to the content by making its own details invisible.

3. Trebuchet - For designers who want to impart a sense of artistry while maintaining a mainstream sensibility, the bold stylings of Trebuchet might be just the font required. This font is characterized by large lower-case letters, soft curves and use of diagonals. Trebuchet is best for websites that don't have too much text in any given block, as the details in each letter might be a bit much for long paragraphs.

4. Arial/Helvetica - The most common print sans-serif fonts still see plenty of use on the Internet, especially in larger sizes. Arial and Helvetica are known among font enthusiasts by the narrowness of each letter, making them useful for blocks of text meant more to be scanned than actually read in full. You can fit a lot of Arial or Helvetica text into any given space, but if the font size is relatively small, you may sacrifice significant readability. Still, for titles, promotions or large-font websites, Arial and Helvetica are invaluable mainstays of the font world.

5. Garamond - A readable serif font, Garamond sees plenty of use on sites whose main source of content consists of long bodies of text. Readers may find it difficult to read long blocks of sans serif text, especially if the content of the text itself is very dense and thought-provoking. Often used in print magazines and newspapers, Garamond lends a sense of authority and legitimacy to your website.

6. Lucida Family (Sans, Grande, Console) - There are a variety of Lucida fonts in use between PCs, Macs and Linux machines. They are all surprisingly readable on the Web, interesting because they weren't specifically designed for screen viewing. Lucida Console, for instance, is perhaps the most standard monospace font. This font is defined by its lack of diagonal lines, which can feel overly stilted and mechanical to some. Great for titles and for other design accents, it is rare to find a website all in Lucida.

7. Courier New - The mainstay of the coding world, Courier New is a useful monospace font to mark programming, jargon, or other field-specific-language differently from mainstream language on your website. Like Lucida, it is more commonly used to accent a website and give it a mechanical, system-controlled quality. Also used if you want to mimic a typewriter.

Web 2.0 Fonts

These fonts will always be used for accenting a website with headings, buttons and other graphic design elements, as they probably won't be included in a standard font package. You will have to find and download these fonts for yourself, then create images with them if you want viewers to see them.

8. Moderna - A well-balanced, rounded font, Moderna is just quirky enough to still look professional. It is very 21st century business, meaning that it implies both a sense that each user is in control as well as a sense that the site and its products will be reliable. Perfect for interactive Web 2.0 sites.

9. Photonica - This wide, techy, futuristic font emphasizes a disjunction between corners and curves, between the diagonal and the straight. Photonica calls to mind the science fiction of the 1980s and 1990s, and may be best used as an accent on computer, science and any tech-related sites.

10. Ubuntu Title - A great, readable font for inserting into tight spaces while maintaining a sense of individuality and uniqueness, Ubuntu Title is perfect for buttons, labels and other design elements that you're working to ensure fit. The rounded edges of each letter make this font simultaneously approachable and casual, while the lack of diagonal lines imparts a sense of easy professionalism.

Custom Font Integration - @fontface and Cascading Style Sheets

Have you ever wanted to add your own font to a web site, but were afraid no one would be able to see it? If a visitor doesn’t have the font, only the default font configured for their browser will display. This could be Courier or Times New Roman, but definitely not the font you intended them to see.

Thanks to CSS 3.0, this is no longer an issue. You’ll be pleased to learn that you can now imbed your own font into that web site and it doesn’t have to be a font image. Using a cascading style sheet (CSS), this capability is easily achieved and we’ll explain how it’s done in this article.

Actually, the ability to imbed a font was defined in CSS 2.0, yet left unavailable in CSS 2.1. Internet Explorer was the first to support it in 1997, but until now it’s never been standardized and accepted in a way that has received cross-browser acceptance. CSS 3.0 is the first to standardize it as a permanent feature.

Before diving headfirst into this new feature, be aware there are a few downsides to using imbedded fonts. First, they increase download size by as much as 25K or more. Second, visitors to your web site may receive a security warning, depending how they have their browser security set, and this may happen for each page on your site that has an imbedded font. For these reasons, it may be wise to use imbedded fonts sparingly and in limited distribution throughout your site.

Let’s take a look at how a basic custom TrueType font is imbedded on a web site. Imbedding a font is accomplished using the following basic steps:

1) Locate the font you want to imbed.
2) Attach the font to the cascading style sheet.
3) Use the font on a web page.

Locate the font

It’s easy to locate a font. Enter “free TrueType font” in your favorite web search engine and explore the results. Not all font manufacturers allow their font to be imbedded, so select the font carefully. TrueType fonts often have permissions set such that imbedding the font is blocked. Look for a font that will allow you to imbed it.

Attach the font

Attach the font to a CSS using @fontface, as shown in the following example:

@font-face {
   font-family: <user selected font>;
   src: <url to user selected font>;
   [font-weight: <weight>];
   [font-style: <style>];
}

Where:

<user selected font> is the name of the font.
src: URL to the remotely-stored font, including the font name (ex: /user/directory/test.ttf).
font-weight: Point size of the font.
font-style: Style attribute of the file.

Use the font

The last step in imbedding a font is using it on your web site. The example below shows how this can be implemented.

<XMP>
<html>
<head>
  <title>Imbedded Web Font Example</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "<user selected font>";
      src: url("http://<url>=UserSelectedFont.ttf");
    }
   
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is my custom web font.
</body>
</html>
</XMP>

The example above cites the font family as Bitstream Vera Serif Bold. This is only an example. Enter the information attributed to your particular font.

Conclusion

Thanks to CSS 3.0, imbedding a custom font is easy. Find the font, include it in a CSS, and then reference the font in the web site HTML.

The examples in this article provide a simple explanation based on True Type fonts. More complex examples can be accomplished by creating a .pfr Portable Font Resources TrueDoc file or an .eot Embeddable Open Type file, but these examples are outside the scope of this article.

For more information on integrating custom web fonts and web programming, consult your favorite search engine.