Typography trends in web design (and some goodies to get you started)

Peter Vukovic

It’s generally unwise to claim there are trends in typography because good typefaces have a very long shelf life and staying power. Some of the most popular typefaces to date, like Helvetica, were invented decades ago. Some, like Baskerville, have been around for centuries in one form or another.

But each design era is marked by a prominence of a certain typeface, type family or specific way of using type. In the 70’s and 80’s, Blippo, Helvetica and illustrative type were used extensively. In the 90’s, no particular typefaces emerged but typography was set in more creative layouts (thanks to computers) with digital effects being almost the norm among designers.

Today is no different. Web typography is making its own rules and its own way into history, defining trends to be studied by some future generations.Lets explore a few of them.

1. Slab-serifs

greenville

One could easily say that slab-serif typefaces are experiencing their 15 minutes of fame, being used more extensively than ever throughout design history. This is because of their dualistic nature: high legibility makes them an excellent choice for on-screen display while their prominent, block-like serifs add to their visual appeal and definition.

Slab-serifs are best used for headlines, quotations and snippets of text. They are rarely used for body copy because they’re not suited well for larger chunks of text. However, if you’re designing a microsite with just a few paragraphs of text, slab-serif fonts are a way to go.

2. Serif headlines, Sans body

webtype

Using Georgia for headlines would be frowned upon by most design schools – it’s a serif typeface created for body copy, not headlines. Likewise, using Arial or Helvetica for body copy would probably get you expelled because these typefaces were made specifically for headline or display purposes.

Yet this “upside-down” combination of serifs and sans-serifs works surprisingly well on the web. There is a big reason for this: sans-serif fonts like Arial and Verdana are easier to read on-screen than most serif fonts, while serifs like Georgia, Rockwell or Museo look very nice when set in larger sizes.

Although I would always recommend using a larger serif font for web pages with lots of text, this counterintuitive combination works pretty well and is definitely here to stay.

3. Hand-made fonts

hanz
Hanzell is a beautiful example of skillful usage of script fonts on the web.

Similar to previous trend where designers use serif headlines, hand-made text is slowly paving its way into the web design scene. From pencil-sketched headlines to entire pages set in handwritten or script typefaces, this design trend is becoming ubiquitous.

Be careful though – these fonts are very tempting and can make you easily go overboard. Stick to headlines or short snippets of text and you’ll do just fine.

4. Multi type

kitchensink

The proliferation of web fonts made some designers really happy, so websites using three, four or five different fonts are quite common these days. Layout wise, they either combine them into a traditional type-based design or they use them skillfully throughout body copy.

However, combining such number of fonts into a visually appealing design is a skill which takes a lot of time, knowledge and practice. For most purposes, I would advise you to stay away from trying this at home, but if you want to earn some points from the design community and compete with the best – go ahead!

5. Large body type

medium

For one reason or another, designers were always in love with small type – it looks more elegant and takes up less space on screen.

Sadly, it also makes for a bad reading experience. Large body type is becoming the norm as user-centric design and user experience is becoming increasingly important on the web. Pages with body copy set in 16-pixel size are becoming very common, mostly because designers and clients are realizing that users are avoiding sites which do not read well, as explained in this article.

The lesson? If you want to keep more users hooked to a website, use large font size for body copy.

6. Letterpress

tickets

Letterpress might be “old news” in web design but typography-wise, it’s definitely here to stay. Essentially, this visually appealing type treatment involves setting darker type on a medium-lit background, then making it pop by adding a highlight in bottom-right area of the type.

In modern browsers, this can be achieved entirely by CSS, although this type effect is traditionally created in Photoshop then used on websites as an image.

Letterpress effect should be used sparingly – it’s great for headlines or type-based logos but can look a bit over the top if you use it on larger chunks of type.

7. Ruggedness

cider

Rugged type in combination with subtle textures is slowly but surely making its way into design history. This effect is becoming so popular that actual fonts are being created which look rugged but you can easily achieve this particular look with Photoshop eraser tool and some special brushes.

Rugged type works best with retro-looking designs but can be easily integrated into virtually any design piece – it simply looks good.

As with leterpress effect, you should take care not to overdo it. In fact, for best results, this effect should be applied only to headlines.

Some goodies to get you started

These 7 web typography trends are good to know but getting some hands-on information is even better. Here are online tools and resources I would recommend to anyone starting out with rich type on the web:

Conclusion

Rich web typography started around 2008 and is at full speed now. Trends like increased use of slab-serifs, headline serifs and hand-made typefaces are often in contrast with traditional print design rules but they work well for the web and reading text on digital devices.

Other trends like letterpress effect, using multiple typefaces or a rugged look, dictate the overall look and feel of websites today.

For more on web design trends, check out 6 web design trends that are here to stay and 7 user interface design trends you need to know about.

This article is by no means an in-depth insight but a quick snapshot of type trends on the web. For further exploration, dive into the links suggested above and use Google – a lot!

Did you notice a certain trend in web type? Know some good online resources? Share it in the comments.

The author

Peter Vukovic
Peter Vukovic

Peter Vukovic is a seasoned designer & creative director with 10 years of experience in worldwide advertising agency. He is a proud member of the 99designs community. You can view his 99designs profile here.

Related articles

How to create more fun and playful typography

How to create more fun and playful typography

Good typography may be hard work, but designers shouldn’t forget to have some fun with it! While crafting fonts and typographic characters can sometimes feel stiff and overly mathematical, we want you to help you find the joy in creating more expressive and playful typography. Of course, this approach is great for children-oriented design projects—but let’s not limit ourselves. After…

6 tips for better typographic hierarchy in web design

6 tips for better typographic hierarchy in web design

Have you ever looked at a design and thought, “Something doesn’t feel right”? If you can’t put your finger on what it is, the odds are good it’s an issue with your visual or typographic hierarchy.  When you cram content onto a page with a muddied mass of line breaks, bolded letters and italics—you’re sure…

Digital Fonts: A condensed history

Digital Fonts: A condensed history

More than ever before, designers today are tasked with designing with digital tools, for digital environments like web pages. The digital-to-print connection, once paramount, is now only one task among many. This change affects all aspects of design, but perhaps none more than typography, where the readability of digital fonts depends so much on the…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%