13 examples of websites with confident typography

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.

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.

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.

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.

ii)

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).

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

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.).