5 Striking Trends in Web Typography

Web typography is a hot topic that demonstrates how a very old dog can certainly learn some new tricks. While much of the buzz surrounds the technical developments of type online, there are ever changing stylistic trends as well. The technical aspects are indeed important, and at times drive the creative side of things. But as any technology matures, it goes from being a novelty that’s acceptable in almost any form to a more mature state in which its usage grows more sophisticated. Web typography has certainly gone through this change. The initial overuse of certain fonts has led designers to develop more creative type solutions.

Here I will present and discuss a variety of trends at work in the realm web typography. These are visual trends, presented void of the technology used to make them happen. From the designer’s perspective, each choice is more about what each typeface communicates and less about how the website was built. The creative application of web type is nothing new, but as with any design fundamental, it’s being applied in unique and interesting ways today.

Let’s dive in.

Decorative type

First, let’s tackle decorative type. I have found that decorative fonts in general have spotty acceptance in the hearts of designers. Many designers despise them as cheap, sloppy and frivolous, while others adore them and leverage them in creative and interesting ways. I will be the first to concede that decorative fonts are often used to create what amounts to crimes against design. However, I would also argue that many designers have used them in brilliant ways. Here are a few examples of what I believe to be strong uses of decorative type:

01http://matthias.webrom.fr/

In this sample, the decorative font is somewhat subtle in the sense that it isn’t overly stylized or quirky. Instead, a few slight alterations make it decorative and unique. The designer has used it to create a distinctive style, presenting his name almost like a logo design.

02http://earls.ca/

In sharp contrast, this sample uses decorative type in a bold and prominent way to help establish a quirky and unique style for this kitchen/bar.

03http://thefreshexchangeblog.com/

This site uses an unexpected set of decorative fonts to create what I consider more of a “hipster” style. This handmade, hipster style is rather popular and connects with a younger audience.

04http://gabiandlisette.com/

This interesting design translates some of the extreme stylized type you might find on food packaging to the web. It helps set the tone for the site and highlights the brand in a lovely way.

05http://www.moetbius.cc/

Designs like this demonstrate that even the most unusual of typefaces have a place in web design. It’s gorgeous and evokes a designer brand.


Master the art of responsive typography design with On Web Typography by Jason Santa Maria. Read an excerpt from this design book at PrintMag.com.


Hand drawn type

Hand-drawn type has long been a part of web design. At times it is real hand-drawn type that is scanned in, but in many cases it is a typeface made to look hand-drawn. I usually prefer the originality of real hand drawn text, but sometimes you need editable copy styled to look hand-drawn, so each has a time and place. Let’s consider some examples using this style.

06http://hiddensocksclub.com.au/

This eCommerce site uses hand-drawn type to create the main brand. It pairs wonderfully with the kitschy socks they sell and suits the brand perfectly.

07http://goldfront.com/

In this design, hand-drawn text is used to reflect the organization behind the site. The artistic roots of this design agency shine through in its unusual home page design.

08http://www.brancottestate.com/agepage

On this site we can find an interesting combination of what I call faux hand type, or fonts made to look hand-drawn. Often this can feel cheap, but in this case the results are suit the brand beautifully.

09http://www.rilke.com/

As is often the case, this site uses hand-drawn text to reflect the type of work they do. When this style connects so vividly with your work, it becomes a natural choice that doesn’t feel forced.

10http://livecookingvalentino.nl/

In stark contrast to the previous examples, this more dramatic example uses hand-drawn type to resonate a very unique style. The type serves to reinforce the overall brand and is a natural part of the illustrated design.

Slab serifs

Slab serifs are anything but new, but they are very much in vogue right now. These chunky fonts tend to evoke a sense of authority, mater-of-factness and an overall bold style. They can also feel solid and suggest reliability, though these just a few of the reasons designers select fonts in this category. Let’s dissect some examples.

11http://foreword.io/

This example perfectly demonstrates how letterforms can be gorgeous on their own. There isn’t much to this design, and yet it speaks volumes. Much like a window display for a high-end fashion boutique, this minimalist web design resonates a premium brand and sets high expectations for visitors.

12http://grkfresh.com/

In contrast, this design feels playful and fun. Here, the slab serifs feel more trendy and less serious.

13http://www.open121.com/

Slab serifs seem to be used most frequently in large display type. In this design, the much smaller text caught my attention. The chunky serifs have a lovely rhythm to them that elevates the design.

14http://nitwinski.com/

The way the designer reflected the thickness of the serif type in the thickness of the circle to the left is particularly interesting. The other circles reflect the thickness of the type they contain. These unified elements feel very refined.

15http://www.madeinthefuture.co/

I wouldn’t have thought of slab serifs in this way, but here they convey a curiously futuristic style. The concept of more playful future is interesting, as opposed to a more stereotypical streamlined or computer-oriented one.

Scripts

Scripts are a particularly trendy feature in web typography. They have their traditional usage in formal invitations and such, but in recent years, they have become popular in interactive design. We are drawn to them for their ability to disconnect from the digital world. Their naturalistic qualities make them a great option for creating a down-to-earth tone.

16https://www.montagebook.com/

This website offers a perfect demonstration of script type in web design. Here the script-style logo hides the fact that under the hood this product is a very technical one. It makes the daunting world of bookmaking fun and accessible.

17http://magazine.johnfrieda.fr/

In rather stark contrast to the former example, this website uses script-style text in a more traditional way. Here, it elevates the design and gives it a luxurious feel—a perfect pairing with the content of the site.

18http://www.candyscupcakes.co.uk/

This site demonstrates what I love about script fonts; they can be so versatile. In this example, the overall tone is playful and fun, a rather whimsical contrast to the traditional use of the font style.

19http://growersquare.com/

I appreciate how the script style font above reflects the organic quality of this brand that perfectly pairs farmers with a technical product. It feels organic, and yet still modern and hip.

20http://mattandmallory.com/

I selected this example as the stereotypical wedding invitation scenario for script fonts. Despite the predictability of the script style for this purpose, the designer used an atypical typeface to give it a fresh modern feel instead of a very traditional one.

Mixed type

Finally, we have what I call mixed type—when the designer combines a minimum of three different fonts. This doesn’t include variations on a single font, but rather three or more completely different typefaces. Let’s look at the samples to demonstrate what I mean:

21http://amandaconti.com.au/

This example clearly shows three different fonts at work: a prominent script font, and both a serif and sans-serif font. Here it creates a lovely balance and isn’t necessarily a bold aspect of the design.

22http://www.ajmarksberry.com/

Here we see a different approach at work. The overall solution is much more typographic, and the use of type is really more of the focal point. The mixed type creates a unique feel that is matched by the textures, patterns and simple artwork.

23http://regeneratemusicco.com/

In this example, you have to visit the site to see the approach fully at work. That said, it combines three trendy fonts to create a simple yet beautiful design.

24http://web.uvic.ca/~laguerre/

This lovely yet simple design, combines three very distinct fonts to create a stylish design. The individuals initials are turned into a logo of sorts and the supporting fonts help it to truly stand out.

25http://www.eco-rating.co.uk/

This final example uses the mixed type approach in an interesting way. The type treatment in this case is a form of illustration that adds to the overall beauty of the design. The type pairs perfectly with the artwork and reflects the same style and voice.


Online course: Web Typography with Patrick McNeil

Remember when there were “safe” web fonts designers were supposed to use? How quaint. Web typography today is richer than ever, and this course will teach you the practical application of traditional typographic methods to the web. You’re a designer; you know how type works. By the end of this course you’ll be competent in designing for web type and implementing web typography. This course includes in-depth instruction on appropriate HTML and CSS code, custom web fonts and services, jQuery plugins and much more. Experience in writing code and markup is required to participate in this course, as it will not cover the basics. You should be comfortable implementing jQuery plugins and working with basic JavaScript. Learn more and register.

One thought on “5 Striking Trends in Web Typography

  1. dbonneville

    Decorative and script fonts, even in print, are the hardest to handle and not over do. The same is true in print. It’s nice to see the web catching up with print, finally, now that web fonts got to a tipping point where more top sites than not are using them. One useful bit of data is http://bonfx.com/fonts-of-the-world that tracks weekly web font usage across the top 10k Alexa sites. Even with all the font progress on the web in the last few years, Arial, Georgia, Verdana, are still by far, far, far, the most popular fonts used on the web! Give it another 10 years 🙂

COMMENT