Typography Trends

Technical developments over the past few years have seen a wider range of fonts available for use online, across an increasing number of mobile devices. Type, used correctly, makes the web a more visually interesting and readable place.

Following on from Simon’s post about flat design this current trend goes hand-in-hand with bold typography and large fonts. When done well this can work beautifully and often simplicity is best as demonstrated by the Ogilvy One Big Data site. The large fuss-free sans-serif type helps explain the main message of the site clearly and the considered use of white space allows the reader to digest the information gradually and not get overloaded with too much information.

[Ogilvy - One Big Data homepage]

The subtle fade in of the introductory text on the Our Name is Mud company home page also pushes clean, unfettered web fonts to the fore and gives the impression of a professional company with clear aims and good taste. Another favourite is Dickson Fong’s personal site. His bold use of clean futurist type combined with slick icons and a simple layout leaves a memorable impression.

[Dickson Fong’s homepage]

I love the new Rijksmuseum site. In the past, national art galleries and museums have been known to overload their homepages with lots of information in a bid to get everything ‘above the fold’, but the Rijksmuseum site is an excellent of example of less being more. Big background images from the collection combined with giant type leads to an impactful home page. Large fonts carry through to the navigation on the rest of the site and make the treasures in the Museum’s collection easy to find.

[Rijksmuseum homepage]

Hand-drawn type is harder to render clearly as web fonts but the Leeds Building Society Kick My Habits site does an impressive job of mixing illustrated elements with chunky web fonts. Every slide has been carefully considered to ensure the illustration, web fonts and hand drawn type sit in perfect harmony. This combination leads to one of the most fun and most clickable sites on the scene.    

[Leeds Building Society Kick My Habits site]

It’s interesting how the current flat design trend looks fresh and new online but the secret to its success is simplicity and good layout, and is built from the same foundations of modern 20th century graphic design for print. This makes me think that flat design and large type aren’t just flash in the pan modern trends and are more symptoms of the web maturing and adopting tried and tested techniques from its older brother - graphic design.  

Pete’s Thoughts

Right back in my Deluxe Paint days (DPaint on the trusty old Commodore Amiga by Dan Silva) I had a keen interest in using type in my design work for print and in short game demos I was creating. In fact, my grandma was a calligraphy tutor and had a wide range of pen sets, inks and other goodies. I was lucky enough to be taught various scripts such as Copperplate, and Gothic was my favourite at the time. I loved all the extra embellishment of the lines through the Title face lettering.

[Typical Gothic calligraphy]

This also made me particularly interested in illuminated letters, such as what is found in the Lindisfarne gospels (which by the way, are currently in Durham until 30th September 2013). Yes, that’s a Drupal site.

[Example page from one of the Lindisfarne gospels]

This interest in typography continued right through to when I was a Fine Art student, and I had a few stabs at creating my own font, either following tutorials from early issues of Computer Arts magazine, or simply lettering with pencil and squared paper. Through these naive attempts at font creation, I learnt a lot about many aspects of putting together a typeface, but mainly I learnt that it is extremely difficult and time consuming to design and build a well-balanced font that can work in more than one unique context. Respect to all font creators worldwide!

One of the key typographic categories I’ve admired and wanted to contribute to over the past decade or so is Script. I’ve been really keen on creating a bespoke handwritten script-style font, but in the past couple of years I have come across many that are far superior to what I had in mind. I’m generally short on time these days, especially with two little nippers at home.

Whilst I plot my own font creation, I have a few font creators that I highly admire, and none more than Drew Melton who spruces up my Instagram feed daily with consistently superb hand-crafted typographic goodies.

[Hand-drawn script type by Drew Melton]

Alongside script fonts in general, I’m now becoming a big fan of a wider range of clean, bold, sans-serif headline fonts such as Verb (by Yellow Design Studio), Nanami (by Alex Haigh) and Vaud (by Wordshape). Marvel at their beauty!

[Verb font family by Yellow Design Studio]

[Nanami font family by Alex Haigh]

[Vaud font family by Wordshape]

Simon’s Thoughts

One of the most interesting recent developments in typography is the rise of web fonts and the emergence of services such as Google Web Fonts and Adobe’s TypeKit.

For a small fee (or free, in Google’s case) you can access thousands of fonts that will work quickly and seamlessly across desktop computers, tablet and mobile devices. This is a marked change from the early days of web design where you were restricted to the small pool of fonts that came preinstalled on people’s computers.

The main effect of this was that most web sites ended up looking the same, or having a similar feel to them. However with these new web services a designer now has much more freedom to really mix things up and experiment with their type without having to be as concerned with the technicalities.

No longer restricted by the limited pre-installed system fonts, you can mix serif, sans-serif and handwritten fonts (amongst others) seamlessly to help add to the feel and purpose of a web page. For example, The Great Discontent is a mix of interviews and videos on a magazine-style format and so uses a selection of serif text for each paragraph and then larger sans-serif for quotes and headlines - similar to what you’d see in a physical printed magazine.

[Page from The Great Discontent site]

With classic type-creators like Hoefler Frere-Jones launching their own web fonts services, this is an area that will hopefully continue to expand over the next few years - and the web will be all the better for it.

Craig’s Thoughts

In the early days of the web, pretty much all websites were limited to the same palette of system fonts, namely:

1. Arial
2. Comic Sans
3. Courier
4. Verdana
5. etc

The reason for this was simply the fact that you could pretty much guarantee that most users had these installed on their systems and that what you saw was a good approximation of what they’d see.

If you wanted to use anything other than these simple fonts in your design back then, it generally required you to use images to accomplish this. It was very common for headers and navigation elements on the page to be images for example. This was fine as it produced a nice looking design, but updating this became a pain and required a reasonable level of expertise to accomplish.

The first tool available to users to get around this were flash based font-replacement tools such as Sifr. These worked pretty well, but if the user didn’t have Flash installed, they would simply revert back to the fallback.

The next group of tools available to users to replace fonts utilised the canvas HTML element to do font-replacement. Cufon was a popular example of this kind of tool.

We’re at a stage now in the history of the web where font-replacement tools have become commonplace and as long as you’re using a reasonably modern browser, you should be able to display these correctly. This makes it an exciting time to be a web developer and gives designers much more latitude in what they can create.

Emmanuel’s Thoughts

Strong typography is, in my opinion, an absolutely integral part of modern web design. With the arrival of the flat design trend, and with minimalism enjoying plenty of the limelight, the focus is squarely on the content - as it should be. Good typography helps the user digest this content without fuss.

Big, loud typefaces help deliver a clear message. Slab typefaces are increasingly popular, easy to read and leave lasting impressions when used appropriately. I’ve long been a big fan of the use of giant type in headlines to convey a message. Good choice of type is equally important for body copy. Readability is such a big, and oft overlooked aspect, especially when designing a site that needs to read well across a multitude of devices - larger font sizes for body copy help here.

Some of my favourite typefaces at the moment are Lato, FF Tisa Web Pro, Flandria, Klavika and Open Sans, although I’m constantly stumbling across other fonts and thinking about how I’d love to build an entire site based squarely around it as a centrepiece.

[Flandria font front and centre]

A great typography story reaching out to the homeless community (via @peskychloe) http://t.co/yIMxb3aVKE #greatcontent

— Curve Agency (@CurveAgency) August 9, 2013