Great typography == Great Design - Part 2

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.

FLIPBOARD

Metro UI

Android App

Our next generation can do coolstuff

Tabular Data

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

Great design needs us. Treat uswell.- Your Friendly font

Credits dribbble.com & respec1ve authors h6p://www.ﬂickr.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

Great typography == Great Design - Part 2

by Aashish Solanki

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 2

Statistics

Great typography == Great Design - Part 2 Presentation Transcript

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