The Basics of Typography

What Is Typography?

From a descriptive and simplistic point-of-view, typography is the arrangement of type. But there is so much more to it than that. It can mean different things depending on whom you ask.

For me, how typography is used in a design is deeply rooted in its overall theme, tone and message. It works with your layout, grid and color choice to create a well-rounded design.

Your choice of typefaces and your technique of setting type give your composition its character, pace and style. Not only does it give the copy legibility, it also helps the reader gain a greater insight into the subject of the design.

A simple illustration of how influential typography can be is to look at the same text with different typefaces. Notice how typography can define and alter the message:

It’s this level of integration with a design theme that makes typography one of the most powerful tools in the designer’s toolbox.

Next, let’s go through a few basic typography terms and concepts.

Lines

A line of characters has at least five lines that it can be aligned to. These horizontal lines are guides for capital letters, ascenders, lowercase and descenders (we’ll discuss these terms shortly).

Here are the five lines:

  • Baseline: The one you might be most familiar with is the baseline. This is the line that the text sits on.
  • Cap height (or cap line): This marks the top of capital letters.
  • Ascender height (or topline): This line shows where the top of letters such as k and h touch. Strangely, in a lot of cases, this line is slightly higher than the capital line. It took me a while to get this into my head because, intuitively, you would think that capital letters would be the tallest characters.
  • X-height (or midline): This shows the height of lowercase letters (excluding ascenders and descenders). It is typically measured using the height of the letter x.
  • Descender height (or beardline): Descenders are the parts of characters that go below the baseline (such as the letters p and y). This line shows where the bottoms of the decenders are.

Leading

Leading describes the amount of space between lines of text. You can measure leading by obtaining the distance between two baselines. Leading is called line-height in CSS.

Leading is powerful. It can affect how readable long blocks of text are.

When you decrease leading, lines get closer to each other, making a block of text appear more compacted. Lowering the amount of leading can cause descenders and ascenders to collide, and this could have an adverse effect on readability. But as a visual style, low amounts of leading can increase the pace of the reader and invoke the feeling of cramped conditions and claustrophobia, which can be desired when you are using type in this expressive manner.

Increasing leading can reduce the pace of a piece of text; it can slow the reader by introducing more white space. It can display a more relaxed feel in text blocks. Too much leading can cause continuity problems, as the eyes of the reader is required to travel a greater distance between lines of text.

Look at the examples below. All are set in the same typeface, weight and measure. However, each one has different leading values.

  • Example 1 is set to a negative value (a value that is smaller than the type size). You can see the ascenders colliding with descenders and its effects on readability and aesthetics.
  • Example 2 is set at an often-recommended value, which is 120% of the type size. This means that if your font size is 10pt, then leading should be set at 12pt.
  • Example 3 is set to 200% of the type size. You’ll notice the disruption in the pace and flow of reading the text.

Here are a few leading guidelines:

  • Leading can affect text blocks in different ways. A short block of text (such as a tagline/slogan) versus a long block of text (such as a paragraph or news column) will be affected by leading in its own way. Just because it works well on one doesn’t mean it will work equally well in the other.
  • The more words you have in a line, the more leading you will need to maintain a pleasurable reading experience.
  • If you increase word-spacing (the space between each word), you’ll have to increase leading to improve the readability of the text block.

Tracking

Tracking (or letter-spacing) is the space between groups of characters. This is called the letter-spacing property in CSS.

Tracking can be described as being loose or tight. Loose tracking is when the letters have a larger distance between them. Tight tracking is when the letters are closer.

Tracking has similar guidelines as leading, and all of these best practices are tied to readability.

The longer your line (or measure as it’s often called) the more loose your tracking needs to be. This rule is not set in stone. Variables such as typeface choice, background color, number of columns and the surrounding design elements can also influence the readability of a block of text. Each time you set type, you should be looking at the overall picture.

Kerning

Kerning describes the amount of space between two characters.

There is often confusion between tracking and kerning. While tracking is a global setting that affects how close all the characters are, kerning is more the microscopic view of the space between two letters. Some character combinations might require more kerning than others to avoid collisions (e.g., compare KX versus ll).

Certain characters sit together in a manner that creates and minimizes space. For example, the lower-case l in Helvetica is a rectangle; if you put 5 of them together, (i.e., lllll) the space between each of them will be equal.

Now consider a character like the capital W. The area it takes up is less simple to define as the diagonal of the final line creates space underneath it. With this in mind, once you place the rest of the sentence next to it, this space then makes a noticeable difference when compared to the rest of the characters:

Kerning is the art of adjusting the space between characters so that the eye can flow easily across the copy without being distracted by discrepancies. Remember: good typography is never noticed.

Alignment

How you align your text has a huge impact on how people will read and perceive it. The decision of alignment should be made with your design theme in mind, and of course, readability and legibility.

Flush Left (or Ragged Right)

Text is aligned to the left. This alignment complements the natural way we read text in western culture. When done correctly, it is one of the biggest factors in improved readability.

Be sure to pay attention to the right-hand side (or the rag). It is important to make sure there is a good balance with line length; make sure that they are not too similar, but also not too far apart.

Flush Right (or Ragged Left)

Text is aligned to the right. If we read from left to right, flush right can hamper the natural flow of the text. Use it as a contrast to the main body of text to highlight complementary copy.

Watch out for punctuation marks on the right-hand side as they can disrupt the alignment.

Justified

The start and end of text lines are both aligned to the left and right.

While justified alignment looks clean because it fits neatly into a box, it can also be hard to read because there is less visual cue between the termination of a text line. Variances in spacing can appear between words in order to keep the lines even.

Be vigilant on over- hyphenation, as some programs hyphenate words at the end of text lines to keep the text justified. In addition, some lines might have too much word-spacing, so you might need to adjust line breaks as needed.

Centered

Text is aligned to the center of the text area, rather than the edges.

Exercise caution when using centered alignment — there is nothing worse than poorly set centered text. There is no shared point where the line begins and ends, so it can be very hard to read.

Centered text looks best when there are only a few lines of text (2-3 lines).

Done well, centered alignment can look classy and elegant. Be sure that your text area is wide enough to break the text into logical lines and that there is enough contrast between the line length to make the text inviting.

Working with Typography in Photoshop and Illustrator

Graphics software such as Photoshop and Illustrator have powerful typesetting features. The concepts discussed above are all available to you in Photoshop and Illustrator.

The two panels that deal with typography are the Character Panel (Window > Character) and Paragraph Panel (Window > Paragraph).

Some Typography Tips

Here are some tips and ideas for working with type.

Information Hierarchy

When planning your design, it’s important to work out how you’re going to identify hierarchy and structure. How big or how bold should the title/headline be? What about sub-headings, body copy or figure captions?

Also consider that using different typefaces can help you create distinctions between different text levels. Many successful publications combine different typefaces to create both classical and contemporary layouts.

Creating a logical hierarchy in your designs make them easier to scan and read.

Select Typefaces That Support the Theme

Thinking about the theme of your design while you choose your typefaces will help you make decisions. After the often lengthy — but very enjoyable — job of short-listing typefaces, justify your choices by assessing them against your theme.

Get Familiar

The more you do something, the better you get at it. This being the case, you should try to experiment with typography as much as possible. Immerse yourself in the subject. (I have included a short list of books and sites to check out at the end of this guide.)

Look at the portfolios of designers you admire, and study how they use typography to create great work. Take note of typefaces that appeal to you and how you might use them in your own work.

Get familiar with the art and science of typography; there is nothing that instills confidence in your decisions like knowledge. Being able to talk through your decisions confidently and clearly with the full support of your craft behind you is very important.

Use Your Own Judgement

While some of the rules I’ve discussed earlier seem rigid, at the end of the day, you should use your better judgment. Setting type is an art form as much as a science.

While we have talked about some of the rules about typography, it’s important to realize that each job is different. A double spread, a web page, a business card, a letterhead — each have their own objectives and considerations.

While the rules we’ve covered can be a good starting point, outside influences such as the surrounding design, identity guidelines of the company and client approval can alter how you need to set the type.

Above all, what really matters is that the design works.

Typography Is Everywhere

Type is a component of design that’s ever-present in the world around us. Road signs, magazine covers, posters, TV ads, film intro sequences — you don’t have to look far to find typography.

When you look at type, think about what you’re looking at and why it’s the way it is. Soon, you will notice the minor nuances of setting type that often make a big difference between good and bad typography.

Resources on Typography

Lots of books and websites cover the subject of typography. They are fantastic references to have with you while you work with type. Here are a handful of my favorites.

Books

  • Stop Stealing Sheep and Find Out How Type Works: By Erik Spiekermann and E.M. Ginger. Spiekermann tells us how it’s done in this great introduction to the subject.
  • The Elements of Typographic Style: By Robert Bringhurst. This book is always on my desk and has helped me out more times than I’d like to mention! It’s the big daddy of typography books. I smile every time I look at this book. If you like typography, then you probably already own a copy.
  • The New Typography: By Jan Tschichold. First published in 1928, the lessons and information in this book are still relevant today. It discusses typography concepts as well as a reflection on typography’s place in society and how we should approach type.
  • Modern Typography: An Essay in Critical History: By Robin Kinross. This book is heavy, but it’s worth a read. It’s an amazing record of the history of type from someone who clearly knows their beans!

Websites

  • FontShop Education: FontShop Education docs are formatted for easy downloading and printing. Perfect for the classroom or studio.
  • Typophile: Great place to identify a typeface. Look through the forums; there are many generous people there that share their own knowledge of the subject. I like looking through this site while eating a sandwich at work.
  • Typographica: Typographica is a review of typefaces and type books, with occasional commentary on fonts and typographic design.
  • Guppiz

    Typography in plain English!!

  • Great information Christian, nicely put together.

  • I was looking for some extra bit of information on the Typography basics for starting and i think you have explained some essential rules and things to look for in designing.

    I already have referenced following books

    1. Getting it Right with Type: The Do’s and Don’ts of Typography
    2. Stop Stealing Sheep and Find Out How Type Works
    3. Basics Design: Typography
    4. Type and Typography (Portfolio)

    Good work cheers.

  • Really great post!! really great for amateur like me

  • For whatever reason, I suck at typography. Thanks for the help!

  • This touches all the bases. Great job!

    Now, a fun and relatively painless way to learn to “feel” working with type is to scan your favorite designers’ works from books, magazines, whatever…into a 100% size jpg that you can put on a background layer in InDesign, Quark, Illustrator, Photoshop, etc.

    Screen the background layer back to something readable, but coverable with your own typesetting (adjust layer opacity).

    Then, on the layers above, copy the type layout exactly…changing typefaces/fonts, font heights, font widths, tracking, kerning, line alignment, line leading, line widths…to match exactly what the designer did.

    This way, you can practice getting good, getting the feel, increasing your ability to design using keyboard commands (wean yourself from the mouse), increasing speed, educating your hand and eye, and giving up dependency on your own subjective judgement about “what looks good,” and working from designs that you already love and from designs that have been paid for.

    You can scan, copy, and reproduce entire ads, posters, book pages…any print matter that is magnificent…and give your hands, eyes, and heart a chance to experience what the designers experienced as they created their work.

  • Beautiful article. Was a great refresher and really helped to refocus my sense for this. Thank you so much!

  • Dana

    Exactly what I was looking for, a simple, coherent explanation with clear examples. Great job, thank you!

  • Thank you!! tagged to delicious

  • What a great collection of information.

    Very timely too – as i’m preparing to publish an ebook for a friend in the next month or two.

  • Shilpa

    This is great, thanks for sharing

  • What a great post for those looking to delve into the world of typography.

    A lot of people underestimate the time needed in choosing the correct typeface, resulting in their designs loosing overall strength and impact. This post is a great resource, explaining simple techniques that will provide those looking to explore typography in greater detail.

  • Carolina

    You might also like this resource: http://explorationsintypography.com/

  • Thank you!! tagged to delicious

  • I wrote about this article and linked to it on my blog. I hope you don’t mind!

  • I’m working on my own fonts and coincidently came across this article. I enjoyed reading it and the way you have explained the details. Cheers Christian !

  • Mo

    I’m surprised that this does not talk about monospace and serif..

  • George

    Great article .. thanks

  • Asoka

    Thank you Christian, for sharing your knowledge since Typography is doing a major roll in an artwork…

  • This tutorial is excellent! I’ve been meaning to read up on typography, and this has made a great read!

    What about when translating these tips to web pages? Can the same ideas and tips be applied to web pages, or are we limited to browser support, and would have to use images instead?

  • awesome! very good explanataions

    now I’m only left with the feeling that VW produces helicopters…

  • Thank you Ciara!

  • Practice is all you need Jeffery!

  • Glad you liked it Will!

  • No Problem, Dana. Glad it was of some help.

  • Thanks for reading it! Glad it was of some help…

  • It is a very useful resource and a great book. Co-wrote by the mighty Erik Spiekermann who wrote “Stop Stealing Sheep”

  • Nice one Simon! I don’t mind at all! Thanks for the compliment!

  • No problem, Barun, glad it was of some help…

  • It’s not that surprising Mo.
    This article is about the practice of typography, rather than a explanation of the different styles. There are so many to choose from serif, sans serif, slab serif, grotesque, neo-grotesque, humanist, monospaced, blackletter, old style, transitional, modern, geometric… the list goes on. The important part is that the typeface fits into the theme of your design and gives your copy the correct tone of voice. A detailed article about the different styles is perhaps the next challenge…

  • Adrian

    Such a great article. I just had my interview to get into a graphic design course, and I’m super excited to learn more about Typography. Thanks for all the info 😉

  • The amount of information, wow! I’m a sponge for typography articles, as this is not one of my strong features, and this just got to bee my favorite.
    Really good job in explaining everything!

  • Great, well-written introduction to typography.

    I now know how to properly explain the difference between tracking and kerning!

  • It’s a really useful article. Thanks for sharing

  • angel

    well detailed, great informatin!

  • daniel

    Funny thing is…I was already doing most of those things and had sort of figured it out. At least now I know why I made some of the decisions I chose…..cool!

  • This is excellent. Much appreciated.

  • Doug

    Excellent source of information. Thank you.
    Can you suggest where I can get information about design for booklets? I am specifically looking for rules on layout for page size, margins, columns, gutters – widths, spacing, etc.
    Thank you again for your info.

  • miguel pollard

    Good work man. This really helped out a lot.

  • Jordan

    thanks! for sharing this really helped because to keep it 1OO I DON’T like typography

  • souren paramanik

    thanks for putting it together in such an informative & simplistic way..

  • Terry Adams

    Great Information!!!!!!!!
    Thanks!

  • Sara

    This article has been an amazing introduction to typography in very friendly terms. It answered a lot of my questions and was structured well so I could digest the information in a meaningful way. Thank you so much!

  • Abhay Kumar

    very useful for me…

  • Brittney Rolley

    This was a very helpful article for a novice like myself when it comes to typography. Thanks!

  • Natalie

    Hi Christian, Im not a graphic designer but simply a fan of typography and want to do one of those trendy typography prints, nothing fancy. In fact probably very basic for you guys. Ive got a trial on illustrator via creative cloud for two more weeks and not quite sure where to start having spent two weeks messing about with it and getting nowhere!. Can you point me in the right direction? Its to do a personalised print with names etc, thanks

  • Josh

    Thanks so much! Excellent post! This is such a big help for an amateur like me.

  • chutarat

    This is great and concise, thanks for sharing such wonderful compilation.

  • Shruti

    Thanks for the information. Its really helpful.

  • Usama

    awosame information thanks budy…..

  • Mahendra Mustika Wijaya

    hai Christian Bailey , it’s great article ! very informative and easily understand, but i want to ask about characteristic type of font like warm , bolder , profesional , etc. some article on internet explain already explain but still not complete , may be you know more better 😀 can you explain it ??

    i need that information because i am suck at typography especially choose the right font to implement in my project (web).

    thank you,

  • Snowy

    Easy to understand! Good job!

  • Raj

    Hi Bailey, your article is very informative, useful and very easy to understand. You have explained it beautifully. As I am a beginner;learning about Graphic design so today I have learned many things about typography through this post. Many thanks Christian and best wishes!

  • coco ng

    Hi coco your article is very informative, useful and very easy to understand. You have explained it beautifully. As I am a beginner;learning about Graphic design so today I have learned many things about typography through this post. Many thanks Christian and best wishes!

  • david zaza

    Thanks for providing such informations, it is ok.

  • bob ross

    de weets bruh!!!

  • Paramesha Mahadevaiah

    Hello Christian, very helpful article,Good source of information.
    Don’t stop keep going with more Information adn reach more people.

    Thank you.

  • Ashutosh ranjan

    Thank you Christian ,for share such great article,it was very helpful .

  • ernest

    somebody give me the exapmles of typography w=ords which have both ascenders and descenders

  • Hayley

    Thanks! Awesome article that will forever be relevant.

  • me

    whos here cause of conroy

  • me

    whos here cause of conroy

  • Kalo

    Agree with Hayley – the article is still relevant even today.

    We even featured it in our latest post on eCommerce typography – http://blog.lemonstand.com/ecommerce-typography/

  • Maviline

    This is just awesome!!!
    I teach handwriting in a secondary school in Cameroon and this blog has been the greatest thing that has happened since I started teaching this subject.I’ve had no formal training in it,just been using my judgement and ibservation to pass across the importace of legible handwriting