Here are some basic rules to improve your typography across either web or print. Of course, these rules are only to start with, and rules are meant to be broken. But if you want something to look neat, clean and generally well designed they are a good set to follow.
Don’t use too many typefaces
Consistency throughout a document or website is helpful. It brings unity and one identity. It also makes it clean, tidy and just basically not messy. A good rule to follow then is to not use more than 3 different typefaces in one document.

Hierarchy
It is always important in typography to pay close attention to the hierarchy of the page. The most basic thing is to keep the headline at the top of the page in a larger size. But more than this its just a case of looking at the page and asking other people what they read first. As a designer we should be thinking about communication constantly. This is our primary focus.

Font size
Use no more than 4 font sizes in a document or website. Preferably 3. Again this is a case of consistency. Too many copy sizes make a document disjointed. 3 also allows enough variation to emphasise certain text and categorise text together. For example, you have one size for a heading, one for an introduction, one for body text and one for a pullout quote or something else. This will be consistent across the whole
8-10pt for body copy
For print media always keep body point between between these sizes. It looks neat and tidy and allows headings. Definitely do not go over 12pt.
A typeface not legible is not a typeface
There is a place for all kinds of artistic typefaces, but for good standard copy lets keep things simple people. It must be legible. This is certainly the case for body copy. Keep experimental typefaces for posters or at best headlines. They are never well received in large quantities. Can you read this easily?

Leading
Leading is essentially the vertical space between the lines of type. Leading is something that so many designers forget about, its easy just to stick with the auto settings. But trust me, this can make or break a document. Pay close attention to your leading. I personally like to keep my leading tight, but without ever overlapping. Usually I will go for a little above the font size, slightly below the auto setting. This works especially well with helvetica like typefaces. Either way, there should not be too much space, and the letters should not overlap at all!

Kerning
Kerning is the spacing between letters. Again, like leading this seems like an obvious one, but still needs careful attention. Consider if your typeface generally needs spacing out more, or if it looks better with tighter kerning. I always prefer helvetica and futura manually tightened as they have quite a bit of space between letters on the normal setting. Also it is worth taking special care with specific characters. Again, no characters should overlap. An example of this is for helvetica r and t characters together. Be worth kerning manually in this case.

Accent or emphasise
This can help bring out key words and also break up large sections of text. Large chunks of copy tend to be quite scary, and ideally people like to skim. A subtle emphasis can bring out key words. A different colour, slightly darker perhaps or a slightly bolder version of the font are nice techniques.
Do not over emphasise
Emphasis in a body of text should be kept simple and elegant. I either use bold, italic or underlined. Too much, just makes a page look messy.

No caps in body text
This one is simple enough. Never use capitals in body copy, it is just not as legible. Enough said.
Always align to a baseline
Keep text in simple horizontal lines. This is another body text rule and again seems pretty obvious. Ideally you use a baseline grid throughout. More details of how to that here.

Flush left ragged right
Always keep the text left aligned and don’t justify. This is legible and does not look messy. Justifying text across a smaller column especially creates massive gaps or ‘rivers’ in the type. Don’t do it.

Lines not too long or short
Line length is also important. It helps legibility and prevents your eye from slipping up or down a line in a large body of text. My rule is do not have less than 6 words or more than 12 in a single line. Use columns in a page to make this structured and easy. Your page will be neater and more legible.
Punctuation and Bullet points
Punctuation marks and bullet points are something which is easily forgotten in typography. Modern design software does not make it easy for us to handle this correctly. Bullet points, should ideally be in the page margin. Not indented. Likewise, punctuation marks should be in the margin as well. The image below from Mark Boultons site illustrates this perfectly. You can see a tutorial for bullet points here, and punctuation marks here.


The fibonnaci sequence
the first two Fibonacci numbers are 0 and 1 and each other number is a combination of the previous 2. These numbers are meant to have a natural visual elegance to each other. Since the Renaissance, many artists and architects have proportioned their works to approximate the ‘golden ratio’. Therefore in typography it is a good suggestion to consider using only these numbers to structure your chosen point sizes to. It will give your whole document a natural elegance.
0 1 1 2 3 5 8 13 21 34 55 89 144…
Conclusion
Typography is a massive subject and I am sure many will disagree with the suggestions I have made. Remember these rules are always made to be broken. With knowlege and experience comes the decision if it is appropriate to stick to or break these rules. These rules are kind of beginners guide to typography. Stick to them and I think you can’t go far wrong.
Hope you have found useful. If you have any to add, please leave a comment.
When you use type for the web it needs to be a lot larger than in print. I use 16px for body text as it looks like 11px on paper. Also, people who use ems are stupid. You need to use px because they’re definite.
Great article, really helped me with the concepts.
I have a question for you (and anyone else who wishes to comment)…
Should you capitalise the first letter of words in headings?
e.g.
Should You Capitalise The FIrst Letter Of Words In Headings?
vs.
Should You Capitalise the First Letter of Words in Headings? (missing out really small words?)
I notice that you avoid this is your article headings, except for “Punctuation and Bullet points” – are there any rules you use to decide this??
Hi Matt, I think its often something which is either down to preference or brand style. Some capitalise all, some capitalise only the first word, and as you point out some capitalise only the major words. I was always taught that the most important thing is that you are consistent. Personally I like lowercase characters, so I try to do it as little as possible. Sometimes I won’t capitalise anything in headings at all, so have all lowercase.
Pingback: Adventures In Illustrative Typography | Dezign Matterz
Pingback: Day 18: Typo(graphy)
Pingback: 50 Helpful Typography Tools And Resources | Best Web Magazine
Love the idea of Fibonnaci for font sizes, but it doesn’t seem practical. Having my body text as 8pt seems to small, and 13pt is just too big. Perhaps I should just use Fibonnaci for variations on my usual 9.5pt body text, such as headings, footers, callouts etc?
Yes I must admit it does pose some questions. Some people seem to just bring up the body text size slightly – 8.5-9pt or something. I sometimes just take the principle of the sequence. So use the idea that the previous two sizes define the third. That way you maintain the relationship between the sizes but are able to make it more practical.
Pingback: 50 Helpful Typography Tools And Resources | pjodom.com
The cool thing about using em is that you can set a basic font size for the body tag, eg. 14px, and then you only variate this basic font size by attributing an em value to the child elements.
Pingback: Introduction of Typography « mmaexpression1113
Pingback: Good Typography « mmaexpression1113
Pingback: Guide to Designing Memorable Logo - Articles - Fenster Media
Pingback: Good Typography links « Nikoleta Marina G
Pingback: Sarah Shults project 4 artist statement and bibliography « Advanced Design & Typography 2011
Pingback: Remarkable Typography Designs From the Best | SmokingDesigners | Graphic Design Fashion and Photography
Pingback: Branding Tip 2-Pick your Fonts | iCG Social Media...
Pingback: ways to improve your typography « chattingwithcurlyy
Pingback: Harri Smith (harri.smith) | Pearltrees
Good lunchtime read. Although more could be said about punctuation.
For those interested, I wrote a blog post which talks about punctuation such as the difference between en dashes and em dashes etc.
Sorry, had to get it in.
Great post!
Good read, however I am confused about one thing. You say to never go above 12 point font for body type, however your site is defaulted to use 16 point in the CSS…
Hi Preston – apologies for not being clear – the 12pt was for printed media. I will amend the article. Thanks for reading
Google “Modernist Typography” + Click Images=WIN.
Seriously awesome stuff!Thank you for sharing
Hi I am so glad I found your weblog, I really found you by
error, while I was browsing on Digg for something
else, Anyways I am here now and would just like to say thank you for a incredible post
and a all round exciting blog (I also love the theme/design), I don’t have time to go through it all at the minute but I have saved it and also added in your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the superb job.
Pingback: DAKSH BRANDING – SEO | WEB DESIGN | BRAND IDENTITY | Logo Design Guide
Searching stumbleupon.com I noticed your site bookmarked as: Simple
rules for good typography | fred design. I’m assuming you bookmarked it yourself and wanted to ask if social book-marking gets you a large amount of traffic? I’ve been contemplating doing some social bookmarking for a few of my
sites but wasn’t sure if it would generate any positive results. Many thanks.
Thanks and please visit my web site on Brigitte