Great Typography == Great Design

An overview of why great typography is great design. Also shows some examples and small tips to get your typography right.

Transcript

1. Great typography == Great Design @netbramha | aashish solanki
2. Hi! I am a font. A type. This is my life. My journey.
3. Birth Typography (typos) = form & (graphe) = writing) is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).
4. roman / antique italic serif sans serif / grotesque scripts Different Races
5. Tracking / letter spacing (between letters) kerning (between pair of letters) leading (between lines) Dressing Sense
6. Where do I work
7. TRUCK TYPOGRAPHY
8. TAXI TYPOGRAPHY
9. Toilet paper TYPOGRAPHY
10. BEER TYPOGRAPHY PS: Mom this slide is for education purposes only!
11. Digital TYPOGRAPHY
12. Artist TYPOGRAPHY
13. My karma is to make design great.
14. Communicate XYZ NOT XYZ
15. EMOTE
16. STRUCTURE
17. I have feelings! No really I do.
18. I feel strong
19. I feel INFORMAL
20. I feel Classy
21. I feel MILITARY
22. WE Fonts Don’t Lie. I swear!
23. more detailed the font the poorer i render on low-resolution screens
24. Common choices for headlines are Georgia, Arial & Helvetica. Common choices for body copy are Georgia, Arial, Verdana & Lucida Grande.
25. Average HEADING font size 0 2 4 6 8 10 12 1214 1517 1820 2123 2426 2729 3032 3335 3638 39+ No of Occurrences Font Size
26. The most popular TYPE size for headings is a range between 18 & 29 pixels.
27. Average BODY COPY font size 0 5 10 15 20 10 11 12 13 14 15 16 No of Occurrences Font Size
28. The most popular TYPE size for body copy is a range between 12 & 14 pixels.
30. 25 px - Georgia 12 px - VerDAna 10 px - VerDAna 18 px - Georgia
31. WE work well in teams of 2 or 3 Font families. Yes We also hate large joint families!
33. Usually there is a pattern
34. Some STD RATIOS Header font size ÷ Body copy font size = 1.96. Line height ÷ body copy font size = 1.48. Line length ÷ line height = 27.8. Space between paragraphs ÷ line height = 0.754. in pixel
35. We can sexy-fy anything.
36. TYPE AS DESIGN element
37. TYPE AS DESIGN element 10,17, 9 PX 1.4 em 84.61%
38. We hate people who don’t treat us well
40. We are now social like you all. We have Friends like cufon, Google fonts, TypeTester …
41. Type Foundries
42. Typetester.org
43. Responsive type
44. We love affairs with the grids. We stick on to them.
45. No images Used
46. Grid layout
47. Serif & Size
48. We like to travel A LOT. Browser, Mobile, Poster, Truck, Watch and so on.
49. FLIPBOARD
50. Metro UI
51. Android App
52. Our next generation can do cool stuff
53. Tabular Data
54. More awesome
55. More awesome
56. Un-styled
57. Css part 1 h1{ font-size: 2.5em; font-family: Georgia; letter-spacing: 0.1em; color: rgb(142,11,0); text-shadow: 1px 1px 1px rgba(255,255,255,0.6); } h1 span{ display: block; margin-top: 0.5em; font-family: Verdana; font-size: 0.6em; font-weight: normal; letter-spacing: 0em; text-shadow: none; } .meta{ font-family: Georgia; color: rgba(69,54,37,0.6); font-size: 0.85em; font-style: italic; letter-spacing: 0.25em; border-bottom: 1px solid rgba(69,54,37,0.2); padding-bottom: 0.5em; }
58. Css part 2 .meta span{ text-transform: capitalize; font-style: normal; color: rgba(69,54,37,0.8); } .body p{ font-family: Verdana; -moz-column-count: 2; -moz-column-gap: 1em; -webkit-column-count: 2; -webkit-column-gap: 1em; column-count: 2; column-gap: 1em; line-height: 1.5em; color: rgb(69,54,37); }
59. Css part 3 .body p:first-child{ font-size: 1.25em; font-family: Georgia; font-style: italic; -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; letter-spacing: 0.1em; } .body p:first-child:first-line{ font-weight: bold; } date{ font-family: Georgia; color: rgba(69,54,37,0.6); font-size: 0.75em; font-style: italic; letter-spacing: 0.25em; border-top: 1px solid rgba(69,54,37,0.2); display: block; padding-top: 0.5em; margin-top: 2em; }
60. Magic happens
61. basic rules size, type, context, weight reset everything high contrast Typography grid Responsive Type Sum up
62. App/WEb design is 80% type
63. informationarchitects.jp
64. stypi
65. Great design needs us. Treat us well. - Your Friendly font
66. Credits       dribbble.com  &  respec1ve  authors   h6p://www.flickr.com/photos/swirley/71179009/lightbox/   h6p://www.crea1vereview.co.uk/cr-­‐blog/2009/march/the-­‐cr-­‐taxi     h6p://blog.craEzine.com/archive/2007/11/toilet_paper_typography.html   h6p://www.smashingmagazine.com/2009/08/20/typographic-­‐design-­‐survey-­‐best-­‐prac1ces-­‐from-­‐the-­‐best-­‐blogs/   h6p://blog.echoenduring.com/2010/05/13/create-­‐beau1ful-­‐css3-­‐typography/   h6p://writemarketdesign.blogspot.in/2011/08/marke1ng-­‐mishaps-­‐using-­‐too-­‐many-­‐fonts.html       Resources       h6p://typedia.com/   h6p://explora1onsintypography.com/   h6p://typese6er.org     h6p://gridness.net/  
67. Thank you We are hiring, collaborating and ideating. aashish@netbramha.com or @netbramha UXutsav An UX conference with hands on workshops on 16, 17th June. For more details log on to www.uxutsav.com