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.
Here is a good place to start exploring them.
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.
Serif headlines, Sans body
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.
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.
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!
Large body type
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.
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.
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:
- Webfonts Showcase
A great microsite demonstrating creative use of web fonts across various sites. The best part? It shows you most popular (bestseller) fonts in the sidebar, so you know what’s really hot right now.
- 10 great Google font combinations you can copy
This article shows you some amazing Google font combinations you can use immediately, without spending time on trial and error.
- The most popular fonts used by designers
A well written and elaborate article showing most popular typefaces used by designers throughout history.
- Four techniques for combining fonts
A well presented tutorial for combining fonts in four different ways, with pictures and explanations.
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.
Latest posts by Peter Vukovic (see all)
- JQuery for designers: 5 coding techniques anyone can learn - November 20, 2013
- Turning skeuomorphic design into flat design - October 23, 2013
- How to make killer email designs - October 4, 2013