Pin Me

Anatomy of Web Fonts - Understanding What Works Effectively on Websites

written by: Sheila Robinson•edited by: Michele McDonough•updated: 5/11/2010

Web fonts set the tone and personality of a website. Your web content and goals can help guide you to the appropriate font choices. It is important to understand what works for online use why the anatomy of web font characteristics can affect your website's overall appeal and presentation.

  • slide 1 of 5

    Emphasizing and Capital Lettering in Web Design

    web design fonts Using bold, italics, underlining or color can bring attention to text on a webpage that has a busy layout. Bold should be used sparingly. Italics can be difficult to read on low resolution screens as a result of their distorted shape. Underlining and color should not be used to emphasize text since they may be confused with hyperlinks.

    As a rule, capital lettering should not be used for content text. Not only is it perceived as being rude and inelegant, readability is inhibited. The exception is for personal names and location acronyms.

  • slide 2 of 5

    Font Sizes

    The size of a web font determines the importance of the content as well as the look and feel of a web page. For a traditional and elegant look in your web design, any variances in font size should be incremental. However, modern style leans towards extreme changes in font sizes with large headings and lighter colored fonts than the content text.

  • slide 3 of 5

    Line, Letter and Word Spacing

    Line spacing brings the style and readability of the web fonts and content displayed on a page. There is a direct correlation between the length of a text line and the width for spacing. For longer passages, a wider spacing makes it easier on the eye. Alternatively, short blurbs with tight spacing draw attention to the reader.

    In most cases, letter spacing should not be considered since it is not cross browser friendly. However, web designers may want to use it for short, attention grabbing headings. To get around incompatibility issues, spaces between letters can be controlled by creating images with graphics software.

    Word spacing should not be adjusted. If you find that your text requires adjustments in this manner, you should reconsider the web font for your page.

  • slide 4 of 5

    Alignment

    A left alignment is best for text on a website since viewers tend naturally gaze left to right. Justified does not work well with web pages since text has a tendency to crush itself together or create wide gaps. Right aligned content is difficult to read and is recommended for short text passages.

  • slide 5 of 5

    Compatible Web Fonts

    Not all fonts are compatible with the Internet. Every user has different settings and software on their computers that affect what they are able to view on their screen. The use of CSS gives web designers flexibility, but cannot account for every possibility. To work around it, text can be replaced by creating an image or using sIFR (Scalable Inman Flash Replacement). Websites like Lynotype can also help designers choose an appropriate web font.