There is no doubt about it – typography and the font-faces we choose has a huge impact on multiple aspects of our website including readability, mood, perceived article length, user experience and much, much more. It is absolutely essential that designers know and understand the different principles of typography that create a pleasing design, in order to properly portray the vision and mood of the website they are designing.
Limit Font Faces.
One important principle of using typefaces for websites is to use some amount of consistency in your design. Quite obviously there are two ends of the spectrum to using multiple typefaces: you can use only one font on your website, or you can change fonts every other sentence.
Somewhere in the middle is the perfect balance between these two extremes. Your best option is to pick anywhere from 2-4 typefaces to use in your design and stick with them.
When you exceed 3 or 4 typefaces you begin to detract from the content and the reader becomes confused as to the purpose of the design and the information you are presenting.
Font Selection Gives your Site its Character.
The main purpose of your font selection or typeface is to convey the character or purpose of your website and content. This means you need to go back and review the core purpose of your company, article, content and/or product. Once you know the main point you would like to communicate to your readers you can then choose or design a typeface that reflects the purpose of your content.
Consider for example the typeface that TypeDeskRef.com uses for their header. The purpose of this site is to promote and sell their e-book which is a reference for typography enthusiasts.
Another website that effectively communicates their site’s purpose with their typeface is Amazee Labs. Notice how the font they have chosen gives you a sense of being in a chemistry lab where they are cooking up creative web solutions.
Alignment is Important. Guide Your Readers Through the Article.
The way you align and arrange your text on your site can have a huge impact on how readable your content is, as well as on the mood the type conveys to your readers.
Traditionally, there are four types of font alignment. These are right, left, centered and justified. However, because of the power that CSS and Photoshop images offer to designers you can pretty much align your text however you feel like. However we all must remember that:
“With much POWER comes much RESPONSIBILITY.”
The alignment of your text needs to help direct your readers and users to the most important information and to help them see structure and flow in your website.
With the availability of news, articles, reviews and other media today, your visitors don’t have the time or patience to sludge through a 1500 plain-text article.
You as the designer must effectively utilize the power of alignment, font-sizing, colors and every other tool you have to guide your readers through your website.
Trent Walton does a good job of directing the user down to the content of his article with the not only the size, but especially the alignment of his text.
Typography Accounts for Over 90% of the Design.
Let’s face the facts: Most people come to your website to read the content of what you are offering to them. Whether it is an article, a product review, or an explanation of the hottest new app, people visit your website to read text – not to see what colors or design elements you used!
That means that if you become a master of typography, you will have the key to automatically ensure your website is 90% successful. Learning the art of typography takes time and effect, but it is time well spent.
“No other design discipline requires so much learning and training as fontography, and by no other aspect can amateurs be so easily distinguished from professionals To be font literate, a designer has to study the history and the principles of font design. ” – Dmitry Kirsanov
Be Creative in Your Type Artwork.
“Type is like music in having its own beauty, and in being beautiful as an accompaniment and interpretation; and typography can be used to express a state of the soul, like the other arts and crafts. But like them it is too often used mechanically, and so the full expressiveness of this medium is unrealized. If it is used according to a rule or recipe, it becomes dull and loses vividness. Type appears at first to be a rigid medium; but like other rigid media, it is plastic to the living spirit of a craftsman. ” – J.H. Mason
In the print industry we have come to expect beautifully design and compelling typography that greatly adds to the message of the text. With the age of CSS3, @font-face/Google web fonts, font-squirrel, typekit, WebINK, and high-speed internet (more images can be included in webpages) there is no excuse for not incorporating beautiful typography into the design of your website.
Typography design can be overdone, but on most sites we are far from having a problem with over-designed type.
Design Zoom uses exceptional typography design that flows into the design of their website. The typography perfectly fits the vision and purpose of their services.
Another great example of using typography as an art to portray the mood and vision of the website is seen at Marie Catribs.
Increase the Size of your Type.
In 2011, Smashing Magazine featured an excellent post on the ideal body font size; argued to be 16px – which I totally agree with depending on the typeface used.
The more important your content is, the larger the font-size should be. You shouldn’t be trying to cram 500 words into a company tagline. But you shouldn’t be sizing that perfect “10-word” tagline in size 14px! Learn to use size to an advantage in your designs to quickly inform your users into the purpose and content of your website.
Some designers are starting to get creative with larger fonts and are creating some stunning pieces of artwork.
There seems to be a new design philosophy floating around in the web design industry that says: ‘Your header type is like the cover of a book’.
As long as this trend stays in the boundaries of giving the reader a sense of the website’s purpose, and doesn’t detract from the readability of the design, I say “More power to it”!
Here are several websites that take this design philosophy and hit a home run with it:
One great example is Visual Republic. This site uses large font-sizes as well as a “badge” on the top of the site to quickly inform you of their services.
Kitchen Sink Studios does a great job of combining large fonts and interesting typefaces to guide your eyes quickly around the page.
Bills on Your Table – uses large headlines so you can quickly navigate to the section that you need.
Get Creative in your Choice of Fonts.
Yes, I know we touched on this in an earlier section; however it is worth mentioning again.
Enough of using the “Times New Roman” typeface for every website. There are more creative and user friendly options out there!
Here are creative uses of typefaces to get your creative mind inspired:
Enliven Labs creatively uses Cursive and Serif fonts to add interest and contrast in their design.
I like the unique touch to the letter “O” in this web developer’s header text.
Helpful Resources on Typography: