Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Great typography == Great Design                   (part 2 of 2)          @netbramha | aashish solanki
WE work well in teams of 2 or 3 Fontfamilies. Yes We also hate large jointfamilies!
Usually there is a pattern
Some STD RATIOSHeader font size ÷ Body copy font size = 1.96.Line height ÷ body copy font size = 1.48.Line length ÷ line h...
We can sexy-fy anything.
TYPE AS DESIGN element
TYPE AS DESIGN element                               1.4 em10,17, 9 PX              84.61%
We hate people who don’t treat uswell
We are now social like you all.We have Friends like cufon, Googlefonts, TypeTester …
Type Foundries
Typetester.org
Responsive type
We love affairs with the grids. Westick on to them.
No images Used
Grid layout
Serif & Size
We like to travel A LOT.Browser, Mobile, Poster, Truck, Watchand so on.
FLIPBOARD
Metro UI
Android App
Our next generation can do coolstuff
Tabular Data
More awesome
More awesome
Un-styled
h1{                                                 Css part 1  font-size: 2.5em;  font-family: Georgia;  letter-spacing: ...
.meta span{                     Css part 2  text-transform: capitalize;  font-style: normal;  color: rgba(69,54,37,0.8);}....
.body p:first-child{                          Css part 3  font-size: 1.25em;  font-family: Georgia;  font-style: italic;  ...
Magic happens
Sum upbasic rulessize, type, context, weightreset everythinghigh contrastTypography gridResponsive Type
App/WEb design is 80% type
informationarchitects.jp
stypi
Great design needs us. Treat uswell.- Your Friendly font
Credits	  	  	  dribbble.com	  &	  respec1ve	  authors	  h6p://www.flickr.com/photos/swirley/71179009/lightbox/	  h6p://www...
Thank youWe are hiring, collaborating and ideating.aashish@netbramha.com or @netbramha                UXutsav             ...
Great typography == Great Design - Part 2
Great typography == Great Design - Part 2
Prochain SlideShare
Chargement dans…5
×

Great typography == Great Design - Part 2

1 470 vues

Publié le

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

PART 2 of 2.

Publié dans : Design, Technologie
  • Soyez le premier à commenter

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

×