{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Our web design trends for 2016 included a continued predilection for bold typography.

So, we thought we'd bring you some typographical inspiration, with some examples from agencies, ecommerce and beyond. Consider us the fo(u)nt of all knowledge.

Why not read the full list of web design trends for 2016.

1. ECC lighting

Starting with ecommerce, ECC is a New Zealand site that sources European lighting and furniture.

Product pages use a large Helvetica typeface with punctuation added to good effect.

These are designer products and prices are steep, which seems to be a theme at the moment for larger and bolder typography, featuring on designer/considered purchase websites but less so elsewhere.

There could be a practical reason for this - agencies and upper-end ecommerce tend to have smaller, bespoke sites, where perhaps it's easier to implement this kind of typography than it is with customised or 'out of the box' solutions.

I expect this to change somewhat in 2016, after all, Apple long ago proved the value of simplicity and coherence in the marketing of a mass market product, albeit an expensive one.

Websites such as Lush.co.uk are showing how great photography and larger text can combine for a more impactful ecommerce experience.

ecc lighting

As you can see, typography is used architecturally on the ECC homepage, with three or four different header menus becoming a design feature, using different orientations of text, shading, and complementary weighted borders.

Using typography to show off is a feature of a number of the websites in this roundup.

ecc homepage

2. Few

Here's the first web design agency on the list.

Few has a logo that is all about typography, and it emphasises this with animation on homepage loading.

few

What's interesting is that Few uses sans serif typography throughout (see images i and ii below), which is broadly a convention of web, but then switches to serif (Grad) for it's main message.

Because the text here is so large, it works well, and the serifs help to add a cultured flavour to the message.

Typography is about context, and here Few wanted to convey something more authentic and perhaps long-established or part of a design tradition.

few

i)

few

ii)

few

3. Simple as Milk

An altogether more hipster design agency next, Simple as Milk. This site is small but it's great to see what can be done with typography and colour alone.

The ghost buttons, underlines and bright palette work wonders.

The theme of big chunky text (Gotham Rounded) continues even in the 'contact us' form, which is full page width (see the third pic below).

simple as milk

simple as milk

The 'get in touch' form is full screen and utilises the same friendly Gotham Rounded typeface.

simple as milk

4. Brdr. Krüger

Brdr. Krüger, yep, another massively expensive designer furniture store.

The screenshots speak for themselves here, with large and overlaid text (Gotham) that stands out from the background.

I did find one product page where the overlaid text got lost somewhat in the background image and this highlights the danger of sites that uses overlaid text.

If the CMS allows simply for black or white text, and doesn't allow highlighted text (to pick it out from the image), it can be difficult to find a suitable image, especially for a small and multitasking web team.

brdr. kruger

brdr. kruger

5. Warby Parker

A big player in US eyewear, both online and on the high street, Warby Parker has brought cool to the world of opticians.

It shows this emphatically on its website, using enormous product images (not shown here, but do go and check them out), plenty of white space and large text both for headers and for product descriptions.

warby parker websote

Product pages have uber clear descriptions with size 24px Utopia Std typeface.

warby parker website

Further down the product page, this Proxima Nova typeface is large, centred and easy to read.

warby parker product page

6. Spotify

A big hitter now. Spotify doesn't mess about when it comes to the main message on its homepage.

The sans serif typeface is Circular, and very pretty it is, too.

spotify

7. Foreword 

Here's an agency that uses a slab serif typeface (Adelle, typical used for more intensive editorial) throughout, giving a discerning but modern feel. The title is lent some punch by its underline.

Foreword shows consistency using underlines to highlight the header menu, too.

foreword agency

foreword agency

8. Weston Vierregger

Weston Vierregger is a freelance designer. His website shows how coloured underlines and a very clean sans serif typeface (LLCircular Book) can provide plenty to entertain the eye.

Of course, being a designer, Weston is here using typeface, colour and the rather sleek grey background to show his self-confidence.

weston

9. Brian Hoff Design

Brian Hoff Design has featured previously in our web design trends for 2016 roundup, for his outstanding hover states.

Here I've included the company website again because of the colourful typography (using Gibson), which excels through incredible contrast when combined with even more colourful backgrounds.

about brian hoff

brian hoff design

brian hoff design 

10. Huge

Huge was previously included in our roundup of super colourful websites, for its joyous pink.

The combination of serif and sans serif (Galaxie Italic and Avant Garde), sometimes in the same line, is unusual and innovative.

 huge

huge 

 huge

11. Berlin Art Prize

A personal favourite here from the world of art, though a very small and simple Wordpress site (three or four pages).

The Berlin Art Prize site does contain some imagery but stands out for the full-screen use of text. I'm a big fan of white space, too.

See the GIFs below for a cheeky rollover effect on the side menu and a colour transition when you scroll to the footer.

berlin art prize

berlin art prize menu 

berlin art prize footer

12. McColl Center

The McColl Center is a gallery and studio space in Charlotte.

Its website is a tad strange, it feels a bit scatter gun, with a range of typeface colours, weightings and sizes (all Brandon Grotesque).

Having said that, I enjoyed the aesthetic of the site (chiefly the exhibition strapline and the chunky blog titles which turn orange when clicked), though whether it's easy to navigate is another matter (features are hard to click on, header menu only present on inner pages, etc.).

mccoll centre website

mccoll centre website

13. Pennies

The last selection, Pennies, shows how simple an information site can be. Some pictures, some blocky colour and some decent sized text.

Here the header typeface is serif, which is perhaps strange, given the app seems to be all about sans serif and chunky text with flat design.

One place this site falls down is the contrast on the third screenshot below, which shows grey text on a white background.

In fact, there's another page using one grey shade on another, which may not be accessible for all.

pennies

pennies

pennies

Ben Davis

Published 6 January, 2016 by Ben Davis @ Econsultancy

Ben Davis is a senior writer at Econsultancy. He lives in Manchester. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

780 more posts from this author

Comments (0)

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.