Great typography == Great Design - Part 2

1,115
-1

Published on

Overview of why great typography is great design. And a few simple tricks to get it right.

PART 2 of 2.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,115
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Great typography == Great Design - Part 2

  1. 1. Great typography == Great Design (part 2 of 2) @netbramha | aashish solanki
  2. 2. WE work well in teams of 2 or 3 Fontfamilies. Yes We also hate large jointfamilies!
  3. 3. Usually there is a pattern
  4. 4. Some STD RATIOSHeader 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
  5. 5. We can sexy-fy anything.
  6. 6. TYPE AS DESIGN element
  7. 7. TYPE AS DESIGN element 1.4 em10,17, 9 PX 84.61%
  8. 8. We hate people who don’t treat uswell
  9. 9. We are now social like you all.We have Friends like cufon, Googlefonts, TypeTester …
  10. 10. Type Foundries
  11. 11. Typetester.org
  12. 12. Responsive type
  13. 13. We love affairs with the grids. Westick on to them.
  14. 14. No images Used
  15. 15. Grid layout
  16. 16. Serif & Size
  17. 17. We like to travel A LOT.Browser, Mobile, Poster, Truck, Watchand so on.
  18. 18. FLIPBOARD
  19. 19. Metro UI
  20. 20. Android App
  21. 21. Our next generation can do coolstuff
  22. 22. Tabular Data
  23. 23. More awesome
  24. 24. More awesome
  25. 25. Un-styled
  26. 26. h1{ Css part 1 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;}
  27. 27. .meta span{ Css part 2 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);}
  28. 28. .body p:first-child{ Css part 3 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;}
  29. 29. Magic happens
  30. 30. Sum upbasic rulessize, type, context, weightreset everythinghigh contrastTypography gridResponsive Type
  31. 31. App/WEb design is 80% type
  32. 32. informationarchitects.jp
  33. 33. stypi
  34. 34. Great design needs us. Treat uswell.- Your Friendly font
  35. 35. 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/  
  36. 36. Thank youWe 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

×