Table of Contents
“Copy, art and typography should be seen as a living entity; each element integrally related, in harmony with the whole, and essential to the execution of an idea.”
-Paul Rand
Web design is complicated. There are a lot of things you have to get right in order to create a good design. One of the most important of these elements, even though it sadly goes unnoticed by most, is typography.
Sure, there are a few mainstream tropes about typography even non-designers know. Everyone knows Helvetica is ubiquitous and that you shouldn’t use Comic Sans, but that’s pretty much it. Nothing else, unfortunately.
So what is typography? Type is ubiquitous. We see it everywhere and we therefore take it for granted. Everything is type. Every time you see something written down, that’s type. Typography is the art of creating attractive type.
If we’re going to get technical, every written word has two aspects: the signifier and the signified. The signifier is the actual written form of the word, while the signified is the actual meaning of the word. Typography is the harmonization of signifier and signified. Typography refers to melding the two into one beautifully working and harmonious whole.
Now, we won’t get into the deep down of typography, since we’ve previously dissected the field and broken it down. Instead, we’re going to do you one better. We’re going to look at 20 stunning examples of the use of typography in websites and then, we’ll give you 5 tips on how to make your type shine in your website design and link you to our favorite 5 recent typography tutorials as well as our favorite 10 fonts of the year.
So let’s dig in! Here are our top 20 web designs for showcasing typography:
1. Chris Wilhite
2. Black in History
3. Holler
5. Playful
6. Flandria
7. Scytale
8. Atelier
9. Max Di Capua
10. Brave People
11. Risk Everything
12. Mixd
13. Irak
14. Grafik
15. Pupil
16. Vintage Hope
17. Mahedine Yahia
18. Little
19. Browser Awareness Day
20. Familiar
BONUS: 10 Awesome Fonts for a Cool Modern Design
1. 47
This superb modern font is perfect for any web design. Use sparingly and discreetly for the best impact.
2. AGE
This beautiful modern typeface is, like the previous one we’ve shown you, best used sparingly in order to maximize its effect.
3. Aldo
This is an awesome font and one that you can feel free to use all over your design. The sleek lines and the simplicity of the font guarantee that it will complete the modern feel of your design.
4. Deco Neue
A beautiful typeface that reminds us of Helvetica in its simplicity, but that isn’t quite as austere. If yours is a discreet type of ornamentation, this is the font for you.
5. Stroke
A beautiful modern type face with three weights that is exquisite for headlines and logos. Definitely worth checking out.
6. Forum
A beautiful classic serifed typeface. If you want to lend your designs some classical elegance, this may be the typeface for you.
7. Jockey
A beautiful retro modern typeface reminiscent of 30s poster design. Definitely worth checking out and filing it away for a future project.
8. CODE
This is a wonderfully slim typeface that works beautifully with any kind of modern design.
9. Pacotille
A beautiful angular typeface that works great in small quantities.
10. Fabada
We felt the need to end the list on another, less austere typeface that isn’t all that angular and that prefers more rounded lines. A beautiful round design for a modern look!
BONUS #2: 5 Typography Tutorials from 2013
1. Quick Tip: Create a 3D Retro Text Effect with the Appearance Panel
This is a very neat and easy to follow tutorial for Adobe Illustrator. The text effect is beautiful and it doesn’t take long to obtain. Definitely one of our favorite typography tutorials of the year!
2. Create Stylized Hay Bale Typography in Photoshop
This is a great intermediate level tutorial for Adobe Photoshop. It’s great for creating autumn inspired artwork. Basically, it’s perfect for all your rustic and autumn-themed work. While it’s now December, there’s no reason not to bone up on this now and be prepared for next fall!
3. Create a Glowing 3D Text Effect with Filter Forge & Photoshop
This is a great tutorial that shows you how to create a great effect and lets you get in touch with less known visual software Filter Forge. The tutorial is thought out for an intermediate audience and is quite easy to follow if you know the basics of Photoshop. And you do have to admit; the final effect does look pretty stylish and would be at home in any modern design.
4. How to Create Colorful Wooden 3D Text
Yet another beautiful 3D text tutorial. This one is written for more of an advanced audience, but you can’t deny that the effect would go well on any website trying to give a more of a hand-made, DIY impression. Do check it out – you never know when you might need it, do you?
5. Create a Dream Design with 3D Typography
This is another great 3D typography tutorial that teaches you how to achieve a stunning visual effect. For any earthy, nature-oriented web designs you may need, this is a beautiful text effect that you can use as a central element.
BONUS #3: How to Make Your Typography Shine (5 Tips & Tricks)
1. Choose Your Fonts Wisely
This is one of the most important aspects of typography, be it web-based or otherwise. You need to properly match the different typefaces you use, while making sure that you don’t use too many of them. Make sure that the fonts you use are not too similar as that will create a clashing visual effect, making the viewer focus on the subtle differences between the fonts instead of the text they’re conveying. Still, you should make sure the fonts are not too different either, so they don’t create a discordant effect. It’s a fine line you have to walk.
2. When Using Elaborate Typefaces, Less Is More
Everyone has a favorite font. Usually it’s one of the more elaborate ones. Maybe you’re a sucker for those Oriental fonts and finally have the chance to use them when designing a website for a Sushi bar. Don’t go overboard with them. Using them for a short bit of text (one or two words – a headline at most) is okay. Any more will just make the copy illegible. And that’s the last thing you want to do.
Think of these fonts as the seasoning in the food that is your overall design. A little bit of salt, pepper and spices go a long way. Too much and you’re cooking something nobody will be able to enjoy eating.
3. Emphasis
Some words will definitely be more important than others in your type. You want to emphasize these. In order to do so harmoniously, so that the overall effect isn’t jarring, you should use font sizes, the positioning of the word(s) and those around them as well as different font weights. Something else that works is the use of punctuation, like quotation marks, exclamation marks, apostrophes or other punctuation that serves to draw the eye to that element.
4. Your Color Scheme Can Make or Break Your Type
We’ve previously discussed color schemes and web design. All the principles we’ve mentioned in that article go double for typography. One important thing to keep in mind is that, while color theory still is very important, clashing colors isn’t a faux pas any more. Be creative with your coloring and create something unique that looks good!
5. Use Typeface-based Font Styling
There is a huge difference between styling font using software and using typeface-based font styles. Hitting the ‘bold’ button in any app will just make the regular font thicker using a mathematical formula that might make the font, which had not been though out for that weight, look bad. Using a different font weight will achieve the same effect, but it will guarantee that the designer of the font has actually tweaked the font and made sure that it will look good.
That about wraps it up for our look into web typography done right, fonts to help you create beautiful typography, tutorials to hone your skills and tips to make sure you have that extra edge. Now it’s your turn. What are your favorite fonts and tutorials of 2013? What are your guidelines when working with type in order to make it pop? Let us know in the comments section below!
