6 Awesome Uses of Typography in Web Design

6 Awesome Uses of Typography in Web Design

Remember…First impressions last. Whether you like it or not, your typography aids to create a great user experience before they even read a line or clicked a button from your website. Typography provides a bird’s eye view on what your site is like as it shows the user the character of who’s behind the website and what is all about. It somehow creates an atmosphere and draws out a response just like the way your tone of voice does.

So you’ve got to ask yourself, what do you want to express and how are you going to relay it to your readers? Typography can establish a means of communication and, in turn, the personality of your website. Your choice of typeface will help in determining how your readers or viewers respond to your site.

Websites have their own distinct personalities, and they are largely established by the typography. Yeah most sites are not perfect, and performance is often the issue, but hey, they use typography to generate interest and engage their readers. Web typography is not just about visuals as it’s about performance as well; a lot of designers ignore performance issues entirely. Bear in mind that some websites were not tested in old browsers even on mobile devices — this is not the point of this article though. Instead, we’ll focus on interesting treatments and some innovative uses of typography.

Exquisite Typography

Matt Luckhurst’s site is colorful, vibrant and fun. It makes use of lovely serif letters — and after a while, you’ll realize that there are random scattered letters that spell his name. It’s awesome to see how hovering unveils an image of each of the projects. This site shows that “type” can also be used a graphic element and can be incorporated into a beautiful web design.

This site looks cozy and relaxing. The “typeface” used to illustrate this is “Medula One”. The sans serif is simple (not overly decorative) but has a medieval feel to it. It is pretty straight-forward, hinting at the ambience of the dive bar.

Pixel Recess is a colorful site that uses the sans-serif Adelle Sans. It complements the site as it is legible and looks clear on the screen. It also makes use of the headline typeface called Zeitgeist. I find it very intriguing as it distorted, and pixelated which is reflected in the “slide” found on the top-left corner of the site. Pixelation is in these days, thanks to “Minecraft” but it was used to draw attention- a wise tactic for me indeed.

More Sleep is a clean site that’s both friendly and inviting. These were my initial thoughts upon visiting the site. The large type used here comes with rounded corners which add a friendliness feel to it. There’s also this typewriter-style font that’s used for the site’s descriptions and explanations which comes with a round, and a welcoming appeal.

The thick typeface used on this site is the first thing that you will notice on the page. There’s also a skinny “type,” that has this beautiful handwritten feel that contrasts the boldness of the other type used. Overall, the site is beautifully designed and it doesn’t spend too much of your bandwidth. With all of the images used on the page, just about 1.2 MB, even though 161 HTTP requests are loaded initially; a lot of content is loaded on demand.

Enso is a lively site that uses bold, full-caps sans-serif type that really draws attention. It is a good thing that it makes use of muted tones to counter the typography used. However, yellow is somewhat difficult to read. The site’s layout is very unique and interesting; the web designers seem to want us to notice the type that goes down the page and have us scroll down to read the entirety of the message. A wise approach indeed, because the navigation menus are scattered around the page (in bright pink: The Work, The Blog, The Team). The logo used at the top of the page is also a home button, which rolls out to reveal the whole word when you hovered on it. Cool eh?

Conclusion

Typography plays a huge role in web development. It really does not matter what you say, but how you say or relay it, right? Depending on your site’s niche, you could do “trial and error.” Why not experiment and unleash the creativity in you with regards to typography. You can try to be bold and daring with bolded type, or quirky with hand-written type. Always bear in mind that typography is vital and you should always be legible – it should be something that anyone one can read. Type can do a lot for a design as it sets the rhythm and creates that visual atmosphere for the site.

We can apply as much beautiful type treatments as we want even Retina-ready background images. But remember not to ignore performance. Web fonts can bug down your site, so try to find ways to counteract or fix that.

If you would like to see more interesting websites that focus on cool typography, check out Font in Use.