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:


Ascender height (or topline): This line shows where the top of letters such as k and h touch. . let’s go through a few basic typography terms and concepts. intuitively. It took me a while to get this into my head because. Cap height (or cap line): This marks the top of capital letters. This is the line that the text sits on. These horizontal lines are guides for capital letters. It is typically measured using the height of the letter x. Here are the five lines: ■ ■ ■ Baseline: The one you might be most familiar with is the baseline. you would think that capital letters would be the tallest characters. Next. this line is slightly higher than the capital line.It’s this level of integration with a design theme that makes typography one of the most powerful tools in the designer’s toolbox. This line shows where the bottoms of the decenders are. ■ ■ X-height (or midline): This shows the height of lowercase letters (excluding ascenders and descenders). ascenders. Lines A line of characters has at least five lines that it can be aligned to. Descender height (or beardline): Descenders are the parts of characters that go below the baseline (such as the letters p and y). lowercase and descenders (we’ll discuss these terms shortly). Strangely. in a lot of cases.

low amounts of leading can increase the pace of the reader and invoke the feeling of cramped conditions and claustrophobia. It can affect how readable long blocks of text are. It can display a more relaxed feel in text blocks. each one has different leading values. Lowering the amount of leading can cause descenders and ascenders to collide. However. lines get closer to each other. Leading is called line-height in CSS. and this could have an adverse effect on readability.Leading Leading describes the amount of space between lines of text. Look at the examples below. You can measure leading by obtaining the distance between two baselines. making a block of text appear more compacted. . weight and measure. All are set in the same typeface. But as a visual style. it can slow the reader by introducing more white space. When you decrease leading. as the eyes of the reader is required to travel a greater distance between lines of text. which can be desired when you are using type in this expressive manner. Leading is powerful. Too much leading can cause continuity problems. Increasing leading can reduce the pace of a piece of text.


Example 3 is set to 200% of the type size. . you’ll have to increase leading to improve the readability of the text block. the more leading you will need to maintain a pleasurable reading experience. You can see the ascenders colliding with descenders and its effects on readability and aesthetics. 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. then leading should be set at 12pt. Here are a few leading guidelines: ■ Leading can affect text blocks in different ways. If you increase word-spacing (the space between each word). ■ ■ Example 2 is set at an often-recommended value.■ Example 1 is set to a negative value (a value that is smaller than the type size). ■ ■ The more words you have in a line. which is 120% of the type size. You’ll notice the disruption in the pace and flow of reading the text. This means that if your font size is 10pt.

Each time you set type.Tracking Tracking (or letter-spacing) is the space between groups of characters. Tight tracking is when the letters are closer. . This is called the letter-spacing property in CSS. Variables such as typeface choice. Tracking has similar guidelines as leading. Tracking can be described as being loose or tight. Loose tracking is when the letters have a larger distance between them. This rule is not set in stone. The longer your line (or measure as it’s often called) the more loose your tracking needs to be. background color. and all of these best practices are tied to readability. you should be looking at the overall picture. number of columns and the surrounding design elements can also influence the readability of a block of text.

. compare KX versus ll). 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. (i.Kerning Kerning describes the amount of space between two characters.. There is often confusion between tracking and kerning. once you place the rest of the sentence next to it. With this in mind. The area it takes up is less simple to define as the diagonal of the final line creates space underneath it. this space then makes a noticeable difference when compared to the rest of the characters: . the lower-case l in Helvetica is a rectangle. Certain characters sit together in a manner that creates and minimizes space. if you put 5 of them together. lllll) the space between each of them will be equal.e. For example. Some character combinations might require more kerning than others to avoid collisions (e.g. Now consider a character like the capital W.

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. and of course. Use it as a contrast to the main body of text to highlight complementary copy. Flush Right (or Ragged Left) Text is aligned to the right. . Flush Left (or Ragged Right) Text is aligned to the left. it is one of the biggest factors in improved readability. Alignment How you align your text has a huge impact on how people will read and perceive it. Be sure to pay attention to the right-hand side (or the rag). Watch out for punctuation marks on the right-hand side as they can disrupt the alignment. Remember: good typography is never noticed. If we read from left to right. flush right can hamper the natural flow of the text. make sure that they are not too similar. This alignment complements the natural way we read text in western culture. but also not too far apart. readability and legibility. When done correctly. It is important to make sure there is a good balance with line length. The decision of alignment should be made with your design theme in mind.

. In addition. Done well. it can also be hard to read because there is less visual cue between the termination of a text line. 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. Centered text looks best when there are only a few lines of text (2-3 lines).Justified The start and end of text lines are both aligned to the left and right. some lines might have too much word-spacing. so you might need to adjust line breaks as needed. centered alignment can look classy and elegant. Variances in spacing can appear between words in order to keep the lines even. While justified alignment looks clean because it fits neatly into a box. 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. as some programs hyphenate words at the end of text lines to keep the text justified. so it can be very hard to read. Be vigilant on over.hyphenation. There is no shared point where the line begins and ends.

.Working with Typography in Photoshop and Illustrator Graphics software such as Photoshop and Illustrator have powerful typesetting features. The two panels that deal with typography are the Character Panel (Window > Character) and Paragraph Panel (Window > Paragraph). The concepts discussed above are all available to you in Photoshop and Illustrator.


a letterhead — each have their own objectives and considerations. Select Typefaces That Support the Theme Thinking about the theme of your design while you choose your typefaces will help you make decisions. at the end of the day. . Information Hierarchy When planning your design. A double spread. you should use your better judgment. 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. Get familiar with the art and science of typography. it’s important to realize that each job is different. Take note of typefaces that appeal to you and how you might use them in your own work. you should try to experiment with typography as much as possible. After the often lengthy — but very enjoyable — job of short-listing typefaces. Setting type is an art form as much as a science. justify your choices by assessing them against your theme. How big or how bold should the title/headline be? What about sub-headings. a web page. the better you get at it. Get Familiar The more you do something. Immerse yourself in the subject. Creating a logical hierarchy in your designs make them easier to scan and read. a business card. While we have talked about some of the rules about typography. there is nothing that instills confidence in your decisions like knowledge.) Look at the portfolios of designers you admire. and study how they use typography to create great work. This being the case. (I have included a short list of books and sites to check out at the end of this guide. it’s important to work out how you’re going to identify hierarchy and structure.Some Typography Tips Here are some tips and ideas for working with type. Many successful publications combine different typefaces to create both classical and contemporary layouts. body copy or figure captions? Also consider that using different typefaces can help you create distinctions between different text levels.

you will notice the minor nuances of setting type that often make a big difference between good and bad typography. Soon. When you look at type. film intro sequences — you don’t have to look far to find typography. posters. outside influences such as the surrounding design.While the rules we’ve covered can be a good starting point. magazine covers. Typography Is Everywhere Type is a component of design that’s ever-present in the world around us. Road signs. TV ads. what really matters is that the design works. . identity guidelines of the company and client approval can alter how you need to set the type. think about what you’re looking at and why it’s the way it is. Above all.

Sign up to vote on this title
UsefulNot useful