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.
Slab-serifs
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.
Top: Life in Greenville is a beautiful showcase of slab-serif magic at work. Bottom: CSS Tricks uses Kulturista from Typekit for some great looking headlines.
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.
These sites use non-traditional approach to serifs and sans-serifs: their headlines are set in font usually reserved for body copy, and vice versa. Top: Smashing Magazine. Bottom: 8faces.com
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.
Hand-made
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.
Top: Hanzell website is a beautiful example of skillful usage of script fonts on the web. Bottom: Carlstrom productions uses hand-made fonts all over their homepage, to a great effect.
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.
Multi type
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.
These sites easily shuffle 3-5 different fonts & variations. Quite an achievement. Top: Kitchen Sink Studios Bottom: Future of Car Sharing
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.
Top: Forbes recognizes the importance of large type for computer users. Bottom: English workshop loves large type and isn’t afraid to show it.
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
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.
These websites use a subtle letterpress effect to enhance the appearance of their headlines. Top: Epic Event Bottom: Nosotros
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.
Ruggedness
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 is sometimes all you need to make a great looking website. Top: Viljamis Bottom: Austin East Ciders
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.
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 :)
i don’t really know if these trends would actually stick, but they do look nice. might as well try them on some of my designs.
Hi Melvin, you’re right, things are changing rapidly on all webdesign fronts. Still, these trends have been around for a while so it will probably take some time until they fade away.
Awesome round up of all the different styles of typography now present on the web, long gone are the days of just sticking to web safe fonts. Really like how you have described each trend and also given examples. Finding the right typography nowadays can really give that something to really make a design. I can spend ages looking through all sorts of fonts, obviously Google Web fonts is a great resource, font squirrel is awesome too though, for using typefaces through font-face. Cheers for sharing Peter!
Great article, thanks. I’m just realising how little I know about typogrpahy after years of being confined to Arial/Times hell.
You make a good point about small typefaces being hard to read, but you haven’t set this article in 16pt (or 1.3em). I had to expand it to read it comfortably :)
Thanks for the comment Steve. The word is out that 99designs is planning a homepage redesign, so this blog might get a facelift too :)
I’m a huge fan of multi-font designs so out of the above styles, Kitchen Sink Studios takes it for me. I’m also currently designing my own wedding invitations using 2-3 different font styles which all look GREAT together!
hi design are nice, but i cant see in full view
As a corollary to “Large body type” I have also noticed increasingly using oversized type in web forms – which I love – instead of forcing users to fill out tiny text fields and read small, tight lists in drop-menus.
Slab serifs and multi-types are trends that i’m a fan of. Great post. There’s also a little something about typograhy here by Cardprinting, an infographic on the landmarks in typography history. It’s pretty interesting.