Design and Development

Typography and Why it is Important for Your Website

By

Filed under: Design Inspiration, Typography, Web Development.

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.

To many font-faces can be very distracting to your readers.

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.

The Typographic Desk Reference

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.

Amazee Labs

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.

Trent Walton

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.

Design Zoom

Another great example of using typography as an art to portray the mood and vision of the website is seen at Marie Catribs.

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.

Visual Republic

Kitchen Sink Studios does a great job of combining large fonts and interesting typefaces to guide your eyes quickly around the page.

Kitchen Sink Studios

Bills on Your Table – uses large headlines so you can quickly navigate to the section that you need.

Bills on Your Table

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.

Enliven Labs

I like the unique touch to the letter “O” in this web developer’s header text.

Oliver James Gosling

Carsonified

Carsonified

Ben Lind

Ben Lind

Super Normal

Super Normal

Helpful Resources on Typography:

Inspiring Artists to Keep an Eye On:

Join the discussion below, we'd love to hear from you!

  1. Lewis Martin

    Web design has its own importance in getting good search engine rankings. It is one of the important factor in bringing a business online successfully. Thanks for the following informative post.

    Reply
  2. Izzy

    I agree that you shouldn’t overload material with different fonts as it just looks messy and unprofessional. Stick to a couple of fonts – a more funky font for a main heading and then a more simple one for the main body of the text. Consistency is the key.

    Reply

Leave a comment to Izzy

  • (will not be published)