Readability & Legibility

Typography —
an invisible art ?
Legibility and Readability

Which is more easily recognizable ?

how do we read ?
how do we read ?
how do we read ?
how do we read ?
Legibility and Readability

how do we read ?
how do we read ?
The upper half is more easily recognizable
than the lower half.
Legibility and Readability

Which is more easily recognizable ?

How do we read ?
HOW DO WE READ ?
Legibility and Readability

How do we read ?
HOW DO WE READ ?
Lowercase letters are easier to read
Than upper case letters
Legibility and Readability

Legibility is the ease which one identifies the letters

and distinguishes them. It is about the design of the
letters as well as the relationship between the letters.
(about the typography)

Readability is the manner and ease the eye

distinguishes and absorbs the words and meaning of
coherent sentences and paragraphs.
(about the meaning of the message)
Legibility and Readability

Legibility is the ease which one identifies

the letters and distinguishes them.
It is about the design of the letters as well
as the relationship between the letters.
(Its about the typography)

Readability is the manner and ease the

eye distinguishes and absorbs the words
and meaning of coherent sentences and
paragraphs.
(its about the meaning of the message)
Legibility and Readability

I am highly legible
Garamond

I am poorly legible
Comic Sans

I am poorly legible
Papyrus
I am highly legible I am not highly legible
infinite infinite
millenium millenium
minimum minimum
lilies lilies
Adobe Garamond Regular Helvetica Light
characteristics: note:
large x height & open counter spaces l’s and i’s are similiar
large ascenders and descenders geometric forms are more easily confused
upright letterforms because of their simplicity and similarity
clearly defined connections of
parts of letters
contrast of letterforms
ease of reading with serifs
Factors
that affect n type design
readability: n leading
n line lenght
n alignment
n screen vs print
n contrast
n color
Colour or Density in Typography 14/24 Minon Regular
The ability to fine-tune type requires an unders-
14/18 Minon Regular tanding of typographic detail. Beyond the straight-
Typography is known as an invisible art, because if forward page design, the typographer-designer
a typographer has done a good job and produced can enhance a page with added decorative touches,
a page that flows and is ’easy on the eye’, he has
done his job and the reader doesn’t notice. A page which can make a page more interesting to the rea-
that is badly designed will be difficult and irritating der without making it difficult to read. These should
to read. Whether you are reading in the office for
work, or at home for pleasure, and no matter how be used discreetly and be appropriate to the content.
interesting the actual content, if a book is uncom- It is important to resist the temptation to overdo
fortable on the eye then the enjoyment of reading
is spoiled. them. Remember that, especially if you are desig-
ning a book, it isn’t just one page that needs to flow,
but all the pages.

14/16 Minon Black 14/24Minon Black

Typography is known as an invisible art, because if Typography is known as an invisible art, because if a
a typographer has done a good job and produced a typographer has done a good job and produced a page
page that flows and is ’easy on the eye’, he has done his
job and the reader doesn’t notice. A page that is badly that flows and is ’easy on the eye’, he has done his job and
designed will be difficult and irritating to read. Whet- the reader doesn’t notice. A page that is badly designed
her you are reading in the office for work, or at home
for pleasure, and no matter how interesting the actual will be difficult and irritating to read. Whether you are
content, if a book is uncomfortable on the eye then the reading in the office for work, or at home for pleasure,
enjoyment of reading is spoiled.
and no matter how interesting the actual content, if a
book is uncomfortable on the eye then the enjoyment of
reading is spoiled.
Leading

auto is a percentage of the type size leading 18/24

The amount of leading necessary The amount of leading necessary
for a readable and balanced column for a readable and balanced column
to type will depend upon the line to type will depend upon the line
lenght and x-height of the typeface. lenght and x-height of the typeface.
Typefaces with long ascenders and Typefaces with long ascenders and
decenders will, as a rule, require less decenders will, as a rule, require less
additional leading than those with
additional leading than those with
greater x- height,.
greater x- height.

select your leading leading 18/30

(18/18 solid)
The amount of leading necessary The amount of leading necessary for a
for a readable and balanced column
to type will depend upon the line readable and balanced column to type
lenght and x-height of the typeface. will depend upon the line lenght and
Typefaces with long ascenders and
decenders will, as a rule, require less x-height of the typeface. Typefaces
additional leading than those with
greater x- height. with long ascenders and decenders
will, as a rule, require less additional
leading than those with greater x-
height,
Leading (or Linespacing) & Line Lenght

Factors: serif

type size 11/14 Line spacing, or leading, 11/14 Line spacing, or leading, like wordspacing and letterspacing can
like wordspacing and be used to improve readability. You selection of typeface, size,
x-height
letterspacing can be used line length, and copy will all affect the amount of linespacing.
line length to improve readability. You With so many factors involved, you see why proper linespacing
selection of typeface, size, is more a matter of visual judgement than mathematics. Line
sans / serif line length, and copy will spacing, or leading, like wordspacing and letterspacing can be
all affect the amount of used to improve readability. You selection of typeface, size, line
linespacing. With so many length, and copy will all affect the amount of linespacing. With
factors involved, you see so many factors involved, you see why proper linespacing is
copy length
why proper linespacing more a matter of visual judgement than mathematics.
vertical stress is more a matter of
visual judgement than
mathematics.

11/16 Line spacing, or leading, 11/16 Line spacing, or leading, like wordspacing and letterspacing can
like wordspacing and be used to improve readability. You selection of typeface, size,
letterspacing can be used line length, and copy will all affect the amount of linespacing.
to improve readability. You With so many factors involved, you see why proper linespacing
selection of typeface, size, is more a matter of visual judgement than mathematics. Line
line length, and copy will spacing, or leading, like wordspacing and letterspacing can be
all affect the amount of used to improve readability. You selection of typeface, size, line
linespacing. With so many length, and copy will all affect the amount of linespacing. With
factors involved, you see so many factors involved, you see why proper linespacing is
why proper linespacing more a matter of visual judgement than mathematics.
is more a matter of
visual judgement than
mathematics.
Alignment

flush left /rag right or align left, rag right flush right/rag left or align right, rag left
Decisions on the arrangement of running Decisions on the arrangement of running
type involve the consideration of point type involve the consideration of point
size, column width and alignment. It is the size, column width and alignment. It is the
relationship of these three interdependent relationship of these three interdependent
factors that ultimately determines the factors that ultimately determines the
appearance of printed text. Type may be appearance of printed text. Type may be
set flush or range left, centered, flush or set flush or range left, centered, flush or
arranged right or justified. Random is arranged right or justified. Random is
another form of alignment. Each form has another form of alignment. Each form has
characteristic qualities. characteristic qualities.

centered justified (align left and right)

Decisions on the arrangement of running Decisions on the arrangement of running

type involve the consideration of point type involve the consideration of point
size, column width and alignment. It is the size, column width and alignment. It is the
relationship of these three interdependent relationship of these three interdependent
factors that ultimately determines the factors that ultimately determines the
appearance of printed text. Type may be appearance of printed text. Type may be
set flush or range left, centered, flush or set flush or range left, centered, flush or
arranged right or justified. Random is arranged right or justified. Random is
another form of alignment. Each form has another form of alignment. Each form has
characteristic qualities. characteristic qualities.
Alignment

random Decisions on the arrangement of running

type involve the consideration of
point size, column width and alignment.

It is the relationship of these three interdependent factors that

ultimately
determines the
appearance of
printed text. t,
lef i i ed.
f
e t
Ra n us

g
es.

an
do r i

j
it
or al

or
m Ty
is h qu

ht
pe m u s c
an ay be set fl r ti

ig
ot d i s
he cen n ge t er
rf tered, fl ush or a rra a c
or r
m cha
of a a s
lig n h
ment. Each form
Hyphenation and Justification
Justification OFF
With and Without Hyphenation

hyphenation OFF
Line spacing, or leading, like wordspacing and
letterspacing can be used to improve readability. You
selection of typeface, size, line length, and copy will all
affect the amount of linespacing. With so many factors
involved, you see why proper linespacing is more a
matter of visual judgement than mathematics.

hyphenation On
Line spacing, or leading, like wordspacing and letter-
spacing can be used to improve readability. You selec-
tion of typeface, size, line length, and copy will all affect
the amount of linespacing. With so many factors in-
volved, you see why proper linespacing is more a mat-
ter of visual judgement than mathematics.

InDesign:
open Type and Tables panel > Paragraph panel >
Pull upper right corner drop down to highlight text
Justification > adjust middle number
Hyphenation and Justification
Justification ON
With and Without Hyphenation

hyphenation OFF
Line spacing, or leading, like wordspacing and
letterspacing can be used to improve readability. You
selection of typeface, size, line length, and copy will
all affect the amount of linespacing. With so many
factors involved, you see why proper linespacing is
more a matter of visual judgement than mathematics.

hyphenation On
Line spacing, or leading, like wordspacing and letter-
spacing can be used to improve readability. You selection
of typeface, size, line length, and copy will all affect the
amount of linespacing. With so many factors involved,
you see why proper linespacing is more a matter of vi-
sual judgement than mathematics.

InDesign:
open Type and Tables panel > Paragraph panel >
Pull upper right corner drop down to highlight text
Justification > adjust middle number
Screen Fonts

Web Fonts
Arial Arial
Verdana Verdana
Georgia Georgia

Fedra Serif Meta Serif

Adelle Museo Slab
Chapararal Tisa
Word Spacing

Tryreadingalineoftextwithoutspacingtoseehowimportantitis
Word Spacing

no wordspacing tight word spacing

Theamountofspacebetweenwords The amount of space between words

iscalledwordspacing,naturally.The is called word spacing, naturally.
wordspacingshouldnotbesotightthat The word spacing should not be so tight
thewordsstarttorunintoeachother, that the words start to run into each
andnotsoopenthatyoureyehastrouble other, and not so open that your eye
readinggroupsofwordsbecauseitis has trouble reading groups of words
beinginterruptedbylargewhiteblocks because it is being interrupted by large
ofspace. white blocks of space.

normal wordspacing open wordspacing

The amount of space between words The amount of space between words
is called word spacing, naturally. The is called word spacing, naturally.
word spacing should not be so tight The word spacing should not be
that the words start to run into each so tight that the words start to run
other, and not so open that your eye into each other, and not so open
has trouble reading groups of words that your eye has trouble reading
because it is being interrupted by groups of words because it is being
large white blocks of space. interrupted by large white blocks
of space.
Demo
WORD SPACING
Il id molorec eaquate mpedici llaccul loreperum eturiae volorio estiam si aperspe
ruptur, tes magnam unt quae vendamu scipsam voluptam, qui nihicipsa delecabor
demo word as ius andanihit, que vende ma none molest arit acius, nonsequi sint, to testrum
spacing im quo odite odignati omnis essitibus utenim serectatem illabore verum quos amus
option
mos utatur re serroratis eos et accum, que sit, ad mossi sae nime apis simporum
command eosamus quianduci aut et esequia epudita accus dendanis sum seque estem il
backslash exceprempore rendio.
option
command Et earchillit, siti accus se experum rest, aliberem ium ideles adit quam, sitiaessunt
delete
auta quam, saes apidi nullore ssimpos ped quossin ctatect otaturem autatur
option adiaectur? Apietur maximus apition seratur simus illacerum es secte sequaspernam
command
+shift
intem et aut od exped utendae sinullacid quam, omnimint, odi cones duciam que
(5x) resequi con rem fugit omnia quatemo lesseque sinveritae dolorro runtur?
plus
delete or
blacksplash Evelicipsam faciento di raturem que iniae sit lique none volupta spidit provid
quoditiam arunt, consenias molesti mmolo comniet adite prorum non consece
pudionsedit qui blandus, nihici cuptate lacim vel maio te porest eosam autectaeptur
sinctio voluptatus vent. mmolo comniet adite prorum non consece pudionsedit
qui blandus, nihici cuptate lacim velmagnam il magnit quid magnia iumet modis
rectaturest quis a del inci que lacipsus.
Word Spacing None What is the desirable amount of space between words? Too much or
Flush Left / Rag Right too little makes reading difficult. Words placed too close together
Hyphenation ON force the reader to work harder to distinguish one word from an-
other. On the other hand, words placed too far apart create white
spaces that run down the page as “rivers” and disrupt the natural
movement of the eye from left to right. Proper wordspacing not only
wordspacing
improves readability but is more pleasing aesthetically.
highlight text >

(add) Open What is the desirable amount of space between words? Too
Option much or too little makes reading difficult. Words placed too
Command close together force the reader to work harder to distinguish
Backslash
one word from another. On the other hand, words placed
(minus) too far apart create white spaces that run down the page as
Option “rivers” and disrupt the natural movement of the eye from
Command left to right. Proper wordspacing not only improves readabil-
Delete ity but is more pleasing aesthetically.

Normal What is the desirable amount of space between words? Too much
or too little makes reading difficult. Words placed too close to-
gether force the reader to work harder to distinguish one word
from another. On the other hand, words placed too far apart create
white spaces that run down the page as “rivers” and disrupt the
natural movement of the eye from left to right. Proper wordspac-
ing not only improves readability but is more pleasing aestheti-
cally.
Word Spacing Tight What is the desirable amount of space between words? Too much or
Justified Text too little makes reading difficult. Words placed too close together force
Hyphenation ON the reader to work harder to distinguish one word from another. On
the other hand, words placed too far apart create white spaces that
run down the page as “rivers” and disrupt the natural movement of
demo word the eye from left to right. Proper wordspacing not only improves read-
spacing ability but is more pleasing aesthetically.
option
command Too open What is the desirable amount of space between
backslash
words? Too much or too little makes reading difficult.
option Words placed too close together force the reader to
command work harder to distinguish one word from
delete another. On the other hand, words placed
too far apart create white spaces that run down the page
option
as “rivers” and disrupt the natural movement of the eye
command
+shift from left to right. Proper wordspacing not only
(5x) improves readability but is more pleasing aesthetically.
plus
delete or
blacksplash Normal What is the desirable amount of space between words? Too
much or too little makes reading difficult. Words placed too
close together force the reader to work harder to distinguish
one word from another. On the other hand, words placed too
far apart create white spaces that run down the page as “riv-
ers” and disrupt the natural movement of the eye from left to
right. Proper wordspacing not only improves readability but is
more pleasing aesthetically.
Other Tips & Tricks
Tips

set width - width a character occupies EM

along with the sliver of space (to
prevent the characters from touching) EN
each character has a different set
width. Hyphen
horizontal word spacing is measured
in ems

EM = square of the cap of the letter EM dash

M expresses strong grammat- Such a fine and, intelligent
EN = 1/2 EM ical breaks or paragraph eye — what do tsay to call-
EMS and ENS at different point sizes indents. An em dash is ing him Black Beauty....
will be proportional to the size. one em wide

EN dash Monday – Friday

serves primarily to con-
nect numbers (1-10). 6:30 pm – 9:00 pm
An en is half the width of
an em. 1984 – 2012

view enlarged type crime and

type crime game Hyphen It is used to divide words
do not distort chose a different connects linked words and that break at the end of a
font or width that meets your phrases, and they break line, or to connect parts
needs words at the ends of lines. of compound words such
view dumb quotes as go-between, ill-fated
view pseudo italics and run-of-the-mill. The
hyphen is easily found on
the keyboard to the right of
the zero.
demo glyphs, small caps, where to find things / command T

Epero mint dollabo. ET REIUM ILLAM laut endis atur reius ipsametur? Catibus, ut prores
VOLOR RENDIATECTEM QUE INCTE- nonseque la “conse et qui siti dessitios ea consequi
SEQUAE CUM, CORE, QUATUS CONSE- im quate aute consecestem volut aut volupta tiaera-
QUAS DOLOREPRATUR MAGNIT AB IN tia sit aliam imod et veratur, voluptatemod eicim
CONECTE ENIS ACCUSAM CULLANI- aliquam ellum autem. $502.48 vernaturis es ad et
ET IM QUE VOLUPTATUR SUS VENT quundant fuga. Nos et qui volorit, sapedic tenimpo
QUI CONSEQUUNT EVEL INIMPERO storrum ut dolesen tecerro etusci tem is eumendunt.
ET ANDIANTIS INIME ENIS VOLORE Natiunt mag➤ni nonse eatiis moditi consero vo-
NONSE NONSEQUAS ALITIBUSDAM luptaspis non consequodi utem quis raectia cumqui
renitae ptatur sum as ditatec erovit quae ni occullorest erfernatur aut quodi doluptis re que nia
temqui aut landi dolore restrum cus in ex eate ventiustiis aciet eum nihitatios vid que ape est qui
nimus accum aut provitium vidus volorem sed quae qui omnimol ectecest ab ilit quam idig-
verum repeliquunti officitem sam quae non- nienem aliquam, ❏soloria tiunt.
ectotate nihil modicatquas aliqui se exerernam
qui dolorum aliquid mint. El eum utam quia $504.38 endissi maximoles do-
Ureptas dolorepedi ventorro cus et lati- luptatem et quibus ut ab iumque aborem re, sit que
usc iandis repeliquate velluptibus, imus re explit laboreh endelitiatus delecep ercipideles do-
nost, quatquas dolum, experibus eum rernati luptum eum sam que sam vitaese acerupti qui dolla
sinctur alibus re es denis et quate pore magnias idis essed quati repuda porem im
quam quatur, aligent, sitatur sant rerit ad max-
im audae volupta nata nit maior am esequatiam
Tips
single space between sentences
Line spacing, or leading, like wordspacing and letterspacing
can be used to improve readability. You selection of typeface,
size, line length, and copy will all affect the amount of line
spacing. With so many

show/hide hidden characters

CAPITALS NEED EXTRA LETTERSPACE

CAPITALS NEED EXTRA LETTERSPACE

caps need extra letterspace

Capitals Need Extra Letterspace

Capitals Need Extra Letterspace

small caps need extra letterspace
Hanging Punctuation Hanging Punctuation

“Good typography is about

visualizing language through the
arrangement, composition and
choice of type.’’

“Good typography is about

visualizing language through the
arrangement, composition and
choice of type.’’
Smart Quotes & Dumb Quotes

Dumb Quotes

"dumb quotes" doesn’t, it’s,

5'3" a woman’s hat,

can’t, you’d,

Smart or Curly Quotes should’ve, ‘tis,

rock ‘n’ roll,

“curly quotes” should’ve,

 S
Stroking letters

S
SS
Stacking letters

STACKING LETTERS
s S s S

Stacking Letters
t T t T
A a A
a C c C
c K k K
k I i I
N n N
i G g G
n
g
Type Contrast

Black type on a white background is best for readabiltity.

It provides the most contrast and is easiest on the eyes.

Black type on a white background is best for readabiltity.

It provides the most contrast and is easiest on the eyes

Black type on a white background is best for readabiltity.

It provides the most contrast and is easiest on the eyes

Black type on a white background is best for readabiltity.

It provides the most contrast and is easiest on the eyes

reverse type often benefits from additional letterspacing and /or leading
Widows and Orphans

The next unpleasant to it.

business was putting on The next unpleasant
the iron shoes; that too business was putting on
was very hard at first. the iron shoes; that too
My masterwent with me was very hard at first. My
to the smith's forge, to see master went with me to
that I was not hurt or got the smith's forge, to see
any fright. The blacksmith that I was not hurt or got
took my feet in his hand, any fright. The blacksmith
one after the other, and took my feet in his hand,
cut away some of the one after the other, and cut
hoof. away some of the hoof.
Centered Lines / Break For Reading

You are cordially invited

to attend the wedding of
Jane Smith and John Blank
on Thursday December 31, 2014
at The Aurura Inn

This is an aide to readability and

a means of introducing
visual variations to large amounts
of continuous text.
Good Rag / Bad Rag

The designer had a The designer had a number of

number of typographic typographic choices for indicating
line lenght
choices for indicating the beginnings and endings of
and point
size are the beginnings and paragraphs. These are both an aide to
related
endings of paragraphs. readability and a means of introducing
the rag These are both an aide visual variations to large amounts
is the
soft edge to readability and a of continuous text. The first line of a
owhere means of introducing paragraph may be indented — that
the type
breaks visual variations is set off from the margin by a fixed
lines measure. Or it may be outdented.
to large amounts of
continuous text. The
first line of a paragraph
may be indented —
that is set off from
the margin by a fixed
measure. Or it may be
outdented.
Widows and Orphans

The next unpleasant to it.

business was putting on The next unpleasant
the iron shoes; that too business was putting on
was very hard at first. the iron shoes; that too
My masterwent with me was very hard at first. My
to the smith's forge, to see master went with me to
that I was not hurt or got the smith's forge, to see
any fright. The blacksmith that I was not hurt or got
took my feet in his hand, any fright. The blacksmith
one after the other, and took my feet in his hand,
cut away some of the one after the other, and cut
hoof. away some of the hoof.

Widow / at bottom Orphan / at top

Typefaces are clothes for
words and like a finely
tailored suit, its the detail
in their composition that
adds interest.