I love typography as a design element. It can make a giant impact on a design when it’s the focal point of a design. I wanted to share with you an amazing list of 17 websites that know what they are doing with it comes to typography online.

There are so many things you can do with to make for a bold and eye catching design. Let’s see what these 17 designs did to stand out!

01. Andre do Amaral


While scrolling down the home page and work page of Andre do Amaral’s portfolio I was blown away by its minimalistic nature and boldness. The case studies are only made up of a big photo, a giant headline, and  a year. The juxtaposition between the client’s name and the year it was worked on is brilliant.

Not only are the two text different in size, font weight but also in font type; the year is serif while the name is sans serif.

02. The Polar Spring


Take a look at how the Polar Spring shows off a little story. Here we don’t see a typical WordPress inspired design, the screen is split into two – once you enter the story that is. The colours and the photo on the left help with the ambiance of the overall experience.

But, I do think that the main focus is the written story. The body text typeface, Crimson Text, looks really good as a standard size body copy. That combined with the art deco branding typeface, called Yorker, the design is top notch.

03. Adoratorio


The black and white portfolio of the Adoratorio Collective is something else. I like that they’ve tried to do something without colour; it’s not easy to do well. I especially like their services section.

The text treatment as if it was redacted makes the left over items stand out. The blacked out text is actually other agency terms and not all Lorem Ipsum.

04. The Forecaster


This is by far, my favourite piece here. I’m not sure if I can call what they did creative since they are using a good old newspaper design treatment for their content. But then again, you don’t see this at all online. Newspapers are blog styled.

So this is new. However, the washed out gray text on top of the pink is beautiful. The classical serif font, Adobe Garamond looks stunning as both, the giant headlines and the smaller body copy. The additional use of Helvetica Neue is also a good touch. I think this website it a good example of how overused, or old, designs and design elements can be turned into something fantastic.

05. Piet Oudolf


Here you can see a highly creative design. Piet Oudolf designs gardens around the world and to show this off we have larger and slightly bolded typography with names of the location h has worked on.

Further, each location’s name’s text is filled with a photo of said location. It’s a clever way to display one’s work. The photographs as text is very creative, in my opinion, because they show the gardens while keeping the focus on the text.

06. Ginventory


What we have here is a landing page for a mobile app that helps you find the perfect gin drink. The typography in both, the app and the landing page is fantastic.

There is actually a log going on with the typography of the landing page, you have four different colours, about five different styles of type and two different typefaces. It’s commonly a bad idea to have so much variation but it’s well executed here. The different texts feel harmonious on this page as if they belong. That’s some really good design.

07. Nurture Digital


This website knows what they are doing when it comes to typography. The big and bold letter on the left is actually a video – it’s not easy to see in a png, I know.

So click it and check it out yourself. Each new case study you preview is a new letter, new video, and a new background colour too. What’s more, the page has many elements surrounding it, yet it’s easily digestible. The short copy about the projects doesn’t get lost neither does the lettered video. Typography was very important when designing this home page.

08. Filip Nordin


We have a lot of portfolios in this list, as you may have noticed. I guess it’s easier to be overly creative on your own site than a client’s.

Filip Nordin’s portfolio does not disappoint. The typography is well placed and makes a big impact being white text on black background. The font choice is clean, simple and the san serif typeface works really well. Sometimes something common can be made to look incredible too.

09. Matt Steel


Matt Steel’s website is gorgeous. The use of colour, space and type is spot on. It’s not very often you see a big text like this and it is even more rare to see text that is not black.

The navy blues look fantastic. You can really see that the fonts are not back thanks to their size and thickness. The same colour wouldn’t look blue if the fonts were smaller.

10. Bolden


The intro header is to die for. The giant text is fantastic. The text combined with the colours and that bubble animation when you hover are a lot of fun.

Let’s be honest, there aren’t that many headers like this out there. It’s really bold and in your face, I love it because it makes an amazing first impression.

11. SFCD


I’m a very big fan of the attention to detail this web page has for its typography. As you scroll down you see a few apps that the SFCD agency has done.

The combination of white and black, big and small, italic and regular is beautiful. The balance here is struck well. This is mostly because there is not a lot of copy. The text area is pretty small so they can get away with breaking the rules and having 5 different text styles. It’s also good that the repeat this diverse styling on each case study to keep something consistent.

12. Wonderland


Here we have another fantastic example of how typography can dominate a page. Wonderland’s career page is lovely. As you scroll down the page the various sections are just a single paragraph of text.

There is nothing to direct you from reading it – it’s a very direct way of showing off the content. I enjoy this design because it’s so to the point.

13. Publicis90


As you scroll through this creative landing page you’ll experience various colourful shapes as well as lovely transitions.

This was a well thought out page that has an amazing colour scheme, spacing, animation, and typography. On each section, it’s clear what a user is supposed to read and take away. With the modern style and branding, Super Grotesk was a great choice as the main typeface. It looks really good in a larger font size too.

14. Xavier Bourdil


I must say this is a pretty creative portfolio. For one thing, the typography is beautiful. The use of the big serif typeface is stunning.

However, the additional little details are what bring the design of this site over the top. My favourite is the blocks of gray that fade in and out on the about page. Although there is little copy the page speaks highly of Xavier thanks to its creativity; and, the typography is at its center.

15. Next Rembrandt


An amazing project between ING and Microsoft. They analyzed hundreds of Rembrandt paintings to create a new one. The site is all about their project and their creation and the typography is stunning. I think this site deserves to be called typography driven because its typography is well done for the small amount of it that is present.

The amount of typography is also a fantastic decision because it lets the background, the paintings, be the main focal point while the text plays a supporting role.

16. Studio Rotate


Studio Rotate’s website is minimal in design but at the same time, it does highly value typography. It’s the core of their style. As you click through their work or their about page the little text brief stands out compared to everything else. The typography is strong thanks to the minimalism.

The Graphik Web font stands out very well against both, light and dark backgrounds, and when surrounded by photos on the case study pages.

17. Checkland Kindleysides


As you wander around their website you can tell that the designers at Checkland Kindleysides know what they are doing. The typography is well placed; it’s the main focus everywhere and it makes it look powerful.

Neva is the company’s main font of choice and it looks stunning as either a header or a paragraph. The type itself is, in all honestly, pretty, which makes the company come off as friendly and approachable while being professional. It’s everything you’d need in an agency website.

What do you think?

Do you have a website with typography that’s to die for? This list of 17 items was not easy to an now down. There are just so many good examples out there!

To show main source of content: