Typography is ia / IA summit 2013

Boon Yew Chew
IA Summit 2013

Typography is
information architecture
How a little understanding goes a long way

@boonych

Saturday, 6 April 13

Hi, I’m Boon.

@boonych


My
name
is
Boon.
I’m
an
informa1on
architect
/
interac1on
designer
at
SapientNitro
in
London.
Some
of
you
may
have
recognized
me

from
my
sketchnotes,
and
this
is
a
sample
of
a
piece
of
work
I
did
for
a
book
called
the
sketchnote
handbook,
which
we’re
giving
away
at

this
conference
to
people
who
will
be
uploading
their
photos
to
the
IA
Summit
sketchnotes
Flickr
group.
If
you
want
to
know
more
about

that,
come
ﬁnd
me
aGer
the
talk.

#TypographyIsIA


But
today’s
talk
is
on
typography,
not
sketchnotes.
Oh
and
if
you
want
to
tweet
about
stuﬀ
-‐
the
hashtag
is
#typographyisia.

Why typography?

http://www.ﬂickr.com/photos/atomicshed/5600284969 @boonych


So,
The
reason
I
wanted
to
share
this
is
because
I’m
really
fascinated
by
the
topic,
and
it’s
something
we
don’t
really
discuss
in
IA
circles.
And
the
more
I
researched
about
it
and
spent
1me
at
typography
events,
the
more
I
realised
this
was
really
relevant
to
our
work.

I
started
thinking
of
typography
as
informa1on
architecture,
and
I
have
a
few
reasons
why.

Information
building blocks

http://www.ﬂickr.com/photos/44124367235@N01/3698270/ @boonych


Firstly,
typefaces
provide
the
building
blocks
for
making
informa1on
visible.
Without
it,
it
would
be
really
hard
to
have
things
like
road

signs,
websites,
books,
posters
so
widely
available.
We
depend
on
it
to
do
a
lot
of
things
for
us.

An older form of IA

http://www.ﬂickr.com/photos/calsidyrose/7043554105 @boonych


Secondly,
typography
has
been
around
for
hundreds
of
years,
and
before
the
age
of
the
computer,
many
people
who
prac1ced

typography
were
focused
on
things
like
communica1ng
informa1on,
dealing
with
complexity,
and
facilita1ng
understanding.
In
many

ways
it
s1ll
does
today.
That’s
also
what
we
aim
to
achieve
as
informa1on
architects.

Communication

http://www.ﬂickr.com/photos/30555049@N07/8088011895 @boonych


Finally,
typography
deals
with
the
way
people
communicate
with
one
another.
And
although
we
can
all
understand
content
regardless
of

what
font
is
being
used,
we
also
want
to
be
able
to
communicate
ourselves
appropriately
as
people
do
and
typography
allows
us
to
do

that.

ey @boonych

My
goal
for
this
talk
is
to
explain
how
beOer
understanding
of
typography
helps
our
work
in
informa1on
architecture.

But
I
don’t
want
to
focus
on
the
actual
doing
of
typography,
because
I
think
there’s
a
lot
of
stuﬀ
out
there
that
just
focuses
on
the
how-‐
tos
but
doesn’t
explain
the
WHY.
And
I
think
the
why
is
important.

Systems Perception

ey
Patterns Relationships

@boonych


So,
I’m
going
to
frame
typography
in
four
diﬀerent
ways
-‐
systems,
percep1on,
paOerns
and
rela1onships
-‐-‐
which
will
help
you

understand
typography
a
bit
beOer
as
a
craG.

1439

@boonych


So
in
1439,
Johannes
Gutenberg
revolu1onised
the
publishing
industry
by
inven1ng
a
system
that
could
mass-‐produce
printed
material

prac1cally
and
economically.


The
system
he
devised
involved
two
parts:
the
ﬁrst
part
was
a
manufacturing
process,
which
was
a
unique
way
to
producing
individual

pieces
of
leOers,
called
type.

http://www.flickr.com/photos/wilhei/109404349/ @boonych


and
the
second
part
was
a
methodology
-‐-‐
the
specific
way
you
went
about
assembling
type
together
to
form
words,
sentences,

paragraphs
and
so
on.
Today’s
system
isn’t
any
different
-‐
all
these
individual
pieces
just
happen
to
be
in
digital
form
instead
of
metal
type.


The
professionals
who
specialised
in
type
se[ng
at
the
1me
were
called
compositors.
In
a
sense,
this
is
what
we
do
as
IAs
-‐
like

compositors,
we
use
our
understanding
of
systems
as
well
as
the
human
condi1on
to
organise
informa1on
in
an
appropriate
way.

By
the
way
I’ll
be
using
the
word
“typefaces”
a
lot
-‐
that’s
just
another
word
for
“font”
but
is
more
technically
correct
because
“typeface”

refers
to
the
way
the
thing
“looks”.

@boonych


Typography
involves
many
people
with
different
skills.
Compositors
had
to
understand
the
work
done
by
other
people
such
as
type

designers,
type
manufacturers,
printers,
and
paper
manufacturers
so
that
the
printed
material
came
out
just
right.
Today,
it’s
actually

not
that
different
-‐
type
designers,
visual
designers,
developers,
informa1on
architects
-‐
everyone
influences
how
typography
is
applied

and
affects
the
user
experience.
It’s
not
the
job
of
one
person.

Typography is the
result of many
systems combined.

@boonych


This
is
what
I
mean
by
thinking
of
typography
in
terms
of
systems.
It’s
this
way
of
ge[ng
away
from
just
the
visual
representa1on
of
the

typeface.

@boonych


And
today,
this
is
even
more
important,
because
there
are
more
mediums
and
channels
in
which
type
is
used
to
communicate

informa1on.
It’s
important
is
because
you
want
the
typeface
to
look
the
way
it’s
intended
to
look,
and
if
it’s
not
doing
that,
then
that’s
a

problem
and
you
need
to
know
where
to
go
to
ﬁx
it.

Perception

Ralf Herrmann, opentype.info (image used with permission) @boonych


A
lot
of
this
obsession
in
typography
has
to
do
with
percep1on
-‐
if
the
user
has
perceived
an
L
to
look
like
the
leOer
I,
then
the

design
has
failed.
And
similarly,
if
the
reader
perceives
a
word
or
sentence
to
mean
the
wrong
thing,
the
design
has
failed.
These

are
basic
problems
typography
aims
to
avoid.

http://circusredickuless.com/king-james-bible-comic-sans-edition.html @boonych


But
percep1on
goes
beyond
what
we
see
and
read.
Percep1on
is
also
about
how
we
feel,
and
that
some1mes
inﬂuences

what
we
understand
when
we
read.
And
so
typography
becomes
a
tool
to
design
for
what
readers
will
perceive.
And
yes

there
actually
an
en1re
bible
set
in
comic
sans,
it
was
apparently
created
for
people
who
have
trouble
understanding
the

Bible.

http://www.ﬂickr.com/photos/nicksherman/8257578912/


Human
percep1on
is
complex
because
there
are
so
many
factors
inﬂuencing
it.
Some1mes
a
designer
will
place
more

emphasis
on
the
ability
to
create
harmonious
word
shapes
to
support
reading.

http://www.ﬂickr.com/photos/11926838@N03/4732769347/


Some1mes
the
emphasis
is
on
legibility,
which
is
appropriate
for
condi1ons
such
as
highway
signs
where
word
recogni1on

is
crucial.

Transport typeface
Jock Kinnear & Margaret Calvert

Ralf Herrmann, opentype.info (image used with permission)


By
the
way,
the
typeface
you
see
here
is
the
Transport
typeface,
which
is
the
oﬃcial
typeface
used
across
all
highway
signs

across
the
UK.
This
is
a
list
of
typefaces
used
by
diﬀerent
countries,
and
Transport
is
the
3rd
one
on
the
list.
I’ll
be
talking
about
this
a
bit
later
so
keep
that
in
mind.
1.
USA
2.
USA
3.
UK
4.
Sweden
5.
Spain
/
Italy
6.
Norway
7.
Germany
8.
Netherlands


Some1mes
the
differences
are
so
subtle,
it’s
hard
to
know
if
they’ll
make
any
difference
to
the
user
experience,
so
it’s

worth
understanding
why
certain
typefaces
have
been
designed
a
certain
way.
Thankfully,
there
are
quite
a
lot
of
resources

out
there
and
healthy
discussion
around
so
you
should
definitely
take
advantage
of
that.

Pattern matching

http://www.flickr.com/photos/29461743@N00/5327827657/
http://www.flickr.com/photos/31252318@N08/5152625601 @boonych


So
the
idea
of
percep1on
is
really
about
designing
for
basic
needs,
and
once
we’ve
got
that
covered,
we
want
to
make
it
effec1ve
and

efficient
for
users
to
find
and
understand
informa1on,
which
usually
involves
reading
or
scanning.
You
can
also
think
of
reading
and

scanning
as
a
paOern
matching
ac1vity,
but
you
can
never
be
quite
sure
what
exactly
the
reader
is
expec1ng
to
see
-‐
it
could
be
a
word,
a

list
of
numbers,
the
crossbar
of
the
leOer
t
-‐
no
one
really
knows.
But
the
point
is
this
-‐-‐
it’s
good
to
think
of
typography
as
a
way
of

helping
users
iden1fy
and
recognize
paOerns.

Saccades

@boonych


This
is
a
paOern
of
how
reading
takes
place
across
a
long
form
ar1cle.
It
involves
a
series
of
brief
movements
known
as
saccades,
and
it

happens
very
very
quickly
-‐
at
about
1/5ths
of
a
second.
The
eye
doesn’t
actually
see
everything
in
focus
-‐-‐
as
it
moves,
the
focal
point

jumps
from
part
of
a
word
to
part
of
another
word,
piecing
together
those
parts
like
a
jigsaw
puzzle
to
visualise
the
full
words
and

sentences.

1. words and sentences
2. content types
3. information organisation

@boonych


When
interfaces
get
more
complex,
it
becomes
harder
to
scan
informa1on
-‐-‐
because
the
eye
now
needs
to
iden1fy
at
least
three
types

of
paOerns
-‐-‐
words
and
sentences
-‐-‐
diﬀerent
content
types
-‐-‐
and
how
informa1on
is
organized
on
a
page.
Ideally,
you
want
this
to
be

as
natural
and
implicit
as
possible,
so
the
goal
of
typography
is
to
make
those
diﬀerent
paOerns
easier
to
iden1fy
without
having
to
use

explicit
means
of
instruc1on.

hey
Chapter 4
When he was nearly thirteen, my brother Jem got his arm badly
broken at the elbow. When it healed, and Jem's fears of never being able
to play football were assuaged, he was seldom self-conscious about his
injury. His left arm was somewhat shorter than his right; when he stood or

People moved slowly then. They ambled walked, the back of his hand was at right angles to his body, his thumb
parallel to his thigh. He couldn't have cared less, so long as he could pass
and punt.

across the square, shuffled in and out of the
When enough years had gone by to enable us to look back on them,
we sometimes discussed the events leading to his accident. I maintain
that the Ewells started it all, but Jem, who was four years my senior, said it
started long before that. He said it began the summer Dill came to us,

stores around it, took their time about
when Dill first gave us the idea of making Boo Radley come out.
I said if be wanted to take a broad view of the thing, it really began with
Andrew Jackson. If General Jackson hadn't run the Creeks up the creek,
Simon Finch would never have paddled up the Alabama, and where would

everything. A day was twenty-four hours we be if he hadn't? We were far too old to settle an argument with a fist-
fight, so we consulted Atticus. Our father said we were both right.
Being Southerners, it was a source of shame to some members of the

long but seemed longer. There was no hurry,
family that we had no recorded ancestors on either side of the Battle of
Hastings. All we had was Simon Finch, a fur-trapping apothecary from
Cornwall whose piety was exceeded only by his stinginess. In England,
Simon was irritated by the persecution of those who called themselves

for there was nowhere to go, nothing to buy Methodists at the hands of their more liberal brethren, and as Simon
called himself a Methodist, he worked his way across the Atlantic to
Philadelphia, thence to Jamaica, thence to Mobile, and up the Saint

and no money to buy it with, nothing to see
Stephens. Mindful of John Wesley's strictures on the use of many words
in buying and selling, Simon made a pile practicing medicine, but in this
pursuit he was unhappy lest he be tempted into doing what he knew was
not for the glory of God, as the putting on of gold and costly apparel. So

outside the boundaries of Maycomb County.
Simon, having forgotten his teacher's dictum on the possession of human
chattels, bought three slaves and with their aid established a homestead
on the banks of the Alabama River some forty miles above Saint
Stephens. He returned to Saint Stephens only once, to find a wife, and

But it was a time of vague optimism for with her established a line that ran high to daughters. Simon lived to an
impressive age and died rich.
It was customary for the men in the family to remain on Simon's

some of the people: Maycomb County had
homestead, Finch's Landing, and make their living from cotton. The place
was self-sufficient: modest in comparison with the empires around it, the
Landing nevertheless produced everything required to sustain life except
ice, wheat flour, and articles of clothing, supplied by river-boats from

recently been told that it had nothing to fear Mobile.
Simon would have regarded with impotent fury the disturbance between
the North and the South, as it left his descendants stripped of everything

but fear itself.
but their land, yet the tradition of living on the land remained unbroken
until well into the twentieth century, when my father, Atticus Finch, went to
Montgomery to read law, 8 9 and his younger brother went to Boston to
study medicine. Their sister Alexandra was the Finch who remained at the
Landing: she married a taciturn man who spent most of his time lying in a
hammock by the river wondering if his trot-lines were full.
When my father was admitted to the bar, he returned to Maycomb
and began his practice. Mayeomb, some twenty miles east of Finch's

We lived on the main residential street in Landing, was the county seat of Maycomb County. Atticus's office in the
courthouse contained little more than a hat rack, a spittoon, a
checkerboard and an unsullied Code of Alabama. His first two clients

town—Atticus, Jem and I, plus Calpurnia our
were the last two persons hanged in the Maycomb County jail. Atticus had
urged them to accept the state's generosity in allowing them to plead
Guilty to second-degree murder and escape with their lives, but they were
Haverfords, in Maycomb County a name synonymous with jackass. The

cook. Jem and I found our father Haverfords had dispatched Maycomb's leading blacksmith in a
misunderstanding arising from the alleged wrongful detention of a mare,
were imprudent enough to do it in the presence of three witnesses, and

satisfactory: he played with us, read to us,
insisted that the-son-of-a-bitch-had-itcoming-to-him was a good enough
defense for anybody. They persisted in pleading Not Guilty to first-degree
murder, so there was nothing much Atticus could do for his clients except
be present at their departure, an occasion that was probably the

and treated us with courteous detachment.
beginning of my father's profound distaste for the practice of criminal law.
During his first five years in Maycomb, Atticus practiced economy more
than anything; for several years thereafter he invested his earnings in his
brother's education. John Hale Finch was ten years younger than my
father, and chose to study medicine at a time when cotton was not worth

They ambled
growing; but after getting Uncle Jack started, Atticus derived areasonable
income from the law. He liked Maycomb, he was Maycomb County born

Calpurnia was something else again. She
and bred; he knew his people, they knew him, and because of Simon
Finch's industry, Atticus was related by blood or marriage to nearly every
family in the town.
Maycomb was an old town, but it was a tired old town when I first

was all angles and bones; she was knew it. In rainy weather the streets turned to red slop; grass grew on the
sidewalks, the courthouse sagged in the square. Somehow, it was hotter
then: a black dog suffered on a summer's day; bony mules hitched to

nearsighted; she squinted; her hand was
Hoover carts flicked flies in the sweltering shade of the live oaks on the
square. Men's stiff collars wilted by nine in the morning. Ladies bathed

across the
before noon, after their three-o'clock naps, and by nightfall were like soft
teacakes with frostings of sweat and sweet talcum.

wide as a bed slat and twice as hard. She
People moved slowly then. They ambled across the square, shuffled in
and out of the stores around it, took their time about everything. A day
was twenty-four hours long but seemed longer. There was no hurry, for
there was nowhere to go, nothing to buy and no money to buy it with,

was always ordering me out of the kitchen, nothing to see outside the boundaries of Maycomb County. But it was a
time of vague optimism for some of the people: Maycomb County had
recently been told that it had nothing to fear but fear itself.

asking me why I couldn’t behave as well as
We lived on the main residential street in town-Atticus, Jem and I, plus
Ca1purnia our cook. Jem and I found our father satisfactory: he played
with us, read to us, and treated us with courteous detachment.

square
Calpurnia was something else again. She was all angles and bones;

Jem when she knew he was older, and she was nearsighted; she squinted; her hand was wide as a bed slat and
twice as hard. She was always ordering me out of the kitchen, asking me
why I couldn't behave as well as Jem when she knew he was older, and

calling me home when I wasn’t ready to
calling me home when I wasn't ready to come. Our battles were epic and
one-sided. Calpurnia always won, mainly because Atticus always took her
side. She had been with us ever since Jem was born, and I had felt her
tyrannical presence as long as I could remember.

come. Our battles were epic and one-sided.
Calpurnia always won, mainly because
Atticus always took her side.

@boonych

The
way
typography
aids
the
paOern
matching
process
is
by
establishing
healthy
rela1onships
between
all
these
elements
in
ques1on.

A
good
rule
of
thumb
is
to
look
at
the
nega1ve
space,
that
is
the
spaces
that
appear
around
shapes
and
elements,
and
make
sure
that
there’s
balance
in

everything
-‐-‐
so
things
like
leOers
don’t
get
squished
together,
words
can
be
easily
read,
and
that
the
content
looks
organized
as
a
whole.

http://www.flickr.com/photos/grahamhibbert/7623343090
http://www.flickr.com/photos/jlt/2889726705/
http://www.flickr.com/photos/zokuga/5818734490 @boonych
http://www.flickr.com/photos/mshades/4287009210
Ul1mately,
all
we
want
is
to
be
able
to
avoid
establishing
poor
rela1onships
in
our
content.
Things
like
misused
fonts
make
things
harder
to
read,
and

some1mes
we
can
create
uninten1onal
paOerns
that
hinder
the
reading
experience.
All
this
stuff
is
what
I
call
typographic
hygiene,
and
you
prac1ce
that

so
that
the
intent
of
your
design
is
clear,
and
not
ge[ng
in
the
way
of
the
user.

@boonych

There
are
many
good
guidelines
and
rules
on
how
these
rela1onships
should
be
established,
such
as
how
far
apart
characters
should
be
and
how
much

spacing
we
should
put
between
sentences,
but
blindly
following
these
things
without
an
understanding
of
the
fundamental
concepts
is
a
bit
like
taking
a

standardized
test
to
qualify
as
a
doctor.

Systems Perception

ey
Patterns Relationships

@boonych


The
guidelines
and
rules
make
a
lot
of
sense
when
you
apply
them
through
these
four
perspec1ves.
They’re
not
complete,
but
they’re

good
ways
to
ground
the
prac1ce
so
that
we
can
produce
beOer
informa1on
architecture.

Case studies

@boonych


Now
that
we’ve
got
the
basics
aside,
there
are
some
case
studies
I
want
to
share
with
you
to
bring
this
more
to
life.

Verdana - a typeface
for digital displays

http://www.ﬂickr.com/photos/maddi/173564896/ @boonych


The
ﬁrst
case
study
I
want
to
share
is
about
typefaces
for
the
screen.
Our
work
tends
to
involve
screens
a
lot,
and
the
story
of
Verdana
is

interes1ng
because
typographers
didn’t
start
out
designing
typefaces
for
the
screen.
Verdana
is
one
excep1on
-‐
it
was
designed
in
1996

by
MaOhew
Carter
for
MicrosoG,
and
the
way
he
went
about
it
is
very
interes1ng.

http://www.domusweb.it/en/design/states-of-design-06-in-your-face-/ @boonych


One
of
the
challenges
with
using
type
on
screens
is
that
everything
has
to
be
made
up
of
1ny
square
pixels,
and
if
the
pixels
aren’t
small

enough,
the
characters
end
up
looking
like
lego
blocks
rather
than
nicely
drawn
characters.
In
order
to
take
advantage
of
the
pixels,
what

Carter
did
was
to
start
with
the
pixels
ﬁrst
before
designing
the
glyphs
-‐-‐
these
intricate
lines
that
deﬁne
the
characters
of
the
typeface.

http://karlstolley.com/dissertation/chapter4/systemfonts.htm
http://www.yevol.com/en/windows/Lesson09.htm @boonych
http://www.microsoft.com/typography/web/fonts/verdana/default.htm

This
made
Verdana
a
suitable
font
for
displaying
content
in
a
small
size
that
didn’t
feel
uncomfortable
to
read.

Verdana People moved slowly then. 18 pt

They ambled across the square,
24 pt
shuffled in and out...

A day was twenty-four
hours long but seemed 36 pt

longer.

Georgia People moved slowly then. 18 pt
They ambled across the square, shuffled in
24 pt
and out...

A day was twenty-four hours 36 pt
long but seemed longer.

@boonych


This
was
great
when
in
the
earlier
days
of
the
web
when
you
had
a
monitors
with
a
resolu1on
of
600
x
800
pixels,
but
it’s
not
as
elegant

when
you
use
it
on
higher
ﬁdelity
screens
or
at
larger
sizes.
Because
of
technological
improvements
in
screens,
there’s
a
lot
more
you
can

do
with
typography
now.

@boonych


Also,
since
2009,
more
typefaces
has
become
available
for
use
due
to
beOer
browser
support
and
font
services
like
Typekit
and
Fontdeck.

This
is
generally
a
good
thing,
because
it
allows
us
more
ways
to
express
informa1on
on
the
web.

@boonych


There’s
this
growing
trend
of
using
web
fonts
to
create
sites
that
are
really
bold
and
drama1c.
This
is
the
New
Republic,
an
online-‐only

magazine
that
launched
recently
last
year.
This
aesthe1c
is
partly
necessary
because
the
ﬁne
detail
of
many
typefaces
will
not
render
as

well
at
small
sizes
due
to
pixels.
It’s
something
we
have
to
live
with
for
now,
but
it
means
that
we
have
to
make
trade-‐oﬀs
about
what
typefaces
to
use
for
crea1ng
an

impression
versus
the
ones
we
use
for
body
text
and
so
on.

@boonych


However,
some
sites
have
taken
a
step
back
to
ques1on
the
role
of
big
headlines
and
web
typography.
This
is
the
new
“A
List
Apart”
site,

which
was
redesigned
a
few
months
ago.
The
bold
headline,
which
is
created
with
this
drama1c
typeface,
is
merely
a
way
to
introduce

the
page.
The
focus
here
is
clearly
on
the
content
-‐-‐
which
has
also
been
given
typographic
considera1on.
And
this
is
what
it
looks
like

when
you
scroll
all
the
way
up
to
the
top
-‐
the
eﬀect
is
inten1onal.

In
fact,
the
focus
on
content
is
so
much
that
all
of
the
content
that

used
to
be
in
the
sidebar
has
been
pushed
down.

New Transport typeface
Henrik Kubel & Margaret Calvert

@boonych


Some
typefaces
have
been
found
to
work
very
well
on
screens,
and
some
sites
are
star1ng
to
use
this
extensively
as
their
primary

typeface.
This
is
gov.uk,
the
oﬃcial
government
portal
for
the
United
Kingdom.
It
uses
the
New
Transport
typeface
across
all
of
their

pages
-‐-‐

Remember
the
one
I
showed
you
earlier?
New
Transport
is
an
updated
version
of
this
typeface.

And
because
Transport
had
tested
extensively
for
legibility
and
accessibility
at
high
speeds
and
low
light
situa1ons,
and
many
of
those

beneﬁts
are
s1ll
present
in
the
new
typeface.
It
works
really
well
as
a
standard
font
for
headlines,
interac1ve
copy,
small
text,
and
so
on.


Another
area
that’s
seen
provided
some
interes1ng
opportuni1es
for
typography
use
with
new
soGware
applica1ons,
some
of
which

have
been
used
as
opportuni1es
to
break
away
from
legacy
applica1ons
that
have
been
around
for
decades.
One
example
is
Adobe

Lightroom,
which
was
designed
from
the
ground
up
as
a
focused
applica1on
for
photographers.

If
you
compare
Lightroom
to
its
symbolic
parent,
Adobe
Photoshop,
you
can
see
the
subtle
but
eﬀec1ve
diﬀerence
typography
has
made

to
denote
interface
structure,
modes,
hierarchy,
order,
state
and
so
on
-‐
all
into
one
compact
space.


In
a
similar
vein,
mobile
applica1ons
have
also
provided
similar
opportuni1es
for
designers
to
start
afresh.
Both
of
these
examples
here,

the
iPad
app
and
the
mobile
site
of
the
Guardian,
one
of
UK’s
leading
news
publica1ons,
has
been
designed
to
support
mobile-‐centric

ac1vi1es
of
intermiOent
content
snacking
and
in1mate
reading.
The
execu1on
you
see
here
shows
how
strong
typography
can
both

make
the
content
browsable
and
comfortably
readable
at
the
same
1me,
without
the
interface
ge[ng
in
the
way.

“ Treat text as UI”
Cameron Moll
Designer, author, and speaker


Cameron
Moll,
author
of
CSS
Mastery
and
Mobile
Web
Design,
has
been
credited
with
the
saying
“treat
text
as
UI”

as
one
of
the
aOributes
of
great
designers.
We’re
so
used
to
crea1ng
our
wireframes
with
out
of
the
box
components,
that
we
almost

never
explore
the
possibility
of
doing
more
with
text
other
than
labels
and
represen1ng
content.

2008 2013

@boonych


As
a
result
of
this
shiG
of
thinking,
a
lot
of
the
chrome
began
to
fade
away,
in
order
for
the
content
itself
to
do
the
work
of
the
interface

and
interac1on.

2008

2013


Sites
like
kayak.com
have
improved
their
informa1on
architecture
over
1me
by
removing
a
lot
of
noise
and
allowing
the
typeface
and

content
itself
to
do
the
heavy
liGing.
So
rather
than
thinking
about
interac1on
as
a
system
of
components,
widgets
and
panels
that

contain
the
content,
the
content
itself
and
its
rela1onship
to
the
things
around
it
is
what
creates
the
interface.
Skip
all
of
the
technical

scaﬀolding
to
meet
the
user’s
expecta1ons.

Typography is ia / IA summit 2013

Typography is ia / IA summit 2013

Recommandé

Recommandé

Contenu connexe

Plus de Boon Yew Chew

Plus de Boon Yew Chew (15)

Dernier

Dernier (20)

Typography is ia / IA summit 2013