The world of typography is an interesting animal, because so many designers completely neglect it, not realizing that a wisely chosen font can not only make your site look much better, but it can increase conversions and prompt visitors to feel curious about your content.
From Gotham Gold to Sans Serif, a designer has a responsibility to understand fonts and typefaces, and even if you have no design experience at all, there’s a solid chance that your designer has made deliberate selections for the typography on your website or other online materials. So, it’s wise to ask why those decisions were made to wrap your head around how your website is working to make you more money or bring you more subscribers.
We could talk about typography all day, but one of the best ways to get your juices flowing is to look at some websites that kill it in terms of typography. These sites utilize interesting color combinations, size choices, font selections and more. All of which tie into the effectiveness of your typography.
So whether you’re a seasoned designer or a complete newbie, take a look at the following websites for your typography inspiration. Bookmark them for your future designs and to see exactly how the professionals make typography work for them.
The Endeavour Capital website is a nice example of how large typography works wonders for explaining what it is your company does. As you can see on the homepage, Endeavour Capital has strong fonts, with alternating colors for a little creativity. Headers and subheaders are much larger than the actual content, putting focus on the most important elements. In addition, each area of the website tends to use the exact same font, hammering down the branding and making it easier to read for visitors.
The Nerval site clearly wants to let off a friendly vibe, with a rotating “Bonjour” text scrolling through the top part of the site. The navigational menu isn’t exactly that large, leading us to believe that the designer sees the content further down the page as more important. The background has some typography and the portfolio items each provide headers that standout. Finally, the Bonjour text is pink, for the perfect branding.
The TasteRewind page from Spotify reveals a beautiful logo/header text with alternating font colors whenever the background image changes. This helps grab attention and shows that all eyes should be on the “Let’s Rewind” button, since there really isn’t much else in terms of typography or links.
04. JD and Co.
JD and Co. provides an interesting look into how designers can merge background images and typography, since it uses bold white fonts that overlay rather well, along with a pink background for one of the header words, adding some juxtaposition to the mix.
All the fonts are relatively the same as you scroll down the page, and you can see all of them clearly, since they each act as calls to action. The only area that doesn’t look all that great is the italicized module explaining what the company does at the top.
05. Pauline Osmont
Pauline Osmont is an art director and illustrator, which are two professions that can be well represented with the perfect typography. The website does her justice, since the primary logo towards the middle is swooping and creative, combining well with the white and gray background image.
The typography somewhat dissipates as you scroll down to the portfolio, but when you move the mouse over one of the portfolio items you can see that the fonts and typefaces stay in line with the mood that was set from the typography at the top.
06. Do Amaral
The Andre Do Amaral portfolio is one of our favorites in terms of typography, because it takes a simplistic approach and absolutely nails it. The navigational menu is a simple and thin font, with only three tabs for people to click on. While the portfolio is a vertical slider that reveals a super large title, which requires no additional explanation.
07. Sassi Holford
The Sassi Holford dress website utilizes several elegant typography options, which combine rather well, particularly in the header area. You’ll notice that the typography is completely white, going along with the fact that the company generally sells white wedding dresses, and it also looks great when placed on top of a pink background.
Each section of the homepage is highlighted nicely with some italics and header fonts, all of which lead to descriptions in case people want to read more. The key here is that the text merges well with the images, almost as if a visitor could simply look at one or the other and know exactly what was being said.
The Adoratorio site uses what looks like a form of Courier font, as if the designer used a typewriter to generate the typography. This is such a unique choice, since it still looks cool, and you can grab attention rather quickly if you’re working in a creative profession.
The fonts change quite a bit when you scroll down to look at some of the modules that feature things like the team and blog posts, but the black and white colors remain the same, and you can see that the company is going for somewhat of a grungy look.
09. FS Millbank
The FS Millbank website is actually a platform for a certain typeface, but it works rather well, since the typography is a combination of large white text, overlaying on top of a black background. As the user scrolls through the website, other colors come into the picture, and you’ll notice that almost every line of text is a different size, which makes it perfect for a creative vibe.
10. Vito Salvatore
Vito Salvatore is a photographer and designer with a stunning portfolio that features a simple, yet elegant navigational menu for pushing visitors to check out contact information, past work and details about the photographer. What’s interesting about this typography is that it’s all generally white, yet it still looks pretty nice on all of the background images from the portfolio.
In addition, when you scroll over one portfolio item, the text is made a tad larger, yet you can still see what’s coming up in the sequence, causing curiosity in the visitor.
11. Hart Island
The Hart Island website is designed to talk about the largest tax funded cemetery in the world, and it uses somber tones and video footage to get the message across. However, the typography also plays a huge roll in prompting visitors to care about the movement, since the colors and weights of the text can be seen rather well, even as the video cuts to different clips.
This is not exactly the easiest effect to achieve, but the Hart Island website makes it work. In addition, the typography assists in adding to the heartbreak that is the list of anonymous people who are buried in mass graves when you scroll down the page, with time tickers for how long they have been buried and call to actions for visitors to tell stories about them.
The Brian Hoff Design website doesn’t have much on the homepage, but that’s what makes it so effective. The header text is white, bold and strong enough to prompt the visitor to move onto the next line of text. After the user reads that, they are then told to click on a link, which is obviously what all businesses want. The typography combines well with the brightly colored background, and the menu is even quite powerful when a user clicks to reveal it to the right.
Oudolf is another favorite in terms of typography, since it’s a beautiful combination of portfolio items, but it also uses interesting typography to introduce each visual element, instead of utilizing the images themselves. When you look at the homepage of the website, it’s simply a hodgepodge of random words, yet when you scroll over each one it unveils an image and link, which leads you to even more images and descriptions about the project.
What makes this typography choice so interesting is that the letters are translucent, giving a glimpse into what each image is going to look like. Once the visitor moves the mouse over a word, the text turns to white and she can completely view the image.
14. Send a Message
The Send a Message site hardly has any typography when you first land on the page, which is a wonderful choice because it sparks user interest with a few simple words: “Scroll Down My Friend.” When you scroll down with your mouse, the fist in the background rotates and reveals a three finger salute, with bold lettering showing the message: “Revolution is Near Summoner.”
The whole point of the website is to send a message to whomever you want. The catch is that the person also receives a visual hand gesture, and the typography is so strong that the message resonates quite well.
Over to You…
What do you think about these websites for your typography inspiration? Let us know in the comments if you have any other websites that help you with your own designs, particularly in terms of typography.