A 20 Minute Intro to Typography Basics
Typography plays a big role in graphic design and can be one of the hardest things to get right. My aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.
A Basic Introduction to Typography
Typography plays a big role in graphic design and many designers are very passionate or opinionated about it. For this reason it is a very hot topic in design circles.
Developing your own skills in typography will take time and it can be one of the hardest things to get right. It is best to get a solid understanding of the basics as soon as possible in your education and career. However, it is a complex subject with a massive amount of detail which cannot be explained in just one article. So my aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.
So What is Typography?
Typography is an art form that has been around for hundreds of years. Words and text are all around us every day in almost everything we do. In every piece of type you see, somebody has considered how the letters, sentences and paragraphs will look in order for it to be read by us, or make us feel a certain way when we look at it. Sometimes it is done well, others not. Often it is us graphic designers who are the ones deciding how it will look, in our brochures, our logos, our websites and so on. The better we are at this, the more effective our designs will be.
Good typography comes from paying attention to tiny details as this can make the difference between graphic design work that is just acceptable or really good. There is more to it than just choosing fonts and making copy look good though – it is also about making things legible and readable (some of most basic functions of good typography) as well as making layouts look good in an aesthetic way.
Typographic basics
The following is an explanation of some common areas of typography.
Typeface or font?
Let’s get this one cleared up straight away! Designers are often unsure of the difference between these two, as they are both well used terms for the same thing. Actually, a typeface is a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Black, etc.) but a font is one weight or style within a typeface family (such as Helvetica Regular).
Typeface classifications
There are many different classifications and sub-classification of typefaces, but the most common two types you will hear of are: Serif – these typefaces are the more traditional ones. They are distinguished by a short line or finishing stroke on the end of character strokes and stems (shown in the anatomy diagram below) and; Sans-serif – as the name suggests, these are distinguished by their lack of any Serifs. They only became popular in the nineteenth century and are considered modern as a result.
Anatomy
These are some of the basic parts of the anatomy of typographic characters. There are lots more (which you can find out about here on Fonts.com) but I think it is better to start with a few first.
Glyphs
What are glyphs? Most designers have noticed that there is now a Glyphs palette in most of the major software packages. The word essentially refers to all the available characters in a font, from letters to numbers and all the special characters.
Kerning and Tracking
Kerning is the adjustment of the spacing between individual characters. Tracking, however, is the spacing of a group of characters. These two are often confused, but the way I remember them is that Tracking sounds like a long line of railway tracks, whereas Kerning sounds like kernel, which is an individual object.
Alignment
Generally text should be left aligned, simply because we are used to reading that way. Without good reason, only consider centering or right aligning text if it is a small amount, such as a heading or caption. Also, justifying text (where it has a straight edge on both sides) should be used in moderation too. It looks nice and neat in some situations, but too much of it will make a layout look rigid. Additionally justifying in a small column size can cause irregular spacing as between words as the software attempts to adjust your text to fit.
Measure
This refers to the length of lines of text in a paragraph or column. Most people tend to just refer to it as column width though. Measure is an important thing to get right in typography as it can be crucial to the readability of the text. If the measure is too wide the text may be difficult to read as the eye has to move a lot more after each line is read. If it is too narrow it can also be tiring on the eye to read, as the eye is constantly moving back and forth. A narrow measure will also lead to a lot of hyphenation.
Leading
Vertical line spacing is referred to as Leading in typography and print, which is because in the old days of printing and setting blocks of type, strips of lead were inserted between the lines according to how much space was required. Leading’s role in typography is to generate sufficient space between the lines to make it readable. As with all matters of typography, it is a balance between reading comfort and aesthetic style.
Ligatures
When parts of the anatomy of characters either clash or look too close together, they can be combined in what are called Ligatures. These can be for functional or decorative reasons depending on how obvious the clash is. Mostly this is only an issue with serif fonts although sometimes sans-serifs will need ligatures to be set too.
You can find out a lot more about ligatures on Fonts.com and Adobe’s Layers Magazine.
Hyphenation
Another one of those details you have to judge in typography. Hyphenation is not loved by designers or typographers but is considered necessary sometimes in order to prevent rag problems (there is a description of rag further on in this article). If you have to use them avoid having a lot of them in a block of copy, and especially avoid having one follow another. For more information on this try reading this page on Fonts.com.
Hyphens, En-dashes and Em-dashes
Another thing that can cause confusion the use of the horizontal line characters in a font, and which is the correct one to use. It is worth knowing the difference between a Hyphen (the short one) an En-dash (the slightly longer one) and an Em-dash (the longer one). Linotype and Fonts.com have useful guides on this subject.
Grids
A Grid is a guide by which graphic designers can organise copy and images in a flexible way, whilst making this content easy to take in and understand. They can form the basis of a good typographic layout so it’s good to get into the habit of using them in your work. Try looking at examples (such as a newspaper, a brochure, or a website with a lot of text content) to see how the type has been positioned and structured. The diagram below is intended to show in a basic way how different pieces of type can be positioned on a grid, and what the main parts of a grid are called.
Find out more about using grids from The Grid System, a very useful resource.
Rag
This is the uneven vertical edge of a block of type, most commonly the right-hand edge, as in the case of left-aligned text. It is important to pay attention to the rag, as it can affect readability in a big way. If the rag is not very good, it can be very distracting on the eye, as you read down a column. Usually it can easily be fixed by reworking the line breaks, or by editing the copy.
Widows and Orphans
If a single word or very short line is left at the end of a column it is called a Widow. Likewise if the same is left at the top of the following column this is called an Orphan. Both of these are considered bad typography as they cause distracting shapes in a block of type. They can usually be fixed easily in the same way as the rag, by reworking the line breaks in the column or by editing the copy.
Keep learning more
Once you have digested these basics I have outlined, there is a huge amount of good quality typographic reference material online to help you learn more and improve your skill and judgement. Below is a collection of useful links to get you started.
Recommended reading
Two of the main international font companies both have some very good resource sections aimed at helping you master basic typography:
- Monotype’s For Your Typographic Information
- Linotype’s Font Lounge
Inspiration
Have a look around on the web and get a feel for some great typography. Not only will you find a good variety of styles, but you can also see what other people consider good type. These are some good places to start:
- We Love Typography
- FormFiftyFive
- Resources for Inspirational Typography
- Typeneu.com
- Typographer.org
- Type Directors Club
- Typography Served
- David Airey’s list of typographic Flickr groups
- Typography on Behance
Terminology
If you want to find out more about typographic terminology or just want to look up a word, these are useful websites:
General articles
These are some articles with general tips for improving your typography:
Web typography
If you are interested in reading about using typography in websites, try these useful resources:
- Websites with beautiful typography
- Usetypography.com
- 8 detailed typography tips for the web
- Web Design is 95% Typography
- A practical guide to web typography
- The 100% Easy-2-Read Standard
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Mark Bowley
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Photoshop to HTML
Take your Photoshop skills to the next level by learning how to slice up a PSD into a working standards driven HTML website.
Top Selling
on Themeforest
Breeze - Professional Corpor ... only $35.00 
inFocus - Powerful Professio ... only $35.00 
Criminal minded - More
Follow Psdtuts+ and Tuts+ on Twitter
- Back home long enough to do my laundry. Then it's off to Chicago to the @envato meeting/meetup.
- @myreactiveone we are the same person ;-)
- I really don't want to go to the airport today.
- RT @chrisspooner: Envato has released a new premium tutorial marketplace. This particular tut looks pretty awesome - http://is.gd/ePtWA ;-)
Join the Psdtuts+ Flickr Group
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
excellent…
great….i need this, thx
A very interesting read!
I’ve read “Thinking with type” by Ellen Lupton and I recommend that book to anyone who wants to read a good book, but not be discouraged by huge amounts of text.
I tried to read ‘the elements of typographic style’ but so far I didn’t get past chapter one.
Great Article.
I have to agree. Thinking with type is probably the best typography book out there. Very concise and interesting to read.
Well done for the article!
Best Typography Techniques!
Thanks a lot.
very informative intro.
Just added to Font72.com : http://font72.com/a-20-minute-intro-to-typography-basics-psdtut
Great introductory article. Short, sweet and to the point. I would also recommend a number of good books, including “Elements of Typographic Style”, and “Stop Stealing Sheep & Find Out How Type Works”… both are excellent resources in their own right.
I run this haaaaaaan
very interesting! thx
thanks – this rocks!
Lovely article! This Monday I published one CSS Typography Library called:
Better Web Readability Project – CSS Library so why not use the power of typography to improve the reading experience
Here are some more books:
http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326
http://www.amazon.com/Mac-not-typewriter-Robin-Williams/dp/0201782634/ref=sr_1_1?ie=UTF8&s=books&qid=1243085227&sr=1-1
http://www.amazon.com/Chicago-Manual-Style-University-Press/dp/0226104036/ref=sr_1_1?ie=UTF8&s=books&qid=1243085256&sr=1-1
Cool one dude, and we want more typography tuts here
Impressive.
Thanks so much!
very cool!!!!!!!!
thanks
Great Read. Thank you for the information/education.
Another great font site with most popular and rare fonts is http://www.pilo.me – It is a forum for graphic designers with probably the best type community/collection around online. I know it is by approval only to get in, but once you are in and you participate you are like in typographers heaven.
A great typography introduction.
brilliant
thanks – very useful
Thanks everyone – I’m glad you like the article.
Also thanks to those who have posted links and book suggestions.
wow, what a way to reply
lol, thanks guys
thnx for good sharing
I’ve added this to my PDF library. I wish that this article had the same creativity in communication as “Communicating with Typography,” but it’s really informative.
I already know this by myself, no one teach me at all. Know how? Look in your eyes, thats the main important!
gr8 post mark ! ….
Thank you soooo much for this. Now I can link it to everyone I see who hasn’t a clue about typography.
Very nice intro to typography – simple to understand and informative! This area of graphic design is often overlooked and undervalued so it’s good to see some focused attention on this topic! Great post!
Nice little taste of the pertinent details. There is, of course, so much more. Thinking with Type is a great start, especially for those of you not typesetting long stretches of text. In that case, Robert Bringhurst’s The Elements of Typographic Style is a must. For such long-form typesetting, I discuss a number of books throughout my blog on books design at http://www.tianodesign.com/blog.
One more great article, thank you Andrew,
and once again a have a question: hope you can give me a good advice—if I have really large portion of text and rather limited space to place it, what is better: to use larger font in smaller points, or smaller text in larger points? Or for readability stays the same? I used some condensed type in 4.3 points (it’s maximum, otherwise the whole text comes out of the borders it must be nested), I can read it clearly only when I zoom it 100% (the dimensions roughly are 10 cm width, 12 cm height, 300 dpi), till it’s on computer and I can zoom it’s ok, but this is not the point cause it will be printed and I am afraid that when it will be printed on paper, the text will be simply unreadable. Clear, that I will see it on test sheet, but may be I can do something before I run to the print-factory? In this case I cannot neither change the sizes of future printed work, nor shorten the text.
May be there is some good way out and some method I never thought about before, how to place a long text and to avoid unreadability because the font is very small?
I will be very very grateful for any constructive comment.
Oh, sorry, Mark, just a minute before I read your comment on other article , where I also asked a question, and both you and Andrew answered me, so by mistake I wrote «Andrew » instead «Mark», sorry once again!
Tanya I’m not sure what you mean here. Are you asking if it’s better to have a small text size with bigger leading, or a big text size with smaller leading? Instinctively I’d say the bigger text size simply so it’s more likely to be readable, but it’s really difficult to answer this sort of thing remotely. Also, there are no magic solutions I’m afraid – it’s a case of using good typographic skill and experience to overcome these kind of difficulties.
Hello Mark, thank you very much for answering me. Simply I am breaking my head in searching the solution, you understood my question absolutely correctly. Probably I must find totally another way, may be to revise at all the whole design of a CD cover I am preparing now and to place this very laaarge text in some alternative way… Thank you!
Cordially, Tanya
We like this. Thanks for the info.
Thank you Mark. Very seful stuff.
Helpful and informative!
Thanks
This is a really great post, something all designers need to read.
Featured here: http://www.presidiacreative.com/web-picks-22/
another great article, understanding fonts and typefaces is very important. It can distinguish a good designer from bad, and the knowing about leading and kerning, tracking are essential for manipulating type. A good font can make a piece of design, and also replace the need for images.
yeah
Really though, you design types are really full of it. That’s like saying it’s important to know inverse kinematics when walking. While it may important for a runner to understand these things, the average walker (or web designer or (developer lol)) is just yapping his ass off trying to pad his relevance. It’s always amusing how these things seem obvious to me. If you design fonts for a living, great, casual information for web designers, great, but if you couldn’t lay out a page properly without knowing about kerning or having an eye for adequate serifs, then.. hmm I don’t know what then
This is a fantastic overview of the basics of typography, very helpfull.
Brilliant, ive just finished my first year at uni, this really helped me get through it. Thanks again
No You Didn’t
I always though the typeface was what appeared on your document and the font was the device used to create it. So, back in the days of the original printing presses, a font would be the actual metal stamp used to print on the paper and the typeface would be what was viewed on the document.
Am I wrong?
So when a designer looks a document and says “what font is that?”, they actually mean “what font was used to create that?” or “what typeface is that?”.
Excellent, now I can be even more pretentious at dinner parties.
Very useful – knew some of this but not all and I am becoming more interested in typography so this article comes at just the right time. Thanks.
exactly what I needed… still have too much to learn..
Good article but you should talk about the differences between print and web typography. I think there are a lot of differences specially in legible and readable text block. Another important topic i think is the classification for genre that is not confined to Serif or Non-Serif but it goes further and analyze also what kind of Serif is. Personally I like to organize my font under a classification made by an Italian typographer Aldo Novarese it’s an ancient one but still works. Today there are a lot variants in digital fonts and it will be good to find a classification that is global, precise, unique and useful. Personally i discard the majority of Fantasy Fonts and i stick with Classic and well designed Fonts. For my personal experience There’re only few fonts out there that can be used for commercial works, the majority is for fantasy, personal and fun works.
Fantasy fonts in general die quickly.
Let me know if there’s a good classification of fonts out there.
Thanks so much!
very interesting, thank you
Good work!
Nothing new to me, I’m affraid, but it was very well put and described!
Keep up the good work!
Nice
but you chould check again what are widows and orphans. Now it is not exactly correct
thankx so much….
thankx so much….its so helpful knowing manually setting of typography in layouts..
It’s good to share typography principles.
It would be even better if the typography here reflected them better.
There should be less vertical space AFTER a subhead than BEFORE a subhead, not equal amounts of space before and after. The latter results in “floating heads”, in which it is visually difficult to ascertain what block of text the subhead belongs to. Set your line-height or margins to “pin” your subhead to the text that follows it.
Typograpghy explained in easier way.Encourages to learn more about it…..
Very nice article.
Have been checking out a lot about typography, Thanks for this too