5 Tips For More Professional Typography

5 Tips For More Professional Typography

I'm Not A Designer, So What Can I Do?

One thing that has always bothered me is lack of proper use in typography. This is simply because to most people, it is easier to use the default fonts, sizes, margins, and colors. What if I were to tell you that you could instantly, well maybe with 5 minutes of work, get more professional looking documents or designs by following some very simple steps in regards to your typography? You had better be excited, because with this 10 minute typography lesson, the world will become a better looking place to live.

What Is The Big Deal Anyways?

The most prevalent issue I see, even in designers with years of training and experience, is the lack of breathing room in text. This is an extreme example, although I have seen it this bad before, of what a simple title and block of text looks like when people do not understand the importance of whitespace in text. The text is squished right up against the border, which makes readability drop significantly.

 5 Tips For More Professional Typography

1. Whitespace Is Your Friend

The first thing you should do when creating a block of type, or within a Word document for many people, is to increase the padding, or spacing, around the text. This helps it become easier to read overall.

5 Tips For More Professional Typography

2. Forget Standard Fonts

The next step is to choose a typeface other than the default, which is usually Arial or Times New Roman (Calibri on newer systems, which I like). In all honesty, Arial and Times New Roman are not bad a typefaces, but in order to make them work you need to have a good understanding of the principles described below. When applying each of them, using a more professional typeface will simply elevate the look of your work. Below I am using one of my "go to" typefaces, Avenir, which was designed by Adrian Frutiger and released by Linotype in 1988.

5 Tips For More Professional Typography

3. Embolden Your Titles

After adjusting the margins, (or padding if you are designing on the web), and choosing a nicer looking typeface, you should concentrate on the hierarchy of your information. The title should not only be bold, but different in size as well. For the smallest subtitles a good rule of thumb is to use a size at least 150% larger than the body copy. In the below example, the paragraph text is 12 point while the title is 18 point and bold, because 1.5 x 12 point = 18 point. You can go even larger if you would like, especially depending on how many headings are on a single page, such as a page title, article title, and various subtitles throughout.

5 Tips For More Professional Typography

4. Give The Lines Some Space

Another little thing you can do that goes a long way is to increase the line-height of the text. Increasing the line-height will increase the spacing between each line. Again, a good rule of thumb is to use at least 150% of the font size as the line height. In the example below the line-height for 12 point text has been increased to 18 point. The extra space between the text makes it easier to find the start of the next line.

5 Tips For More Professional Typography

5. Contrast Is Key

The fifth and final tip for more professional typography comes in the form of color and contrast. A big, bold, black title along with black text may get you by just fine, but to take things one step further, you need to differentiate the heading from the body copy even more. I have given the title a dark red color, which draws more attention that plain black, and changed the paragraph text to a medium-dark gray. Gray on white is easier to read than black on white, but be careful, using too light of a gray will lower the contrast between the text and the background and can become more difficult to read.

5 Tips For More Professional Typography

Type With Confidence

You are now relatively well-versed on the principles of good typography. I say relatively because there is a lot more to it than what I've explained here, but after reading this article you should definitely be in the top percentile concerning typographical knowledge. If you found this article helpful or have any follow up questions, leave a message in the comments, Digg It!, or link back to this page from your own blog.

Trackback URL for this post:

http://www.shaverstudios.com/trackback/15
from uberVU - social comments on Sat, 01/23/2010 - 7:54am

This post was mentioned on Twitter by shaverstudios: @davidairey @jacobcass New post about more professional typography. http://www.shaverstudios.com/5-steps-for-more-professional-typography

   Bookmark Shaver Studios on Delicious Stumble Shaver Studios Design and Photography


Great Post!

This is a really great post guys, thank you. I love the way it walks you through slowly and you begin to see the text get better and better. All really relevant and good advice.I think its the perfect article for non-designers as it is clear and does not over complicate things. Lots of articles throw around clever typographic terminology which can make them inaccessible. I also like how it is all about communication and actually doing things to make a page easier to follow.
Thanks for sharing.

I'm glad you liked it

Thanks. I tried to target it to a broader audience so it would be more useful. I'm glad you found it helpful.

Not sure about using Avenir

Not sure about using Avenir as a body copy, to my eye it loses readability as it is a bit wide.

Apart from that it's a well written article, well done.

Thanks for the feedback

Personally I have always found Avenir to be one of the more easily read sans serifs along with Gotham, Frutiger, and a few others.

That's part of the beauty of design, we can all have our favorites and none of them are wrong! Thanks for stopping by.

Hi thanks, for this great

Hi thanks, for this great advice. I'm learning to improve the typography on our site.

I'm glad it helped

I'd love to see what you end up doing.

J T nice article, and sums

J T nice article, and sums up what any good designer needs to start with when working with type, though a "little" 6th tip about kerning would of been net...
thx

You are right

Thanks, you are right. Kerning is a very important part of print typography, although not applicable to the web for the most part. I have a post coming up very soon that talks briefly about kerning.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

You can change the default for this field in "Comment follow-up notification settings" on your account edit page.