Love at First Type

This presentation was prepared for the UX & Chill talk organized by the User Experience Society at Ateneo de Manila University. The gist of what I shared is about how typography is a lot like love and with a little bit of effort plus empathy, you can give the reader a good experience in processing content.

Transcript

1. Hi!
2. Jelvin Base
3. Proudcloud
4. Lettering & Calligraphy
5. UX & Typography
6. What is T ypography?
7. WTF IS THIS!?!?
8. Love at First Type TYPOGRAPHY IS A LOT LIKE LOVE – LEGIT
9. What is typography?
10. “ Typography is the visual component of the written word. MATTHEW BUTTERICK
11. Text & Typography
12. ©MATTHEW BUTTERICK
13. Idea & Execution
14. Who is it for anyway?
15. & ＝ ❤
16. Designer ⇢ Reader
17. So, why does it matter?
18. “ Attention is the reader’s gift to you. MATTHEW BUTTERICK
21. I’ll be your wingman. …sort of
23. Getting ready EVERYTHINGS STARTS WITH A GOOD FOUNDATION
24. Search for “typography basics” on Google.
25. Type Terms by Supremo supremo.tv/typeterms
27. Fontology by Monotype fonts.com/content/learning/fontology
29. Practical Typography by Matthew Butterick practicaltypography.com
31. Let’s spice things up SYSTEM FONTS NO MORE!
32. System fonts = No effort
33. Helvetica = No effort!!!
34. Calibri Fira Sans Open Sans Source Sans Pro
35. Times New Roman Alegreya Gentium Lora
36. Google Fonts by Google fonts.google.com
38. Typewolf by Jeremiah Shoaf typewolf.com
40. Body language speaks volumes START WITH THE BODY (TEXT)
41. Display vs. Body
42. Where does your content go?
43. Content ⇢ Body
46. It’s OK to use display fonts in body text as long as it’s legible and readable in small sizes.* *But us it sparingly.
47. Size does matter ESPECIALLY IN TYPOGRAPHY
48. How do you scale/size your type?
49. Modular scale.
50. size = base * ( ratio ^ n )
51. Tanchameter Modular scale
52. Modularscale by Tim Brown modularscale.com
54. Take the lead TIME TO ESTABLISH YOUR HIERARCHY
55. Rick Astley Never Gonna Do List: Give you up Let you down Run around Desert you Make you cry Say goodbye Tell a lie Hurt you
56. Never Gonna Do List: · Give you up · Let you down · Run around · Desert you · Make you cry · Say goodbye · Tell a lie · Hurt you RICK ASTLEY
58. M I S S U N I V E R S E 2 0 1 5 2nd Runner Up U.S.A. 1st Runner Up Columbia Winner – Miss Universe Philippines
59. Space, bes SOMETIMES, WE JUST NEED A LITTLE SPACE
60. Kerning Tracking Leading
61. Kerning Tracking Leading
62. Kerning Tracking Leading
63. Kerning Tracking Leading
64. Kerning Tracking Leading
65. How do we know if it’s too close?
66. Squint. If the content turns into a blob, it’s probably too close.
67. Somebody once told me the world is gonnaroll me I ain'tthe sharpest tool in the shed She was looking kind of dumb with her finger and her thumb In the shape of an "L" on her forehead
68. Somebody once told me the world is gonnaroll me I ain'tthe sharpest tool in the shed She was looking kind of dumb with her finger and her thumb In the shape of an "L" on her forehead
69. Somebody once told me the world is gonnaroll me I ain'tthe sharpest tool in the shed She was looking kind of dumb with her finger and her thumb In the shape of an "L" on her forehead
70. Somebody once told me the world is gonna roll me I ain't the sharpest tool in the shed She was looking kind of dumb with her finger and her thumb In the shape of an "L" on her forehead
71. TAMA NA. AYOKO NA.
72. TAMA NA. AYOKO NA.
73. Keep kerning settings on.
74. Observe the gap between each letter in a block of text.
75. line_height = size * n where n = 1.2 … 1.45
80. Say what you mean & mean what you say MOODS SHOULD BE RELATED TO CONTEXT AND VICE VERSA
81. Typography is so powerful, you can establish a brand with just a font.* *Or two with maybe a palette.
82. I Love You.
83. I Love You.
84. I Love YoU...
85. Diego Bartolome GRAPHIC DESIGN Juan Dela Cruz G R A P H I C D E S I G N
88. Typography is a lot like love. A little bit of effort & empathy can make things better.
89. Thanks!
90. May the fourth be with you.
91. email: hi@jelv.in instagram: @jelvin