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
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.
Pingback: Life of Alan » links for 2010-01-03
Good general rules, but for the sake of accessibility, please don’t ever specify font sizes for Web use in points or pixels. Although designers hate it, it’s essential to accessibility that users can override your design in order to make the content useful. So specify a single font size for the whole page, then change it by specifying ems or %.
A good trick is to set the font size on the body at 62.5%. Then font sizes can be specified using in ems like so:
1em = 10px
1.1em = 11px
1.2em = 12px
etc.
Pingback: Simple Rules for Better Typography » Lone Gunman
thanks for the comments everyone. MPT, apologies if I got the golden ratio and fibonnaci sequence mixed up. Have corrected the 3 fonts…thanks for the point out.
InfoDesigner – must admit these are mainly for print use, most are transferable but should have made that more clear. Thanks for the tip, that seems really useful – still not a CSS expert yet, but will definitely remeber that one.
Quite a few comments about the bullet point indentation. I stand by this one. Was not sure myself when I first read about it, but after trying just thought it looked neater. Personal preference I suppose though.
Thanks again for reading.
Interesting ideas here. Would be a great deal more impressive if the right hand side of each example image wasn’t cut off in a 1200px wide browser window.
yes apologies, have recently changed site design and this template has different restrictions. Will update images for you shortly.
Pingback: Austoon Daily » Simple rules for good typography
Pingback: Links for 4th January 2010 | Velcro City Tourist Board
Pingback: links for 2010-01-04 « innovations in higher education
Pingback: fred design » Simple rules for good typography « The other side of the firewall
Fully-justified text can actually be more readable than ragged-right when used correctly (although ragged-right is definitely better for some contexts like narrow lines, and can apparently help readers with dyslexia). I believe this is because justified text makes it easier for the eye find the end of the next line and then track back to its start. Here’s a reference to one study in which justified performed better than ragged-right; there are others too: http://eserver.org/courses/w01/tc510/hades/kaltenbach1.htm
The advice to use ragged-right is almost always correct on the web, where it’s not generally possible to reliably hyphenate or manually typeset your pages. But in print I would use justified text more often than ragged-right. There are reasons that almost all books and newspapers are set justified.
I think the main conflict for bulleted lists is whether the page organization or the text itself should be more apparent. When the bullets are before the margin it looses some of the document’s Hierarchy (your second point). Specifically the user cannot navigate the page as quickly because the beginning and end are harder to see.
Hope that helps clarify things!
Pingback: Hong Mao » links for 2010-01-06
Pingback: Regras Para uma Boa Tipografia - 54Bytes
Pingback: Interesting Web Citings for January 6th – Matt Heerema
Pingback: Web Design for Developers » Improve Your Typography
Nice points. BTW, in your site design you must change the style for the link and heading caption, as both the link and heading looks same in bold and it’s hard to diff. the links.
Thanks
Balakumar, thanks a couple of people have mentioned that actually. Perhaps I will go for a underline or something…will consider. thanks again.
Pingback: Items of interest » Blog Archive » Bookmarks for January 6th through January 7th
Great rules for print typography. For web typography I suggest the following adjustments:
- font sizes no less than 12px
- leading (line-height) at least 140% of font size
- oh, and there are hundreds of fonts more appropriate than Helvetica
Pingback: Typing out your typography « My Name Is Legion
Pingback: This Week’s Favourites – Janurary 8th 2010
Very nice and right to the point.
Only thing I disagree from user testing is indentation of bullets and quotes. Tests showed that indented bullets are easier to read and more pleasing to the eye.
Just my 2 cents
I found those are realy usefull advices, great stuff. I will put this page into bookmarks for later reference. Thanx for your effort.
Pingback: wundertype°de » Blog Archive » Wahres Wort lässig umgesetzt
Nice overview here. The one I would really stress for web is to NEVER justify text. I see this all the time, and it just makes the content so much more difficult to read. This is one style that I wish all browsers pulled an IE on and just ignored…
A good overview, however there seems to be some confusion over what “kerning” is in this anyone-can-be-a-designer world we now live in.
“Kern” is a noun. It comes from the nomenclature of hot metal typography. A kern by definition is a part of a letter which overhangs the body of the type the letter is cast on. The button hook of a lowercase f is often “kerned” so that the next letter fits more snuggly, and in the same visual tempo as the rest of the characters in a setting. Kerning is done on a letter by letter basis. E.g., To Ti Ty Yo Fa, etc. etc.
The opposite of kerning, is “letterspacing”. Letterspacing means just that, adding space between letters to open the setting up. Settings done in all caps should typically be letterspaced.
The modern post-metal / pre-Macintosh catch-all term that describes the over all tightening or opening of a setting is called “tracking”.
When type was still manufactured in metal, great pains were taken by the foundries to “letterfit” the entire character set to achieve an evenness of “color”.
The fact that digital versions of faces like Helvetica look a bit better with the track tightened speaks a lot about the poor quality of digital type faces. No hot metal practitioner would have needed to cut down the bodies over every character. Hot metal just fits right.
I hope you all learned something valuable. You’re welcome.
Pingback: eagrapho » This Week’s Favourites – Janurary 8th 2010
Nice post. I wrote an article on my blog for some basic things anyone can do to improve their typography.
I love typography! This post makes it easier to understand and I like it.
Thanks for the comments everyone.
mjb, thanks for the corrections. Must admit I sometimes mix one or two up so good to find an expert.
JT Shaver, read your article – really liked it. It is a great simple walkthough and I love how you see the page develope gradually. Also all about better communication, which I like. Thanks for sharing.
Pingback: Readings on Type « Spring 2010 | 4225 Concepts in Motion
Pingback: Links for 2009-12-12 [del.icio.us] | BlogHalt.com
Thanks for the tips. I found all of them good. I try to follow some of them already but found new tips also here for e.g the hierarchy one.
Indeed clear and simple rules for good typography.
When using this tips you’ll get clear and readable design too.
Pingback: 50 Helpful Typography Tools And Resources - Smashing Magazine
Pingback: 50 Helpful Typography Tools And Resources | Web Design Cool
Very nice posting bro. the only issue i have is with the fibonacci. its tough because for an h2, 21px feels small and 34px feels big(on Web)… I end up setting mine around 27.5px which is halfway between the fibonacci’s and very nice.
Pingback: 50 Helpful Typography Tools And Resources | webdunyam.net
Pingback: 50 Helpful Typography Tools And Resources |
Pingback: 50 Helpful Typography Tools And Resources | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!
Pingback: TG Designer » 50 Helpful Typography Tools And Resources
Pingback: 50 Helpful Typography Tools And Resources | i know idea
Pingback: 50 Helpful Typography Tools And Resources | DeerflyDesigns
Pingback: 50 Helpful Typography Tools And Resources « Hindgrindr
Pingback: 50 Helpful Typography Tools And Resources | Creative Man Studio
Pingback: 50 Helpful Typography Tools And Resources | CMS Code
Pingback: 50 Helpful Typography Tools And Resources | Designer Net
Pingback: Easy Resources » Blog Archive » 50 Helpful Typography Tools And Resources
Pingback: Year Two in Review – Lone Gunman