15 Practical Tips How To Use Typography For Emotional Design


Sabina Idler

December 6, 2012

Back to Resources

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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.

Subscribe for the lastest CX content

Privacy notice|California privacy notice
Terms of use
|Cookie policy

*Net Promoter, Net Promoter System, Net Promoter Score, NPS and the NPS-related emoticons are registered trademarks of Bain & Company, Inc., Fred Reichheld and Satmetrix Systems, Inc.