2012_11_typo_featured Design

15 Practical Tips How To Use Typography For Emotional Design

Typography is an essential part of any website. There is no doubt about it. Websites usually offer information and the easiest way to present this information is through text. Besides, “people who are reading a well typeset page are more engaged in the experience and find that time flies by faster.” Good typography is not only a convenient carrier for information, it can also help to engage our website visitors.

Web typography in its classical sense includes good readability, scalability, and a character that matches the nature of the website. Lately, typography has taken on a new role in web design. Higher screen resolutions allow for optimized font rendering and new web fonts offer a wide selection of typefaces suitable for the web.

Now the question is, can we use typography in other means than for presenting text? Sure we can. Typography bears great potential for your web design. Here are 15 examples how to use typography as design elements for a more emotional website.

Add character to your site

First of all, typography can be a great way to add character to your website. As emotional design is becoming increasingly important, we need to get creative and find new ways to make our site more personal and more characteristic. With a wide selection of different web fonts, we get lots of ammunition to do so.

Be yourself


Choose typography to reflect your own character.

Polecat use a very personal and consistent style on their website. The typeface they use for headliens reflects the likable and creative character of the rest of their site. The font is creative, unique, and down to earth, just like the way the team presents themselves when scrolling down the page.

Be human


Typography in form of handwritings makes your site appear personal and human.

Justdot Media Services also have a very characteristic website. They use typography in form of different handwritings, which makes the site very personal and human. Freehand style drawings offer great ways to add personality to your web design.

Be focussed


Use typography to draw attention to a specific area on your site.

Typography can also be a great way to draw attention to a specific area on your website. Again, the character of the font you use should match the purpose of your site in order to create a sense of harmony and visual appeal. Pulchry has chosen a delicate font with a natural and organic look to match the topic of the site: How Leaves use Color Profiles.

Typography as design elements

You can use typography together with other design elements to enrich your design. Choose your fonts wisely to make sure you supplement your design, not overshadow other important parts. This can be a tricky task. If your font of choice has its own strong character that doesn’t fit in with the rest of the design, the combination probably won’t work.

Be creative


Be creative when it comes to choosing the right font.

The G’nosh website has a very creative and consistent style to it. All design elements used on this site are chosen carefully to reflects the topic of the site: gourmet dips. The typography used reminds us of a handwritten menu board in a cosy restaurant. They style perfectly fits in with the ingredients like the pepper and the clove of garlic that are used to make up the rest of the design.

Be diverse


Diversity is great, if treated with caution.

When using typography in web design, you could consider using different fonts for more diversity. However, caution is in order here. Too many fonts can easily lead to a messy and inconsistent appearance. The designer Denise Chandler combines different fonts in her navigtion menu in a very clever and attractive way. The fact that the underlying style of each font is similar creates a sense of belongingness. Every menu item becomes an own design element that contributes to the overall homogeneous look and feel of the site.

Be consistent


Create a balance in your design by using fonts and colors consistently.

You can also integrate typography into your design by combining it with non-textual design elements. Amazee Labs combine many different fonts and also font-colors on their site. You might expect this wild combination to be loud and shouty. However, the fact that most of the fonts are captured within the graphic on the right and the recurring color scheme bring consistency to the design, making it structured and attractive.

Build your design on typography

Instead of supplementing your design with typography, you can also use typography as major design element to build your design with. make sure a typography-heavy site fits your target group and also the purpose of your site. Again, the font you choose is essential for whether or not your design will be appealing and also effective.

Be clear


Typography can be the most straightforward way to design your site.

The creative agency Tokio Lab has a very bold, yet appealing website. The site builds up word for word while scrolling down the page. Typography is the only design used here, resulting in a very clear and straightforward site. The lack of distracting design elements leads the visitor’s attention directly to the content.

Be different

Distinct typography can help you to be different from others.

The large choice of different typefaces available for the web today allows you to use typography as a means of differentiation from others. The designer Rob Edwards has built his website based on a couple of very distinct typefaces. Again, the different fonts are similar enough to form a unity, rather than conflicting with each other.

Be fun


Choose your typefaces carefully to match the desired character of your site.

You can also use typography to add a fresh and fun touch to your design. Just choose a fun font and some fresh colors and you are on the right track. The creative agency Wakwaw did the same thing to welcome their website visitors and sell them the “waw effect” of their services. The design is very simple, yet fun and inviting.

Link content & design

Instead of using typography as design element, you can also use it to bridge the gap between design and content. Choose your font to reflect the character of your design to create a uniform website. When combining both design and content, your message will be stronger and much more clear.

Be playful


The right typeface can draw attention and blend in with your design at the same time.

Use typography in line with the rest of your design. This allows you to effectively build your content into your site. The website of Pioneers is very playful and fun. For their headline and the different service categories, they chose typography that reflects that exact feeling. The headline draws attention, while blending in with the rest of the site.

Create unity


Choose your typeface to mirror the overall look & feel of your site.

The site of the conference Hull Digital Live is a nice example of how to use typography to create a feeling of unity on your site. The headline is written in a sketchy font that mirrors the overall look and feel of the site.

Offer context


The right typeface allows you to add context to your design in a subtle way.

Another example of how to link both content and design is the site of Kyle Steed. He presents himself with a sketched portrait, standing in front of a chalk board. On the board, he has written down many different words that describe and characterize him as a person. The way content and design are linked on this site leave no doubt that Kyle is a creative and likeable guy.

Create feeling of depth

Last but not least, typography can be great to play with by adding some 3D effects. This creates a feeling of depth, making your site stand out from the “flat” sites we usually find on the web.

Create realism


3D effects allow you to create a sense of realism on your site.

The Albany use 3D typography only in their main visual in the center of the site. The words “seeding talent” become part of a design element that could just as well be a regular photography. However, the 3D effect of the illustration creates realistic sense of depth, making the entire site more interesting.

Create excitement


3D effects can make your design more exciting.

The web design blog Webdesigner Depot uses a 3D effect for their title. Together with the visual background, this creates a sense of depth, making the site header catchy and more exciting.

Abstract typography


Typography can be taken out of context to attract attention.

The site 3D polystyren use big 3D letters to design their header. The letters build a playground for the little figures that try to climb them, giving us a measure of how big they really are. The letters are taken out of their natural context, which demonstrates that we can also use typography in a more abstract way.

Final thought

Typography plays an important role in modern web design. If chosen well, it makes your content readable, scalable, and enjoyable for your visitors. Besides serving these practical aspects, typography can also have an aesthetic purpose. It can add character to your design, or help you bridge the gap between your content and design. Typography can supplement your design, or you can build your design on typography.

In any case, typography can help you add more personality, more excitement, and more emotion to your website. Do you have other examples of typography as design elements? Let us know what you think in the comments below.

7 comments

  1. Michael

    Awesome read with great examples of how powerful typography can make a site. Gives me some great ideas for my own site re-designs in the future.

  2. Web Design Denver

    Awesome post! Your ideas are so worthy for me. You have done great job. It’s been really great to be here. Thanks!

  3. Sabina Idler

    Thanks so much for your kind comment. I’m glad to hear that you find our content useful. :) Thanks for reading the Usabilla blog.

  4. Sabina Idler

    @Michael, Good to hear, thanks and good luck with your redesign!

  5. Magento Hosting Nederland

    Hi, my name is Nico and i’m just wanted to say that I really, really, really.. love the ‘Just Dot’ website! Very inspiring! Thanks for sharing this very inspiring post.

  6. Web Development

    That emotion designs was very good it will work in all versions….

  7. Bart

    Great examples of web typography! For those who would like to test fonts directly on their website, without need of changing and uploading source files, I’ve made virtual “font fitting room”: http://fontry.net/ I hope it can save some time spent on choosing right typography.

Leave a Reply

Your email address will not be published. Required fields are marked *