• Save
Great typography == Great Design - Part 2
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Great typography == Great Design - Part 2

on

  • 1,095 views

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

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

PART 2 of 2.

Statistics

Views

Total Views
1,095
Views on SlideShare
1,092
Embed Views
3

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 3

https://twimg0-a.akamaihd.net 1
https://si0.twimg.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Great typography == Great Design - Part 2 Presentation Transcript

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