Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Practical Typography

600 views

Published on

Talk to Social Digital students at the University of Dundee giving a few tips for typography in practice

Heavily inspired by David Rault’s talk on typographic influences; Butterick’s “Pratical Typography”; Bettina M.

Credits: xkcd’s comic on white space,
and Typographer Ryan Gosling

Thanks to Zach Holman as well for his talk on talks and advice for public speaking http://speaking.io/

Published in: Design
  • The #1 Woodworking Resource With Over 16,000 Plans, Download 50 FREE Plans... ♣♣♣ http://ishbv.com/tedsplans/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Want to preview some of our plans? You can get 50 Woodworking Plans and a 440-Page "The Art of Woodworking" Book... Absolutely FREE ●●● http://tinyurl.com/yy9yh8fu
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Want to preview some of our plans? You can get 50 Woodworking Plans and a 440-Page "The Art of Woodworking" Book... Absolutely FREE ▲▲▲ http://tinyurl.com/yy9yh8fu
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Practical Typography

  1. 1. PRACTICAL TYPOGRAPHY
  2. 2. Typography is the vector of written communication
  3. 3. Heygirl
  4. 4. HEY GIRL
  5. 5. WARNING
  6. 6. Tenderness
  7. 7. special offer
  8. 8. Black Metal
  9. 9. Akelcyi Akelcyi
  10. 10. Fonts have different cultural meanings
  11. 11. UNDERSTAND the visual language you need to use
  12. 12. OBSERVE what is used in that field
  13. 13. Garamond Futura Gill Sans Bodoni
  14. 14. l l l lglglglgl THIBAUDEAU CLASSIFICATION
  15. 15. Father Christmas. Santa Claus. Or as I've always known him: Jeff. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you 'everything's going to be fine' and you think they're probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don't lie to me! !
  16. 16. Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to me! !
  17. 17. I love lamp I love lamp
  18. 18. Prefer serif fonts for longer texts
  19. 19. Don’t use thin fonts They’re overused and hard to read
  20. 20. You can be distinctive without being tacky
  21. 21. Nope Nope Nope Nope Nope Nope Nope Nope MAYBE
  22. 22. Technology Chocolate Cookies OMG! COMICS! casual Fashion HEY KIDS
  23. 23. Don’t get typefaces from DaFont Seriously, they’re the worst
  24. 24. Google Fonts
  25. 25. FontSquirrel
  26. 26. TypeTogether
  27. 27. The League of Moveable Type
  28. 28. MyFonts
  29. 29. be aware of the context
  30. 30. be aware of the context
  31. 31. Maintain a hierarchy
  32. 32. Exterminate the Daleks Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
  33. 33. Exterminate the Daleks Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
  34. 34. Exterminate the Daleks Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
  35. 35. Exterminate the Daleks Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
  36. 36. Exterminate the Daleks Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
  37. 37. Exterminate the Daleks Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. ×
  38. 38. EXTERMINATE THE DALEKS Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. ×
  39. 39. EXTE RMIN AT E THE DALEKS Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
  40. 40. E X T E R M I N A T E T H E D A L E K S Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. ×
  41. 41. EXTERMINATE THE DALEKS Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to Super squeaky bum time! It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.
  42. 42. EXTERMINATE THE DALEKS Father Christmas. Santa Claus. Or as I’ve always known him: Jeff. Annihilate? No. No violence. I won’t stand for it. Not now, not ever, do you understand me?! I’m the Doctor, the Oncoming Storm — and you basically meant beat them in a football match, didn't you? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know when grown-ups tell you “everything’s going to be fine” and you think they’re probably lying to make you feel better? I am the last of my species, and I know how that weighs on the heart so don’t lie to 'Oh Ain't Modern Society Awful?'! No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. ⅔ ⅓
  43. 43. You don’t have to use every method for contrast
  44. 44. Use bold for strong emphasis, and italics for gentle emphasis. EMPHASIS IN THE TEXT
  45. 45. But don’t fucking underline words EMPHASIS IN THE TEXT Unless it’s a link, then it’s okay
  46. 46. Use 2 fonts at most in your document Three if you really have to
  47. 47. How do you know she is a witch? I dunno. Must be a king. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! You don't vote for kings. Burn her! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to ×
  48. 48. How do you know she is a witch? I dunno. Must be a king. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! You don't vote for kings. Burn her! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to
  49. 49. Don’t mix fonts that share the same style
  50. 50. How do you know she is a witch? I dunno. Must be a king. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! You don't vote for kings. Burn her! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by ×
  51. 51. How do you know she is a witch? I dunno. Must be a king. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n- niggits! You don't vote for kings. Burn her! The Lady of the Lake, her arm clad in the purest shimmering
  52. 52. Onlyhaveonefont with a strong PERSONALITY
  53. 53. IT’S NOT JUST THE FONT
  54. 54. Typography is not about the marks on the page, it’s about the space between those marks” “ — Ryan Gosling
  55. 55. CONSIDER the shape of your block of texts
  56. 56. convergence across In integrating non-a existing legacy syste LEADING
  57. 57. Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when thinking outside the box. This being said, the ownership issues inherent in dominant thematic implementations cannot be understated vis-a vis document distribution on a real operating system consisting primarily of elements regarded as outdated and therefore impelling as a
  58. 58. Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when thinking outside the box. This being said, the ownership issues inherent in dominant thematic implementations cannot be understated
  59. 59. Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of
  60. 60. The leading should be 1.2× to 1.5× the font size
  61. 61. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data . 1.2 1.4
  62. 62. Increase the leading if your column is narrow
  63. 63. USE MARGINS, goddammit
  64. 64. Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when thinking outside the box. This being said, the ownership issues inherent in dominant thematic implementations cannot be understated vis-a vis document distribution on a real ×
  65. 65. Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when
  66. 66. Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate
  67. 67. Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. ×
  68. 68. abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
  69. 69. In busy contexts, minimalism is the best option
  70. 70. USE A GRID, goddammit
  71. 71. In terms of shape, I have thought of a few alternatives and tried to get inspired from other objects linked to memories, timekeeping, and holding of precious things, such as clocks, books, shoeboxes full of photographs, and chests. In parallel to that I had to stay realistic in what I wanted to do, both because my skills in woodworking are rather basic (I have mainly worked on digital and screen-based products during my time at university) and because a core principle of the project is to be released under an Shape and material
  72. 72. In terms of shape, I have thought of a few alternatives and tried to get inspired from other objects linked to memories, timekeeping, and holding of precious things, such as clocks, books, shoeboxes full of photographs, and chests. In parallel to that I had to stay realistic in what I wanted to do, both because my skills in woodworking are rather basic (I have mainly worked on digital and screen-based products during my time at university) and because a core principle of the project is to be released under an Shape and material
  73. 73. The transition between pages was taken from Tympanus/Codrops demos. It works out pretty smoothly as it uses CSS3 transforms and animations. Implementing them in my code was a bit more complex than I had hoped as I have taken the time to abstract the code into Backbone views (one of the Javascript frameworks that I am using), but that means I can easily reuse it later in different ways, as I intend to have more than two views. At the moment there is only the timeline and a map, but Menu, map and other views
  74. 74. Keep things aligned with other elements
  75. 75. The map was created using Mapbo making embedded online maps si Maps but with much more custom They offer a free plan which suits applied for an Education plan to s full possibilities. I have attached a for testing, which only appear at m moment but I will soon be able to interactive and make them show s photos linked to specific locations people to search by location as we ! ! The transition between pages was taken from Tympanus/Codrops demos. It works out pretty smoothly as it uses CSS3 transforms and animations. Implementing them in my code was a bit more complex than I had hoped as I have taken the time to abstract the code into Backbone views (one of the Javascript frameworks that I am using), but that means I can easily reuse it later in different ways, as I intend to have more than two views. At the moment there is only the timeline and a map, but ×
  76. 76. The map was created using Mapbo making embedded online maps si Maps but with much more custom They offer a free plan which suits applied for an Education plan to s full possibilities. I have attached a for testing, which only appear at m moment but I will soon be able to interactive and make them show s photos linked to specific locations people to search by location as we ! ! The transition between pages was taken from Tympanus/Codrops demos. It works out pretty smoothly as it uses CSS3 transforms and animations. Implementing them in my code was a bit more complex than I had hoped as I have taken the time to abstract the code into Backbone views (one of the Javascript frameworks that I am using), but that means I can easily reuse it later in different ways, as I intend to have more than two views. At the moment there is only the timeline and a map, but ×
  77. 77. The map was created using Mapbo making embedded online maps si Maps but with much more custom They offer a free plan which suits applied for an Education plan to s full possibilities. I have attached a for testing, which only appear at m moment but I will soon be able to interactive and make them show s photos linked to specific locations people to search by location as we ! ! The transition between pages was taken from Tympanus/Codrops demos. It works out pretty smoothly as it uses CSS3 transforms and animations. Implementing them in my code was a bit more complex than I had hoped as I have taken the time to abstract the code into Backbone views (one of the Javascript frameworks that I am using), but that means I can easily reuse it later in different ways, as I intend to have more than two views. At the moment there is only the timeline and a map, but
  78. 78. The map was created using Mapbo making embedded online maps si Maps but with much more custom They offer a free plan which suits applied for an Education plan to s full possibilities. I have attached a for testing, which only appear at m moment but I will soon be able to interactive and make them show s photos linked to specific locations people to search by location as we ! ! The transition between pages was taken from Tympanus/Codrops demos. It works out pretty smoothly as it uses CSS3 transforms and animations. Implementing them in my code was a bit more complex than I had hoped as I have taken the time to abstract the code into Backbone views (one of the Javascript frameworks that I am using), but that means I can easily reuse it later in different ways, as I intend to have more than two views. At the moment there is only the timeline and a map, but
  79. 79. Keep lines of text in different blocks on the same baseline
  80. 80. Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate Flush left
  81. 81. Perhaps a re-engineering of your current world view will re- energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue. In integrating non-aligned structures into existing legacy systems, a holistic Centered ×
  82. 82. Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null. To more fully clarify the current exchange, a few aggregate Flush right ×
  83. 83. Justify
  84. 84. ×
  85. 85. Justify long texts, Left align the rest Don’t center or align right; or only very occasionally if it’s just a couple of lines
  86. 86. ×
  87. 87. ×
  88. 88. Disable hyphena- tion for left align- ed text It’s only useful for justified blocks
  89. 89. and in the process, I have used 2 kilogrammes of plaster branded © B&Q that I bought for less than 4 pounds. It was a pretty good deal ! ×
  90. 90. and in the process, I have used 2 kilogrammes of plaster branded © B&Q that I bought for less than 4 pounds. It was a pretty good deal!
  91. 91. PROOFREAD, at least with a spellchecker
  92. 92. QUESTIONS? Victor Loux / io@victorloux.uk / @lgorithm
  93. 93. David Rault’s talk on typographic influences; Butterick’s “Pratical Typography”; Bettina M. Credits: xkcd’s comic on white space,
 and Typographer Ryan Gosling Thanks to

×