Anatomy of Web Fonts - Understanding What Works Effectively on Websites

click to enlarge

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.

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.

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.

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.

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.