Type on Screen
Best New Web Fonts of 2013
Tuesday 28th January 2014
2013 was a big step forward in the quest for a more beautiful, readable web. We saw an impressive 160% increase in the number of sites adopting custom web fonts and were spoiled with an unprecedented selection of faces that excel on screen. Today, Jake Giltsoff presents his favorites from the Class of 2013—those brand new designs that you’ll defo want to try out in the year ahead.
Pétala Pro is an extremely flexible typeface with a hefty 18 weights and styles, so it’s capable of handling pretty much any typographic challenge you throw at it. I’m particularly fond of its italics, which just ooze personality with wonderful ink traps. If you are on the lookout for a new sans serif typeface to set your blog, don’t hesitate to use this.
Bree Serif completes the superfamily of TypeTogether’s 2008 multi-award winning Bree. It follows on with the same friendly and playful flavor, with many of the letterforms influenced by handwriting. The slabby serifs render nicely on the web and add a real punchy impact in the heavier weights. Its range of styles are a perfect counterpart to Bree, but it also has enough character to work well on its own.
Inspired by hand-painted letterforms, Clear Sans Screen is one of the three variations of Neil Summerour’s Clear Sans. It’s been tweaked to improve its rendering and performance on screen by using a larger x-height and simplified weights. These tweaks make it very legible, and its clarity on the web is impeccable. I wouldn’t be surprised if it became the next rival to the likes of Proxima Nova.
If an elegant serif with a humanist feel is what you need, check out Felice. Its equal-width strokes and squared off serifs make it render beautifully on the web. I love the quiff on the ear of the ‘g’ and the long tail on the ‘y’. These nice touches are more evident at heading sizes, but at text sizes fall back to become part of the texture of the typeface without causing distraction. And its slightly condensed characters are great for use on small screens.
Brandon Grotesque has long been a favorite of mine, and at the beginning of last year Hannes von Döhren published Brandon Text as a companion. It’s ideal for longer text—benefitting from a larger x-height, simplified character forms, and larger counters. It has also been manually hinted and optimized for screens and works well when set small.
Clavo is a rather lovely multipurpose font family which is packed full of personality and subtle embellishment across each of its 10 weights. Just look at the flicks on the top serifs. Aren’t they nice!? Each of its weights has been optically designed to make the family work well at all sizes from caption to display, so it’s a great choice for complex typography. I’m sure we’ll be seeing a lot of Clavo this year.
Based on early production sketches of Metro No.1, Toshi Omagari’s Metro Nova is a reimagining that works great on screen. I really like its quirks and classic charm (take a look at that lowercase ‘e’). It works well at both large and small sizes, and the inclusion of the condensed version makes it ideal for use on mobile too.
If I had to pick just one typeface of 2013, this would be my favourite! Karol started life in 2011 as Daniel Sabino’s project during his MA in Advanced Typography from EINA/UAB, Barcelona. It was released as a family of 8 styles and was awarded the Certificate of Typographic Excellence from the Type Directors Club of New York. Karol has generous counter spacing and low contrast, ideal for composition on blogs or in long form. I really love the mix of calligraphic and engraving inspired elements.
If you’re after something a little different from the sans serifs that are so regularly used on the web, Quadon is an excellent choice. It was designed to bridge the gap between traditional serif typefaces and the web’s ubiquitous sans serifs. The resulting typeface has open shapes and a large x-height, which keeps it legible in small sizes.
Louize is a contemporary revival of ‘Augustaux’, designed by French punchcutter Louis Perrin in the 19th century. It’s been carefully designed for comfortable reading in long texts. I really love Louize’s italics—they would be perfect for use in a big featured block quote. It also has a Display version, which is perfect for headings.
For more web font recommendations, check out our Type on Screen collection. We’d also like to extend a big thank you to our guest author Jake Giltsoff for writing today’s post. Guest authors are paid for their contribution, and all opinions are their own.