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

Great typography == Great Design - Part 2



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.



Total Views
Views on SlideShare
Embed Views



3 Embeds 3

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



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.

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

Great typography == Great Design - Part 2 Great typography == Great Design - Part 2 Presentation Transcript

  • 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 height = 27.8.Space between paragraphs ÷ line height = 0.754.in pixel
  • 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.
  • 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: 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;}
  • .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);}
  • .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;}
  • 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.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/  
  • 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