Typography

Typography is a central component of design.

It’s one of the primary ways we, as a society,
pass on information to others.
Typography helps to convey an 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
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
Baseline: The one you might be most familiar with
get
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.

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-Line Height
Leading describes the amount of space between
lines of text. You can measure leading by
obtaining the distance between two baselines.
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.
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.
Tracking- Letter Spacing

Tracking is the
space between
groups of
characters.
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 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.

 The longer your line of type 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.
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

 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.)
 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.
Typography