Web Development: The Different Types of Fonts: When to Use Each Font Type and When Not

The Different Types of Fonts: When to Use Each Font Type and When Not

Final product image — What You'll Be Creating

Typefaces come in all different shapes and sizes and can be categorized depending on their characteristics. Fonts can be based in different eras—most type forms were influenced by history. Classifying fonts can help you decide which style to choose and what combinations to use for your next project. Building a good font collection is like having a closet. You need to have a range of different font types and to know how and when to use them.

There’s no single classification system; many have been proposed. With so many variables, it's difficult to classify fonts in specific groups. In the last few years, we’ve experienced an explosion of fonts, and many of them blur the lines of type.

In this article, I’ll give you an overview of the different types of font classifications that have emerged through history. This hybrid list is sure to help you find the right font type for your next project. To understand better the differences and how to spot a specific font style, check out Typography: The Anatomy of a Letter. Melody Nieves’s article will come in handy when we point out key parts of the type anatomy.

Along with each category, you'll find some font type examples that you can use as inspiration. Envato Elements has a great font library, and I'll link to some fonts from there so you can check them out!

Follow along with us over on our Envato Tuts+ YouTube channel:

Serif

Serifs are the small feet at the end of a stroke on a letter. These feet emerged in the past, when there was a different method of creating type. Characters used to be created by chiselling on stone. The chisel created small, square serifs at the end of each character. Within the serif group, there are subclassifications that are named after their origin.

With the exception of Slab Serifs, these serifs can be used as body copy. They are easy to read and comfortable for the reader's eyes. Let’s take a look:

Old Style

The Old Style serif font style was developed between the 15th and 18th centuries. Most of these typefaces were created as metal type for early printing processes. Some of the main features are:

The characters have a diagonal stress rather than vertical to emulate a calligraphic feel.
The Old Style form is characterized by letters with serifs that have a slight incline.
The end of the serif can range from straight to rounded and have prominent brackets.
There is a low contrast between the thick and thin strokes of the letterform.
Serifs can also be straight or slightly cupped.
The crossbar on the lowercase "e" is usually angled—this characteristic is borrowed from the angle at which a writer holds a pen.

As far as height goes, the x-height on the lowercase letterforms is tall compared to the cap height. The ascenders are slightly taller than the cap height.

Some examples of Old Style font types are Garamond, Adobe Jenson, Caslon, and Sabon.

Transitional

Transitional font styles came into play in the 18th century. As the name explains, it was a transition period between the Old Style and Modern letterforms. The printing process was more refined and allowed for elegant details. Let's look at the main characteristics:

The serifs during this period were sharper and with smaller brackets—almost flat.
Compared to the Old Style characters, Transitional typefaces have a nearly if not completely vertical stress.
The contrast between thick and thin strokes is even higher.
Transitional fonts had less serif incline, and the ascenders were slightly flatter.

This style maintained the tall x-height and ascenders height compared to the cap height that was seen on the Old Style.

Some Transitional font types are Times New Roman, Bookman, and Mrs. Eaves.

Modern

As printing processes improved in the late 18th and early 19th century, the presses became more accurate. Better paper and ink allowed for finer details on the font styles. Let's look at the details:

At this point, serifs are completely straight and flat.
The brackets disappeared or were very small.
The stress is now completely vertical, and the contrast between thick and thins is exaggerated.
The terminals were near, if not completely rounded.

The x-height is between medium to tall compared to the cap height.

Some Modern font types are Bodoni, Didot, Modern No. 20, and Mona Lisa.

Slab Serif

The easiest category to identify is Slab Serif because of its chunky look. With their obvious appearance, Slab Serif fonts set themselves aside from the serif sub-category. Refined printing processes allowed for more ink coverage on paper. This allowed Slab Serifs to be created for advertising as a form of display type. Take a look at some of the characteristics:

The shape of the serif is square compared to the previous categories.
Serifs get a major revamp—thick, heavy, and with little to no bracket connection to the strokes.
More often than not, the serifs are the same thickness as the strokes on the letterforms.
The characters now include a complete vertical stress.

The x-height tends to be very tall in relation to the cap height.

Some Slab Serif font types are Clarendon, Playbill, Museo Slab, Bw Glenn Slab, Martini Thai Neue Slab, and Arkibal Serif.

Sans Serif

"Sans" comes from the French "without", and that is exactly what this category is—typefaces without serifs. Roman lettering that was cut into marble and stone was not only found as serifs but also as informal sans serifs. That’s right, sans serifs are not a late invention—in fact, the very first form of sans serif was used in the 5th century BC as inscriptions. The first sans serif printing type was developed in the early 18th century by William Caslon and included only an uppercase version. Sans serifs stripped away all of the handwritten features that serifs wanted to emulate.

These modern letterforms aimed for high legibility at long distances. Twenty years ago, using sans serif for body copy was a no-no. We've come a long way from then. Nowadays you can find magazines using sans serif as body copy. If you want to get a message across clearly, use sans serifs as display fonts. Let’s take a look at the sub-categories:

Grotesque

This style was the first commercially popular sans serif in the early 1900s. All around, the designs of grotesque typefaces were irregular compared to the more sleek Neo-Grotesque (Helvetica). Therefore, grotesque typefaces were less polished and had more personality and quirkiness. Some of the features are:

The uppercase "G" usually has a spur. The uppercase letters have similar width—except for the uppercase "M", which was nearly square-shaped.
There’s a slight contrast between the thin and thick strokes.
The cap-height and ascenders are usually at the same level.
The most common characteristic is the ‘bowl and loop’ on the lowercase "g". Another distinct feature of the letter "g" is the double-story—this came from the serif category.

Some Grotesque font types are Franklin Gothic, Monotype Grotesque, Akzidenz Grotesque, and Bw Glenn Sans.

Neo-Grotesque

Neo-Grotesque typefaces are a refined version of grotesques in the later 1900s. The aim of the designers was legibility and neutrality. Therefore, all personality was stripped down from the typeface. Some of the distinctive characteristics are:

The traditional characteristics of sans serifs are left behind, and the letterforms become simpler, minimal, and neutral.
The stroke is uniform throughout the letterform.
The terminals are usually perfectly straight, making them appear geometric.
Neo-Grotesque fonts closed the aperture gap in the letters "e" and "a".
The most notable feature of Neo-Grotesque forms is the single-story "g".

Neue Haas Unica was developed in the 1980s, but it is a great example of the Neo-Grotesque style beside the ubiquitous Helvetica.

Some Neo-Grotesque font types are Univers, Arial, RNS Sanz, and RNS Sisma.

Humanist

Humanist sans serifs were based on the proportions of Roman style capitals. Typographers were looking to add a calligraphic influence to the letterforms. Let's look at some of the details:

Based on Roman style proportions.
The contrast between thick and thin strokes is more apparent.
As in the Old Style category, Humanist Sans Serif fonts sometimes include a slight stress on the vertical axis.
The aperture on the letters "a" and "s" is wider for improved legibility.
The letter "g" includes the double-story "g" to mimic the old style serif.

Some Humanist font types are Verdana, Lucida Grande, Optima, Myriad, Trebuchet, and Calibri.

Geometric

Contrary to the Humanist style, the Geometric style is based on geometric forms. The characters were intended to be legible, but their structure makes them the opposite. This style was popular in the 1920s and originated in Germany. Due to the clean, modern design, they became popular as body copy. Unfortunately, long-form copy doesn't read well in this style because of the awkward rhythmic shapes. Some of the main features are:

The characters have a uniform stroke thickness and optically circular bowls.
There's a strong emphasis on straight lines. Therefore, the stroke has a uniform thickness.
This category features a single-story lowercase "a" and "g".

Some Geometric font types are Avant Garde, Avenir, Nista Geometric, RNS Miles, and Bergen Sans.

Script

Script fonts are based on the flow of cursive handwriting and are divided into two categories: formal and casual. Scripts generally have cursive and fluid letterforms. These fonts are not suitable for body copy as they can become very illegible. Use these fonts for display use—headlines, titles, or very short copy. Take a look at these:

Formal

As the name implies, Formal scripts are the fanciest. These elegant typefaces are used on wedding invitations and diplomas. Some of the main characteristics are:

Inspired by handwriting from the 17th and 18th century, scripts are cursive.
All the characters include a connecting end tail for fluidity.
Flourishes and swashes are a big part of cursive fonts to adorn the characters.
Use formal script typefaces in historical-themed books, wedding invitations, or romance book covers.

Some types of Formal Script cursive fonts are Kuenstler, Snell Roundhand, Roseville, and Bigshine Script.

Casual

Casual scripts developed in the 20th century and were inspired by wet brush strokes. The letterforms don’t necessarily have to be connected, but sometimes they are. Let's look at a couple of details:

Casual scripts mimic wet brush strokes or pen.
They tend to be more relaxed and friendly compared to formal scripts.

Some types of Script fonts include Castinos, Sebastrian, and Bettina Script.

Calligraphic

Calligraphic fonts have become more and more popular in the last few years. The high-tech world has pushed us to crave the human touch in type design. Compared to the script category, calligraphic fonts tend to have a modern spin. Check out some of the features:

While still trying to mimic brush and nib strokes, the letterforms are quite contemporary.
The contrast between thick and thin strokes adds texture to the font.

Some Calligraphic font type examples are Billow, Bold Ink, Holyhand, and Crushine.

Handwriting

Handwritten fonts are fairly new—just a few years ago, they were difficult to come by. We’ve experienced an explosion of available fonts, and we can find them anywhere now. These fonts work really well as display type—for instance, for headlines, book covers, or logo design—as they can evoke very specific feelings. Let's look at the main details:

Handwritten fonts lack the structure and definition that fonts in the Script category have.
Handwritten fonts are much more informal, laid back, and try to mimic modern-day handwriting.

Some Handwriting font type examples are Cest Lavie, Watcher, Deepo, and Summer.

Blackletter

Blackletter or Gothic dates back to the 1400s and is based on medieval calligraphy. This style evolved from illuminated manuscripts. Some type classification systems include Blackletter as a script font. Mainly used in Germany, Blackletter was the lettering style used for the Gutenberg 42-line Bible—the first book ever printed in movable type. The main characteristic of this category is the highly ornamental capitals. A design using Blackletter typeface can result in a very dense and textured page. Some of the main features are:

Blackletter typefaces were drawn with a flat nib held at an angle, mainly using horizontal, vertical, and angled strokes.
The letterforms have a vertical stress.
Due to the nib pen, there's a high contrast between the thick and thin strokes.

Some Blackletter font type examples are Fraktur and Engravers Old English.

Display/Decorative

The Display category is the largest and most diverse category. The main characteristic these fonts have is that they are not suitable for body copy as they become illegible. Letterforms can often be experimental or distressed. Different types of tattoo fonts, graffiti style fonts, and many more can be included in this category. These typefaces are best used for headlines, logos, very short copy, or for emphasis only. Most of these typefaces are developed with a specific use in mind.

Some Display font type examples are Morning Glory, Burnout, Carter Layered, and Pittsbrook.

How to Choose the Right Typeface

Now that we’ve got an overview of the different font classifications, let’s talk about how to find the right font. As we’ve seen, letterforms come in all different shapes and sizes, but each one has its own characteristics.

Fonts can evoke specific moods based on the form or the era they were inspired by. Depending on the project, you’ll want to convey and communicate a feeling through the design. Let’s look at what some of these categories mean:

Serif: often seen as formal fonts that can evoke an older vibe. Use serifs for long-form copy, like books, blogs, or magazines. The serifs help the reader’s eyes follow the letterforms easily.
Sans Serif: one of the most versatile categories. You can use them as display or long-form copy. These letterforms are clean, minimal, and modern-looking. Some fonts in this category can be neutral, while others can have just a touch of personality that can add some zing to your design.
Script: whether you use a formal or informal script font, you’ll hands down communicate an old-world vibe. Use these fonts on historical pieces, wedding invitations, and book covers.
Handwriting and Calligraphic: if you want to evoke a personal feel, this is the font for your project. Mostly informal, this font can vary in styles. Do be careful when choosing one for your project as depending on the style you can add a certain mood that can range from cute to grunge.
Blackletter: if you are looking for a moody and dark font, this gothic-inspired category is perfect. They can be ornamental, heavy, and definitely hard to read as long-form text. Use this style for headlines or display copy.
Display/Decorative: like the last few examples, use display as display. These fonts are usually designed with a very specific purpose in mind—to call for attention. Don’t use these fonts at a small scale as some decorations can make them difficult to read.

There are thousands of readily available font styles on the internet. Due to this boom, it is difficult to make a specific classification of the different types of fonts. This is an ever-evolving list, and I’ve highlighted the most basic styles that can definitely help you narrow down your search. Do you have a new typographic trend you are following? Let us know in the comments below!

If you are looking for some quality fonts, take a look at the Envato Elements Font section. The ever-evolving library has a great variety of fonts for your next project!

If you liked this article, you might like these: