1. user experience agency

2. Design
Expressive
typography
in
web
design

3. Typography

4. • TYPOGRAPHY,
is
derived
from
the
Greek
words
for
form
+
wri)ng
Typography

5. Typography

6. ExecuCng
typography
well
in
web
design
can
be
a
great
challenge.
You
need;
• a
certain
level
of
sensibility
• a
lightness
of
touch
in
execuCon
• a
understanding
to
avoid
any
overtly
'heavyness'
in
your
use
of
type.
Typography
in
web
design

7. Your
font
selecCon
must
have
relevance
to
your
messaging,
to
some
degree,
and
be
executed
in
layout
so
users
don’t
feel
any
detachment
between;
• type
• overall
design
• user
experience.
Font
selecCon

8. Typography

9. Typography
as
a
design
element
has
great
emphasis
and
momentum
within
the
web.
As
the
web
itself
evolves,
coders
conCnue
to
break
new
boundaries,
allowing
type
to
be
used
in;
• new
• interesCng
• interacCve
ways.
Typography
in
modern
web

10. Web
designers
have
the
ability
to
use
type
how
they
want
within
the
overall
site
design.
Whether
the
design
dictates
that
type
is
very
much
the
lead
element,
or
a
subtle
device,
the
ability
to
be
as
expressive
as
you
wish
is
there.
Now
be
expressive

11. Typography

12. Whoever
is
performing
typography;
• graphic
designers
• graffiC
arCsts
• copywriters
• art
directors
• comic
book
arCsts
• compositors
or
typeseMers
Whatever
medium
used
(film,
television
and
online),
type
can
be
used
in
a
great
way
to
add
emoCon
and
tone
to
communicaCon.
Type
emoCon
and
tone

13. Typography

14. Design
Useful
type
resources
for
web

15. beta.theexpressiveweb.com
• a
resource
and
showcase
for
some
of
the
newest,
and
most
expressive
features
across
the
web
today
-­‐
of
which,
type,
is
just
one
of
the
areas
explored
• currently
at
a
beta
release,
keep
checking
back
here
as
I
see
this
already
being
a
great
insight
tool.
The
Expressive
Web

16. fuzzco.com
• a
great
sense
of
the
culture
across
the
agency,
what
they
stand
for,
working
as
a
showcase
for
their
own
design
talents
• a
example
of
type
use
that
creates
a
strong
overall
site
tone,
without
being
overtly
dominant
and
masking
the
messaging,
the
selecCon
of
type
carries
the
messaging
through
in
a
stronger
way.
Fuzzco

17. warchild.org.uk
• overall
tone
of
the
design
(type
incl.)
carries
the
site
in
a
non-­‐patronising
way,
at
the
same
Cme
not
dumbing
down
the
message
• colour
works
well
with
type,
together
give
a
real
sense
of
the
danger
and
seriousness
of
whats
happening,
while
designed
in
a
engaging
way
• just
because
you
have
a
very
real
humanitarian
situaCon
doesnt
mean
you
have
to
present
the
messaging
in
a
straight
way.
Warchild

18. google.com/webfonts
• a
free
resource
from
Google,
containing
100s
of
open
source
fonts
that
happen
to
be
web
opCmised
and
ready
to
use.
Google
web
fonts

19. font-­‐face.com
• keep
your
eyes
peeled
for
what
new
twist
to
the
service
@font-­‐face
come
up
with
in
response
to
Google
web
fonts.
@font-­‐face

20. Thanks
Marcus Marritt
marcus@zabisco.com
0203 1511 330