SlideShare une entreprise Scribd logo
1  sur  58
Télécharger pour lire hors ligne
WEB TYPOGRAPHY
                                         &




                         CSS3
                         with Sean Gaffney and Matthew Smith




Monday, March 22, 2010                                         1
Sean Gaffney                            seangaffney.cc
                                                    @seangaffney


                          Freelancing Developer working with
                          designers and agencies to make sure
                          details get communicated clearly
                          through technology on the web.




Monday, March 22, 2010                                              2
Matthew Smith                         squaredeye.com
                                                   @squaredeye


                         Principal at Squared Eye
                         Creative Director & Designer

                         Squared Eye is focused on detailed
                         design that springs from a rich
                         understanding of our client’s business
                         goals and the communication strategies
                         needed to make them happen.




Monday, March 22, 2010                                            3
Web Typography & CSS3
           @font-face
           Text-Shadow
           MultiColumn Text




Monday, March 22, 2010             4
@font-face
           What is it?
     •     Simple technique for allowing designers to use their own
           fonts for display on the web, eliminating the constrictions
           that currently exist.

     •     Introduced in CSS2, removed from the spec in CSS2.1,
           reintroduced in CSS3




Monday, March 22, 2010                                                   5
@font-face
           Pros
     •     More variety in fonts on the web! Yeehaw!

     •     Better adherence to style guidelines and branding
           emphasis for groups that use typography as a major part
           of their branding.

     •     Dynamic, selectable, printable text

     •     Implementation is simple (compared to sIFR, Image
           Replacement, and Cufón)



Monday, March 22, 2010                                               6
@font-face
           Cons
     •     Easy to Abuse. Huge font libraries don’t make good
           designs, good designers make good designs.

     •     End User License Agreements (EULAs) can be a difficult
           hurdle for commercial fonts.

     •     Flash of Unstyled Text (FOUT)

     •     Rendering Issues on Microsoft Windows and Internet
           Explorer due to font-aliasing techniques.



Monday, March 22, 2010                                              7
@font-face
           Design Considerations
     •     Access to more fonts increases the need for us all to learn
           typography, and web typography.




Monday, March 22, 2010                                                   8
@font-face                                    http://seedconference.com



           Design Considerations
     •     Great web typography is possible with the old guard of core fonts.




Monday, March 22, 2010                                                               9
@font-face
           Learn Typography




Monday, March 22, 2010        10
@font-face
           Learn Typography




                         http://webtypography.net/




Monday, March 22, 2010                               11
@font-face
           Licensing
     •     Type Design is incredibly complicated and difficult. It is
           worth paying for a great typeface or font.

     •     The EULA from some foundries allows for embedding

     •     The EULA from other foundries “technically” does not
           allow for even sIFR embedding.

     •     The file referenced when using @font-face is easily found
           on the server. If its free, no big deal. If it’s commercial then
           you’re breaking your EULA.

Monday, March 22, 2010                                                        12
@font-face
           What’s changing in the marketplace?
     •     Businesses like TypeKit, FontDeck, and Typotheque have
           created obfuscation techniques and relationships with
           foundries to bring commercial fonts to the web.

     •     Sites like Font Squirrel are popping up to showcase the
           best of the free fonts for use with @font-face.

     •     More businesses like Fontspring will arise to help strong
           small and middle range type designers and foundries
           provide web designers with great fonts, with flexible
           licenses at competitive prices.

Monday, March 22, 2010                                                 13
@font-face
           What’s changing in the technology?
     •     There are currently a host of type formats for the web
           including TrueType, OpenType, EOT, SVG, and WOFF.

     •     WOFF (Web Open Font Format) is a new web font format
           developed by Mozilla in concert with Type Supply,
           LettError, and other organizations.

     •     WOFF is a flexible format which allows for better font-
           hinting and metadata attached to the font for different
           systems, languages, browsers, etc.


Monday, March 22, 2010                                               14
@font-face
           What’s changing in the technology?
     •     WOFF is a web only format, unable to be used on the
           desktop, and is therefore more appealing to the font
           foundries as a viable format for commercial fonts.

     •     WOFF compresses the font data so that its less likely to
           cause FOUT (Flash Of Unstyled Text) while web files are
           downloading.




Monday, March 22, 2010                                                15
@font-face
           Implementation Techniques
     •     Commercial Font-serving Sites:
           Typekit, Fontdeck, Typotheque, Webtype, Kernest

     •     Free (Font Squirrel)

     •     Mixed Use (Fontspring)

     •     Roll Your Own Obfuscation




Monday, March 22, 2010                                       16
@font-face
           Browser Compatibility
     •     Firefox 3.5+ (TTF, OTF) since 3.6+ (WOFF)

     •     Safari 3.1+ (TTF, OTF)

     •     Chrome 4+ (TTF, OTF, SVG)

     •     Opera 10+ (TTF, OTF, SVG)

     •     IE 4+ (EOT)

     •     MobileWebkit (SVG)


Monday, March 22, 2010                                 17
@font-face
           Code
            @font-face {
              font-family: ‘GnuolaneRegular’;
              src: url(‘gnuolane_reg.ttf’) format(‘truetype’);
            }

            h2 {
              font-family: ‘GnuolaneRegular’, Impact, sans-serif;
            }




Monday, March 22, 2010                                              18
@font-face
           Code - “Bulletproof”
            @font-face {
              font-family: 'GnuolaneReg';
              src: url('gnuolane_reg.eot');
              src: local('GnuolaneReg'), local('GnuolaneReg Web'),
               url("gnuolane_reg.woff") format("woff"),
               url("gnuolane_reg.otf") format("opentype"),
               url("gnuolane_reg.svg#gnuolane") format("svg");
            }



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




Monday, March 22, 2010                                                              19
@font-face
           Optimization
     •     Javascript and CSS techniques exist to minimize FOUT

     •     Do not place SCRIPT tags above @font-face declaration (IE
           will not display page content until the font file is loaded)

     •     Gzipping fonts can result in up to 70% savings in filesize
           (all formats except WOFF, which has built-in compression)

     •     Set far-future expires headers for font files




Monday, March 22, 2010                                                    20
@font-face
           Rendering
     •     Apple and Microsoft have different philosophies regarding
           the way text should be rendered on the screen.

     •     Fonts rendered by OS X should all appear very smooth.

     •     Fonts rendered by Windows will vary based on the hinting
           of the type and the rendering engine being used (none vs.
           ClearType vs. DirectWrite). TrueType fonts appear
           smoother. FontFont branded fonts also have better hinting
           for Windows.


Monday, March 22, 2010                                                 21
@font-face
           Testing
     •     Internet Explorer without ClearType




Monday, March 22, 2010                           22
@font-face      http://www.timoni.org



           Example Usage




Monday, March 22, 2010                             23
@font-face      http://sxsw.beercamp.com



           Example Usage




Monday, March 22, 2010                                24
@font-face      http://elliotjaystocks.com



           Example Usage




Monday, March 22, 2010                                  25
@font-face      http://forabeautifulweb.com



           Example Usage




Monday, March 22, 2010                                   26
@font-face
           Resources
     •     Font as Service
           Typekit : http://typekit.com
           FontDeck : http://fontdeck.com (coming soon)
           FontSpring : http://fontspring.com
           Typotheque : http://typotheque.com
           Webtype : http://webtype.com (coming soon)
           Kernest : http://kernest.com


     •     Free @font-face sites
           FontSquirrel : http://fontsquirrel.com
           League of Moveable Type : http://www.theleagueofmoveabletype.com/


     •     @font-face generators
           FontSquirrel : http://www.fontsquirrel.com/fontface/generator




Monday, March 22, 2010                                                         27
@font-face
           Resources
     •     How to Use @font-face
           http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/


     •     GZIP your @font-face files
           http://www.phpied.com/gzip-your-font-face-files/


     •     Font Hinting and Anti-Aliasing
           http://szafranek.net/works/articles/font-smoothing-explained/
           http://readableweb.com/font-hinting-explained-by-a-font-design-master/
           http://www.thomasphinney.com/2009/12/browser-choice-vs-font-rendering/


     •     Recommended Reading
           http://webfonts.info/
           Lots of @font-face info, including a list of @font-face-ready fonts


Monday, March 22, 2010                                                              28
CSS Text-Shadow
           What is it?
     •     text-shadow is a simple technique of adding a dropshadow
           or highlight to text in the web page.

     •     It can be used to create a lighting effect or a to create
           dimension through use of multiple text-shadows.




Monday, March 22, 2010                                                 29
CSS Text-Shadow
           Pros
     •     Text-shadows can be used to create great looking text
           effects to enhance the style of your typography.

     •     In some cases text-shadow can increase the legibility of
           text by increasing the contrast of the type against the
           background.

     •     If your design requires a letter-press feel, you can easily
           achieve this effect using text-shadow.




Monday, March 22, 2010                                                   30
CSS Text-Shadow
           Cons
     •     Not supported in Internet Explorer (scheduled for support
           in IE9 with many other CSS3 features).

     •     If abused, can make text less legible.




Monday, March 22, 2010                                                 31
CSS Text-Shadow
           Design Considerations
     •     text-shadow, like other type treatments for the web is
           easily abused. Be gentle and subtle, don’t overdue it.




Monday, March 22, 2010                                              32
CSS Text-Shadow
           Design Considerations
     •     Increasing readability

                                    Rogie King works out a nice
                                    text-shadow hack to increase
                                    readability of text in Safari for
                                    light colored text on dark
                                    backgrounds.

                                    http://www.komodomedia.com/blog/2009/03/safari-
                                    text-shadow-anti-aliasing-css-hack/




Monday, March 22, 2010                                                                33
CSS Text-Shadow
           Code
            h2 {
              text-shadow: x-offset y-offset blur-radius #000;
            }

            h2 {
              text-shadow: 1px 1px 5px #000;
            }




Monday, March 22, 2010                                           34
CSS Text-Shadow
           Code - Multiple Shadows
            p{
              margin: 0 0 1em;
              font-size: 60px;
              font-weight: bold;
              color: #ccc;
              letter-spacing: 1px;
              text-shadow: -1px -1px 0px #333, 1px 1px 1px #fff;
            }




Monday, March 22, 2010                                             35
CSS Text-Shadow
           Code - Multiple Shadows


                                     60px

                                     32px


                                     14px



Monday, March 22, 2010                      36
CSS Text-Shadow
           Browser Compatibility
     •     Firefox 3.1+

     •     Safari 3+ (4+ has multiple text-shadow support)

     •     Chrome 2+

     •     Opera 9.5+

     •     MobileWebkit




Monday, March 22, 2010                                       37
CSS Text-Shadow   http://sxsw.beercamp.com



           Example Usage




Monday, March 22, 2010                                  38
CSS Text-Shadow   http://timvandamme.com



           Example Usage




Monday, March 22, 2010                                39
CSS Text-Shadow   http://analog.coop



           Example Usage




Monday, March 22, 2010                            40
CSS Text-Shadow   http://blog.squarespace.com



           Example Usage




Monday, March 22, 2010                                     41
CSS Multi-Columns
           What is it?
     •     The CSS multi-column module offers a method of allowing
           long chunks of text to wrap to multiple columns in a
           manner that formerly required server side scripting.

     •     This technique is widely popular in editorial design of
           magazines and newspapers, but is rarely used on the web.




Monday, March 22, 2010                                                42
CSS Multi-Columns
           Pros
     •     Large chunks of text can now be displayed in a shorter
           vertical space and also sport properly sized column widths
           that support better readability.

     •     Stylistically this effect can add nuance and typographical
           care to a detailed design.

     •     This approach is far more semantic than other methods
           that required additional markup to achieve similar ends.




Monday, March 22, 2010                                                  43
CSS Multi-Columns
           Cons
     •     Easy to abuse. The web is not static editorial design
           platform. With a confined viewing port, designers will
           make usability and readability mistakes with this technique
           that can make a web experience extremely poor.




Monday, March 22, 2010                                                   44
CSS Multi-Columns
           Design Considerations
     •     Wide columns of text are difficult to read because the
           viewing distance from the end of one line to the beginning
           of the next.




Monday, March 22, 2010                                                  45
CSS Multi-Columns
           Design Considerations
     •     Multi-Column text helps the user read faster facilitating
           better scanability.
                                                        Make sure the distance
                                                        from the top of the
                                                        column to the bottom
                                                        of the column is tight
                                                        enough for easy
                                                        scanning.




Monday, March 22, 2010                                                           46
CSS Multi-Columns
           Code - Column Count
            div.multicol {
              column-count: 3;
              column-gap: 15px;
              -moz-column-count: 3;
              -moz-column-gap: 15px;
              -webkit-column-count: 3;
              -webkit-column-gap: 15px;
            }




Monday, March 22, 2010                    47
CSS Multi-Columns
           Code - Column Count




Monday, March 22, 2010           48
CSS Multi-Columns
           Code - Column Width
            div.multicol {
              column-width: 200px;
              column-gap: 15px;
              -moz-column-width: 200px;
              -moz-column-gap: 15px;
              -webkit-column-width: 200px;
              -webkit-column-gap: 15px;
            }




Monday, March 22, 2010                       49
CSS Multi-Columns
           Code - Column Width




Monday, March 22, 2010           50
CSS Multi-Columns
           Code - Column Rule (Webkit Only)
            div.multicol {
              column-width: 200px;
              column-gap: 15px;
              -moz-column-width: 200px;
              -moz-column-gap: 15px;
              -webkit-column-width: 200px;
              -webkit-column-gap: 15px;
              -webkit-column-rule-color: #000;
              -webkit-column-rule-style: dotted;
              -webkit-column-rule-width: 2px;
            }


Monday, March 22, 2010                             51
CSS Multi-Columns
           Code - Column Rule (Webkit Only)




                         column rule
Monday, March 22, 2010                        52
CSS Multi-Columns
           Browser Compatibility
     •     Firefox 1.5+

     •     Safari 3+

     •     Chrome 1+

     •     MobileWebkit




Monday, March 22, 2010             53
CSS Multi-Columns
           Browser Compatibility
     •     Browsers that do not support CSS3 columns degrade to a
           full width, standard text approach




Monday, March 22, 2010                                              54
CSS Multi-Columns   http://tweetcc.com



           Example Usage




Monday, March 22, 2010                              55
CSS Multi-Columns   http://desandro.com



           Example Usage




Monday, March 22, 2010                               56
CSS Multi-Columns   http://desandro.com



           Example Usage




Monday, March 22, 2010                               57
THANK YOU               for joining us for


                         WEB TYPOGRAPHY
                                          &




                         CSS3
                         with Sean Gaffney and Matthew Smith


Monday, March 22, 2010                                         58

Contenu connexe

Similaire à Web Typography with CSS3

Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2elliotjaystocks
 
Tool twist newsletter 2010
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010Aravind Naidu
 
Mobile Development with uPortal and Infusion
Mobile Development with uPortal and InfusionMobile Development with uPortal and Infusion
Mobile Development with uPortal and Infusioncolinbdclark
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsPrototype Interactive
 
Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacementbrinsknaps
 
DIY Web fots vs Typekit
DIY Web fots vs TypekitDIY Web fots vs Typekit
DIY Web fots vs TypekitMatthew Rechs
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichJenn Lukas
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trendsCool Sky
 
Introduction to DZone
Introduction to DZoneIntroduction to DZone
Introduction to DZoneBrandon Hoe
 
UXcellence: The Importance Of Human-Centered Design
UXcellence: The Importance Of Human-Centered DesignUXcellence: The Importance Of Human-Centered Design
UXcellence: The Importance Of Human-Centered DesignMike Townson
 
Flow: A living full-stack framework for the web
Flow: A living full-stack framework for the webFlow: A living full-stack framework for the web
Flow: A living full-stack framework for the websebastian sastre
 
Fel presentation
Fel presentationFel presentation
Fel presentationianfeather
 
Building a bot with an intent
Building a bot with an intentBuilding a bot with an intent
Building a bot with an intentAbhishek Sur
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typographyFour Kitchens
 

Similaire à Web Typography with CSS3 (20)

Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
Website design2
Website design2Website design2
Website design2
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
Tool twist newsletter 2010
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010
 
Mobile Development with uPortal and Infusion
Mobile Development with uPortal and InfusionMobile Development with uPortal and Infusion
Mobile Development with uPortal and Infusion
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fonts
 
Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacement
 
DIY Web fots vs Typekit
DIY Web fots vs TypekitDIY Web fots vs Typekit
DIY Web fots vs Typekit
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
 
Introduction to DZone
Introduction to DZoneIntroduction to DZone
Introduction to DZone
 
UXcellence: The Importance Of Human-Centered Design
UXcellence: The Importance Of Human-Centered DesignUXcellence: The Importance Of Human-Centered Design
UXcellence: The Importance Of Human-Centered Design
 
Best Web Development Languages To Learn in 2023
Best Web Development Languages To Learn in 2023 Best Web Development Languages To Learn in 2023
Best Web Development Languages To Learn in 2023
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the web
 
AAUP 2015: Fonts in E-Books Panel Outline
AAUP 2015: Fonts in E-Books Panel OutlineAAUP 2015: Fonts in E-Books Panel Outline
AAUP 2015: Fonts in E-Books Panel Outline
 
Flow: A living full-stack framework for the web
Flow: A living full-stack framework for the webFlow: A living full-stack framework for the web
Flow: A living full-stack framework for the web
 
Fel presentation
Fel presentationFel presentation
Fel presentation
 
Building a bot with an intent
Building a bot with an intentBuilding a bot with an intent
Building a bot with an intent
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typography
 

Dernier

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 

Dernier (19)

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 

Web Typography with CSS3

  • 1. WEB TYPOGRAPHY & CSS3 with Sean Gaffney and Matthew Smith Monday, March 22, 2010 1
  • 2. Sean Gaffney seangaffney.cc @seangaffney Freelancing Developer working with designers and agencies to make sure details get communicated clearly through technology on the web. Monday, March 22, 2010 2
  • 3. Matthew Smith squaredeye.com @squaredeye Principal at Squared Eye Creative Director & Designer Squared Eye is focused on detailed design that springs from a rich understanding of our client’s business goals and the communication strategies needed to make them happen. Monday, March 22, 2010 3
  • 4. Web Typography & CSS3 @font-face Text-Shadow MultiColumn Text Monday, March 22, 2010 4
  • 5. @font-face What is it? • Simple technique for allowing designers to use their own fonts for display on the web, eliminating the constrictions that currently exist. • Introduced in CSS2, removed from the spec in CSS2.1, reintroduced in CSS3 Monday, March 22, 2010 5
  • 6. @font-face Pros • More variety in fonts on the web! Yeehaw! • Better adherence to style guidelines and branding emphasis for groups that use typography as a major part of their branding. • Dynamic, selectable, printable text • Implementation is simple (compared to sIFR, Image Replacement, and Cufón) Monday, March 22, 2010 6
  • 7. @font-face Cons • Easy to Abuse. Huge font libraries don’t make good designs, good designers make good designs. • End User License Agreements (EULAs) can be a difficult hurdle for commercial fonts. • Flash of Unstyled Text (FOUT) • Rendering Issues on Microsoft Windows and Internet Explorer due to font-aliasing techniques. Monday, March 22, 2010 7
  • 8. @font-face Design Considerations • Access to more fonts increases the need for us all to learn typography, and web typography. Monday, March 22, 2010 8
  • 9. @font-face http://seedconference.com Design Considerations • Great web typography is possible with the old guard of core fonts. Monday, March 22, 2010 9
  • 10. @font-face Learn Typography Monday, March 22, 2010 10
  • 11. @font-face Learn Typography http://webtypography.net/ Monday, March 22, 2010 11
  • 12. @font-face Licensing • Type Design is incredibly complicated and difficult. It is worth paying for a great typeface or font. • The EULA from some foundries allows for embedding • The EULA from other foundries “technically” does not allow for even sIFR embedding. • The file referenced when using @font-face is easily found on the server. If its free, no big deal. If it’s commercial then you’re breaking your EULA. Monday, March 22, 2010 12
  • 13. @font-face What’s changing in the marketplace? • Businesses like TypeKit, FontDeck, and Typotheque have created obfuscation techniques and relationships with foundries to bring commercial fonts to the web. • Sites like Font Squirrel are popping up to showcase the best of the free fonts for use with @font-face. • More businesses like Fontspring will arise to help strong small and middle range type designers and foundries provide web designers with great fonts, with flexible licenses at competitive prices. Monday, March 22, 2010 13
  • 14. @font-face What’s changing in the technology? • There are currently a host of type formats for the web including TrueType, OpenType, EOT, SVG, and WOFF. • WOFF (Web Open Font Format) is a new web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. • WOFF is a flexible format which allows for better font- hinting and metadata attached to the font for different systems, languages, browsers, etc. Monday, March 22, 2010 14
  • 15. @font-face What’s changing in the technology? • WOFF is a web only format, unable to be used on the desktop, and is therefore more appealing to the font foundries as a viable format for commercial fonts. • WOFF compresses the font data so that its less likely to cause FOUT (Flash Of Unstyled Text) while web files are downloading. Monday, March 22, 2010 15
  • 16. @font-face Implementation Techniques • Commercial Font-serving Sites: Typekit, Fontdeck, Typotheque, Webtype, Kernest • Free (Font Squirrel) • Mixed Use (Fontspring) • Roll Your Own Obfuscation Monday, March 22, 2010 16
  • 17. @font-face Browser Compatibility • Firefox 3.5+ (TTF, OTF) since 3.6+ (WOFF) • Safari 3.1+ (TTF, OTF) • Chrome 4+ (TTF, OTF, SVG) • Opera 10+ (TTF, OTF, SVG) • IE 4+ (EOT) • MobileWebkit (SVG) Monday, March 22, 2010 17
  • 18. @font-face Code @font-face { font-family: ‘GnuolaneRegular’; src: url(‘gnuolane_reg.ttf’) format(‘truetype’); } h2 { font-family: ‘GnuolaneRegular’, Impact, sans-serif; } Monday, March 22, 2010 18
  • 19. @font-face Code - “Bulletproof” @font-face { font-family: 'GnuolaneReg'; src: url('gnuolane_reg.eot'); src: local('GnuolaneReg'), local('GnuolaneReg Web'), url("gnuolane_reg.woff") format("woff"), url("gnuolane_reg.otf") format("opentype"), url("gnuolane_reg.svg#gnuolane") format("svg"); } http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ Monday, March 22, 2010 19
  • 20. @font-face Optimization • Javascript and CSS techniques exist to minimize FOUT • Do not place SCRIPT tags above @font-face declaration (IE will not display page content until the font file is loaded) • Gzipping fonts can result in up to 70% savings in filesize (all formats except WOFF, which has built-in compression) • Set far-future expires headers for font files Monday, March 22, 2010 20
  • 21. @font-face Rendering • Apple and Microsoft have different philosophies regarding the way text should be rendered on the screen. • Fonts rendered by OS X should all appear very smooth. • Fonts rendered by Windows will vary based on the hinting of the type and the rendering engine being used (none vs. ClearType vs. DirectWrite). TrueType fonts appear smoother. FontFont branded fonts also have better hinting for Windows. Monday, March 22, 2010 21
  • 22. @font-face Testing • Internet Explorer without ClearType Monday, March 22, 2010 22
  • 23. @font-face http://www.timoni.org Example Usage Monday, March 22, 2010 23
  • 24. @font-face http://sxsw.beercamp.com Example Usage Monday, March 22, 2010 24
  • 25. @font-face http://elliotjaystocks.com Example Usage Monday, March 22, 2010 25
  • 26. @font-face http://forabeautifulweb.com Example Usage Monday, March 22, 2010 26
  • 27. @font-face Resources • Font as Service Typekit : http://typekit.com FontDeck : http://fontdeck.com (coming soon) FontSpring : http://fontspring.com Typotheque : http://typotheque.com Webtype : http://webtype.com (coming soon) Kernest : http://kernest.com • Free @font-face sites FontSquirrel : http://fontsquirrel.com League of Moveable Type : http://www.theleagueofmoveabletype.com/ • @font-face generators FontSquirrel : http://www.fontsquirrel.com/fontface/generator Monday, March 22, 2010 27
  • 28. @font-face Resources • How to Use @font-face http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ • GZIP your @font-face files http://www.phpied.com/gzip-your-font-face-files/ • Font Hinting and Anti-Aliasing http://szafranek.net/works/articles/font-smoothing-explained/ http://readableweb.com/font-hinting-explained-by-a-font-design-master/ http://www.thomasphinney.com/2009/12/browser-choice-vs-font-rendering/ • Recommended Reading http://webfonts.info/ Lots of @font-face info, including a list of @font-face-ready fonts Monday, March 22, 2010 28
  • 29. CSS Text-Shadow What is it? • text-shadow is a simple technique of adding a dropshadow or highlight to text in the web page. • It can be used to create a lighting effect or a to create dimension through use of multiple text-shadows. Monday, March 22, 2010 29
  • 30. CSS Text-Shadow Pros • Text-shadows can be used to create great looking text effects to enhance the style of your typography. • In some cases text-shadow can increase the legibility of text by increasing the contrast of the type against the background. • If your design requires a letter-press feel, you can easily achieve this effect using text-shadow. Monday, March 22, 2010 30
  • 31. CSS Text-Shadow Cons • Not supported in Internet Explorer (scheduled for support in IE9 with many other CSS3 features). • If abused, can make text less legible. Monday, March 22, 2010 31
  • 32. CSS Text-Shadow Design Considerations • text-shadow, like other type treatments for the web is easily abused. Be gentle and subtle, don’t overdue it. Monday, March 22, 2010 32
  • 33. CSS Text-Shadow Design Considerations • Increasing readability Rogie King works out a nice text-shadow hack to increase readability of text in Safari for light colored text on dark backgrounds. http://www.komodomedia.com/blog/2009/03/safari- text-shadow-anti-aliasing-css-hack/ Monday, March 22, 2010 33
  • 34. CSS Text-Shadow Code h2 { text-shadow: x-offset y-offset blur-radius #000; } h2 { text-shadow: 1px 1px 5px #000; } Monday, March 22, 2010 34
  • 35. CSS Text-Shadow Code - Multiple Shadows p{ margin: 0 0 1em; font-size: 60px; font-weight: bold; color: #ccc; letter-spacing: 1px; text-shadow: -1px -1px 0px #333, 1px 1px 1px #fff; } Monday, March 22, 2010 35
  • 36. CSS Text-Shadow Code - Multiple Shadows 60px 32px 14px Monday, March 22, 2010 36
  • 37. CSS Text-Shadow Browser Compatibility • Firefox 3.1+ • Safari 3+ (4+ has multiple text-shadow support) • Chrome 2+ • Opera 9.5+ • MobileWebkit Monday, March 22, 2010 37
  • 38. CSS Text-Shadow http://sxsw.beercamp.com Example Usage Monday, March 22, 2010 38
  • 39. CSS Text-Shadow http://timvandamme.com Example Usage Monday, March 22, 2010 39
  • 40. CSS Text-Shadow http://analog.coop Example Usage Monday, March 22, 2010 40
  • 41. CSS Text-Shadow http://blog.squarespace.com Example Usage Monday, March 22, 2010 41
  • 42. CSS Multi-Columns What is it? • The CSS multi-column module offers a method of allowing long chunks of text to wrap to multiple columns in a manner that formerly required server side scripting. • This technique is widely popular in editorial design of magazines and newspapers, but is rarely used on the web. Monday, March 22, 2010 42
  • 43. CSS Multi-Columns Pros • Large chunks of text can now be displayed in a shorter vertical space and also sport properly sized column widths that support better readability. • Stylistically this effect can add nuance and typographical care to a detailed design. • This approach is far more semantic than other methods that required additional markup to achieve similar ends. Monday, March 22, 2010 43
  • 44. CSS Multi-Columns Cons • Easy to abuse. The web is not static editorial design platform. With a confined viewing port, designers will make usability and readability mistakes with this technique that can make a web experience extremely poor. Monday, March 22, 2010 44
  • 45. CSS Multi-Columns Design Considerations • Wide columns of text are difficult to read because the viewing distance from the end of one line to the beginning of the next. Monday, March 22, 2010 45
  • 46. CSS Multi-Columns Design Considerations • Multi-Column text helps the user read faster facilitating better scanability. Make sure the distance from the top of the column to the bottom of the column is tight enough for easy scanning. Monday, March 22, 2010 46
  • 47. CSS Multi-Columns Code - Column Count div.multicol { column-count: 3; column-gap: 15px; -moz-column-count: 3; -moz-column-gap: 15px; -webkit-column-count: 3; -webkit-column-gap: 15px; } Monday, March 22, 2010 47
  • 48. CSS Multi-Columns Code - Column Count Monday, March 22, 2010 48
  • 49. CSS Multi-Columns Code - Column Width div.multicol { column-width: 200px; column-gap: 15px; -moz-column-width: 200px; -moz-column-gap: 15px; -webkit-column-width: 200px; -webkit-column-gap: 15px; } Monday, March 22, 2010 49
  • 50. CSS Multi-Columns Code - Column Width Monday, March 22, 2010 50
  • 51. CSS Multi-Columns Code - Column Rule (Webkit Only) div.multicol { column-width: 200px; column-gap: 15px; -moz-column-width: 200px; -moz-column-gap: 15px; -webkit-column-width: 200px; -webkit-column-gap: 15px; -webkit-column-rule-color: #000; -webkit-column-rule-style: dotted; -webkit-column-rule-width: 2px; } Monday, March 22, 2010 51
  • 52. CSS Multi-Columns Code - Column Rule (Webkit Only) column rule Monday, March 22, 2010 52
  • 53. CSS Multi-Columns Browser Compatibility • Firefox 1.5+ • Safari 3+ • Chrome 1+ • MobileWebkit Monday, March 22, 2010 53
  • 54. CSS Multi-Columns Browser Compatibility • Browsers that do not support CSS3 columns degrade to a full width, standard text approach Monday, March 22, 2010 54
  • 55. CSS Multi-Columns http://tweetcc.com Example Usage Monday, March 22, 2010 55
  • 56. CSS Multi-Columns http://desandro.com Example Usage Monday, March 22, 2010 56
  • 57. CSS Multi-Columns http://desandro.com Example Usage Monday, March 22, 2010 57
  • 58. THANK YOU for joining us for WEB TYPOGRAPHY & CSS3 with Sean Gaffney and Matthew Smith Monday, March 22, 2010 58