Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Great Typography == Great Design

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.

Cea695445cac3173f566f8b05341773d?s=128

Aashish Solanki

April 24, 2012
Tweet

More Decks by Aashish Solanki

Other Decks in Design

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.
  29. None
  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!
  32. None
  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

  39. None
  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