11 Stunning Typography Examples From 3 Surprising Sources.
By Jeremy Girard
Mar 24, 2015
The past few years have been very exciting for web typography. The addition of “web fonts” has allowed designers to bring really rich typography choices to their work. It is a far cry from the days when our hands were tied in terms of fonts to use online and we were forced to make due with only a handful of “web safe” options that could be reliably shown on our sites. Thankfully, those days are behind us now and this new, golden age of web typography is upon us. Designers rejoice!
The importance of this newfound freedom in web typography cannot be understated. All the way back in 2006, experts were saying that “Web Design is 95% Typography", a sentiment (and percentage) that has since been updated with the rise of responsive web design and websites that support multiple devices (see “The Responsive Web Will Be 99% Typography”).
Exact percentages aside, the point remains that typography is pretty dang important to web design and it can make or break our work. As we look for inspiration for how other designers are pushing the envelope with web typography, we can actually find some stunning examples from a number of surprising sources! Yes, the big agencies and well-known names are doing some impressive work, but there are also many amazing examples from some lesser known designers. There are also some great examples that we can find by looking at themes or industries other than traditional “design” sites. Let’s take a look at some of those examples. Inspiration commencing in three…two…one.
Food And Beverage.
In my search for interesting typographic design work online, I was surprised at how many great examples I found on websites for food and beverage companies! From beer to tea to fudge, here are some typography examples that are as tasty as the products they are promoting!
Bay Street Biergarten - baystreetbiergarten.com
This ‘biergarten’ located in Charleston, South Carolina uses large text that is simple and bold. On the homepage of the site you are greeted with the words “Good Food” and “Craft Beer”, along with a pair of mugs enjoying some brew! The large text gets the message across loud and clear and the clean lines of the fonts chosen really add to the no-nonsense feel of this site.
If you scroll down the homepage a bit, you will come to a section that has a message that says “Craft Beer Always On Tap.” I love the way the designer has treated this message. The quirky, almost hand-drawn feel of the letterforms really stand out alongside the rest of the site’s typography and it adds a nice touch to the overall presentation (it also makes me thirsty for a beer)!
Little touches like this can be found throughout the site. On the ‘Menus’ page, there is a message that says “Bavarian Inspired Southern Made” that, like the “On Tap” message shown above, stands apart from the rest of the page’s type design choices in a way that really adds to the site.
Shiner – shiner.com
Staying with the theme of beer, we can will look at a company named Shiner next. This Texas brewery uses a variety of type styles on their website, from the Blackletter font used for the Shiner logo to the bold, condensed font that was chosen for the site’s navigation menu and footer, to the assorted fonts used in the homepage’s carousel of messages. There is a variety of nice choices here. Let’s look at the different design styles at play in those aforementioned carousel messages!
This large message uses a combination of sans-serif fonts alongside a chunky slab-serif main text (the words “Your Fridge” in the example above). This pairing really works well here, and the distressed look of the slab serif letters adds some nice texture to the design and a feel of age and history to the display.
Other carousel messages offer different, but equally impressive, typographic design work. Here are a few others that are available on this site:
The Fudge House - fudgehouse.co.uk
Changing gears a bit, let’s move away from beer and over to fudge. On the website for The Fudge House, you will find a mix of font choices almost as delicious looking at the fudge (I said “almost”, that fudge looks damn tasty).
The company’s logo has some nice, flowing curls in the letterforms, which is a great contrast to the thin and straight letters chosen for the text at the top of the page (to the right and left of the logo) and the main billboard message. Body copy uses a nice serif font set in a variety of sizes to add some rich variety to the page.
I especially love the “about us” page (shown below) and how a few minor variations to how the serif body font is being used adds so much to the display. From the opening paragraph set in a larger size to the pull quote displayed in italics with a slight indentation, the flexibility shown here, while still using one font, shows an excellent grasp of typography design.
The Tea Factory - www.theteafactory.ca
For our final site example in the “food and beverage” category, we will take a look at The Tea House, a site that uses strong typographic design right from the get go with the “word cloud” style look of the homepage. Anchored with a large slab serif font that says “Time for Tea!”, the surrounding words are set in a variety of styles, sizes, and colors, creating a mixed up display that actually works really well in this design.
One page that I particularly love, and which is worth noting, is the “Our Teas” page. The drop down menu uses colors for each tea category and those same colors are carried through to the page itself and the list of teas. I am sucker for a slab-serif font, so I love how they are using these fonts on this page and I really think the typography choices they have made here create a warm, fun look for this excellent website.
Travel And Tourism.
So we’ve taken a look at some examples from the Food and Beverage industry, which doesn’t exactly scream “great typography”, but which, as you have seen in the examples above, can provide an excellent source for inspiration. Next, we will turn to another industry and unlikely source for typographically rich design work – the Travel and Tourism industry.
Fall In Tennessee - fall.tnvacation.com
One of my all-time favorite type-focused website designs is the site for Fall In Tennessee. The beautiful colors that greet you on the homepage work so well alongside the very organic, hand-drawn feel of the word “Fall” in the very center of that page. The condensed letterforms of the navigation provide expert contrast here as well.
The first image shown on this site is wonderful enough, but they don’t stop there! Scroll down the page (or click a navigation link) and you will get even more wonderful layout and type choices, including:
Visit Jamaica.
Another great looking travel site is the one for Jamaica. A very rough, hand-lettered font that says “Now That’s What I Call All Right” lays on top of a giant, beautiful image (that has some nice movement in it).
Click deeper into the site for Jamaica and this hand drawn font is used for main message and headlines. The sparing use of this font is a great typography choice because is adds some life and flavor without overpowering the design or limiting readability. I can almost hear the Bob Marley music as I cruise through this site.
Kakslauttanen Artic Resort - www.kakslauttanen.fi
Located in Finland, the Kakslauttanen Artic Resort is as beautiful as it is remote. The website uses wonderful photos (including some of the resort’s glass igloos that you can sleep in and see the Northern Lights above you – how amazing is that!) paired with very simple, clean, thin letter forms.
The sans-serif fonts used on this site really make reading easy and the words do not take away from the stunning photos shown throughout the site, making you want to book a room and head to Finland and the Northern Lights.
Little-Known Designers.
So far, we’ve taken a look at two industries that may not be known for typographic design, but which certainly have some worthwhile contributions to make to excellent web typography. For our final set of examples, we will look at some work from designers, including some designers whose work is outside of the digital realm of the Web. While you may expect wonderful designed type to come from design professionals, what is unexpected here is that these are not household names from the biggest agencies. Here are some designers who you have never heard of before, but whom are all doing amazing work and who have some great typography on their websites.
Fixate - fixate.it
Since the first time I saw this website, I have been blow away by how intricate it is. The illustration work is jaw-dropping and, despite the complexity of those illustrations, the site is fully responsive. The clean, simple fonts work perfectly alongside the rest of the illustration’s lines, blending in to create perfect harmony between the words and the illustrations. Add in the fact that the fox on the homepage “blinks” his eyes and this thing is just too cool for words!
Click through onto other pages of the site and you get more wonderful illustration and blinking animals, including owls, tigers, and more.
Chris Wilhite Design - chriswilhitedesign.com
This company offers furniture and cabinetry design and their website uses photos of their designs, the raw materials used to create their products, and some bold typography choices. Strong, condensed sans-serif fonts are paired with equally bold serifs in a way that adds nice weight to the design. Fonts are set in large sizes to really convey a strong, clear message.
Click through the site to some of the interior, product pages and large photos paired with large text make for a look that expertly displays this company’s offerings.
Fifty Five Hi’s - www.55his.com
A one-man operation run by a designer named Ross Moody, Fifty Five Hi’s offers a variety of printed products - from posters, to greeting cards, to stickers, and more. All of these designs are typography-based, so you would expect the website to also be rich in typography, but they have chosen the opposite. The website uses a pair of unassuming font choices (a thin sans-serif for navigation links and a basic serif for headlines and body copy), but these simple choices allow the typography of the work itself to really shine through! Since images of the work are the main focus of this site, the reserved approach of the type used for the site’s design ends up being a perfect choice!
Click through and see some examples of this designer’s work and the wonderful type styles available for purchase. I actually have a few of his pieces hanging in my office and they look even better in person!
Knuckles Industries - www.knucklesindustries.com
Our next example is for a very different kind of designer, a fabricator that works in metal! This site’s messages feature a wide variety of typographic styles. In the examples shown below, you will see slab serifs paired with condensed sans-serifs, you will find distressed fonts that look beaten and worn along with font choices that evoke a sense of letterpressed type. While an overuse of fonts is something that should be avoided, this site uses this variety very effectively. If you are looking for some type design inspiration, this example has a bit of everything!
Let’s Hear What You Have To Say.
What do you have to contribute to this topic? What unlikely sources have you found as great resources for typography design and inspiration? Don’t be shy - use the comments area below to share some examples and site links for others to check out and also let us know what is it you like about the examples you are sharing!
Brought to You by Webydo.
See how Webydo fits into your design workflow and business.
Request A Live Demo
Blog Menu
