25 Websites Making Inspiring Use of Typography

Every website makes use of typography, but the vast majority of them don’t do anything particularly special with it.

In fact, a lot of the websites I visit on a daily basis make quite poor use of typography (in my opinion), why is why I always feel a sense of overwhelming delight when I do come across a website that has really gone the extra mile as far as typography is concerned.

So, if you’re sick of seeing the likes of “Arial” and “Times New Roman” (I know I am!), or if you need some typographic inspiration for a future project, here’s a few sites making excellent use of typography:

1. V02 Group

V02 Group

V02 Group makes interesting use of typography on their website in the sense that some parts of it are hidden behind the image of the runner.

This helps to create a sense of depth and portrays an image of the typography floating in mid-air.

Fonts used: Crimson Text, Futura

2. What is Your Future?

What is Your Future?

“What is Your Future?” is a beautifully crafted website that uses typography sparingly.

The design as a whole is quite minimalistic and “flat”, which is most likely the reason behind such an adventurous font choice (Baron Neue) for the large type.

Fonts used: Baron Neue, Georgia

3. Jacob Grubbe

Jacob Grubbe

Jacob Grubbe has created an exceptionally simplistic website here, with typography being the primary focus point – as you type, the website reveals itself.

Jacob only utilises one typeface in this design (Roboto) but it works perfectly with the minimalistic design style.

Fonts used: Roboto

4. Secret Resolutions

Secret Resolutions

Secret Resolutions is a colourful, somewhat in-your-face website that much like Jacob’s website above, only utilises one typeface (Brandon Grotesque).

The typography is big, bold, adventurous and fun – a perfect choice considering the concept of the site.

Fonts used: Brandon Grotesque

5. Basics09

Basics09

Basics09 does exactly what it says on the tin: it offers a “basic” website which once again, only makes use of one typeface (Benton Sans).

Benton Sans in itself is quite a simple and plain sans serif font, but the designer has used subtle styling and sizing to create a sense of hierarchy, even with just the one typeface in the design.

Fonts used: Benton Sans

6. Degordian

Degordian

Degordian makes use of large, uppercase typography for the main elements of the design, complimented by smaller, normal-case text written in the popular font: Merriweather.

This combination of large background imagery and large uppercase typography is fast becoming a web design trend this year.

Fonts used: Futura, Merriweather

7. Brancott Estate

Brancott Estate

Brancott Estate has gone for a blackboard-esque, hand-drawn effect for their website.

We’re unsure what the main font they’ve used is, but it features alongside Georgia. What it is it, it’s an epic combination.

Fonts used: Unknown, Georgia

8. Miles Calder

Miles Calder

Miles Calder has created a very minimalistic website here and again, the site utilises just one typeface: Founders Grotesk.

He uses various sizing’s, colours and styling’s to create a sense of hierarchy in the design.

Fonts used: Founders Grotesk

9. Run for AJD

Run for AJD

Even though this website is written in French rather than English, it still looks a little hard to read thanks to the styling of the typeface used.

However, you have to admit that style-wise, it looks pretty great.

Fonts used: Avenir Book

10. SendAMessage.to

SendAMessage.to

SendAMessage.to essentially allows you to send a personalised message to a friend, family member or colleague with just a few steps.

The designer has utilised Proxima Nova as the only font. a typeface known for its beauty at large sizes.

Fonts used: Proxima Nova

11. Amazee Labs

Amazee Labs

It appears that Amazee Labs have created a somewhat new and unique typeface of their own for this design, but it features alongside Source Sans Pro and Museo.

These two fonts work beautifully well together, and especially well alongside the bright, colourful typography featured in the imagery.

Fonts used: Source Sans Pro, Museo

12. Oudolf

Oudolf

The Oudolf website is very simplistic and much like Jacob Grubbe’s website featured earlier in the post, the typography is pretty much the only element of the design.

However, this website uses a cool effect in which the text is effectively masked over an image, which then reveals itself upon rollover.

Fonts used: Mason Neue Book, Univers Standard

13. I Am Baaz

I Am Baaz

“I Am Baaz” makes use of two beautiful typefaces: Verlag Book and Acrom Extra Bold.

When combined with the video background of the website, the result is stunning. its almost like a moving, interactive movie poster in the way it’s been designed and styled.

Fonts used: Verlag Book, Acrom Extra Bold

14. FS Millbank

FS Millbank

FS Millbank is a website advertising the typeface: FS Millbank.

It’s described as a “wayfaring” typeface and if you’ve been to any airports or train stations recently, you’ll probably have seen something that looks just like it on the signs there.

It’s a beautiful font and definitely works well for its intended purpose.

Fonts used: FS Millbank

15. Studio Lovelock

Studio Lovelock

It seems that Futura PT is growing in popularity this year, and has made an appearance yet again on the website for Studio Lovelock.

It’s the only typeface used in the design, but it’s been used in many varying sizes, styles and weights to create an interesting design.

It doesn’t even look like the same font in some places.

Fonts used: Futura PT

16. Adoratorio

Adoratorio

Adoratorio’s website is largely black and white, although there are the odd elements of colour, as demonstrated in the screenshot above.

Both Montserrat and Courier New feature in this design and although these aren’t the most interesting of typeface choices, the design has cleverly used colour and tracking/kerning changes to create a standout design.

Fonts used: Montserrat, Courier New

17. The Pattern Library

The Pattern Library

The Pattern Library makes very little use of typography, as it’s mainly an image-based site.

However, where typography is used, it is used primarily for the calls-to-action (i.e. the “download now” button). Clearly, the boldness ofMostraNuova is the perfect choice for this job.

Fonts used: MostraNuova

18. Spotify. Sweet Spot

Spotify. Sweet Spot

Spotify makes use of just one font in their “Sweet Spot” design for Valentines Day and it works exceptionally well when combined with the bold colour scheme and minimalist design of the site.

Various weights and sizes are used to create a simple yet obvious visual hierarchy.

Fonts used: Circular TT

19. 51 North

51 North

51 North is a design agency based in the Netherlands. Their makes use of two fonts: Minion W01 and Two Cen W01, both of which are used relatively sparingly.

One odd thing you’ll notice about this website is that a regular font weight is used for the main heading (“666”) whereas a bold weight is used for the subheading (“6th Anniversary”).

Fonts used: Minion W01, Tw Cen W01

20. RelaisBlu

RelaisBlu

RelaisBlu is a boutique hotel and restaurant in Italy. Unlike most of the sites featured in this post, the website actually makes use of three completely different typefaces.

Most of the time, using more than a couple of typefaces is various sizes and weights is a bit of a risk, but RelaisBlu manages to pull things off to create a visually stunning design.

Fonts used: Geosans, Fanwood, Theano

21. April Studio

April Studio

April Studio only uses one typeface in their design: Helvetica Neue.

Helvetica Neue is a relatively overused typeface these days (even Apple uses it in their OSX Yosemite and iOS8 operating systems).

However, by using various weights, sizes and colours, April Studio has created a clean and simple design with a clear visual hierarchy.

Fonts used: Helvetica Neue

22. EMyth

EMyth

EMyth is a relatively simple and down-to-earth website, which is in part thanks to the choice of typography: Museo Slab and Proxima Nova.

Proxima Nova can appear quite bold and masculine at times, but by using Museo Slab alongside it, EMyth has created a no-nonsense design that is clean, clear and appeals to both genders equally.

Fonts used: Museo Slab, Proxima Nova

23. Melanie DaVeid

Melanie DaVeid

Aside from the custom typeface design used for the large headings on the left-hand side of the website, Melanie only uses one typeface on her website: Proxima Nova.

She keeps things simple by utilising a bold weight for the subheadings, with a regular weight for the main content. This creates a clear visual hierarchy, while her custom font adds personality to the design.

Fonts used: Proxima Nova, Custom

24. Formlets

Formlets

Formlets is a company that has yet to launch, but appears to be set to launch a product that will compete with some pretty big players.

However, Formlets has used typography to help stand out from the crowd. Whereas most of their competitors boast a stale, corporate design, Formlets has opted for a more simplistic and friendly design. DIN Rounded and Roboto are used to achieve this.

Fonts used: DIN Rounded, Roboto

25. Nicholas Bussiere

Nicholas Bussiere

Nicholas has created an exceptionally minimalistic design and utilises just one typeface throughout: Apercu.

He uses two font weights (light and regular) and surprisingly, it’s the large headings that make use of the light font weight, while the smaller, less important text utilises a regular font weight.

He uses sizing and colour to ensure that there is still a strong visual hierarchy within the design.

Fonts used: Apercu

Like the article? Share it.

LinkedIn Pinterest

2 Comments

  1. love love love!!!!! This is great, thanks for the share.

  2. Nice design! This is good for my business portfolio. Thanks for this!!!

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *