Web International Awards

payday loan


MAR 2010 0

Quick tips to improve your site’s appeareance

I have seen a lot of websites developed by web development companies in Romania and not only which have big flaws in terms of typography. Choosing a good font stack may be sometimes hard, but choosing the right font size, leading, measure, tracking and word spacing shouldn't be that hard. And this is what we're going to talk about in today's article.

Font size

Adobe Caslon Pro screenshot

Leading, measure, tracking may sound a bit fancy for some, but font-size should be in every designer's vocabulary. Font size shouldn't be chosen on the fly. You should test the fonts of your chosen stack on different sizes, all in close proximity as you may find some really good combinations.

It would be best if you kept a constant ratio between heading tags, paragraphs, subheadings and so on. For example, if your heading size is X and your subheading size is 75% of the heading size, it is probably good enough to have body text size set to 75% of the subheading's font size.

Good proportions are always good, but you should also look for visual artifacts. For example, setting a small font-size for a serif font may mean loosing the serifs all together. Serifs work best in larger font sizes, while sans-serifs look ok in small sizes too.


Leading example in typography

Simply put, leading is line height. Or if you fancy Wikipedia's version, leading is the amount of added vertical spacing between lines of type. Some rookies may refer to it as line spacing. You should always check if the descenders of one line of text do not overlap with the ascenders of the next one. If they do, your leading is to low. If they don't your probably fine, but you should also look for white space. A leading of 1.5 times greater than the font size is a de facto rule. However, different fonts, especially if embedded using javascript libraries like Cufon or similar technologies can be rendered oddly and require a bigger attention.


Typography measure example

Measure refers to the number of characters on a line of type, or simply put, its length. You should be careful what measure you use because to few chars on a line and the users will have to turn their eyes to fast. A measure to high would make hard for them to read the text and go towards the next line when reaching the end of the current one. A good measure would be around 65 chars a line, but you should be ok if you use somewhere between 45 and 75 chars a line. Chars include punctuation marks and spaces. Nothing is left out of counting.

I usually use char counting tools to check my measure which usually resides to All World Phone's word and character count tool.


Typography tracking example

Tracking or otherwise said letter spacing is important because of the ligatures that typefaces have, especially serif ones. Ligatures are combinations of at least two distinct letters which may be hard to read if placed to close to each other. Some ligatures could be the following combinations: AV, vv (v-v), w (one w), co and others. After you chose your typeface, make sure there's enough space between letters so that users can easily read and distinguish letters from one another.

Word spacing

Word spacing is not important as tracking, but a general rule of thumb says if the measure's low, then word spacing should also be low, and if measure is high, word spacing should also be high.

Further reading

You should definitely check out our first article on typography, dealing with uppercase and lowercase letters. Once you're done you should also check out Smashing Magazine's awesome typographic patterns and best practices post. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Published on Tuesday, March 9th, 2010 at 4:00 pm in typography.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.

There are no comments. You can be the first to post one.

Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.

If you do not have a username, you can register in just a few clicks.