Selecting a typeface to complement your logo, to use on your website, or to print company materials is not as easy as it used to be. Today's marketer has a wide array of choices when it comes to fonts. While there are script fonts that simulate handwriting, display fonts to evoke certain time periods and symbol fonts that feature no letters at all, serif and sans-serif remain the two most common typefaces when readability is key.
The Big Dogs: Serif and Sans-Serif
A serif is the small stroke or embellishment added to the end or within a portion of a letter. They appear as the feet on a letter 'A', or the head on a capitalized 'C'. Fonts that use these embellishments are called serifs. Fonts that do not are called sans-serif or without-serifs.
Serif and sans-serif fonts are the two most commonly used typefaces, both on the Web and in print. Serif typefaces were developed in the ancient Roman times, while sans-serif fonts are fairly new to the game. Each is suited for its own unique purpose and comes with its own set of advantages and disadvantages. You will want to determine your specific company goals before selecting what kind of typeface is best for you.
Designers should keep a close eye on those tiny embellishments because most users have strong opinions on which they find easier to read. Some users find serif typefaces easier to read in long passages because they believe the serif makes letters easier to distinguish. Others believe sans-serifs are easier to read because many sans-serif fonts have very rounded geometric-looking shapes, making them appear clearer.
Serif fonts are standard for companies looking for a more 'official' looking font. Printed materials like newspapers and magazines tend to favor the serif fonts; as a result, users are more accustomed to them and often find them easier to read.
Serif fonts can be classified into four subgroups:
- Old Style — Old Style serif fonts are characterized by their excellent readability and their subtle differences between thick and thin lines. Visually, they resemble calligraphy writing. Examples of old style typefaces include Garamond, Jenson, Goudy Old Style and Palatino.
- Modern — Modern serif typefaces typically have extreme contrasts between thick and thin lines and are often less readable than other types of serif fonts. They tend to have thin lettering and stress vertical lines. Examples of modern style typefaces include Bodoni and Century Schoolbook.
- Transitional — Transitional serif fonts are the most commonly used serif fonts. They are called 'transitional' fonts because they combine the Old Style serif font with its Modern counterpart. Differences between thick and thin lines are more pronounced than they are in Old Style, but they are still less dramatic than they are in Modern serif fonts. Because they are so widely used, they are considered the most 'neutral' serif font. The most common Transitional serif font is Times New Roman.
- Slab Serif — Slab serif fonts are characterized by thick, full lines and have a bold, rectangular appearance. They usually have fixed widths, which means that each character takes up the same amount of space – like an old-fashioned typewriter. Examples of slab serif fonts are Clarendon, Rockwell and Courier.
In print, sans-serif fonts are typically, but not exclusively, used in signs, headings, and other situations where continuous reading is not required. However, on the Web, sans-serif fonts are considered the king of text because serifs often make small letters less readable on a computer monitor.
Sans-serif typefaces are classified into four subgroups:
- Grotesques — Grotesque typefaces, sometimes referred to as 'Gothic', were named for their ugly appearance. They are similar to Geometric typefaces, where their rounded strokes (like on 'o', 'b' or 'd') appear as perfect circles, with all strokes being a constant width. Examples of Grotesque fonts include Grotesque or Royal Gothic.
- Neo-grotesques — Neo-grotesque fonts are a refined version of their Grotesque cousins. They are considerably more elegant and are designed with varying styles and widths. They have virtually no distinguishable features at all. Examples of the Non-grotesque fonts include Standard, Helvetica, Arial, and Universe.
- Humanist — Humanist typefaces are the most calligraphic looking of the sans-serif typefaces, and are considered some of the most readable.
- Geometric — As their name would suggest, geometric typefaces are based on geometric shapes and have a more modern look. They are known for their perfectly round circle lettering. Examples of Geometric typefaces are Futura and Spartan.
Those Other Fonts
When it comes to fonts, serif and sans serif aren't your only options but they are your only options if you want your text to be readable. While the fonts below may be used as accents or for banners, they are not recommended for lengthy body text.
- Script fonts — Script fonts simulate handwriting and are much harder to read than most serif and sans-serif fonts. If you have to use them, we advise using them for logos or invitations only. Examples include Coronet and Zapfino.
- Blackletter fonts — Blackletter fonts were created with the invention of the printing press. They received their name based on their strong resemblance to blackletter calligraphy. Examples include Textualis, Rotunda, Schwabacher, and Fraktur.
- Display fonts — Display fonts are used exclusively for decorative purposes, and are not suitable for body text. They have the most distinctive designs of all fonts, and may even incorporate pictures of objects or animals into their characters. They are usually used to depict a certain time period (holidays, historic eras, etc.) and therefore have a limited use.
- Monospace fonts — Monospace fonts were originally developed for typewriters, and as a result use a fixed width style where every character takes up the same amount of space. These typefaces are excellent for using columned text. Examples of Monospace typefaces are Courier, Prestige Elite, and Monaco.
- Symbol fonts — Symbol fonts contain no letters at all. Instead, they consist of symbols (faces, boats, clocks, railroad symbols, street signs, etc.). Examples include Zapf Dingbats, Sonata, and Wingdings.
Today's site designers have an enormous advantage over the designers that came before them. They are able to specify typefaces online and control the visual aspect of their site. This was not always the case. Designers were once solely at the mercy of the default fonts incorporated into a user's browser. Luckily, as people became more web savvy, page tags were created with the sole purpose of specifying typefaces for Web documents. Although the tags enabled designers to create professional-looking pages, they also created cumbersome HTML code that was often difficult to maintain and maneuver.
That's where Cascading Style Sheets (CSS) come in. Style sheets are an alternative to page tags and are found in most desktop publishing programs, like Quark, PageMaker or Adobe InDesign. They enable sites to maintain consistency, making sure that common elements remain the same from page to page. They also help save valuable time by allowing designers to control the design of a page with a single edit.
Style sheets can format your text in the following areas:
- Boldfacing/ Italicizing/ Underlining
- Type size
It's important to note that even if you specify what typeface you want to appear, the font will not show up if the user does not have that typeface installed on their computer. For this reason, it is wise to specify multiple fonts or to end your font command with a generic command, such as 'serif'. This way, if a user's browser cannot find the exact font you called for, it will at least select a font in the same family.
Web vs. Print
Some typefaces are more legible on screen than others. While Times Roman may be considered one of the most legible on paper, when you put it on screen, it often appears too small or too irregular looking. Screen legibility is greatly influenced by what designers call 'x-height' (the height of a lowercase "x") and the overall size of the typeface.
Most readers prefer long blocks of text to use a serif font. You may use either a variation of the serif font or a contrasting sans serif face for the display type. We suggest using a single typographic family and varying size for headlines or bylines because it produces a more consistent line of text. If you do mix serif and sans serif faces, make sure to select compatible fonts and try not to use more than one serif and one sans serif (two fonts total) on a page. In our experience, Verdana, Georgia and Comic Sans are the easiest fonts to read on a computer screen. Their exaggerated x-heights offer excellent legibility for long text meant to be read via a computer.
Proportional vs. Non-Proportional
Is your text going to be placed in columns? Is it important for you to have all of your text line up evenly? If so, you'll need to pay special attention to proportionality when selecting a typeface. The proportionality of your font will greatly affect how it appears on your site. There are two kinds of fonts: proportional and non-proportional. A font that uses varying widths is a proportional font, while those that use fixed widths are known as non-proportional fonts.
Proportional fonts are generally considered more professional-looking and are easier to read, however, non-proportional fonts allow their characters to line up in nice, neat columns. The layout of your site will help you determine which is best for you. Consider technologies like sIFR® for another way to maintain the look and feel of your typefaces site wide irrespective of the fonts installed on a user's browser. Read our guide to learn more about the sIFR technology and how to install sIFR.