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

1. Great typography
== Great Design
(part 2 of 2)
@netbramha | aashish solanki

2. WE work well in teams of 2 or 3 Font
families. Yes We also hate large joint
families!

4. Usually there is a pattern

5. 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

6. We can sexy-fy anything.

7. TYPE AS DESIGN element

8. TYPE AS DESIGN element
1.4 em
10,17, 9 PX
84.61%

9. We hate people who don’t treat us
well

11. We are now social like you all.
We have Friends like cufon, Google
fonts, TypeTester …

12. Type Foundries

13. Typetester.org

14. Responsive type

15. We love affairs with the grids. We
stick on to them.

16. No images Used

17. Grid layout

18. Serif & Size

19. We like to travel A LOT.
Browser, Mobile, Poster, Truck, Watch
and so on.

20. FLIPBOARD

21. Metro UI

22. Android App

23. Our next generation can do cool
stuff

24. Tabular Data

25. More awesome

26. More awesome

27. Un-styled

28. 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;
}

29. .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);
}

30. .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;
}

31. Magic happens

32. Sum up
basic rules
size, type, context, weight
reset everything
high contrast
Typography grid
Responsive Type

33. App/WEb design is 80% type

34. informationarchitects.jp

35. stypi

36. Great design needs us. Treat us
well.
- Your Friendly font

37. 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/

38. 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