Typography is ia / IA summit 2013
Upcoming SlideShare
Loading in...5
×
 

Typography is ia / IA summit 2013

on

  • 2,118 views

 

Statistics

Views

Total Views
2,118
Slideshare-icon Views on SlideShare
1,703
Embed Views
415

Actions

Likes
9
Downloads
37
Comments
0

6 Embeds 415

http://www.scoop.it 300
http://lanyrd.com 85
http://eventifier.co 16
http://tweets.jimlaneux.com 8
https://twitter.com 4
http://sprmario.tumblr.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Typography is ia / IA summit 2013 Typography is ia / IA summit 2013 Presentation Transcript

    • Boon Yew Chew IA Summit 2013 Typography is information architecture How a little understanding goes a long way @boonychSaturday, 6 April 13
    • 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.
    • #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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.  
    • 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.
    • 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.  
    • 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.
    • 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”.
    • @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.
    • 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.
    • @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.
    • 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.
    • 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.
    • 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.  
    • 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.  
    • 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
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.  
    • 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.  
    • 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.
    • @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.  
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.  
    • @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.
    • @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.
    • @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.
    • @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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Saturday, 6 April 13In  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 speakerSaturday, 6 April 13Cameron  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 @boonychSaturday, 6 April 13As  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 2013Saturday, 6 April 13Sites  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  scaffolding  to  meet  the  user’s  expecta1ons.
    • “ Typography is what language looks like” Ellen Lupton Thinking with TypeSaturday, 6 April 13I’d  like  to  summarize  with  a  quote  from  Ellen  Lupton  from  her  book  “Thinking  with  Type”  -­‐  and  she  says  “Typography  is  what  language  looks  like”.  I’d  like  to  think  the  reality  we  live  in  now  isn’t  just  about  the  languages  we  speak  and  use,  but  the  languages  we  use  in  addi1on  to  that  -­‐-­‐  on  social  networks,  interac1ve  systems,  workplaces,  and  so  on,  some  of  which  are  equally  as  complex  if  not  more.  And  oGen  1mes,  typography  forms  a  core  part  of  these  experiences.
    • Thanks. Resources: bit.ly/typographyisia get in touch: @boonychSaturday, 6 April 13