If you’re new to the world of typography, you may not be aware of some of the more arcane aspects of it. There’s a whole discipline dedicated to the intricacies, lineage, and artistry of typefaces that goes beyond basic concepts like knowing the difference between a serif and sans serif typeface. You’ll need to dig a bit deeper into the complexities of modern fonts and typefaces to recognize ligatures or subtle nuances such as why a particular typeface is considered art deco.

The history of modern typefaces

Though the term “modern typeface” may bring to mind futuristic fonts or a minimalist font like Helvetica, neither is considered a modern typeface in the traditional sense of graphic design. What is formally defined as a modern typeface can be traced back to the 18th century. This family of modern fonts share a common DNA with distinct traits that set them apart from other categories of typography. Once you know what to look for, you’ll be able to spot a modern typeface easily.Modern typefaces are sometimes referred to as Didone or Neoclassical. They’re marked by different weights between strokes and have thin unbracketed serifs. They exhibit vertical stress within their letterforms, meaning that each glyph stands straight up without any sort of horizontal tilting. They’re also marked by ball-end terminals at the end of some letters, most notably on lowercase “r” — though it’s not unheard of to see these circular elements on uppercase letters as well.

Modern typefaces are sometimes referred to as Didone or Neoclassical. They’re marked by different weights between strokes and have thin unbracketed serifs. They exhibit vertical stress within their letterforms, meaning that each glyph stands straight up without any sort of horizontal tilting. They’re also marked by ball-end terminals at the end of some letters, most notably on lowercase “r” — though it’s not unheard of to see these circular elements on uppercase letters as well.

The evolution of modern typefaces

When discussing modern fonts, it’s important to take a look at what came before them. 

Modern typefaces are the descendants of transitional serifs, which had a more distinct vertical stress than their predecessors. They also had gently sloped serifs that mimicked calligraphy. 

Modern typefaces exist thanks to the evolution of printing processes. Gone were the blotchy serifs of the transitional fonts. More advanced printing technology made crisp lines and delicate features possible. 

How to use a modern typeface

With dramatic differences in stroke weights, modern typefaces look best at larger sizes. You’ll see them used as display fonts as well as in headers and subheaders. Modern typefaces generally don’t work as body text. Their spindly features get lost at smaller scales with their bolder stroke weights overpowering their more subtle nuances.

Modern fonts to use in your own web designs

For designers looking for an elegant font, modern typefaces offer a bit of class with their refined geometric letterforms. Here are a few modern web typefaces to consider for your next web design project.

1. Bodoni Moda

Any discussion about modern typography should include mention of Giambattista Bodoni, whose namesake Bodoni typeface was created in 1798. This is classified as a transitional typeface, but many consider this the missing link between transitional and modern fonts with its distinct thick and thin stroke weights. There are a number of different styles out there built upon its classic typographic template.

Bodoni Moda is a modern stylization of this classic typeface available on Google Fonts. It has all of the hallmarks of a modern typeface with its thin serifs, ball-end terminals, and sturdy vertical stress. We love Bodoni Moda for its traditional print feel combined with contemporary stylization. 

‍

2. Abril Fatface

There’s quite a bit of variety in modern typefaces and Abril Fatface is a great example of this. It offers heavier letterforms and a dramatic contrast in stroke weights. If you’re looking for a typeface that’s a bit more bold, Abril Fatface is among the best modern fonts out there. As with other modern typefaces, it offers maximum legibility at larger sizes. 

3. Prata

With its upper serifs adorned with sharp triangles and its more relaxed curvaceous letterforms, Prata offers a nice push and pull in its lettering.

Its strong stylization makes Prata best suited as a display typeface or at other large sizes where its nuances can be appreciated. Prata is one of the best free modern fonts available, making it popular amongst web designers. 

‍

4. Kepler

For design projects requiring a more traditional print feel, Kepler is a great choice.

Kepler is available in several different styles and weights, so you’ll have plenty of typographic options.

5. Cantata One

Cantata One is another eye-catching modern typeface, whose intricacies work best when used at bigger sizes.

‍

This modern font has drastic contrast in stroke weights, particularly in the letter ‘y.’ There’s also a nod to calligraphy with its wonderfully globby terminal ends. 

6. Vidaloka

Vidaloka is another font best used at larger sizes due to its distinct stroke weights that will get lost at smaller scales.

With gradually sloped terminals and swirled drops, this modern font is both traditional and highly stylized making it great for web or logo design. 

7. Old Standard TT

Old Standard TT is another modernist typeface that projects the feel of print from a bygone era. With a subtle contrast in stroke weights and gentle stylization, Old Standard TT works well for design projects where you want a subtle retro feel.

8. Ratio Modern

Drawing from Ratio, which was introduced in 1923, Ratio Modern can look quite different depending on which version you use. Stroke weight becomes more pronounced at heavier weights, making these variations better at large sizes. At smaller scales, it takes on a more neutral feel, allowing it to be paired well with other typefaces.

Slab Serifs

Slab serifs aren’t categorized as modern typefaces, but they’re used widely across the web. While they may not officially fall into the modern fonts category, they’re closely related — which means they might be the look your client wants when they say “make it modern.” 

To the untrained eye, it’s hard to discern between the slab serifs and modern typefaces because they both have vertical stress and thin serifs. But slab serifs differ in one major way — they do not have a noticeable difference in stroke weights. 

Let’s take a look at a few slab serifs that you can use in your own web design work and take a look at how they’re similar to modern typefaces.

ITC Lubalin Graph

ITC Lubalin Graph is an offshoot of ITC Avant Garde Gothic. It has a bit of a compressed feel, with letters almost right up against each other. As you can see, this font has uniform stroke weights with thin serifs that mimic what’s found on modern typefaces.

Bodoni Egyptian 

We’ve already discussed the significance of Bodoni and showed you a modern spin on this font. Bodoni is also available as a slab serif, in the form of Bodoni Egyptian.

Where Bodoni Moda had a distinct delineation in stroke weight, Bodoni Egyptian offers uniformity. Slab serifs can sometimes feel a bit heavy-handed, but Bodoni Egyptian offers a similar sense of lightness as modern typefaces.

Amasis

Where slab serifs tend to emphasize stronger geometric forms, Amasis adds a dash of humanism. Font styles considered humanist have a bit more looseness in their lettering. Amasis combines aspects of slab serifs and humanist fonts to create a typeface that looks great even at smaller sizes.

Modern typefaces help bring distinction to web designs

We love modern typefaces for their classy and regal sensibilities. For web designers looking to polish up their work with a bit of sophistication, there are a variety of modern typefaces out there, with many available as free fonts.

For those inspired to learn even more about typography and how it relates to web design, check out this reading list we put together.