SlideShare a Scribd company logo
1 of 152
Download to read offline
TYPOGRAPHY ON THE WEB
                            WORDCAMP RENO 2011


    sara cannon / sara-cannon.com / follow @saracannon
Saturday, June 4, 2011
ABOUT ME



                                              SARA CANNON
                                              Birmingham, AL

                                              @saracannon

                                              slideshare.net/saracannon

                                              sara-cannon.com


                         I love WordPress!
                                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                FONTS USED IN THIS PRESENTATION:

                Chaparral Pro by Adobe
                http://typekit.com/fonts/chaparral-pro




                LEAGUE GOTHIC by e League of Movable Type
                http://typekit.com/fonts/league-gothic




                                                            WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Web Design is 95%
                           Typography

                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB



                         Helvetica Neue




                 Arial




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         e Beautiful Web


                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Liquor Store




                                            FF Meta Serif




Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME
                         http://www. jaxvineyards.com



                              FF Din




                          FF Tisa




Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME
                         http://www.designmadeingermany.de/




                                     FF Din




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         League Gothic


                                             Le Monde Courrier




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Craft your CSS


                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                LINE-HEIGHT




                                                      WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                LINKS: BORER-BOTTOM OR COLOR




                                                  WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                LETTER-SPACING




                                                  WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                FONT-STACK




                                                     WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                OPTIMIZE LEGIBILITY




                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                OPTIMIZE LEGIBILITY




                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Web-Fonts


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                           I Want To Go




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                           Font-Stacks




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         @font-face


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                @FONT-FACE




                                                     WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




             Why shouldn’t I try to use my print
               fonts that I paid so much for?




                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                FONT-HINTING FOR THE SCREEN




                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                              Load Time




                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Check your licensing




                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                                 Hand Code

                           Font Face Kit Generator

                         Typekit Or Other Paid Hosts

                                 Google Api


                                                       WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                @FONT-FACE



                http://paulirish.com/2009/bulletproof-font-face-
                implementation-syntax/




                                                             WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                           from: fontsquirrel.com

                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB



                                 Fontsquirrel.com
                               @font-face Generator

                           WOFF - e Emerging Standard Format.
                           EOT (light) - Targets Internet Explorer.
                   SVG - Targets Webkit Mobile Platforms (iPhone And IPad)




                                                                  WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB
      http://sprungmarker.de/wp-content/uploads/webfont-services/




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         typekit.com


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                           Typekit Has 81
                         Participating Foundries


                                                      WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Typekit Even Has Futura!




                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Test and Tweak


                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                         Check All Browsers




                            Always.
                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




               TYPE CRUNCH!!!
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                DISABLE TYPEKIT JUST FOR IE6

                 - load IE6 Fonts in Style Sheet within Conditional
                 Comments in the Header




                                                                WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                DISABLE FOR ALL OF WINDOWS:

                 User Agent




                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                JUST FIREFOX
                  CSS Hack




                                                     WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                FIREFOX ON ALL OF WINDOWS

                User Agent




                                                  WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                FIREFOX ON WINDOWS XP

                User Agent + CSS Hack




                                                  WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                COMBATING FOUT


                                 Flash

                                 Of

                                 Unstyled

                                 Text



                                                  WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME


                COMBATING FOUT




          blog.typekit.com/2010/05/19/typekit-and-google/

                                                     WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME


                COMBATING FOUT




                code.google.com/apis/webfonts/
                docs/webfont_loader.html


                                                     WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME

                Typekit Default Embed:



                Webfont Loader Embed:




                                                     WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME




                                                     WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME




              github.com/typekit/webfontloader




                                                     WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME




                                                     WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                   Take it Even Further


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                STYLING CONDENSED FONTS:

               Fallback with                 Fallback Without
              Webfont Loader      Normal      Webfont Loaser




                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                USE THOSE STYLE SHEETS!




                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB



                         Even More Custom
                               Type
                          Implementation

                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                             CSS3


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                TEXT-SHADOW




                                                  WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB
                         http://mothereffingtextshadow.com/




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB
                         http://mothereffingtextshadow.com/




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                ROTATE
                http://www.cssplayer.com/blog/date-display-technique-
                with-text-rotation/




                                                              WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                ROTATE




                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         WordPress Plugins


                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                PLUGIN: WP TYPOGRAPHY
                http://wordpress.org/extend/plugins/wp-typography/




                                                          WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                PLUGIN: DROP CAPS
                http://wordpress.org/extend/plugins/drop-caps/

                • override their css with your own
                • works across browsers with not too much tweaking




                                                            WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Neat Type Scripts


                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                SCRIPT: LETTERING.JS
                http://letteringjs.com/

                • Takes each letter in a headline and wraps it in a Span
                • Allows for individual letter manipulation
                • Not recommended for large chunks




                                                                WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                SCRIPT: KERN.JS
                http://www.kernjs.com/

                • Allows in-browser kerning of lettering
                • Generates code for kerned copy
                • Works with Lettering.js




                                                           WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                SCRIPT: FIT TEXT
                http:// ttextjs.com/

                • Stretches headline to t container
                • Useful for uid/responsive layouts




                                                      WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




               Other Must Havesies


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                EXTENSION: WHATFONT
                http://chengyinliu.com/whatfont.html

                • Find out what fonts and their CSS others are using
                • Sharpen your ninja font-detection skillz!
                (yes that is a ninja skill)




                                                              WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                EXTENSION: GOOGLE FONT PREVIEWER
                https://github.com/pamelafox/font-previewer-
                extension

                • Test run a font on your site without coding
                • using web-fonts only from Google’s web-font API




                                                             WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                BOOKMARKLET: MIN
                http://min.artequalswork.com/

                • Shows your site if it was just type
                • Gets rid of all images and leaves just the type layout
                • Analyze Typographic Hierarchy




                                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         e Future?


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                THE FUTURE?
                • Richard Ritter of Fontdeck.com @clanut
                •Open Type
                • Ligatures
                • Multiple Alphabet Sets
                • Multiple Numeric Sets
                • All through CSS Classes!
                                                           WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         What Not To Do


                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Style Your Website
                           With Paparyus
                  (Sorry Every Mediterranean Restaurant Website Ever)

                                                             WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                  Use Non-Web-Licensed Fonts:


                         Archer or GOTHAM

                              (Sorry H&FJ Luvahz)

                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB



                   Never EVER Use The
                   Infamous Comic Sans
           (It doesn’t matter that you think it’s good for wire-framing)



                                                            WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                  It’s STILL Not Cool
                         EVEN If You Think
                           It Is IRONIC
                                 (Sorry Jorbin)


                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         e Infamous
                          Eye Bleed

                                                  WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




      EYE BLEED!!!
           AHHH THE BURNING!
                         FREE SET OF STEAK KNIVES!!!

Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                  e Even More Infamous
                       EYE BLEED


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




      EYE BLEED!!!
       AHHH THE BURNING!
             FREE SET OF STEAK KNIVES!!!
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         What To Do


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                   Find An Appropriate Substitution For:
                              GOTHAM

                                 By Using
                          PROXIMA NOVA

                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                         Check All Browsers




                            Always.
                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Create A Typographic
                           Style Guide For
                             Your eme

                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB
                         http://twentytendemo.wordpress.com/




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB
                     http://twentyelevendemo.wordpress.com/




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                     Follow e Industry


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                           blog.typekit.com




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                         ilovetypography.com




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                           typographica.org




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                          webtypography.net




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Follow e Tweets


                                                    WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB


                FOLLOW THE TWEETS
                @JasonSantaMaria          @fontsquirrel

                @veen                     @typekit

                @brucel                   @h_

                @ilovetypography          @clagnut

                @jessicahische            @fchimero



                                                          WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Find Inspiration


                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                            siteinspire.net




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                         typographyserved.com




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                         ministryoftype.co.uk




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                             dribbble.com




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                         wordpress.org/showcase




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Find Cool Fonts


                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         P22 UNDERGROUND
                                 by: P22


                   http://typekit.com/fonts/p22-underground
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                                   Adelle
                            by: Type Together


                         http://typekit.com/fonts/adelle-web
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         http://typekit.com/fonts/ff-tisa-web-pro
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                          “life is short, art is long”



                         Typography is
                          Everything.

                                                         WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB

                              ank You!



      sara cannon / sara-cannon.com / follow @saracannon
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         Type Foundries


                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                             H&FJ


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB



                             Archer




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB



                          GOTHAM




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                              Veer


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                             Adobe


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                         e League Of
                         Moveable Type

                                                   WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                      Open Source!
                   O (open Font License)
                 theleagueofmoveabletype.com/manifesto


                                                  WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                           Exljbris


                                                 WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




                          Lost Type

                             Pay What You Want
                         by Riely Cran & Tyler Galpin

                                                        WORDCAMP RENO
Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB




Saturday, June 4, 2011

More Related Content

Viewers also liked

Special Photo Effects
Special Photo EffectsSpecial Photo Effects
Special Photo EffectsMarco Belzoni
 
Human Action Recognition Based on Spacio-temporal features
Human Action Recognition Based on Spacio-temporal featuresHuman Action Recognition Based on Spacio-temporal features
Human Action Recognition Based on Spacio-temporal featuresnikhilus85
 
GLSL Shading with OpenSceneGraph
GLSL Shading with OpenSceneGraphGLSL Shading with OpenSceneGraph
GLSL Shading with OpenSceneGraphMike Weiblen
 
Radiosity algorithm
Radiosity algorithmRadiosity algorithm
Radiosity algorithmHung Sun
 
Interactive Graphic Storytelling: “How the Internet Impacts the Graphic Novel”
Interactive Graphic Storytelling: “How the Internet Impacts the Graphic Novel” Interactive Graphic Storytelling: “How the Internet Impacts the Graphic Novel”
Interactive Graphic Storytelling: “How the Internet Impacts the Graphic Novel” Shane Tilton
 
Steel monkeys: Unity3D глазами программиста графики
Steel monkeys: Unity3D глазами программиста графикиSteel monkeys: Unity3D глазами программиста графики
Steel monkeys: Unity3D глазами программиста графикиDevGAMM Conference
 
Woden 2: Developing a modern 3D graphics engine in Smalltalk
Woden 2: Developing a modern 3D graphics engine in SmalltalkWoden 2: Developing a modern 3D graphics engine in Smalltalk
Woden 2: Developing a modern 3D graphics engine in SmalltalkESUG
 
Web Typography, A Long Dark
Web Typography, A Long Dark Web Typography, A Long Dark
Web Typography, A Long Dark Ryan LaBouve
 
Quadtree In Game
Quadtree In GameQuadtree In Game
Quadtree In GameDương Nyl
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography FundamentalsSteve Hickey
 
What is 3 d modeling unit 66
What is 3 d modeling   unit 66What is 3 d modeling   unit 66
What is 3 d modeling unit 66Richard Marshall
 
Orthographic projection
Orthographic projectionOrthographic projection
Orthographic projectionlaura_gerold
 
Building a DIY 3D Scanner
Building a DIY 3D ScannerBuilding a DIY 3D Scanner
Building a DIY 3D ScannerMatthewShotton
 
Chapter 11 biotechnology by mohanbio
Chapter 11 biotechnology by mohanbioChapter 11 biotechnology by mohanbio
Chapter 11 biotechnology by mohanbiomohan bio
 

Viewers also liked (19)

Special Photo Effects
Special Photo EffectsSpecial Photo Effects
Special Photo Effects
 
Human Action Recognition Based on Spacio-temporal features
Human Action Recognition Based on Spacio-temporal featuresHuman Action Recognition Based on Spacio-temporal features
Human Action Recognition Based on Spacio-temporal features
 
GLSL Shading with OpenSceneGraph
GLSL Shading with OpenSceneGraphGLSL Shading with OpenSceneGraph
GLSL Shading with OpenSceneGraph
 
Radiosity algorithm
Radiosity algorithmRadiosity algorithm
Radiosity algorithm
 
Interactive Graphic Storytelling: “How the Internet Impacts the Graphic Novel”
Interactive Graphic Storytelling: “How the Internet Impacts the Graphic Novel” Interactive Graphic Storytelling: “How the Internet Impacts the Graphic Novel”
Interactive Graphic Storytelling: “How the Internet Impacts the Graphic Novel”
 
Steel monkeys: Unity3D глазами программиста графики
Steel monkeys: Unity3D глазами программиста графикиSteel monkeys: Unity3D глазами программиста графики
Steel monkeys: Unity3D глазами программиста графики
 
Better Typography
Better TypographyBetter Typography
Better Typography
 
Woden 2: Developing a modern 3D graphics engine in Smalltalk
Woden 2: Developing a modern 3D graphics engine in SmalltalkWoden 2: Developing a modern 3D graphics engine in Smalltalk
Woden 2: Developing a modern 3D graphics engine in Smalltalk
 
Shells
ShellsShells
Shells
 
Web Typography, A Long Dark
Web Typography, A Long Dark Web Typography, A Long Dark
Web Typography, A Long Dark
 
Quadtree In Game
Quadtree In GameQuadtree In Game
Quadtree In Game
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography Fundamentals
 
What is 3 d modeling unit 66
What is 3 d modeling   unit 66What is 3 d modeling   unit 66
What is 3 d modeling unit 66
 
Orthographic projection
Orthographic projectionOrthographic projection
Orthographic projection
 
Building a DIY 3D Scanner
Building a DIY 3D ScannerBuilding a DIY 3D Scanner
Building a DIY 3D Scanner
 
Chapter 11 biotechnology by mohanbio
Chapter 11 biotechnology by mohanbioChapter 11 biotechnology by mohanbio
Chapter 11 biotechnology by mohanbio
 
3D internet
3D  internet3D  internet
3D internet
 
3D scanner using kinect
3D scanner using kinect3D scanner using kinect
3D scanner using kinect
 
3D Laser Scanning
3D Laser Scanning 3D Laser Scanning
3D Laser Scanning
 

More from Sara Cannon

Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source CreativitySara Cannon
 
Design Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessDesign Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessSara Cannon
 
Sara cannon pushing the creative limit
Sara cannon   pushing the creative limitSara cannon   pushing the creative limit
Sara cannon pushing the creative limitSara Cannon
 
Learning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftLearning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftSara Cannon
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonSara Cannon
 
WordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisWordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisSara Cannon
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSFSara Cannon
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web DesignSara Cannon
 
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Sara Cannon
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSara Cannon
 
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2Sara Cannon
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNSara Cannon
 
Designer vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressDesigner vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressSara Cannon
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern WebSara Cannon
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 
Font Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographyFont Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographySara Cannon
 
Design Swoon - Visual Trends & WordPress
Design Swoon - Visual Trends  & WordPressDesign Swoon - Visual Trends  & WordPress
Design Swoon - Visual Trends & WordPressSara Cannon
 
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonUI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonSara Cannon
 

More from Sara Cannon (20)

Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source Creativity
 
Design Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessDesign Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To Success
 
Sara cannon pushing the creative limit
Sara cannon   pushing the creative limitSara cannon   pushing the creative limit
Sara cannon pushing the creative limit
 
Learning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftLearning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your Craft
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp London
 
WordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisWordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. Louis
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web Design
 
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
 
Smart Design
Smart Design Smart Design
Smart Design
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
 
IconFonts
IconFontsIconFonts
IconFonts
 
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
 
Designer vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressDesigner vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPress
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern Web
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Font Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographyFont Swoon - Advanced Web Typography
Font Swoon - Advanced Web Typography
 
Design Swoon - Visual Trends & WordPress
Design Swoon - Visual Trends  & WordPressDesign Swoon - Visual Trends  & WordPress
Design Swoon - Visual Trends & WordPress
 
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonUI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
 

Recently uploaded

Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...itnewsafrica
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 

Recently uploaded (20)

Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 

Web Design is 95% Typography: Tips for Using Fonts on the Web

  • 1. TYPOGRAPHY ON THE WEB WORDCAMP RENO 2011 sara cannon / sara-cannon.com / follow @saracannon Saturday, June 4, 2011
  • 2. ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com I love WordPress! WORDCAMP RENO Saturday, June 4, 2011
  • 3. TYPOGRAPHY ON THE WEB FONTS USED IN THIS PRESENTATION: Chaparral Pro by Adobe http://typekit.com/fonts/chaparral-pro LEAGUE GOTHIC by e League of Movable Type http://typekit.com/fonts/league-gothic WORDCAMP RENO Saturday, June 4, 2011
  • 4. TYPOGRAPHY ON THE WEB Web Design is 95% Typography WORDCAMP RENO Saturday, June 4, 2011
  • 5. TYPOGRAPHY ON THE WEB Helvetica Neue Arial Saturday, June 4, 2011
  • 6. TYPOGRAPHY ON THE WEB e Beautiful Web WORDCAMP RENO Saturday, June 4, 2011
  • 7. TYPOGRAPHY ON THE WEB Liquor Store FF Meta Serif Saturday, June 4, 2011
  • 8. TYPOGRAPHY AND YOUR THEME http://www. jaxvineyards.com FF Din FF Tisa Saturday, June 4, 2011
  • 9. TYPOGRAPHY AND YOUR THEME http://www.designmadeingermany.de/ FF Din Saturday, June 4, 2011
  • 10. TYPOGRAPHY ON THE WEB League Gothic Le Monde Courrier Saturday, June 4, 2011
  • 11. TYPOGRAPHY ON THE WEB Craft your CSS WORDCAMP RENO Saturday, June 4, 2011
  • 12. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 13. TYPOGRAPHY ON THE WEB LINE-HEIGHT WORDCAMP RENO Saturday, June 4, 2011
  • 14. TYPOGRAPHY AND YOUR THEME Saturday, June 4, 2011
  • 15. TYPOGRAPHY ON THE WEB LINKS: BORER-BOTTOM OR COLOR WORDCAMP RENO Saturday, June 4, 2011
  • 16. TYPOGRAPHY AND YOUR THEME Saturday, June 4, 2011
  • 17. TYPOGRAPHY ON THE WEB LETTER-SPACING WORDCAMP RENO Saturday, June 4, 2011
  • 18. TYPOGRAPHY ON THE WEB FONT-STACK WORDCAMP RENO Saturday, June 4, 2011
  • 19. TYPOGRAPHY ON THE WEB OPTIMIZE LEGIBILITY WORDCAMP RENO Saturday, June 4, 2011
  • 20. TYPOGRAPHY ON THE WEB OPTIMIZE LEGIBILITY WORDCAMP RENO Saturday, June 4, 2011
  • 21. TYPOGRAPHY ON THE WEB Web-Fonts WORDCAMP RENO Saturday, June 4, 2011
  • 22. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 23. TYPOGRAPHY ON THE WEB I Want To Go Saturday, June 4, 2011
  • 24. TYPOGRAPHY ON THE WEB Font-Stacks Saturday, June 4, 2011
  • 25. TYPOGRAPHY ON THE WEB @font-face WORDCAMP RENO Saturday, June 4, 2011
  • 26. TYPOGRAPHY ON THE WEB @FONT-FACE WORDCAMP RENO Saturday, June 4, 2011
  • 27. TYPOGRAPHY ON THE WEB Why shouldn’t I try to use my print fonts that I paid so much for? WORDCAMP RENO Saturday, June 4, 2011
  • 28. TYPOGRAPHY ON THE WEB FONT-HINTING FOR THE SCREEN WORDCAMP RENO Saturday, June 4, 2011
  • 29. TYPOGRAPHY ON THE WEB Load Time WORDCAMP RENO Saturday, June 4, 2011
  • 30. TYPOGRAPHY ON THE WEB Check your licensing WORDCAMP RENO Saturday, June 4, 2011
  • 31. TYPOGRAPHY ON THE WEB Hand Code Font Face Kit Generator Typekit Or Other Paid Hosts Google Api WORDCAMP RENO Saturday, June 4, 2011
  • 32. TYPOGRAPHY ON THE WEB @FONT-FACE http://paulirish.com/2009/bulletproof-font-face- implementation-syntax/ WORDCAMP RENO Saturday, June 4, 2011
  • 33. TYPOGRAPHY ON THE WEB from: fontsquirrel.com WORDCAMP RENO Saturday, June 4, 2011
  • 34. TYPOGRAPHY ON THE WEB Fontsquirrel.com @font-face Generator WOFF - e Emerging Standard Format. EOT (light) - Targets Internet Explorer. SVG - Targets Webkit Mobile Platforms (iPhone And IPad) WORDCAMP RENO Saturday, June 4, 2011
  • 35. TYPOGRAPHY ON THE WEB http://sprungmarker.de/wp-content/uploads/webfont-services/ Saturday, June 4, 2011
  • 36. TYPOGRAPHY ON THE WEB typekit.com WORDCAMP RENO Saturday, June 4, 2011
  • 37. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 38. TYPOGRAPHY ON THE WEB Typekit Has 81 Participating Foundries WORDCAMP RENO Saturday, June 4, 2011
  • 39. TYPOGRAPHY ON THE WEB Typekit Even Has Futura! WORDCAMP RENO Saturday, June 4, 2011
  • 40. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 41. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 42. TYPOGRAPHY ON THE WEB Test and Tweak WORDCAMP RENO Saturday, June 4, 2011
  • 43. TYPOGRAPHY ON THE WEB Check All Browsers Always. WORDCAMP RENO Saturday, June 4, 2011
  • 44. TYPOGRAPHY ON THE WEB TYPE CRUNCH!!! Saturday, June 4, 2011
  • 45. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 46. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 47. TYPOGRAPHY ON THE WEB DISABLE TYPEKIT JUST FOR IE6 - load IE6 Fonts in Style Sheet within Conditional Comments in the Header WORDCAMP RENO Saturday, June 4, 2011
  • 48. TYPOGRAPHY ON THE WEB DISABLE FOR ALL OF WINDOWS: User Agent WORDCAMP RENO Saturday, June 4, 2011
  • 49. TYPOGRAPHY ON THE WEB JUST FIREFOX CSS Hack WORDCAMP RENO Saturday, June 4, 2011
  • 50. TYPOGRAPHY ON THE WEB FIREFOX ON ALL OF WINDOWS User Agent WORDCAMP RENO Saturday, June 4, 2011
  • 51. TYPOGRAPHY ON THE WEB FIREFOX ON WINDOWS XP User Agent + CSS Hack WORDCAMP RENO Saturday, June 4, 2011
  • 52. TYPOGRAPHY ON THE WEB COMBATING FOUT Flash Of Unstyled Text WORDCAMP RENO Saturday, June 4, 2011
  • 53. TYPOGRAPHY AND YOUR THEME COMBATING FOUT blog.typekit.com/2010/05/19/typekit-and-google/ WORDCAMP RENO Saturday, June 4, 2011
  • 54. TYPOGRAPHY AND YOUR THEME COMBATING FOUT code.google.com/apis/webfonts/ docs/webfont_loader.html WORDCAMP RENO Saturday, June 4, 2011
  • 55. TYPOGRAPHY AND YOUR THEME Typekit Default Embed: Webfont Loader Embed: WORDCAMP RENO Saturday, June 4, 2011
  • 56. TYPOGRAPHY AND YOUR THEME WORDCAMP RENO Saturday, June 4, 2011
  • 57. TYPOGRAPHY AND YOUR THEME github.com/typekit/webfontloader WORDCAMP RENO Saturday, June 4, 2011
  • 58. TYPOGRAPHY AND YOUR THEME WORDCAMP RENO Saturday, June 4, 2011
  • 59. TYPOGRAPHY ON THE WEB Take it Even Further WORDCAMP RENO Saturday, June 4, 2011
  • 60. TYPOGRAPHY ON THE WEB STYLING CONDENSED FONTS: Fallback with Fallback Without Webfont Loader Normal Webfont Loaser WORDCAMP RENO Saturday, June 4, 2011
  • 61. TYPOGRAPHY ON THE WEB USE THOSE STYLE SHEETS! WORDCAMP RENO Saturday, June 4, 2011
  • 62. TYPOGRAPHY ON THE WEB Even More Custom Type Implementation WORDCAMP RENO Saturday, June 4, 2011
  • 63. TYPOGRAPHY ON THE WEB CSS3 WORDCAMP RENO Saturday, June 4, 2011
  • 64. TYPOGRAPHY ON THE WEB TEXT-SHADOW WORDCAMP RENO Saturday, June 4, 2011
  • 65. TYPOGRAPHY ON THE WEB http://mothereffingtextshadow.com/ Saturday, June 4, 2011
  • 66. TYPOGRAPHY ON THE WEB http://mothereffingtextshadow.com/ Saturday, June 4, 2011
  • 67. TYPOGRAPHY ON THE WEB ROTATE http://www.cssplayer.com/blog/date-display-technique- with-text-rotation/ WORDCAMP RENO Saturday, June 4, 2011
  • 68. TYPOGRAPHY ON THE WEB ROTATE WORDCAMP RENO Saturday, June 4, 2011
  • 69. TYPOGRAPHY ON THE WEB WordPress Plugins WORDCAMP RENO Saturday, June 4, 2011
  • 70. TYPOGRAPHY ON THE WEB PLUGIN: WP TYPOGRAPHY http://wordpress.org/extend/plugins/wp-typography/ WORDCAMP RENO Saturday, June 4, 2011
  • 71. TYPOGRAPHY ON THE WEB PLUGIN: DROP CAPS http://wordpress.org/extend/plugins/drop-caps/ • override their css with your own • works across browsers with not too much tweaking WORDCAMP RENO Saturday, June 4, 2011
  • 72. TYPOGRAPHY ON THE WEB Neat Type Scripts WORDCAMP RENO Saturday, June 4, 2011
  • 73. TYPOGRAPHY ON THE WEB SCRIPT: LETTERING.JS http://letteringjs.com/ • Takes each letter in a headline and wraps it in a Span • Allows for individual letter manipulation • Not recommended for large chunks WORDCAMP RENO Saturday, June 4, 2011
  • 74. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 75. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 76. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 77. TYPOGRAPHY ON THE WEB SCRIPT: KERN.JS http://www.kernjs.com/ • Allows in-browser kerning of lettering • Generates code for kerned copy • Works with Lettering.js WORDCAMP RENO Saturday, June 4, 2011
  • 78. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 79. TYPOGRAPHY ON THE WEB SCRIPT: FIT TEXT http:// ttextjs.com/ • Stretches headline to t container • Useful for uid/responsive layouts WORDCAMP RENO Saturday, June 4, 2011
  • 80. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 81. TYPOGRAPHY ON THE WEB Other Must Havesies WORDCAMP RENO Saturday, June 4, 2011
  • 82. TYPOGRAPHY ON THE WEB EXTENSION: WHATFONT http://chengyinliu.com/whatfont.html • Find out what fonts and their CSS others are using • Sharpen your ninja font-detection skillz! (yes that is a ninja skill) WORDCAMP RENO Saturday, June 4, 2011
  • 83. TYPOGRAPHY ON THE WEB WORDCAMP RENO Saturday, June 4, 2011
  • 84. TYPOGRAPHY ON THE WEB EXTENSION: GOOGLE FONT PREVIEWER https://github.com/pamelafox/font-previewer- extension • Test run a font on your site without coding • using web-fonts only from Google’s web-font API WORDCAMP RENO Saturday, June 4, 2011
  • 85. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 86. TYPOGRAPHY ON THE WEB BOOKMARKLET: MIN http://min.artequalswork.com/ • Shows your site if it was just type • Gets rid of all images and leaves just the type layout • Analyze Typographic Hierarchy WORDCAMP RENO Saturday, June 4, 2011
  • 87. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 88. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 89. TYPOGRAPHY ON THE WEB e Future? WORDCAMP RENO Saturday, June 4, 2011
  • 90. TYPOGRAPHY ON THE WEB THE FUTURE? • Richard Ritter of Fontdeck.com @clanut •Open Type • Ligatures • Multiple Alphabet Sets • Multiple Numeric Sets • All through CSS Classes! WORDCAMP RENO Saturday, June 4, 2011
  • 91. TYPOGRAPHY ON THE WEB What Not To Do WORDCAMP RENO Saturday, June 4, 2011
  • 92. TYPOGRAPHY ON THE WEB Style Your Website With Paparyus (Sorry Every Mediterranean Restaurant Website Ever) WORDCAMP RENO Saturday, June 4, 2011
  • 93. TYPOGRAPHY ON THE WEB Use Non-Web-Licensed Fonts: Archer or GOTHAM (Sorry H&FJ Luvahz) WORDCAMP RENO Saturday, June 4, 2011
  • 94. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 95. TYPOGRAPHY ON THE WEB Never EVER Use The Infamous Comic Sans (It doesn’t matter that you think it’s good for wire-framing) WORDCAMP RENO Saturday, June 4, 2011
  • 96. TYPOGRAPHY ON THE WEB It’s STILL Not Cool EVEN If You Think It Is IRONIC (Sorry Jorbin) WORDCAMP RENO Saturday, June 4, 2011
  • 97. TYPOGRAPHY ON THE WEB e Infamous Eye Bleed WORDCAMP RENO Saturday, June 4, 2011
  • 98. TYPOGRAPHY ON THE WEB EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!! Saturday, June 4, 2011
  • 99. TYPOGRAPHY ON THE WEB e Even More Infamous EYE BLEED WORDCAMP RENO Saturday, June 4, 2011
  • 100. TYPOGRAPHY ON THE WEB EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!! Saturday, June 4, 2011
  • 101. TYPOGRAPHY ON THE WEB What To Do WORDCAMP RENO Saturday, June 4, 2011
  • 102. TYPOGRAPHY ON THE WEB Find An Appropriate Substitution For: GOTHAM By Using PROXIMA NOVA WORDCAMP RENO Saturday, June 4, 2011
  • 103. TYPOGRAPHY ON THE WEB Check All Browsers Always. WORDCAMP RENO Saturday, June 4, 2011
  • 104. TYPOGRAPHY ON THE WEB Create A Typographic Style Guide For Your eme WORDCAMP RENO Saturday, June 4, 2011
  • 105. TYPOGRAPHY ON THE WEB http://twentytendemo.wordpress.com/ Saturday, June 4, 2011
  • 106. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 107. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 108. TYPOGRAPHY ON THE WEB http://twentyelevendemo.wordpress.com/ Saturday, June 4, 2011
  • 109. TYPOGRAPHY ON THE WEB Follow e Industry WORDCAMP RENO Saturday, June 4, 2011
  • 110. TYPOGRAPHY ON THE WEB blog.typekit.com Saturday, June 4, 2011
  • 111. TYPOGRAPHY ON THE WEB ilovetypography.com Saturday, June 4, 2011
  • 112. TYPOGRAPHY ON THE WEB typographica.org Saturday, June 4, 2011
  • 113. TYPOGRAPHY ON THE WEB webtypography.net Saturday, June 4, 2011
  • 114. TYPOGRAPHY ON THE WEB Follow e Tweets WORDCAMP RENO Saturday, June 4, 2011
  • 115. TYPOGRAPHY ON THE WEB FOLLOW THE TWEETS @JasonSantaMaria @fontsquirrel @veen @typekit @brucel @h_ @ilovetypography @clagnut @jessicahische @fchimero WORDCAMP RENO Saturday, June 4, 2011
  • 116. TYPOGRAPHY ON THE WEB Find Inspiration WORDCAMP RENO Saturday, June 4, 2011
  • 117. TYPOGRAPHY ON THE WEB siteinspire.net Saturday, June 4, 2011
  • 118. TYPOGRAPHY ON THE WEB typographyserved.com Saturday, June 4, 2011
  • 119. TYPOGRAPHY ON THE WEB ministryoftype.co.uk Saturday, June 4, 2011
  • 120. TYPOGRAPHY ON THE WEB dribbble.com Saturday, June 4, 2011
  • 121. TYPOGRAPHY ON THE WEB wordpress.org/showcase Saturday, June 4, 2011
  • 122. TYPOGRAPHY ON THE WEB Find Cool Fonts WORDCAMP RENO Saturday, June 4, 2011
  • 123. TYPOGRAPHY ON THE WEB P22 UNDERGROUND by: P22 http://typekit.com/fonts/p22-underground Saturday, June 4, 2011
  • 124. TYPOGRAPHY ON THE WEB Adelle by: Type Together http://typekit.com/fonts/adelle-web Saturday, June 4, 2011
  • 125. TYPOGRAPHY ON THE WEB http://typekit.com/fonts/ff-tisa-web-pro Saturday, June 4, 2011
  • 126. TYPOGRAPHY ON THE WEB “life is short, art is long” Typography is Everything. WORDCAMP RENO Saturday, June 4, 2011
  • 127. TYPOGRAPHY ON THE WEB ank You! sara cannon / sara-cannon.com / follow @saracannon Saturday, June 4, 2011
  • 128. TYPOGRAPHY ON THE WEB Type Foundries WORDCAMP RENO Saturday, June 4, 2011
  • 129. TYPOGRAPHY ON THE WEB H&FJ WORDCAMP RENO Saturday, June 4, 2011
  • 130. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 131. TYPOGRAPHY ON THE WEB Archer Saturday, June 4, 2011
  • 132. TYPOGRAPHY ON THE WEB GOTHAM Saturday, June 4, 2011
  • 133. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 134. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 135. TYPOGRAPHY ON THE WEB Veer WORDCAMP RENO Saturday, June 4, 2011
  • 136. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 137. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 138. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 139. TYPOGRAPHY ON THE WEB Adobe WORDCAMP RENO Saturday, June 4, 2011
  • 140. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 141. TYPOGRAPHY ON THE WEB e League Of Moveable Type WORDCAMP RENO Saturday, June 4, 2011
  • 142. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 143. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 144. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 145. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 146. TYPOGRAPHY ON THE WEB Open Source! O (open Font License) theleagueofmoveabletype.com/manifesto WORDCAMP RENO Saturday, June 4, 2011
  • 147. TYPOGRAPHY ON THE WEB Exljbris WORDCAMP RENO Saturday, June 4, 2011
  • 148. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 149. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 150. TYPOGRAPHY ON THE WEB Lost Type Pay What You Want by Riely Cran & Tyler Galpin WORDCAMP RENO Saturday, June 4, 2011
  • 151. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  • 152. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011