This link has been bookmarked by 164 people . It was first bookmarked on 23 May 2009, by someone privately.
-
15 Apr 12
-
14 Jan 12
-
28 Sep 11
-
16 Sep 11
-
22 Aug 11
-
20 Jul 11
-
31 May 11
-
22 Mar 11
-
14 Feb 11
-
08 Feb 11
-
04 Feb 11
-
31 Jan 11
-
08 Jan 11
-
01 Dec 10
-
22 Oct 10
martincenturionTypography 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
-
05 Oct 10
-
27 Sep 10
-
20 Sep 10
-
23 Aug 10
-
09 Aug 10
-
03 Aug 10
-
14 Jul 10
-
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.
-
-
15 May 10
-
13 May 10
-
-
08 May 10
-
07 May 10
wasd wasdTypography 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 hardetypography design tutorial fonts webdesign reference tutorials font
-
26 Apr 10
-
17 Mar 10
-
04 Mar 10
-
-
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.
-
a typeface is a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Black, etc.)
-
a font is one weight or style within a typeface family (such as Helvetica Regular)
-
Serif – these typefaces are the more traditional ones.
-
Sans-serif – as the name suggests, these are distinguished by their lack of any Serifs
-
-
16 Jul 09
-
12 Jul 09
-
07 Jul 09
-
06 Jul 09
-
05 Jul 09
Bruce ClaryVery basic. Gets at most of the essential terminology. Might be good for ar340 or cm210, even cm135.
-
-
Tomasz FrankowskiTypography 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
-
17 Jun 09
-
13 Jun 09
-
12 Jun 09
-
11 Jun 09
-
09 Jun 09
-
04 Jun 09
-
01 Jun 09
-
29 May 09
-
28 May 09
-
27 May 09
-
26 May 09
-
Andrew DeVigal"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."
-
25 May 09
-
24 May 09
-
23 May 09
-
-
will krzymowskiTypography 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
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.