What’s Your Typography? – Choosing Fonts in Website Design

Designing a website involves a host of variables, from choosing among hosting services to deciding what color the fine print at the bottom of the page will be. Even if you plunge into the world of website design with a plan regarding content and target audience, the endless options can seem daunting. One of the elements that a website’s style relies on most heavily is the kind of typeset chosen. Your audience will definitely have a different impression of your site if its text is mostly in the over-used and informal Comic Sans, for instance, than if it is in the blandly harmless Times New Roman.

A clarification of the common terms used in typography should help along the way. A typeface is a series of fonts, each of which is an entire set of characters in a distinct style and size of type. While Arial Bold and Arial Italic are separate fonts, they belong to the Ariel typeface along with Arial Standard and other variations. In typography there are many different categories, but they all fall within the groups of serif, sans serif, or miscellaneous – also known as decorative, which is the catch-all for script and ornamental fonts among others. The serif, which separates the first two groups, is simply an ornamental addition to the ends of letters. These little extra marks are also sometimes called feet or tails and in theory help the eye transition more smoothly from one letter to the next. Sans means “without” in French, which makes the best two categories for website typefaces, those with and without feet.

The number of images you use in your site design or who is providing your web page hosting are not nearly as significant as the typeface style you use for the first and overall impression your website will make on viewers. Six of the most popular font groups used in websites are Times New Roman and Georgia, representing serif fonts; and Verdana, Trebuchet, Helvetica, and Arial, which are sans-serif fonts. Serif fonts are less popular for web use because their ornamentation makes them more difficult to read at smaller sizes.

Times New Roman

Known as either Times or Times Roman in its classic incarnation, this most popular and well-established of fonts became Times New Roman in Microsoft’s version. It will not stand out or distract from the text of a site, and is easily read in large blocks of text.

Georgia

One of the easier serif fonts to read even when the size is small, Georgia is a wider, rounder font with blunt serifs. It has a more casual feel than Times. Its biggest weakness is its appearance when printed; the stretched letters that make it web-friendly are awkward in ink on a page.

Verdana

With many of the advantages and disadvantages of the Georgia typeface, Verdana could be Georgia’s sans-serif cousin. Its lowercase letters are comparably large which is a boon for web reading, but clumsy in print.

Trebuchet MS

Known as a good font for web design, Trebuchet combines blocky easy-to-read letters with a clear personality, and was specifically created for websites.

Helvetica

Excellent for smaller blocks of text, this font is a classic of typography and is clearly legible both on screen and in print.

Arial

Strongly resembling an updated version of Helvetica, Arial has a compact width and softer curves than many of its fellow sans-serif fonts, humanizing its appearance.

Selecting a font group is a difficult balance between the personal style of the designer and the limitation that all web site designers face: if a computer does not have the specified typeface, then it cannot display as the designer intended. These six most common internet fonts are also present on most operating systems, making them safe options that allow for a little freedom of choice in a website’s appearance. What’s your typography?

Mars Cureg

Web designer by profession, photography hobbyist, T-shirt lover, design blog founder, gamer. Socially and physically awkward, lack of social skills, struggles to communicate with anyone who doesn't have a keyboard. Willing to walk to get to the promised land. Photo and video freelancer, SEO.

6 Responses

  1. Matt says:

    What about the new (somewhat) font rules in CSS 3?

  2. Everything Design says:

    Hi, it was with much interest I read your blog. You have definatly given me some fabulous ideas. Thanks everything you’d ever want to know about design

  3. Sacramento Website Design says:

    Thank you for sharing Typography……….it’s helpful for successful website design.I am also curious about CSS 3.

  4. Project Pixel says:

    I really enjoyed your post thanks for the valuable information. I think moving away from Verdana and Arial & especially comic sans is a must for any designer. Good point on the over used typefaces. website design tips

  5. Brett Widmann says:

    These tips will really come in handy! Thanks for the insight.

  6. citytonight says:

    Hey, what about the font rules in CSS 3? Very nice Article!