Expressive Typography in Web Design

1,450
-1

Published on

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,450
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Expressive Typography in Web Design

  1. 1. user experience agency
  2. 2. Design  Expressive  typography  in  web  design  
  3. 3. Typography  
  4. 4. •  TYPOGRAPHY,  is  derived  from  the  Greek  words  for                            form       +                                wri)ng      Typography  
  5. 5. Typography  
  6. 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. 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. 8. Typography  
  9. 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. 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. 11. Typography  
  12. 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. 13. Typography  
  14. 14. Design  Useful  type  resources  for  web  
  15. 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. 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. 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. 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. 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. 20. ThanksMarcus Marrittmarcus@zabisco.com0203 1511 330
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×