Typography Essentials - A Getting Started Guide
What is typography? And why is it so important to graphic designers? As long as you spell everything correctly and make sure the message is what the client wants to see, why does the font style make any difference?
Because everything you touch, see and create is impacted by the use of writing styles and techniques. There are a lot of reasons why designers need to have a solid foundation when it comes to the use of typography.
By understanding the underlying message that your choice of text contains, you will become more effective as you design and layout projects containing words and phrases. A picture may be worth a thousand words, but you have to know a thousand words to replace it.
Typography is the art and process of arranging type for a variety of media purposes and is made up of several parts. Take a look at the image below. Depending on the font style some or all of these parts will always be present.
Understanding The Basics
- The Type Size, also called the Cap Height, is the overall height of capital letters in the formation of words.
- The Ascender is the upward tail on letters like h, l, t, b, d, and k.
- The Descender is the downward tail for letters like g, q, and y.
- The Counter is the white space located inside letters like o and p.
- The X Height is the height of the letter, and does not include ascenders or descenders.
- Baselines are the boundary that the lowest part of the letter rests on. Take a look at the y, p, g, p and y letters in the illustration above. The solid line they are resting on is the baseline.
Have you ever seen a paragraph or advertisement that made the letters appear either s p a c e d w a y out or scrunched all up so it was hard to read? The effective use of kerning and leading will fix that problem. Kerning is the space located between individual letters of a word. If you can remember the kernels on an ear of corn, it’s easy. When the kernels of corn line up, it makes a nice neat row.
If the kerning is off, so will the appearance of the word or line of text you are working with and it will be harder to read.

Leading is the space between the lines of text. If you look at the illustration above, you will quickly notice the space between line one and two is too close, giving the impression of not enough space. By adjusting the amount of leading between lines, the text becomes much more readable and less pinched.
How do you want your text to line up? Is this a standard body of text, a headline or are you in need of a more professional finish? Depending on the type alignment, you may inadvertently create the wrong impact based solely on the placement of your message.
Type Alignment
- Default writing techniques will use left alignment to create easy to read text for the reader. Casual letters, unpublished manuscripts, and basic paragraph styles tend to fall into this category.
- Center alignment is used to draw attention and is used a majority of the time for Headlines or Titles. Newspaper headers, book titles, and report titles are excellent examples of center alignment.
- Right Alignment is a clean crisp professional look and is used quite a bit for corporate business letters, return address labels, business cards and a variety of other applications where a formal style of alignment is needed.
- Justified alignment is usually reserved for newspaper print and body text for textbooks, and is more difficult to work with. This type of alignment creates perfect alignment on both the left and right margins without regard for the actual characters. This can lead to a condition called tracking, or the creation of “rivers” of white space throughout the text body. If this happens, reduce the tracking gradually to correct the illusion.
Now that we know how to identify the parts, make sure the spacing is correct and we’ve decided on the image we want to portray, selecting what your message will look like is paramount to leaving the gravy off the mashed potatoes at dinner. You’re still going to have a nice dinner, but if you want to get saucy, pick a type category that fits.
- Serif type has extensions or strokes on the ends of the letters. Times New Roman is a perfect example of this. This type of font is easy to read for longer pieces and tends to be a little more conservative. If you do not deliberately choose another font, most programs default to the Times New Roman style.
- San-Serif does not have extensions or strokes on the ends of the letters and are used heavily for labeling, headlines and titles. This is also easy to read with a more contemporary feel to it. Children’s books use this because it is more easily identifiable as children are learning the alphabet.
- Script, symbols and decorative type are all styles of type categories to create a specific image or message. Weddings might lean more toward the fluid motion of a script type while a child’s birthday might be more inclined to like a decorative font from a favorite movie.
Whatever font family you choose bears careful consideration in the design of any piece. Here are a few suggestions to get you started:
- The font you decide on should not dominate the piece. Fonts are like exquisite jewelry to be placed in just the right context to insure maximum results.
- Use care when mixing fonts. It’s kind of like mixing stripes and plaids. When in doubt, stay with something a little more conservative then add one splash of notice me.
- Use consistency in your layouts. If you start out using an Arial font for the headers, stay with the same font throughout the piece.
- Newsletters with columns will look better if you use the Justified Alignment. Make sure you don’t create rivers of white space though.
- Use an 11 or 12 point font size and a serif type for maximum readability.
- Use Italics and Bold to point out areas of interest or draw quick reference to information.
- Use color for emphasis. Remember, reds draw the most attention if used correctly. It is amazing what one spot of red can do for an ordinary ad.
More resources and posts on typography:
- I Love Typography
- Typographica
- The Font Feed
- Just Creative Design - Type Classification eBook (free!)
- 101 Typography Resources for Web Designers - Vandelay Design
Hope you found this useful, please share your thoughts in the comment section below! And feel free to link to your own articles about typography! :)
Lois Knight
******
About the author: Lois Knight has been a freelance writer and graphic designer for the last two years. She designs predominantly for small start up companies and non profits in need of design services that could not afford them otherwise.
She has a background as an entrepreneur for over twenty years and has dedicated herself to educating people interested in graphics as a career. She also wrote an ebook titled: I’m Tired of Being Broke A Freelancer’s Guide to Working at Home





















16 Rockin' Comments
May 20th, 2008 at 4:21 am
Thanks for the link out, this is a good beginners guide.
May 20th, 2008 at 7:58 am
What an awesome post. People really do need to pay more attention to typography.
I have been a designer for many years but have been frustrated that my lack of web knowledge has been stopping me from getting quality onto my websites. Luckily I am getting to a stage where I am starting to be able to implement good design onto the web pages. It’s a long, important and hard journey though!
May 20th, 2008 at 10:37 am
nice writeup. I never honestly paid too much attention to typography in detail like this, I just knew what looked right in the design. I see now I need to study more :P
May 20th, 2008 at 11:17 am
Informative, thanks.
May 21st, 2008 at 1:04 am
I loved this simple no nerd guide to typography. Hope you’ll like our article on Typography Resources
http://designlabel.blogspot.co.....world.html
May 21st, 2008 at 1:00 pm
Excellent topic choice. A change of font can make a huge difference to the perceived value of an article or blog post. I’ve tested my own content on different wordpress testbeds, and it’s amazing how the exact same content looks more important in one place and boring and unreadable elsewhere.
June 1st, 2008 at 9:37 am
Great beginers guide to typography, I submitted this link to designbump.com so others could check it out too.
June 2nd, 2008 at 2:32 pm
Hey guys, when I first started out with a campaign for Times of India’s “Ashok Jain Awareness Advertising” I was working a mech engineer way back in the ’80’s, and had no idea what’s a font or typography. But in retrospect, I see that I loved Helvetica, was bored with Times and Courier.
And all the ads I wrote were created in a “hi-tech” studio and the technician would come out with strips of text printed in Helvetica and guess what I was mesmerized by them. Wow… I was gonna be in print!
This post is a great reminder to me like from where I’m coming.
August 13th, 2008 at 11:41 pm
The baseline definition seems off to me…sounds like you are saying that the descenders stop or extend to the baseline. I always understood it to be where all the characters sit (descenders would extend down from the baseline). Like the graphic here: http://en.wikipedia.org/wiki/Baseline_(typography) and here: http://desktoppub.about.com/od.....seline.htm.
Trackbacks
Share your thoughts, leave a comment!