Typography

What is Typography?
Typography is the art and techniques of arranging type
The arrangement of type involves:

the selection of typefaces (styles)

type size
line length
leading (line spacing)
letter-spacing (tracking and kerning).

Working with type

Simply changing the typeface,

size, colour, weigh, and

placement on the type in your design
can add extra emphasis to our
messages.

Font = Typeface
A font is a specific set of typographic
characters that are designed to work
together
Fonts also referred to as typefaces

Typefaces
Is a set of letterforms, numbers, and
symbols unified by a common visual
design.
abcdefghijklmnokprstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !@#$%^&*()_-+::,.

Font style and Font family

Each typeface may also have a variety of related type styles:

E.g. Italic, bold, condensed, or extended.

Some typefaces have even more elaborate variations such as

outline, shaded, and/or decorated.

The whole related group of type styles

based on a single typeface is called
Font or Type Family.

Condensed / Extended
Condensed: Faces that are taller than usual in
proportion to their width.
Extended: Faces that are wider in proportion to
their height.
Here is an example of Arial Condensed
Bold
Here is an example of Arial Roman Bold
Here is an example of Arial Extended Bold

Font families
Font families are
important because
they give designers
a variety of choices
while still remaining
consistent.
Good typefaces
usually come with a
variety of weights, as
well as italicized and
condensed weights.

QuickTime and a
TIFF (Uncompressed) decompressor
are needed to see this picture.

Font styles: serif vs. sans serif

This is simple concept to understand.
A "serif" is a little squiggly item at the end of the letter. The serif creates a
more natural flowing look to the text that makes it easier to read.
The word "sans" in "Sans Serif" means "without" in French, therefore, this
type does not include the squiggly items on the text.

serif vs. sans-serif

Serif typefaces are generally easier to read when it comes
to big bodies of small text. The serifs are what make the
body copy so readable. Better eye flow is created by using
serif typefaces.

Sans-serif typefaces work well for titles and other brief bodies of text
that require greater attention. The most commonly used sans-serif
font is Helvetica

Typesize
Typesize is generally used to rank text into
levels of importance:
Headline (also called heading)
Subheading
Bodytext (main copy text)

Type Size
Small point sizes size such as 6,
8, 9, 10, 11 and 12 are considered
body text sizes, whereas larger
point size such as 15, 18, 20, and
higher are considered headlines
or display size.

Type weight
Text set in three different weights of the same typeface
ARIAL LIGHT

ARIAL REGULAR

ARIAL BOLD

Lorem ipsum dolor sit

amet, consectetuer
adipiscing elit.
Pellentesque tellus
justo, blandit quis,
volutpat sed, rhoncus
nec, urna. Pellentesque
convallis. Quisque
molestie porta arcu.
Aliquam molestie. Cras
et neque sit amet arcu
bibendum adipiscing.
Phasellus varius.

Lorem ipsum dolor sit

amet, consectetuer
adipiscing elit.
Pellentesque tellus justo,
blandit quis, volutpat sed,
rhoncus nec, urna.
Pellentesque convallis.
Quisque molestie porta
arcu. Aliquam molestie.
Cras et neque sit amet
arcu bibendum adipiscing.
Phasellus varius.

Lorem ipsum dolor sit

amet, consectetuer
adipiscing elit.
Pellentesque tellus
justo, blandit quis,
volutpat sed, rhoncus
nec, urna. Pellentesque
convallis. Quisque
molestie porta arcu.
Aliquam molestie. Cras
et neque sit amet arcu
bibendum adipiscing.
Phasellus varius.

These variants can be effectively used to create visual

hierarchy with continuous text a well as to lend tone and
texture (typographic colour) to text

UPPERCASE vs. lower case

UPPERCASE
lower case

Ascender vs. decender

Ascenders (parts of a character which ascend above its x-height - upper staff of a lower case b,d,t etc )

Descenders (parts of a character which descend below its x-height - lower tail of a g or y etc.)

X-height

x-height refers to the height of the lowercase letter

Base line

The baseline is an imaginary line upon which each character rests

Legibility
Legibility is concerned with how easy it is to
distinguish individual letters.
The simpler a type design is, the more legible it is.
So why do less-than-legible typefaces even exist?
Because typeface designers love to create unique and
distinctive designs, of course. While it is generally better
to always choose a legible type, there are times when
distinctiveness may be more important than legibility. For
example, when selecting a font for a unique and
distinctive company logo.

Fonts that are not legible

Typography is the art and science of communication
through type
Typography is the art and science of communication
through type
Typography is the art and science of communication
through type
Typography is the art and science of communication
through type

Legibility tolerances
The designer must remember that their own
ability to decipher text that is presented in a
particular font may not be the same as the ability
of others who will be trying to read the text.
Identify and evaluate the legibility tolerances of
your target audience. Older and conservative
audiences are usually less tolerant of difficult-toread fonts than younger progressively minded
audiences

Readability
Readability refers to the ease with which a
reader can scan over paragraphs of type.
In other words, how easy it is to read!
While legibility is basically dependent on
the typeface design, readability is
dependent on the manipulation or
handling of the type. A highly legible
typeface can be made unreadable by poor
typographic design.

Factors which affect readability include:

line lengths
size
Leading
Font choice
Letter spacing
type alignment
colour
and background.

Readability Rules

Avoid Capitals
Use a suitable point size
Dont use a line too long or too short
Create even word spacing
Create even letter spacing
Think about the background
Apply appropriate line spacing (leading)

Readability

Readability
READABILITY
Words set in upper and lower case form recognizable shapes,
making them easier to read than the rectangular shape that
formed by words set in all caps

Leading
Leading, or line spacing, is the space between
lines. (Distance from baseline to baseline)

Leading
Pronounced ledd-ing, the name comes from the
lead strips placed between lines of text in the
days of metal type.

Leading and legibility

Leading is a consideration to take into account
when it comes to maximizing the legibility of text.

How much leading?

Every text will require different treatment. It's purpose is to allow the designer
to alter the density of blocks of text.

The amount of leading will depend on:

The font style (each typeface has a different x-height and requires therefore diff. leading)

The Type size (Type set at very small sizes, say 8 point or below, may require extra leading)

The length of your text columns (Long lines of text may require extra leading)

Headlines may require negative leading, where type actually (or almost) overlaps.

Always experiment with the leading

to find out what works best

The leading of text affects its readability and appearance

(the overall colour of the page)

Less leading make text look crowded

and harder to read but will also make
the page darker

Greater leading makes the page lighter

More about line spacing

The amount of space between lines is an important factor in

readability.

If the lines are set too closely together, type on one line interferes
with type on another line.

Too much space between lines slows down reading considerably as

the eye struggles to find where the next line begins.

Where leading is set to the same point size of the copy, it is referred
to as 'set solid'. Although text set solid is often entirely legible, large
blocks of text set solid are tiring to read. Where possible, you should
add at least 2 points of leading to your body copy. For example, for
9pt type choose 11 pt leading.

Line Length
If lines are too long, the reader will lose track as
the eye has difficulty in returning to the start of
the next line.
Lines that are too short are hard to read
because sentences are broken up too much. If
you must set lines short, then choose a small
fonts size. Don't justify the type, and avoid
excessive hyphenation.

Alignment
Alignment is the organization of a block or
columns of type via a vertical axis.
Different alignments alter the readability of
text, as well as the composition of the
information. Types of alignment include
left alignment, right alignment, and force
justified (as shown).

Alignment

Left aligned
Left edge is hard and
right edge is soft

Right aligned

 Justified
even edges on both left and right
(straight-edged columns)

Centered
centered text is symmetrical

Kerning

Kerning is the adjustment of space between pairs of letters to make

them more visually appealing. It is normally applied to individual
letter pairs in headlines or other large type.

Tracking
Tracking = Letter Spacing
Tracking adjusts the space between all
selected letters.
Tracking is usually used to space equally
between all the letters
Tracking can be adjusted to create visual
interest with a word or group of words as a
headline or title

Tracking works better with uppercase letters, because the

lettershapes are more uniform

With lowercase letters, tracking can make words difficult to read

TRACKING EXAMPLE..
Tracking is often used to create whitespace in a design. With loose
tracking, text appears less dense. Wide letterspacing in short
amounts of text such as headline or a name can seem stylish and
sophisticated

The heading has become a stronger design element by bringing

more whitespace into the layout while visually connecting the left and
right edges of the column.

Typographic Hierarchy

The essential function of type is to get your message across.

Sounds simple, right? Not always. The more information you have to
present, the more challenging it can be to convey it in the right
sequence and with the right emphasis. Typographic hierarchy
refers to the different levels of importance your design choices
assign to the information youre trying to convey.

The most crucial element in achieving good typographic hierarchy is

the overall design of your piece. Once all the elements are arranged
with care, its time to make some typographic choices that prioritize
the information for your readers.

Changes in weight, size and space; show how quickly

you can change the point of emphasis

How do you make the most important information stand out?

Try the following techniques:

Choose your primary typeface wisely. Select a legible type family with enough
weights to give you options.
Use a contrasting typeface. If your primary typeface is a serif design, a contrasting
sans can often work well to help prioritize information. Dont use more than two
families; more runs the risk of making your design too busy.
Vary size. Changing the point size will draw attention, but be sure to make it
noticeable. A one-point change wont create enough contrast; try two points or more.
Use all caps. In small doses, all cap settings work well for brief emphasis, especially
for subheads and column headings. Use all caps sparingly, though text in all caps
loses readability after more than a few words.
Incorporate italics. Using italics is a great way to achieve subtle emphasis,
particularly for bylines, captions and within blocks of copy.
Take advantage of small caps. If your typeface has true-drawn small caps, use
them! Theyre terrific for highlighting specific elements when you have a lot of
information to prioritize and dont want to change type families.