Understanding

Typography

by Aluko Brown
Content
What is Typography?

Fonts & Typefaces

Type classification

Type families

Kerning, Tracking
& Leading?

Hierachy

Rule of thumb
What is Typography?
Typography is the art and technique
of arranging type to make written
language legible, readable, and
appealing when displayed.

The arrangement of type involves

selecting typefaces, point sizes,
line lengths, line-spacing (leading),
and letter-spacing (tracking), and
adjusting the space between pairs
of letters (kerning).
Type Anatomy
Baseline: The line where the letters sit.

Cap height: The distance from the baseline to the top of the capital letter.

X-height: Located in between the baseline and the cap height, it's the
height of the body of the lowercase letter. (In this case, it's the letters ‘a,' ‘u,'
and ‘y.')

Bowl: The curved part of the character that encloses the circular or curved
parts of some letters, like 'd,' 'b,' 'o,' 'D,' and 'B.' (In this case, it's that round
shape sticking off the letter ‘a.')

Serif: The slight projection finishing off a stroke of a letter in certain typefac-
es. (In this case, it's that little foot sticking off the letter ‘l.')

Descender: The longest point on a letter that falls beyond the baseline.
Fonts vs. Typefaces
A typeface is the overall design of
lettering; the design can include
variations, such as extra bold, bold,
regular, light, italic, condensed,
extended, etc. Each of these varia-
tions of the typeface is a font.
Type Classification
Serifs are typefaces that have extensions
at the base of the letters. Common serif
typefaces include Times New Roman,
Georgia, and Garamond. They are mostly
used as body texts in novels and books
because a serif is much easier to read in
long, printed works due to the distinc-
tiveness between letters.
Other examples includes: Slab serif,
Blackletter, Script and Decorative.
In French, the word “sans” means “without.”
So the term “sans serif” literally means
“without serif.” Common sans serif typefac-
es include Arial, Verdana, and Futura. You’ll
see a lot of sans serifs being used in blog
posts and documents on the web because
it feels more modern and looks great even
at lower screen resolutions.
Type Families
The term “type family” or “typeface family” is used to
describe a range of designs that are all variations of
one basic typeface.

For example, you’ll see that CircularStd has varia-

tions such as bold, extra bold, black, regular, light,
light italic, and regular italic:

Using one type family will help add variation to your

designs, while keeping it consistent and uniform.

As a designer, you might use various fonts within one

family to create a sense of hierarchy.
Kerning, Tracking
& Leading?
Kerning is the modification of the Tracking is an adjustment to the
space between two letters. For spacing between all letters an
example, check out the image entire word.
below:

Leading (a.k.a. line spacing)

is the space between the baselines
of texts.
SPOT THE DIFFERENCE
Lorem ipsum Lorem ipsum dolor sit amet, con-
sectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in
Lorem ipsum Lorem ipsum dolor sit amet, con-
sectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in
Hierachy?
Hierachy is the distribution of
weight across your typography This is a header text.
system in the order of relative
This is a body text.
importance of the texts.

This is a header text.

This is a body text.

Rule of thumb in
Typography
Avoid tracking texts with small case.

Avoid using more than 2 fonts in a

design. Never use more than 3.

Avoid full text justification. Stick to

left justification.

Clarity is king. Always choose

legibility over beauty.

Never set a script/ handwritten font

in all caps.
Questions?