SlideShare uma empresa Scribd logo
1 de 64
Baixar para ler offline
Beautiful Web
                        Typography
                        Letter, text, & page

                        Simon Pascal Klein
                        Version 4




Monday, 30 March 2009
Beautiful Web Typography




                        Intro…




Monday, 30 March 2009
Beautiful Web Typography




                        I’m Pascal Klein.




Monday, 30 March 2009
Beautiful Web Typography




                        I’m…
                  1. a graphic & web designer;
                 2. a bit of a UI and UX aficionado;
                 3. and, incurably, a rampant ‘typophile’.




Monday, 30 March 2009
Beautiful Web Typography




                        ‘Typophiles’ are über gεεks who
                                         typography.

                              Hands up and make yourselves known.




Monday, 30 March 2009
Beautiful Web Typography




                                              premise:


                                  The intertubes today are
                                         info-heavy.

                                       Much of it is textual.
                                    Much of it is a pain to read.




Monday, 30 March 2009
Beautiful Web Typography




                        ty•pog•ra•phy | tīˈpägrəfē | •n
                        Typography is the art of creating and setting type
                        with the purpose of honoring the text it sets.




Monday, 30 March 2009
Beautiful Web Typography




                        Typography exists to bring order to information
                        by dividing and organizing — aiding readers in
                        finding what they are looking for.




Monday, 30 March 2009
Beautiful Web Typography




                        i.e.   make textual stuff look pretty.
                                           ☻




Monday, 30 March 2009
Beautiful Web Typography




                        Assumptions.
                        It sucks?
                  1. Limited to sans-serif only for readability?
                 2. Only ‘web-safe’ fonts?
                 3. Limited control—resort to Flash and other
                        technologies?




Monday, 30 March 2009
Beautiful Web Typography




                                  Not quite.
                                    (Yay!)




Monday, 30 March 2009
Beautiful Web Typography




                  1. Letter (micro)
                 2. Text
                 3. Page or grid (macro)




Monday, 30 March 2009
Beautiful Web Typography




                 0. Reset
                        All the browsers have their own default styling for
                        various (x)HTML elements. This makes it a pain for
                        cross-browser consistency.




Monday, 30 March 2009
Beautiful Web Typography




                        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,in
                        put,textarea,p,blockquote,th,td {margin:0;padding:0;}
                        table {border-collapse:collapse;border-spacing:0;}
                        fieldset,img {border:0;}
                        address,caption,cite,code,dfn,em,strong,th,var {font-
                        style:normal;font-weight:normal;}
                        ol,ul {list-style:none;}
                        caption,th {text-align:left;}
                        h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
                        q:before,q:after {content:'';}
                        abbr,acronym {border:0;}



                        Googling “CSS reset stylesheets” should land you
                        with numerous examples. This one above is from
                        the Yahoo! UI library.


Monday, 30 March 2009
Beautiful Web Typography




                        Letter & Text
                   • typeface (font) and style
                   • spacing (tracking/letter-spacing)
                   • individual glyphs




Monday, 30 March 2009
Beautiful Web Typography




                        serif
                        sanserif
                        script
                        blackletter
                        monospace
Monday, 30 March 2009
Beautiful Web Typography




                        Mixing typefaces requires special attention. Try to
                        align x-heights and sizes. X-heights?


                        x-height x-height
                        Helvetica Regular 96pt & Minion Pro Regular 96pt.



                        x-height x-height
                        Helvetica Regular 96pt & Minion Pro Regular 114pt.


Monday, 30 March 2009
Beautiful Web Typography




                        Use a limited palette of type families. A common
                        and effective technique is to pair a serif and a
                        sanserif face together. E.g.:
                  1. one sets the body, the other the headings;
                 2. one sets primary content, the other UI controls.

                        We do this with the font-family property.




Monday, 30 March 2009
Beautiful Web Typography




                        roman (‘normal’)
                        italic ≠ oblique
                        ultralight regular bold
                        & bold italic condensed
                        S MALL - CAPITALS
Monday, 30 March 2009
Beautiful Web Typography




                        Arial
                        Verdana
                        Courier New
                        Times New Roman
                        Georgia
                        Trebuchet MS
Monday, 30 March 2009
Beautiful Web Typography




                  “Typography is not picking a ‘cool’ font.”
                                            – Jeff Cro




Monday, 30 March 2009
Beautiful Web Typography




                        Options for web fonts:
                   • Installed fonts—mostly web-safe
                   • sIFR —JS and Flash replacement
                   • Other js—Cufón!
                        http://wiki.github.com/sorccu/cufon/about




Monday, 30 March 2009
Monday, 30 March 2009
Beautiful Web Typography




                        Font stacks:
                   • desired
                   • fallback
                   • generic (e.g. serif, sans-serif, monospace)




Monday, 30 March 2009
Beautiful Web Typography




                        Use a combination of families, styles, weights and
                        to breath some fresh air into your web type.

                   • font-weight controls weight and accepts
                        numerical and descriptive (e.g. ‘black’) values.

                   • font-style controls… style. Accepts the descrip-
                        tive values (normal, italic, and oblique).

                   • font-variant controls case and accepts the
                        values normal and small-caps.



Monday, 30 March 2009
Monday, 30 March 2009
Web Typography                    1.1




                        TRACKING
                        T RACKING
                        Letter-spacing
                        Letter-spacing
Monday, 30 March 2009
Beautiful Web Typography




                        Letʼs see some loose word-
                        spacing in action…

                        And now both loose word-spacing
                        and tracking featured together.




Monday, 30 March 2009
Beautiful Web Typography




                        And finally, the recent popular
                        trend of negative tracking.




Monday, 30 March 2009
Beautiful Web Typography




                        Tracking and word-spacing can help differentiate,
                        aiding readability by removing disruption.

                        Examples might include spacing acronyms or
                        setting numerical tabular data.




Monday, 30 March 2009
Beautiful Web Typography




                        Full-capital acronyms, along with other full-cap-
                        sized glyphs can disturb the flow of the text. E.g.

                        Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum
                        elit pellentesque habitant orci tristique senectus et 4,962 malesuada fames
                        ac turpis egestas HTML lectus vestibulum aenean; luctus posuere cubilia.


                        Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum
                        elit pellentesque habitant orci tristique senectus et , malesuada fames
                        ac turpis egestas HTML lectus vestibulum aenean; luctus posuere cubilia.




Monday, 30 March 2009
Beautiful Web Typography




                   • letter-spacing and word-spacing controls
                        tracking and word-spacing respectively. Both take
                        numerical values and normal.

                        Sadly no property for controlling figure variants—
                        hopes set for CSS 3. For now use Georgia which
                        (only) features hanging or ‘old-style’ figures.




Monday, 30 March 2009
Beautiful Web Typography




                   • font-size controls… font sizes. Takes numerical
                        and descriptive values. Most user agents
                        (browsers) set default value at 16px.

                        Size font sizes relatively using ems or %.

                        An em is a relative unit best to be thought of as a
                        box. It is relative to the point size of a specific
                        font (i.e. 1 em in a 12 point typeface is 12 point).




Monday, 30 March 2009
Beautiful Web Typography




                        Why?
                        Old UA s don’t support font-resizing (Ctrl + +/-) or
                        page zooming/scaling when measurements are
                        defined in absolute terms.

                        The web is increasingly being accessed by a
                        number of different devices and user agents—be
                        careful of assumptions.




Monday, 30 March 2009
Beautiful Web Typography




                        Key: remember font sizes are inherited from
                        parents → children.

                        To calculate, find what one pixel is in ems and
                        then multiply by the desired font size (in pixels):

                           1 ÷ parent font-size × required pixel value
                                              = em value




Monday, 30 March 2009
Beautiful Web Typography




                        .% trick
                        Simplify your calculations. Consider:

                        p { font-size: 80%; }
                        blockquote { font-size: 80%; }



                        80% of 16px is 12.8px, so p and blockquote
                        elements will be that size, but what happens
                        when we put a p element inside a blockquote
                        element? The parent (blockquote) is 12.8px so
                        the p will be rendered at 80% of that: 10.42px.


Monday, 30 March 2009
Beautiful Web Typography




                        .% trick (cont’d)
                        In 2004 Richard Rutter wrote an article outlining
                        a trick used to make these calculations simpler:

                   • browsers have common default size of 16px; thus:
                   • set body to 62.5% and reset all to 10px; thus:
                   • from here calculations are simpler for direct
                        descendants of the body, e.g. 12px = 1.2em; 8px =
                        0.8em. Further nested elements are (still) relative.




Monday, 30 March 2009
Beautiful Web Typography




                        To find an element’s font size in absolute terms
                        (e.g. pixels) you can use the Firefox Web Develop
                        Extension, Information → Display Element
                        Information.




Monday, 30 March 2009
Beautiful Web Typography




                        Stick it to a scale
                        Don’t just arbitrarily set type; use a scale:


                        6, 7,   8, 9, 10,   11, 12, 14,   16, 18, 21,   24,   36,   48, 60,   72.
                        the “classic scale”


                        9, 10, 11,


                        another scale
                                     24,12, 13, 14,       18,      36,        48,   64, 72,     96.
                        8,   13,     21,        34,         55,
                        scale based on the Fibonacci sequence
                                                                          89.
Monday, 30 March 2009
Beautiful Web Typography




                        At small font sizes text-decoration:
                        underline; can render descender glyphs (g, j, p,
                        q, y) difficult to read: use border-bottom: 1px
                        solid;




Monday, 30 March 2009
Beautiful Web Typography




                        Correct glyphs
                        Consider:




                                    1'61quot;
                                     ' quot;

Monday, 30 March 2009
Beautiful Web Typography




                                    quot;is is a group of
                                  words surrounded by a
                                  bunch of tick marks.quot;



Monday, 30 March 2009
Beautiful Web Typography




                                  “is is a quotation!”
                                                  - Jeff Cro




Monday, 30 March 2009
Beautiful Web Typography




                                  ‘’ “”
                                     ’

Monday, 30 March 2009
Beautiful Web Typography




                                  - hyphen    Mary-Anne, Dominique Strauss-Kahn


                                  – en dash   April–May, ages –, pp. –


                            — em dash         Phrase marker—not spaced—like this.


                                   – minus    5–4=1




Monday, 30 March 2009
Beautiful Web Typography




                        “         opening double quote   “
                        ”         closing double quote   ”
                        ‘         opening single quote   ‘
                        ’         closing single quote   ’
                        –         en dash                –
                        —         em dash                —
                        − minus                          −
                        ×         multiplication         ×
                        …         ellipsis               …



Monday, 30 March 2009
Beautiful Web Typography




                        Smartypants et al.
                        Let scripts do the conversion for you.

                        Smartypants et al. are scripts that translates plain
                        ASCII   punctuation characters into “smart”
                        typographic punctuation HTML entities.

                   • Smartypants (PHP , Perl, & Movable Type);

                   • Typogrify (Python/Django);
                   • wp-typogrify (WordPress);
                   • …

Monday, 30 March 2009
Beautiful Web Typography




                        Giving ampersands some love


                                  &&&&
                                  &&&&
Monday, 30 March 2009
Beautiful Web Typography




                        Marking paragraphs
                        Don’t be afraid to mark new paragraphs with
                        indents, outdents, a plain white-line, a pilcrow (¶)
                        or other ornament, drop cap and/or headers.




Monday, 30 March 2009
Beautiful Web Typography




                        Measures
                        The measure is the length of a single line. It is
                        important to select a good measure for running
                        text. Do this with the width property.

                        Ideally these should be relative to the font size,
                        such that the type scales proportionately to the
                        measure; use ems or percentages.




Monday, 30 March 2009
Beautiful Web Typography




                        Measures (cont’d)
                        An apt measure for running text ranges from
                        about 45-75 characters for serif type set in a
                        single column on a page (print).

                        On the web, type generally benefits from a
                        smaller measure.

                        Generally use flush-left (text-align: left;) for
                        running text, particularly when set in a narrow
                        measure. Justification can work at ample
                        measures and better with serif typefaces.

Monday, 30 March 2009
Beautiful Web Typography




                        Leading (line-height)
                        Don’t forget to set an ample leading for running
                        text! Done using the line-height property and
                        you can use a unit-less number (e.g. 1.5 which
                        acts as a multiplier of the font size);

                        Leading spans from baseline to baseline… and I
                        need some more text to illustrate the point. :)




Monday, 30 March 2009
Beautiful Web Typography




                        Hanging punctuation
                        Traditionally punctuation marks, bullets, lists,
                        hyphens, and brackets all hang in the margin.

                        “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer a odio.
                         Vivamus placerat felis id risus. Cras mollis est. Suspendisse molestie
                         imperdiet libero. Etiam mollis libero vulputate lorem nullam ut leo. Etiam
                        (at turpis non massa rhoncus sodales.)”




Monday, 30 March 2009
Beautiful Web Typography




                        Hanging punctuation (cont’d)
                        Easily done with lists by just setting their margins
                        to zero.

                        Possible for opening punctuation marks using
                        background-image or a negative text-indent. CSS3
                        will hopefully support hanging punctuation with
                        the proposed hanging-punctuation property.
                   → http://www.w3.org/TR/css3-text/#hanging-punctuation




Monday, 30 March 2009
Beautiful Web Typography




                        Web: text = UI
                        Distinguish content elements from application
                        controls (e.g. a user’s username and description
                        from a logout link or text-field title).

                        Often done with colour (i.e. setting controls gray),
                        size (making them smaller) and typefaces.




Monday, 30 March 2009
Beautiful Web Typography




Monday, 30 March 2009
Beautiful Web Typography




Monday, 30 March 2009
Beautiful Web Typography




                        Page (grid).
                        Grids bring order to your page and help specify
                        where things should go and their flow.

                        Remember to put in apt “gutters” (margins
                        between columns) to separate your columns
                        particularly when neighbouring columns hold
                        running text.

                        Ruler guides help enormously: use the Web
                        Developer extension for Firefox or ruler
                        background images. Also see the YUI library.

Monday, 30 March 2009
Beautiful Web Typography




Monday, 30 March 2009
Beautiful Web Typography




Monday, 30 March 2009
Beautiful Web Typography




                        Addendum
                   • Please don’t use Comic Sans unless you have a
                        very, very good reason.
                   • For the free desktop: stick fonts into ~/.fonts
                        and to reload your font cache: fc-cache -fv




Monday, 30 March 2009
ISBN : ---

Monday, 30 March 2009
Beautiful Web Typography




                        Resources & reading
                    • http://webtypography.net

                    • http://alistapart.com/topics/design/typography

                    • http://usabletype.org

                    • http://ilovetypography.com

                    • http://www.papress.com/other/thinkingwithtype/

                        Ta.


Monday, 30 March 2009
Beautiful Web Typography




                        Inspirational type nuts
                    • http://cameronmoll.com

                    • http://jeffcro.com

                    • http://zeldman.com

                    • http://markboulton.co.uk




Monday, 30 March 2009

Mais conteúdo relacionado

Último

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 

Último (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 

Destaque

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Destaque (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Beautiful Web Typography (#4)

  • 1. Beautiful Web Typography Letter, text, & page Simon Pascal Klein Version 4 Monday, 30 March 2009
  • 2. Beautiful Web Typography Intro… Monday, 30 March 2009
  • 3. Beautiful Web Typography I’m Pascal Klein. Monday, 30 March 2009
  • 4. Beautiful Web Typography I’m… 1. a graphic & web designer; 2. a bit of a UI and UX aficionado; 3. and, incurably, a rampant ‘typophile’. Monday, 30 March 2009
  • 5. Beautiful Web Typography ‘Typophiles’ are über gεεks who typography. Hands up and make yourselves known. Monday, 30 March 2009
  • 6. Beautiful Web Typography premise: The intertubes today are info-heavy. Much of it is textual. Much of it is a pain to read. Monday, 30 March 2009
  • 7. Beautiful Web Typography ty•pog•ra•phy | tīˈpägrəfē | •n Typography is the art of creating and setting type with the purpose of honoring the text it sets. Monday, 30 March 2009
  • 8. Beautiful Web Typography Typography exists to bring order to information by dividing and organizing — aiding readers in finding what they are looking for. Monday, 30 March 2009
  • 9. Beautiful Web Typography i.e. make textual stuff look pretty. ☻ Monday, 30 March 2009
  • 10. Beautiful Web Typography Assumptions. It sucks? 1. Limited to sans-serif only for readability? 2. Only ‘web-safe’ fonts? 3. Limited control—resort to Flash and other technologies? Monday, 30 March 2009
  • 11. Beautiful Web Typography Not quite. (Yay!) Monday, 30 March 2009
  • 12. Beautiful Web Typography 1. Letter (micro) 2. Text 3. Page or grid (macro) Monday, 30 March 2009
  • 13. Beautiful Web Typography 0. Reset All the browsers have their own default styling for various (x)HTML elements. This makes it a pain for cross-browser consistency. Monday, 30 March 2009
  • 14. Beautiful Web Typography body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,in put,textarea,p,blockquote,th,td {margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var {font- style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym {border:0;} Googling “CSS reset stylesheets” should land you with numerous examples. This one above is from the Yahoo! UI library. Monday, 30 March 2009
  • 15. Beautiful Web Typography Letter & Text • typeface (font) and style • spacing (tracking/letter-spacing) • individual glyphs Monday, 30 March 2009
  • 16. Beautiful Web Typography serif sanserif script blackletter monospace Monday, 30 March 2009
  • 17. Beautiful Web Typography Mixing typefaces requires special attention. Try to align x-heights and sizes. X-heights? x-height x-height Helvetica Regular 96pt & Minion Pro Regular 96pt. x-height x-height Helvetica Regular 96pt & Minion Pro Regular 114pt. Monday, 30 March 2009
  • 18. Beautiful Web Typography Use a limited palette of type families. A common and effective technique is to pair a serif and a sanserif face together. E.g.: 1. one sets the body, the other the headings; 2. one sets primary content, the other UI controls. We do this with the font-family property. Monday, 30 March 2009
  • 19. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed S MALL - CAPITALS Monday, 30 March 2009
  • 20. Beautiful Web Typography Arial Verdana Courier New Times New Roman Georgia Trebuchet MS Monday, 30 March 2009
  • 21. Beautiful Web Typography “Typography is not picking a ‘cool’ font.” – Jeff Cro Monday, 30 March 2009
  • 22. Beautiful Web Typography Options for web fonts: • Installed fonts—mostly web-safe • sIFR —JS and Flash replacement • Other js—Cufón! http://wiki.github.com/sorccu/cufon/about Monday, 30 March 2009
  • 24. Beautiful Web Typography Font stacks: • desired • fallback • generic (e.g. serif, sans-serif, monospace) Monday, 30 March 2009
  • 25. Beautiful Web Typography Use a combination of families, styles, weights and to breath some fresh air into your web type. • font-weight controls weight and accepts numerical and descriptive (e.g. ‘black’) values. • font-style controls… style. Accepts the descrip- tive values (normal, italic, and oblique). • font-variant controls case and accepts the values normal and small-caps. Monday, 30 March 2009
  • 27. Web Typography 1.1 TRACKING T RACKING Letter-spacing Letter-spacing Monday, 30 March 2009
  • 28. Beautiful Web Typography Letʼs see some loose word- spacing in action… And now both loose word-spacing and tracking featured together. Monday, 30 March 2009
  • 29. Beautiful Web Typography And finally, the recent popular trend of negative tracking. Monday, 30 March 2009
  • 30. Beautiful Web Typography Tracking and word-spacing can help differentiate, aiding readability by removing disruption. Examples might include spacing acronyms or setting numerical tabular data. Monday, 30 March 2009
  • 31. Beautiful Web Typography Full-capital acronyms, along with other full-cap- sized glyphs can disturb the flow of the text. E.g. Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque habitant orci tristique senectus et 4,962 malesuada fames ac turpis egestas HTML lectus vestibulum aenean; luctus posuere cubilia. Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque habitant orci tristique senectus et , malesuada fames ac turpis egestas HTML lectus vestibulum aenean; luctus posuere cubilia. Monday, 30 March 2009
  • 32. Beautiful Web Typography • letter-spacing and word-spacing controls tracking and word-spacing respectively. Both take numerical values and normal. Sadly no property for controlling figure variants— hopes set for CSS 3. For now use Georgia which (only) features hanging or ‘old-style’ figures. Monday, 30 March 2009
  • 33. Beautiful Web Typography • font-size controls… font sizes. Takes numerical and descriptive values. Most user agents (browsers) set default value at 16px. Size font sizes relatively using ems or %. An em is a relative unit best to be thought of as a box. It is relative to the point size of a specific font (i.e. 1 em in a 12 point typeface is 12 point). Monday, 30 March 2009
  • 34. Beautiful Web Typography Why? Old UA s don’t support font-resizing (Ctrl + +/-) or page zooming/scaling when measurements are defined in absolute terms. The web is increasingly being accessed by a number of different devices and user agents—be careful of assumptions. Monday, 30 March 2009
  • 35. Beautiful Web Typography Key: remember font sizes are inherited from parents → children. To calculate, find what one pixel is in ems and then multiply by the desired font size (in pixels): 1 ÷ parent font-size × required pixel value = em value Monday, 30 March 2009
  • 36. Beautiful Web Typography .% trick Simplify your calculations. Consider: p { font-size: 80%; } blockquote { font-size: 80%; } 80% of 16px is 12.8px, so p and blockquote elements will be that size, but what happens when we put a p element inside a blockquote element? The parent (blockquote) is 12.8px so the p will be rendered at 80% of that: 10.42px. Monday, 30 March 2009
  • 37. Beautiful Web Typography .% trick (cont’d) In 2004 Richard Rutter wrote an article outlining a trick used to make these calculations simpler: • browsers have common default size of 16px; thus: • set body to 62.5% and reset all to 10px; thus: • from here calculations are simpler for direct descendants of the body, e.g. 12px = 1.2em; 8px = 0.8em. Further nested elements are (still) relative. Monday, 30 March 2009
  • 38. Beautiful Web Typography To find an element’s font size in absolute terms (e.g. pixels) you can use the Firefox Web Develop Extension, Information → Display Element Information. Monday, 30 March 2009
  • 39. Beautiful Web Typography Stick it to a scale Don’t just arbitrarily set type; use a scale: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72. the “classic scale” 9, 10, 11, another scale 24,12, 13, 14, 18, 36, 48, 64, 72, 96. 8, 13, 21, 34, 55, scale based on the Fibonacci sequence 89. Monday, 30 March 2009
  • 40. Beautiful Web Typography At small font sizes text-decoration: underline; can render descender glyphs (g, j, p, q, y) difficult to read: use border-bottom: 1px solid; Monday, 30 March 2009
  • 41. Beautiful Web Typography Correct glyphs Consider: 1'61quot; ' quot; Monday, 30 March 2009
  • 42. Beautiful Web Typography quot;is is a group of words surrounded by a bunch of tick marks.quot; Monday, 30 March 2009
  • 43. Beautiful Web Typography “is is a quotation!” - Jeff Cro Monday, 30 March 2009
  • 44. Beautiful Web Typography ‘’ “” ’ Monday, 30 March 2009
  • 45. Beautiful Web Typography - hyphen Mary-Anne, Dominique Strauss-Kahn – en dash April–May, ages –, pp. – — em dash Phrase marker—not spaced—like this. – minus 5–4=1 Monday, 30 March 2009
  • 46. Beautiful Web Typography “ opening double quote “ ” closing double quote ” ‘ opening single quote ‘ ’ closing single quote ’ – en dash – — em dash — − minus − × multiplication × … ellipsis … Monday, 30 March 2009
  • 47. Beautiful Web Typography Smartypants et al. Let scripts do the conversion for you. Smartypants et al. are scripts that translates plain ASCII punctuation characters into “smart” typographic punctuation HTML entities. • Smartypants (PHP , Perl, & Movable Type); • Typogrify (Python/Django); • wp-typogrify (WordPress); • … Monday, 30 March 2009
  • 48. Beautiful Web Typography Giving ampersands some love &&&& &&&& Monday, 30 March 2009
  • 49. Beautiful Web Typography Marking paragraphs Don’t be afraid to mark new paragraphs with indents, outdents, a plain white-line, a pilcrow (¶) or other ornament, drop cap and/or headers. Monday, 30 March 2009
  • 50. Beautiful Web Typography Measures The measure is the length of a single line. It is important to select a good measure for running text. Do this with the width property. Ideally these should be relative to the font size, such that the type scales proportionately to the measure; use ems or percentages. Monday, 30 March 2009
  • 51. Beautiful Web Typography Measures (cont’d) An apt measure for running text ranges from about 45-75 characters for serif type set in a single column on a page (print). On the web, type generally benefits from a smaller measure. Generally use flush-left (text-align: left;) for running text, particularly when set in a narrow measure. Justification can work at ample measures and better with serif typefaces. Monday, 30 March 2009
  • 52. Beautiful Web Typography Leading (line-height) Don’t forget to set an ample leading for running text! Done using the line-height property and you can use a unit-less number (e.g. 1.5 which acts as a multiplier of the font size); Leading spans from baseline to baseline… and I need some more text to illustrate the point. :) Monday, 30 March 2009
  • 53. Beautiful Web Typography Hanging punctuation Traditionally punctuation marks, bullets, lists, hyphens, and brackets all hang in the margin. “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer a odio. Vivamus placerat felis id risus. Cras mollis est. Suspendisse molestie imperdiet libero. Etiam mollis libero vulputate lorem nullam ut leo. Etiam (at turpis non massa rhoncus sodales.)” Monday, 30 March 2009
  • 54. Beautiful Web Typography Hanging punctuation (cont’d) Easily done with lists by just setting their margins to zero. Possible for opening punctuation marks using background-image or a negative text-indent. CSS3 will hopefully support hanging punctuation with the proposed hanging-punctuation property. → http://www.w3.org/TR/css3-text/#hanging-punctuation Monday, 30 March 2009
  • 55. Beautiful Web Typography Web: text = UI Distinguish content elements from application controls (e.g. a user’s username and description from a logout link or text-field title). Often done with colour (i.e. setting controls gray), size (making them smaller) and typefaces. Monday, 30 March 2009
  • 58. Beautiful Web Typography Page (grid). Grids bring order to your page and help specify where things should go and their flow. Remember to put in apt “gutters” (margins between columns) to separate your columns particularly when neighbouring columns hold running text. Ruler guides help enormously: use the Web Developer extension for Firefox or ruler background images. Also see the YUI library. Monday, 30 March 2009
  • 61. Beautiful Web Typography Addendum • Please don’t use Comic Sans unless you have a very, very good reason. • For the free desktop: stick fonts into ~/.fonts and to reload your font cache: fc-cache -fv Monday, 30 March 2009
  • 63. Beautiful Web Typography Resources & reading • http://webtypography.net • http://alistapart.com/topics/design/typography • http://usabletype.org • http://ilovetypography.com • http://www.papress.com/other/thinkingwithtype/ Ta. Monday, 30 March 2009
  • 64. Beautiful Web Typography Inspirational type nuts • http://cameronmoll.com • http://jeffcro.com • http://zeldman.com • http://markboulton.co.uk Monday, 30 March 2009