Understanding and Using Type Categories in Web Design

Fonts and typefaces can be classified into a handful of different categories that describe their properties. A type category can give you a basic idea of how a font will look before you even see the actual letter strokes. Categories can give you a little insight into the roots of a font as well.

When planning design projects, think about the message your typefaces convey. Toy with mixing typefaces from different categories in a way the represents what you are trying to say. There are six distinct categories of type that will be detailed here and a handful of other variations within those categories.

Old English

Old English type styles are some of the most identifiable and oldest modern typefaces. Also called Fraktur or black letter fonts, these letters are represented by characters that contain multiple strokes. The style of typography dates to the Middle Ages, when scribes used this method of writing and had to lift the pen for each letter segment. This is where the term Fraktur comes from; it derives from the latin word for broken.

Old English typefaces are still commonly used today in newspapers (and their websites) for the nameplate. The typefaces are also used in web design, commonly found on sites that employ an old-style theme or use the Old English font as more of an artistic element.

Design applications with fonts from this category can be somewhat limited. Fonts are quite heavy and can be difficult to read if used for text blocks that contain more than just a few words.

Serifs

The serif category is defined by an extra horizontal stroke on each letter. There are a wide range of serif fonts that are broken into three subcategories: old style, modern, transitional. There is an additional category of serif fonts – slab serifs – that have evolved into another category altogether.

Serifs have variety of practical applications and can be found in websites, newspapers and books. Most serif typefaces lack the flair of Old English fonts and are simple to read and can be used in large blocks of text. Serifs also stand alone well and are often used in combination with a sans serif font as the big words over running text.

Old style serifs are identified by their sloping, rounded shape. Each of the letter strokes has the same weight, giving each letter a uniform look. The type category is commonly used in book publishing.

Modern serifs have contrasting thin and thick letter strokes. Letters have a much heavier weight than old style typefaces. The strokes are thicker vertically than horizontally. Modern serifs are often used as big words in design applications because the varying stroke widths can be tough on the eye when used at small sizes or in mass blocks of text.

Transitional serifs combine attributes of old style and modern typefaces. Each letter contains the sharp horizontal stroke from each letter but also has varying stroke widths. Transitional typefaces are commonly used in a variety of applications, most notably as the default typeface (Times New Roman) in common software applications such as Microsoft Word and Adobe Photoshop.

Slab Serifs

Slab serifs, also sometimes called square serifs, date to shortly after the Industrial Revolution (circa 1850) when the advertising industry really began to boom. Fonts in this category are characterized by a uniform stroke with solid, square-edged serifs.

Letters in this category are thick and are often used as a display typeface. Although this typeface was first used in print advertising, it has become common on the web. Slab serifs work best when only a few letters are used and may be difficult to read in large blocks of text.

Sans Serifs

Sans serif typefaces have no serifs (that extra stroke on each letter) and have uniform stroke widths. Sans serif fonts began to appear in print applications around the time the Bauhaus School of Design was formed in Germany (1919-1933).

Today sans serifs fonts are some of the most popular for web design. There are many variations in letter form – from short round typefaces to taller, thinner fonts. Most sans serifs work well for both large blocks of text and in display, such as the sans serif typefaces used on this website.

Sans serifs are so popular that a movie was made about one of the most well-known and recognizable fonts, Helvetica. The film of the same name was a winner at several independent film festivals that year as well.

Scripts

Fonts in the script type category are also easy to identify because they are designed to imitate handwriting. Each of the letters is connected in true script fonts. In the cursive variant, which many also classify as script, the letters have long tails but do not actually touch.

Script typefaces should be used sparingly. They can be difficult to read in text-heavy applications. Scripts do have a certain feel, though, and are used for many feminine-type projects, such as wedding announcement and baby shower websites.

Novelty

And then there is everything else. All of the oddball, super-designed typefaces are grouped into a single category – novelty. There are a handful of other names for these kinds of typefaces – decorative, grunge, artistic, ornamental – but they all refer to the same classification of typefaces. These fonts are identified by the lack of other characteristics.

Novelty fonts are best used sparingly and might be best described as an art element in your design. These typefaces can be difficult to read and are often wider and larger proportionally to other fonts.

Type Applications

Once you have an understanding of the different categories of type, experiment with mixing them in your projects to have the best outcome. Few projects look complete with only one typeface. Combine serifs and sans serifs to produce clean, easy to read type. Use decorative, script and Old English typefaces to accent other type elements.

Think about the feel and message your project should convey and use typefaces that match that feel. Keep readability in mind when working with large blocks of text and use varying type categories to add emphasis and depth to your design.