Make your website ‘pop’ with great typography

OK, so the word ‘pop’ is like a needle in the eye for any designer who’s client gives feedback like “it just needs to POP more”, but hey, I think you all know what I mean here.  Typography in design can be the key difference between an average design and a masterpiece of usability.
Below are some ways that you can spice up your website designs and raise the quality of your portfolio. Your clients will love you for it.

Using Custom Fonts
Thanks to CSS we can safely use custom fonts on websites now. Just keep in mind that not all browsers support the use of otf,ttf or eot files. But don’t let this stop you, just make sure that you have a backup default font that still fits with your design. If you cover all bases then you wont have users suffer a horrible website if they are stuck on old browsers.
These are simple to create and implement using a conversion tool like ttf2eot and then use the @font-face to embed the file reference into your style sheet.

The user doesn’t need the font on their system, so don’t forget to upload it to your server.

Define a style guide
This may sound silly and like a no brainer, but how many of you actually design a style guide for the websites you are building. The style guide is the key to consistency and will end up playing the key role in linking online to offline works.

The first step is to ask your client if they already have a style guide. If they do, great! Use it! If they don’t, then design one for them.

You should always define a few different levels of header (h1,h2,h3) styles, paragraph, lists and links. Get all these together with your color guide and plan it all out. The end result is going to be a much cleaner and visually appealing website that will just flow from content to graphic elements with consistent style.

Don’t forget to include the custom fonts you want to use in the style guide. This should be handed to the client so they can apply it to their other works.

For more information, Jina Bolton wrote a great article on writing an interface style guide.

Font Sizing
Getting your font size right is crucial to getting your message delivered. You want to make sure that your slogan/catch frase/branding statement/whatever is what the users eyes are drawn to. Then the headings then the text. It’s all simple and most of us do it anyway, but when this is all thought out and planned it just works a lot better. Get the font sizes right and you wont have confusion on where you should be looking.

So, set out your hierarchy of importance and choose the right font sizes for your message.

Readability
This is one area that gets overlooked sometimes. I’m not saying that you must have a white background and black text, but for readability the lighter background and darker text is a winner in almost all cases. If you do go for a dark background, take a look around at some examples and look at the color combination that are being used. There are some good ways to make light text standout on a dark background without hurting your eyes.

Keep your line spacing neat and don’t cramp as much as you can into a space. Open layouts are much easier to read. Don’t forget that people often skim pages rather then sit and read, so cater to this with quick lead ins to read more. This allows you to keep your pages neat and tidy, making for a clean layout.

Examples
Here is just a few examples of websites that I feel have great typography and cover all areas I have mentioned above.