Boon Yew Chew                                                                    IA Summit 2013                       Typo...
Hi, I’m Boon.                                                                                                             ...
#TypographyIsIASaturday, 6 April 13But	  today’s	  talk	  is	  on	  typography,	  not	  sketchnotes.Oh	  and	  if	  you	  ...
Why typography?                                            http://www.flickr.com/photos/atomicshed/5600284969              ...
Information                       building blocks                                          http://www.flickr.com/photos/441...
An older form of IA                                     http://www.flickr.com/photos/calsidyrose/7043554105                ...
Communication                                         http://www.flickr.com/photos/30555049@N07/8088011895                 ...
Saturday, 6 April 13                                                                                                      ...
Systems                                                                                                    Perception	    ...
1439                                                                                                                      ...
Saturday, 6 April 13The	  system	  he	  devised	  involved	  two	  parts:	  the	  first	  part	  was	  a	  manufacturing	  ...
http://www.flickr.com/photos/wilhei/109404349/                                                                             ...
Saturday, 6 April 13The	  professionals	  who	  specialised	  in	  type	  se[ng	  at	  the	  1me	  were	  called	  composi...
@boonychSaturday, 6 April 13Typography	  involves	  many	  people	  with	  different	  skills.	  Compositors	  had	  to	  u...
Typography is the                        result of many                        systems combined.                          ...
@boonychSaturday, 6 April 13And	  today,	  this	  is	  even	  more	  important,	  because	  there	  are	  more	  mediums	 ...
Perception                                            Ralf Herrmann, opentype.info (image used with permission)           ...
http://circusredickuless.com/king-james-bible-comic-sans-edition.html                                                     ...
http://www.flickr.com/photos/nicksherman/8257578912/Saturday, 6 April 13Human	  percep1on	  is	  complex	  because	  there	...
http://www.flickr.com/photos/11926838@N03/4732769347/Saturday, 6 April 13Some1mes	  the	  emphasis	  is	  on	  legibility,	...
Transport typeface     Jock Kinnear & Margaret Calvert                                      Ralf Herrmann, opentype.info (...
Saturday, 6 April 13Some1mes	  the	  differences	  are	  so	  subtle,	  it’s	  hard	  to	  know	  if	  they’ll	  make	  any...
Pattern matching                                               http://www.flickr.com/photos/29461743@N00/5327827657/       ...
Saccades                                                                                                                  ...
1. words and sentences                        2. content types                        3. information organisation         ...
hey                                                                                           Chapter 4                   ...
hey                                                                                           Chapter 4                   ...
http://www.flickr.com/photos/grahamhibbert/7623343090                                               http://www.flickr.com/ph...
@boonychSaturday, 6 April 13There	  are	  many	  good	  guidelines	  and	  rules	  on	  how	  these	  rela1onships	  shoul...
Systems                                                                                               Perception	         ...
Case studies                                                                                                              ...
Verdana - a typeface                         for digital displays                                             http://www.fl...
http://www.domusweb.it/en/design/states-of-design-06-in-your-face-/                                                       ...
http://karlstolley.com/dissertation/chapter4/systemfonts.htm                                          http://www.yevol.com...
Verdana                                    People moved slowly then.                                                      ...
@boonychSaturday, 6 April 13Also,	  since	  2009,	  more	  typefaces	  has	  become	  available	  for	  use	  due	  to	  b...
@boonychSaturday, 6 April 13There’s	  this	  growing	  trend	  of	  using	  web	  fonts	  to	  create	  sites	  that	  are...
@boonychSaturday, 6 April 13However,	  some	  sites	  have	  taken	  a	  step	  back	  to	  ques1on	  the	  role	  of	  bi...
@boonychSaturday, 6 April 13However,	  some	  sites	  have	  taken	  a	  step	  back	  to	  ques1on	  the	  role	  of	  bi...
New Transport typeface                Henrik Kubel & Margaret Calvert                                                     ...
New Transport typeface                Henrik Kubel & Margaret Calvert                                                     ...
New Transport typeface                Henrik Kubel & Margaret Calvert                                                     ...
Saturday, 6 April 13Another	  area	  that’s	  seen	  provided	  some	  interes1ng	  opportuni1es	  for	  typography	  use	...
Saturday, 6 April 13Another	  area	  that’s	  seen	  provided	  some	  interes1ng	  opportuni1es	  for	  typography	  use	...
Typography is ia / IA summit 2013
Typography is ia / IA summit 2013
Typography is ia / IA summit 2013
Typography is ia / IA summit 2013
Typography is ia / IA summit 2013
Typography is ia / IA summit 2013
Upcoming SlideShare
Loading in …5
×

Typography is ia / IA summit 2013

2,663 views

Published on

Published in: Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,663
On SlideShare
0
From Embeds
0
Number of Embeds
467
Actions
Shares
0
Downloads
47
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Typography is ia / IA summit 2013

  1. 1. Boon Yew Chew IA Summit 2013 Typography is information architecture How a little understanding goes a long way @boonychSaturday, 6 April 13
  2. 2. Hi, I’m Boon. @boonychSaturday, 6 April 13My  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  find  me  aGer  the  talk.
  3. 3. #TypographyIsIASaturday, 6 April 13But  today’s  talk  is  on  typography,  not  sketchnotes.Oh  and  if  you  want  to  tweet  about  stuff  -­‐  the  hashtag  is  #typographyisia.
  4. 4. Why typography? http://www.flickr.com/photos/atomicshed/5600284969 @boonychSaturday, 6 April 13So,  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.
  5. 5. Information building blocks http://www.flickr.com/photos/44124367235@N01/3698270/ @boonychSaturday, 6 April 13Firstly,  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.
  6. 6. An older form of IA http://www.flickr.com/photos/calsidyrose/7043554105 @boonychSaturday, 6 April 13Secondly,  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.
  7. 7. Communication http://www.flickr.com/photos/30555049@N07/8088011895 @boonychSaturday, 6 April 13Finally,  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.
  8. 8. Saturday, 6 April 13 ey @boonychMy  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  stuff  out  there  that  just  focuses  on  the  how-­‐tos  but  doesn’t  explain  the  WHY.  And  I  think  the  why  is  important.
  9. 9. Systems Perception ey Patterns Relationships @boonychSaturday, 6 April 13So,  I’m  going  to  frame  typography  in  four  different  ways  -­‐  systems,  percep1on,  paOerns  and  rela1onships  -­‐-­‐  which  will  help  you  understand  typography  a  bit  beOer  as  a  craG.  
  10. 10. 1439 @boonychSaturday, 6 April 13So  in  1439,  Johannes  Gutenberg  revolu1onised  the  publishing  industry  by  inven1ng  a  system  that  could  mass-­‐produce  printed  material  prac1cally  and  economically.
  11. 11. Saturday, 6 April 13The  system  he  devised  involved  two  parts:  the  first  part  was  a  manufacturing  process,  which  was  a  unique  way  to  producing  individual  pieces  of  leOers,  called  type.  
  12. 12. http://www.flickr.com/photos/wilhei/109404349/ @boonychSaturday, 6 April 13and  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.
  13. 13. Saturday, 6 April 13The  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”.
  14. 14. @boonychSaturday, 6 April 13Typography  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.
  15. 15. Typography is the result of many systems combined. @boonychSaturday, 6 April 13This  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.
  16. 16. @boonychSaturday, 6 April 13And  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  fix  it.
  17. 17. Perception Ralf Herrmann, opentype.info (image used with permission) @boonychSaturday, 6 April 13A  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.
  18. 18. http://circusredickuless.com/king-james-bible-comic-sans-edition.html @boonychSaturday, 6 April 13But  percep1on  goes  beyond  what  we  see  and  read.  Percep1on  is  also  about  how  we  feel,  and  that  some1mes  influences  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.
  19. 19. http://www.flickr.com/photos/nicksherman/8257578912/Saturday, 6 April 13Human  percep1on  is  complex  because  there  are  so  many  factors  influencing  it.  Some1mes  a  designer  will  place  more  emphasis  on  the  ability  to  create  harmonious  word  shapes  to  support  reading.  
  20. 20. http://www.flickr.com/photos/11926838@N03/4732769347/Saturday, 6 April 13Some1mes  the  emphasis  is  on  legibility,  which  is  appropriate  for  condi1ons  such  as  highway  signs  where  word  recogni1on  is  crucial.  
  21. 21. Transport typeface Jock Kinnear & Margaret Calvert Ralf Herrmann, opentype.info (image used with permission)Saturday, 6 April 13By  the  way,  the  typeface  you  see  here  is  the  Transport  typeface,  which  is  the  official  typeface  used  across  all  highway  signs  across  the  UK.  This  is  a  list  of  typefaces  used  by  different  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
  22. 22. Saturday, 6 April 13Some1mes  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.
  23. 23. Pattern matching http://www.flickr.com/photos/29461743@N00/5327827657/ http://www.flickr.com/photos/31252318@N08/5152625601 @boonychSaturday, 6 April 13So  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.
  24. 24. Saccades @boonychSaturday, 6 April 13This  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.
  25. 25. 1. words and sentences 2. content types 3. information organisation @boonychSaturday, 6 April 13When  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  -­‐-­‐  different  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  different  paOerns  easier  to  iden1fy  without  having  to  use  explicit  means  of  instruc1on.
  26. 26. hey Chapter 4 When he was nearly thirteen, my brother Jem got his arm badly broken at the elbow. When it healed, and Jems 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 couldnt 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 hadnt 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 hadnt? 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 Wesleys 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 teachers 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 Simons some of the people: Maycomb County had homestead, Finchs 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 Finchs We lived on the main residential street in Landing, was the county seat of Maycomb County. Atticuss 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 states 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 Maycombs 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 fathers 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 brothers 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 Finchs 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 summers 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. Mens stiff collars wilted by nine in the morning. Ladies bathed across the before noon, after their three-oclock 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 couldnt 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 wasnt 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 Saturday, 6 April 13 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.  
  27. 27. hey Chapter 4 When he was nearly thirteen, my brother Jem got his arm badly broken at the elbow. When it healed, and Jems 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 couldnt 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 hadnt 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 hadnt? 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 Wesleys 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 teachers 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 Simons some of the people: Maycomb County had homestead, Finchs 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 Finchs We lived on the main residential street in Landing, was the county seat of Maycomb County. Atticuss 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 states 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 Maycombs 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 fathers 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 brothers 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 Finchs 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 summers 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. Mens stiff collars wilted by nine in the morning. Ladies bathed across the before noon, after their three-oclock 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 couldnt 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 wasnt 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 Saturday, 6 April 13 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.  
  28. 28. 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/4287009210Saturday, 6 April 13Ul1mately,  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.
  29. 29. @boonychSaturday, 6 April 13There  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.  
  30. 30. Systems Perception ey Patterns Relationships @boonychSaturday, 6 April 13The  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.
  31. 31. Case studies @boonychSaturday, 6 April 13Now  that  we’ve  got  the  basics  aside,  there  are  some  case  studies  I  want  to  share  with  you  to  bring  this  more  to  life.
  32. 32. Verdana - a typeface for digital displays http://www.flickr.com/photos/maddi/173564896/ @boonychSaturday, 6 April 13The  first  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.
  33. 33. http://www.domusweb.it/en/design/states-of-design-06-in-your-face-/ @boonychSaturday, 6 April 13One  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  first  before  designing  the  glyphs  -­‐-­‐  these  intricate  lines  that  define  the  characters  of  the  typeface.
  34. 34. 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.htmSaturday, 6 April 13This  made  Verdana  a  suitable  font  for  displaying  content  in  a  small  size  that  didn’t  feel  uncomfortable  to  read.
  35. 35. 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. @boonychSaturday, 6 April 13This  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  fidelity  screens  or  at  larger  sizes.  Because  of  technological  improvements  in  screens,  there’s  a  lot  more  you  can  do  with  typography  now.  
  36. 36. @boonychSaturday, 6 April 13Also,  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.
  37. 37. @boonychSaturday, 6 April 13There’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  fine  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-­‐offs  about  what  typefaces  to  use  for  crea1ng  an  impression  versus  the  ones  we  use  for  body  text  and  so  on.
  38. 38. @boonychSaturday, 6 April 13However,  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  effect  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.
  39. 39. @boonychSaturday, 6 April 13However,  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  effect  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.
  40. 40. New Transport typeface Henrik Kubel & Margaret Calvert @boonychSaturday, 6 April 13Some  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  official  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  benefits  are  s1ll  present  in  the  new  typeface.  It  works  really  well  as  a  standard  font  for  headlines,  interac1ve  copy,  small  text,  and  so  on.
  41. 41. New Transport typeface Henrik Kubel & Margaret Calvert @boonychSaturday, 6 April 13Some  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  official  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  benefits  are  s1ll  present  in  the  new  typeface.  It  works  really  well  as  a  standard  font  for  headlines,  interac1ve  copy,  small  text,  and  so  on.
  42. 42. New Transport typeface Henrik Kubel & Margaret Calvert @boonychSaturday, 6 April 13Some  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  official  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  benefits  are  s1ll  present  in  the  new  typeface.  It  works  really  well  as  a  standard  font  for  headlines,  interac1ve  copy,  small  text,  and  so  on.
  43. 43. Saturday, 6 April 13Another  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  effec1ve  difference  typography  has  made  to  denote  interface  structure,  modes,  hierarchy,  order,  state  and  so  on  -­‐  all  into  one  compact  space.
  44. 44. Saturday, 6 April 13Another  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  effec1ve  difference  typography  has  made  to  denote  interface  structure,  modes,  hierarchy,  order,  state  and  so  on  -­‐  all  into  one  compact  space.

×