+ All Categories
Home > Design > Expressive Typography in Web Design

Expressive Typography in Web Design

Date post: 28-Jan-2015
Category:
Upload: zabisco-digital
View: 111 times
Download: 4 times
Share this document with a friend
Description:
 
Popular Tags:
20
user experience agency
Transcript
Page 1: Expressive Typography in Web Design

user experience agency

Page 2: Expressive Typography in Web Design

Design  

Expressive  typography  in  web  design  

Page 3: Expressive Typography in Web Design

Typography  

Page 4: Expressive Typography in Web Design

Typography  

•  TYPOGRAPHY,  is  derived  from  the  Greek  words  for      

                     form                            +          wri)ng      

Page 5: Expressive Typography in Web Design

Typography  

Page 6: Expressive Typography in Web Design

Typography  in  web  design  

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.    

Page 7: Expressive Typography in Web Design

Font  selecCon  

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.    

Page 8: Expressive Typography in Web Design

Typography  

Page 9: Expressive Typography in Web Design

Typography  in  modern  web  

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.    

Page 10: Expressive Typography in Web Design

Now  be  expressive  

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.    

Page 11: Expressive Typography in Web Design

Typography  

Page 12: Expressive Typography in Web Design

Type  emoCon  and  tone  

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.    

Page 13: Expressive Typography in Web Design

Typography  

Page 14: Expressive Typography in Web Design

Design  

Useful  type  resources  for  web  

Page 15: Expressive Typography in Web Design

The  Expressive  Web  

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.  

Page 16: Expressive Typography in Web Design

Fuzzco  

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.  

Page 17: Expressive Typography in Web Design

Warchild  

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.  

Page 18: Expressive Typography in Web Design

Google  web  fonts  

google.com/webfonts  •  a  free  resource  from  Google,  

containing  100s  of  open  source  fonts  that  happen  to  be  web  opCmised  and  ready  to  use.  

Page 19: Expressive Typography in Web Design

@font-­‐face  

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.  

Page 20: Expressive Typography in Web Design

Marcus Marritt [email protected] 0203 1511 330

Thanks


Recommended