Sometimes I will fall head over heel for a font and I won’t stop using it in every design I am involved in at that time. It can be really fun to incorporate the same typeface into various designs. However, that can also get boring quickly. I find the challenge of trying out something new and making it work much more appealing.
That’s why I’ve made this list. I’m hoping it will inspire you and challenge you to explore a new font in your next – or current – design project.
I think it helps to see an example of where that font has been used well to get the most creative juices flow. So, that’s what I’ve done here for you. This is a list of 14 different fonts used on 14 different websites. Let’s get started!
01. Playfair Display
The first font in the bunch is Playfair Display. It is a great and elegant serif font – it was my go-to font a few years back. The best part, it’s free and available on Google Fonts.
The other great thing about the font is its looks. On Projekcjie’s website, a graphic design conference in Poland, the font is used as an accent and it looks great! It doesn’t distract from the rest of the design. Actually, it complements it very well since the rest of the design is modern.
When I first saw the home page of Rollpark, I fell in love with their use of Sentinel. The home page has a great layout and use of balance on the page.
The font looks interesting; most landing pages stick to more common fonts. This page’s design, including its font, captivate someone who just landed on their page. That’s exactly what happened to me.
03. Sang Bleu
The serif fonts in this article is Sang Bleu. Femme Fatale is a Parisian creative studio with a killer website, and a killer font too. Their art direction is fantastic.
They were obviously going for a unique and creative vibe. Their choice of a black and white palette makes the design sophisticated. This is also partly due to their use of a large and thin serif font, Sag Blue. The font choice is a cherry on top of this amazing design.
04. Sofia Pro
Sofia Pro is one of my favorite fonts. The strange thing I haven’t used it in a delivered design yet. So, I’m going to try to get you to use it! This time, I’m sharing with you wrk. It’s an another creative web studio with a fantastic sense of design.
Their portfolio is very colorful, interactive and well designed. One of the things that make this design great are the fonts. The site wouldn’t look this good without such strong font choices. Specifically, I am referring to using a san serif font as an accent. Here Sofia Pro is not the main font and that’s okay. It still looks fantastic in its own place.
05. Signal No1
I love the team page design from welikesmall. My favourite detail about this page is the balance between typography and layout.
Signal No1 is the san serif font used as an accent in this design. You can see it as a small heading atop the much larger serif paragraphs. But you can also see it as the very light and faded text in the background. The typography here is great. Specifically, the play between the small, medium and giant fonts.
06. Trade Gothic
The main font for Method’s website is Trade Gothic. It’s a lovely san serif font that looks versatile by their use of it here. They use it in all caps for big page titles.
They use it in italic for headings too. It’s used on a button in a much smaller font size as well. A lot of fonts can’t handle such diversity in use. Most fonts are designed for a specific purpose such as a body font. But not Trade Gothic, it works in whatever situation you put it in.
One of my favorites on this list is Skg100, a monotype. I don’t usually work with designs that can handle a monotype like this. I think it’s cool and it’s fantastic to see it on Teletype’s website. It is creative design and font choice because it gives the website a fun and upbeat feel. I don’t think the design would be as cool if the font was a serif.
A serif font is not right for the vibe of this design nor the product they are trying to sell. And it wouldn’t be as powerful of a design if the font was a san serif either. Using monotype and Skg100 specifically was a brilliant idea! I’m also a big fan of how simple and minimal the design is. This definitely helps bring more attention to the typography.
08. Tiempos Headline
Tiempos Headline is the bold serif font used sporadically throughout the Pitchfork website. Overall, the website has a current look to it. Its use of Tiempos Headline just occasionally is an interesting design detail that is working very well for Pitchfork.
It draws just a little attention to itself and the article. It’s a good font to use as an accent element. It looks good when it’s bold too. I don’t think I would appreciate the font if it was used more often in the design. It’s current at a perfect amount of accent to the design.
Montserrat is another free Google font. I find that free fonts are a great start for any design. There is nothing wrong with not having to pay for a font. The reason I am including Montserrat on this list is its display of numbers on KøkkenSnedkeren.
Montserrat is used throughout their website but the way the heavyweight 4 or 8 look as a price atop of the home page is fantastic. The design of the numbers is great. What’s even better is the design when the font is bolder, specifically the 4 and the 8 look so good! It’s a fantastic choice if you too are displaying numbers on your next design.
10. Theano Didot
Cuberto’s design is fantastic! The creative agency definitely knows what it’s doing when it comes to web design. I was intrigued by their use of Theano Didot as their main font.
The font is used as headlines and is pretty large in size. This makes the detail of the font much easier to spot. Details such as the latter type’s thin arms or feet as well as the much thicker stem. The makers of Theano Didot did an incredible job at designing a beautiful typeface while Cuberto showcases the typeface very well for anyone to appreciate it.
Trip Rebel has a beautiful, big and bold headline on their home page inBrandon Grotesque. Because the text is so large you can easily see the details of that make Brandon Grotesque a great font.
My favorite detail is bottom of the letter b. Its foot is not symmetrical, it cuts off a little before the bowl (the round part of the letter b). You wouldn’t be able to see it and appreciate it if the font was smaller.
Seedlip is an non-alcoholic spirit with its own landing page. The website uses a couple of different fonts, the san serif on top of the home page is called Brown.
I think it’s a strong choice for the main font. It has a thin weight making it more pleasing and less intimidating when paired with the serif font as its accent. Like I said, it’s a nice choice and it’s used very well in Seedlip’s design.
Apercu was meant to be a thin and tall headline like in Shoe Kicker’s design. When I first saw the home page and it headline I was impressed with the font choice.
Here, Apercu is being very well presented and displayed.
The last example is of Avenir on Reech. I am madly in love with Avenir and wish it was a free font. I’d use it everywhere. The reason I am in love with it so much is its flexibility. The font looks great as a tiny footnote, as a paragraph font, and as a headline.
Although the font does come in various weight, the thinner version on Reech looks great! The hero section of the home page uses the contrast between dark colors and a white text very well. It also helps that the font choice was a good one too.
What fonts are you obsessing over right now?