Web typography – quick tips on how to achieve great type

Follow @tristarweb

So typography isn’t as important as the layout, theme and styling of your website..? Wrong! Just like print, typography is an integral part of any website design, from the big typography which has been a predominant focus on many sites recently; to the standard type used for content.

Personally I’m a huge fan of the big typography we’ve been seeing lately, replacing the bog standard image carousels stuck at the top of every site. Creating this style of typography for web design can be really difficult to achieve, I found doing big bold typography on my websites quite a stressful process, a bit like slotting pieces of a puzzle together where the pieces don’t actually fit!

So if you’re brave enough to tackle web typography, I’ve put together a quick guide of factors to consider…

The Message

I always think it’s important to think about what you want to say before you start deciding on the type your going to use, just because it allows you to choose a suitable font for the message you’re trying to get across. It doesn’t make sense to use a nice fun cursive font for a serious message or to use a solid sans serif for say a nursery website.

Type

This is the fun part, but be careful to get the right balance of fonts. Some designers will tell you to try to limit it to two fonts but I reckon if it looks good and the fonts work well together you can stretch it to at least four! I like to use a mix of italics and regular type, pulling out key information in italic or bold…don’t be afraid to experiment with font sizes either, this adds to the visual effect of the typography.

Caution: Web type never looks how you want it to, so if you are planning on coding in your big fancy type be aware that any leading and kerning you’ve used during the design phase may not render the same on your browser.

…Inspiration

It’s always good to have a look at some websites that have successfully achieved big typography in their design. But go back to the beginning…print design is the best place to look for typography inspiration, the placement, combination and purpose are illustrated well and will definitely help you with your own design. Here are some of the sites I like to look at for inspiration…

Carsonified

Carsonified


Finch

Finch


Typographica

Typographica

Conclusion

Typography should be used to enhance your design and the purpose of a website, don’t just stick it on solely because it looks good but has no reason for being there. It can be quite a daunting process if you haven’t had any experience with typography, so make sure you do your research this way you know the do’s and don’ts of web type… Most importantly have fun with it, it’s a chance to experiment with something a bit different!

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please wrap all source code with [code][/code] tags.

Follow Tristar on Twitter