Just Your Type: Web Typography & You
40
-
Upload
mykl-roventine -
Category
Design
-
view
105 -
download
1
description
Presented at MinneWebCon 2011 Web typography is making the internet look better than ever before. You're particular about the fonts you choose in other mediums, don't settle for anything less for your online projects. This session will address the basics of effective typography and techniques that everyone can apply right away to harness the power of web typography on their website or blog.
Transcript of Just Your Type: Web Typography & You
About Me• Web Designer
• Type Geek
• Font Snob
We’ll Cover:• Web typography (past/present)
• Web fonts (what/how)
• Ways you can make it happen
Web TypographyA “new” way to use type on the web.
A Brief History of Type* *on the web
1996• Early web looked like sh*#
1996• Web pages would only display fonts
installed on a user’s computer
• “Core Fonts” introduced
2004• Not much changed :(
2007• CSS3 introduces @font-face
• Web fonts are born
• Huzzah!
2007
BUT, browser support is limited
2010
Browsers finally catch up. All of ‘em.
Web FontsAllow web designers to use fonts that are not installed on the viewer's computer.
Web Fonts
Source: http://www.webtype.com/blog/Webtype-serving-95-percent-of-all-desktop-browsers/
newyorker.com: NY Irvin, Times New Roman, Arial
@font-faceNot a Twitter account.
@font-face• Clean
• Doesn’t use Javascript, Flash, images, etc.
• Searchable, selectable
• Accessible
• Standards-compliant
• Fast & efficient
• Awesome
@font-faceNo longer just for web designers comfortable with changing code
@font-faceMany options for everyone.
@font-face Services• Typekit - http://typekit.com/
• Kernest - http://kernest.com/
• Webtype - http://webtype.com/
• FontShop - http://www.fontshop.com/fontlist/n/web_fontfonts/
• Fontdeck - http://fontdeck.com/
• Fontspring - http://www.fontspring.com/
• Typotheque - http://www.typotheque.com/webfonts
• MyFonts - http://new.myfonts.com/info/webfonts/
• Fonts.com Web Fonts - http://webfonts.fonts.com/
• Google Web Fonts - http://www.google.com/webfonts/
• Font Squirrel - http://www.fontsquirrel.com/
How it worksJust 2 Steps:1. <head> link
<link href="<link href="http://kernest.com/guffaw.css" media="screen" rel="stylesheet" type="text/css" />" media="screen" rel="stylesheet" type="text/css" />
2. CSS code
#content h1 {font-weight: normal; font-family: 'Arvo';text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
Results guffawmn.com: Arvo, Arvo Bold
With great power comes great responsibility
Choose your fonts wisely
• Mood is important
• Should be appropriate to purpose
• Avoid overused fonts
Less is more• Don’t use too many fonts
• Stick with 1 or 2
aworkinglibrary.com: Chaparral
Don’t forget the stacks
• Alternative fonts are a must
http://www.awayback.com/revised-font-stack/
www.abookapart.com: Lucida Grande, Trebuchet MS, Georgia
Test. Test. Test.• Display will vary by browser,
platform and device
Get Inspired• Pay attention to what
and how others are doing it
http://nicewebtype.com/fonts/bello-and-proxima-nova/
?s
Mykl Roventine designer of things myklroventine.com @myklroventine
Thankyou!
![Typography · 3. Stanley Morison [English] 1889-1967 • Typographer, type designer • 1923–67: typography consultant to Monotype Corporation*. • 1929–60: typography consultant](https://static.fdocuments.us/doc/165x107/5f0324b57e708231d407c0c3/typography-3-stanley-morison-english-1889-1967-a-typographer-type-designer.jpg)
