SlideShare a Scribd company logo
1 of 43
Download to read offline
Typography
            &
WordPress

 by C H E L S E A O T A K A N
Legibility
    vs
Readability
The




of Words
The

shape
of Words
Legibility
 the ability to recognize and
understand individual letters
Readability
the ease of reading and
  understanding text
Readability
                           This is the normal amount of tracking for this
                           font. Tracking uniformly adjusts the spacing
         Tracking          between letters.
The amount of universal
  space between letters    This is an example of positive tracking.
                           This is an example of negative tracking.
            CSS Property
                           Kerning, unlike tracking, is the amount of
         letter-spacing
                           space between specific letters designed by the
                           type designer. Kerning attempts to distribute
                           whitespace evenly between letters.
Readability
                        This is a nice spacey amount of leading. The
                        lines still read as the same paragraph, but do
       Leading          not interfere with the shapes of the words.
The amount of space     Leading is set at 1.5. That’s halfway between
between lines of text   single and double spaced.

         CSS Property   This is a very small amount of leading. The
                        leading is set at 1.0, equivalent to single
          line-height   spaced. At this point the descenders and
                        ascenders begin running into each other,
                        compromising word shapes.
Readability
                        This is a very large amount of leading. The

       Leading          leading is set at 3.5, equivalent to triple
The amount of space
between lines of text
                        spaced. At this point the lines begin to look as
         CSS Property
          line-height   if they are separate paragraphs is more


                        difficult to read as a continuous block of text.
Readability
                          Not only is it a wholly remarkable book, it is
                          also a highly successful one - more popular
                          than the Celestial Home Care Omnibus, better
                          selling than Fifty More Things to do in Zero
        Orphans           Gravity, and more controversial than Oolon

words by themselves at    Colluphid's trilogy of philosophical blockbusters
 the end of a paragraph   Where God Went Wrong, Some More of God's
                          Greatest Mistakes and Who is this God Person
                          Anyway?

                                                                    Douglas Adams
                                                      The Hitchhiker’s Guide to the Galaxy
Readability
                          Not only is it a wholly remarkable book, it is
                          also a highly successful one - more popular
                          than the Celestial Home Care Omnibus, better
                          selling than Fifty More Things to do in Zero
        Orphans           Gravity, and more controversial than Oolon

words by themselves at    Colluphid's trilogy of philosophical blockbusters
 the end of a paragraph   Where God Went Wrong, Some More of God's
                          Greatest Mistakes and Who is this God Person
                          Anyway?

                                                                    Douglas Adams
                                                      The Hitchhiker’s Guide to the Galaxy
Typography exists to
  honor content.
     Robert Bringhurst
     The Elements of Typographic Style
Stop!
1 Get content first!

2 Read and interpret
  meaning and tone.

3 Determine content
  hierarchy and form.
1 Get content first!

2 Read and interpret
  meaning and tone.

3 Determine content
  hierarchy and form.
1 Get content first!

2 Read and interpret
  meaning and tone.

3 Determine content
  hierarchy and form.
Transitional
 Handwritten



            Choosing
                                    Slab Serif
            Typefaces
Geometric
                                   Humanist
               Sans Serif
Respect your content




                       via comicsanscriminal.com
DEFIBRILLATOR
D E F I B R I L L ATO R
Combining Typefaces
              Vitesse
              This is Vitesse Sans. In eu leo neque, ut porta ipsum.
              Integer congue nibh sed eros viverra convallis. Nam
              venenatis vehicula mi, ac vestibulum ipsum viverra et.
              Donec libero mauris, rutrum nec porttitor vitae, pretium ac
Same Family   magna. Vestibulum vitae leo ac eros porta porta. Vivamus
              dictum tellus at ante convallis id vestibulum lectus
              molestie. Aenean sit amet diam elementum risus
              adipiscing luctus. Ut scelerisque imperdiet neque ac
              consectetur. Vivamus hendrerit, quam faucibus porttitor
              accumsan, ligula metus vulputate mi.
Combining Typefaces
           This is St Transmission
           This is St Ryde. Both these fonts were designed by
           Sascha Timplan. In eu leo neque, ut porta ipsum. Integer
           congue nibh sed eros viverra convallis. Nam venenatis
   Same    vehicula mi, ac vestibulum ipsum viverra et. Donec
Designer   libero mauris, rutrum nec porttitor vitae, pretium ac
           magna. Vestibulum vitae leo ac eros porta porta.
           Vivamus dictum tellus at ante convallis id vestibulum
           lectus molestie. Aenean sit amet diam elementum risus
           adipiscing luctus.
Combining Typefaces
                This is Otari.
                This is PMN Caecelia. Both these typefaces are
                considered to be Humanist typefaces. In eu leo neque,
                ut porta ipsum. Integer congue nibh sed eros viverra
        Same    convallis. Nam venenatis vehicula mi, ac vestibulum
Classification   ipsum viverra et. Donec libero mauris, rutrum nec
                porttitor vitae, pretium ac magna. Vestibulum vitae leo
                ac eros porta porta. Vivamus dictum tellus at ante
                convallis id vestibulum lectus molestie. Aenean sit amet
                diam elementum risus adipiscing luctus.
Combining Typefaces
           THIS IS ARCHER SEMIBOLD
           This is Archer Book. The Archer typeface has several
           variations: book, light, thin, hairline, bold, semibold,
           medium, and italic styles. In eu leo neque, ut porta ipsum.
   Same    Integer congue nibh sed eros viverra convallis. Nam
Typeface   venenatis vehicula mi, ac vestibulum ipsum viverra et.
           Donec libero mauris, rutrum nec porttitor vitae, pretium
           ac magna. Vestibulum vitae leo ac eros porta porta.
           Vivamus dictum tellus at ante convallis id vestibulum
           lectus molestie.
Combining Typefaces
              This is Times New Roman
              This is Century Schoolbook. In eu leo neque, ut porta
              ipsum. Integer congue nibh sed eros viverra
              convallis. Nam venenatis vehicula mi, ac vestibulum
Too similar   ipsum viverra et. Donec libero mauris, rutrum nec
              porttitor vitae, pretium ac magna. Vestibulum vitae
              leo ac eros porta porta. Vivamus dictum tellus at ante
              convallis id vestibulum lectus molestie. Aenean sit
              amet diam elementum risus adipiscing luctus.
Dynamic Type
 on the Web
Embedding Fonts
                                Bulletproof Syntax
   @font-face
                                @font-face {
Uses CSS to load font
                                	   font-family: 'StRyde';
files for display in the
                                	   src: url('fonts/stryde-webfont.eot');
  end-user’s browser
                                	   src: local('?'), url('fonts/stryde-webfont.woff')
                                format('woff'), url('fonts/stryde-webfont.ttf') format
              Compatibility     ('truetype'), url('fonts/stryde-
                                webfont.svg#webfontFGe3Ckun') format('svg');
IE4+ Firefox 3.5+ Safari 3.1+
                                	   font-weight: normal;
     Opera 10+ Chrome 4.0+
                                	   font-style: normal;

                                }
Embedding Fonts

   @font-face
Uses CSS to load font           FontSquirrel @font-face generator
files for display in the
                                fontsquirrel.com/fontface/generator
  end-user’s browser

              Compatibility     FontSquirrel @font-face Kits
IE4+ Firefox 3.5+ Safari 3.1+
                                fontsquirrel.com/fontface
     Opera 10+ Chrome 4.0+
Embedding Fonts

           Hosted                Google Font Directory
          Services               code.google.com/webfonts
Uses CSS or JavaScript
to load font files hosted
                                 TypeKit
             by a service
                                 typekit.com
               Compatibility
 IE6+ Firefox 3.5+ Safari 3.1+   Fonts.com
      Opera 10+ Chrome 4.0+
                                 fonts.com
Embedding Fonts
                       cufón
Uses JavaScript to replace text with canvas or vml
               rendering of a font

      github.com/sorccu/cufon/wiki/about


                        Compatibility
      IE6+ Firefox 1.5+ Safari 3+ Opera 9.5+ Chrome 1.0+
FOUT

     flash of                Google WebFont Loader
unstyled text
                            google.com/apis/webfonts/docs/webfont_loader.html
       when the browser
shows the web-safe font
for a split second before   Adds javascript events and CSS classes for
    loading the external
                            different stages in the loading process.
                 font file
Font Hinting
Font Hinting
Old Windows

Windows 98


  ClearType


 DirectWrite


                                  More on font hinting
    damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x
Bring on Retina Displays!
Displays that have more pixels per inch than the human
   eye can perceive will make font-hinting obselete
Useful WP Stuff
wp_enqueue_script

<?php

wp_register_script(‘cufon’, bloginfo(‘template_directory’) .
‘/scripts/cufon.js’);

wp_enqueue_script(‘cufon’);

wp_enqueue_script(‘jquery’);

?>


                    via codex.wordpress.org/Function_Reference/wp_enqueue_script
wp_enqueue_style

<?php

wp_register_style(‘mycss’, bloginfo(‘template_directory’) .
‘/styles/mycss.css’);

wp_enqueue_style(‘mycss’);

?>




                    via codex.wordpress.org/Function_Reference/wp_enqueue_script
wp-typography
     wordpress.org/extend/plugins/wp-typography


                               protects against orphans
adds CSS classes to &,
uppercase words, numbers,      forces wrapping of long,
and quotations                 unbroken lines of text

smart replacement for marks,   supports over 40 languages
quotes, dashes, elipses,
fractions, ordinal suffixes,
mathetmatical symbols etc.
WP Google Fonts
wordpress.org/extend/plugins/wp-google-fonts
TypeKit Fonts for WordPress
wordpress.org/extend/plugins/typekit-fonts-for-wordpress
@chexee
        chelsea@livelylabs.com




DON’T
PANIC

More Related Content

Viewers also liked

My fav dogs
My fav dogsMy fav dogs
My fav dogsashcolt
 
Garden a-woodward
Garden a-woodwardGarden a-woodward
Garden a-woodwardashcolt
 
WordPress "No-Duhs" at Las Vegas WordCamp 2010
WordPress "No-Duhs" at Las Vegas WordCamp 2010WordPress "No-Duhs" at Las Vegas WordCamp 2010
WordPress "No-Duhs" at Las Vegas WordCamp 2010Chelsea Otakan
 
สาส์นนิเทศศาสตร์
สาส์นนิเทศศาสตร์สาส์นนิเทศศาสตร์
สาส์นนิเทศศาสตร์Nattapong Manlee
 
แฟ้มสะสมผลงาน Portfolio
แฟ้มสะสมผลงาน Portfolioแฟ้มสะสมผลงาน Portfolio
แฟ้มสะสมผลงาน PortfolioNattapong Manlee
 

Viewers also liked (12)

Your code as a crime scene
Your code as a crime sceneYour code as a crime scene
Your code as a crime scene
 
Connecting with users
Connecting with usersConnecting with users
Connecting with users
 
My fav dogs
My fav dogsMy fav dogs
My fav dogs
 
Garden a-woodward
Garden a-woodwardGarden a-woodward
Garden a-woodward
 
Agile Inception
Agile InceptionAgile Inception
Agile Inception
 
WordPress "No-Duhs" at Las Vegas WordCamp 2010
WordPress "No-Duhs" at Las Vegas WordCamp 2010WordPress "No-Duhs" at Las Vegas WordCamp 2010
WordPress "No-Duhs" at Las Vegas WordCamp 2010
 
สาส์นนิเทศศาสตร์
สาส์นนิเทศศาสตร์สาส์นนิเทศศาสตร์
สาส์นนิเทศศาสตร์
 
Novedades Visual Studio 2013
Novedades Visual Studio 2013Novedades Visual Studio 2013
Novedades Visual Studio 2013
 
Wahl user interviews
Wahl user interviewsWahl user interviews
Wahl user interviews
 
Portfolio2013
Portfolio2013Portfolio2013
Portfolio2013
 
แฟ้มสะสมผลงาน Portfolio
แฟ้มสะสมผลงาน Portfolioแฟ้มสะสมผลงาน Portfolio
แฟ้มสะสมผลงาน Portfolio
 
297 facebook presentation
297 facebook presentation297 facebook presentation
297 facebook presentation
 

Similar to Typography & WordPress

11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdfssusercc3ff71
 
Practical Typography or Typography vs Design
Practical Typography or Typography vs DesignPractical Typography or Typography vs Design
Practical Typography or Typography vs DesignRavi Bhadauria
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztEric Eggert
 
Itch Scratching
Itch ScratchingItch Scratching
Itch ScratchingRubyX
 
Better css font stacks unit verse
Better css font stacks   unit verseBetter css font stacks   unit verse
Better css font stacks unit verseXuan Le
 
VA1160 - Class 11
VA1160 - Class 11VA1160 - Class 11
VA1160 - Class 11Bryan Chung
 
Soylent: A Word Processor with a Crowd Inside
Soylent: A Word Processor with a Crowd InsideSoylent: A Word Processor with a Crowd Inside
Soylent: A Word Processor with a Crowd InsideMichael Bernstein
 
Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End DevelopersPascal Rettig
 
Unit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacingUnit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacingLauren Bratslavsky
 
Tips and Tricks how to use Typography
Tips and Tricks how to use TypographyTips and Tricks how to use Typography
Tips and Tricks how to use TypographyRavi Bhadauria
 
Designing for words: elements of typography style for the web
Designing for words: elements of typography style for the webDesigning for words: elements of typography style for the web
Designing for words: elements of typography style for the webLuke Murphy
 
Things I Know About Type [Field Guide]
Things I Know About Type [Field Guide]Things I Know About Type [Field Guide]
Things I Know About Type [Field Guide]Prakash Nair
 
What is Font and Typefaces? Explain any five font’s families in DTP. By Shobh...
What is Font and Typefaces? Explain any five font’s families in DTP. By Shobh...What is Font and Typefaces? Explain any five font’s families in DTP. By Shobh...
What is Font and Typefaces? Explain any five font’s families in DTP. By Shobh...Shobhit Jain
 

Similar to Typography & WordPress (20)

Typography
TypographyTypography
Typography
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
 
Practical Typography or Typography vs Design
Practical Typography or Typography vs DesignPractical Typography or Typography vs Design
Practical Typography or Typography vs Design
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
 
Itch Scratching
Itch ScratchingItch Scratching
Itch Scratching
 
Better css font stacks unit verse
Better css font stacks   unit verseBetter css font stacks   unit verse
Better css font stacks unit verse
 
VA1160 - Class 11
VA1160 - Class 11VA1160 - Class 11
VA1160 - Class 11
 
Css1 properties
Css1 propertiesCss1 properties
Css1 properties
 
Soylent: A Word Processor with a Crowd Inside
Soylent: A Word Processor with a Crowd InsideSoylent: A Word Processor with a Crowd Inside
Soylent: A Word Processor with a Crowd Inside
 
Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End Developers
 
Unit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacingUnit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacing
 
Tips and Tricks how to use Typography
Tips and Tricks how to use TypographyTips and Tricks how to use Typography
Tips and Tricks how to use Typography
 
Designing for words: elements of typography style for the web
Designing for words: elements of typography style for the webDesigning for words: elements of typography style for the web
Designing for words: elements of typography style for the web
 
Things I Know About Type [Field Guide]
Things I Know About Type [Field Guide]Things I Know About Type [Field Guide]
Things I Know About Type [Field Guide]
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Type
TypeType
Type
 
What is Font and Typefaces? Explain any five font’s families in DTP. By Shobh...
What is Font and Typefaces? Explain any five font’s families in DTP. By Shobh...What is Font and Typefaces? Explain any five font’s families in DTP. By Shobh...
What is Font and Typefaces? Explain any five font’s families in DTP. By Shobh...
 
N-Share: Typography
N-Share: TypographyN-Share: Typography
N-Share: Typography
 
Dalton mag typo pdf
Dalton mag typo pdfDalton mag typo pdf
Dalton mag typo pdf
 
Typography manual2pages
Typography manual2pagesTypography manual2pages
Typography manual2pages
 

Recently uploaded

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 

Recently uploaded (20)

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 

Typography & WordPress

  • 1. Typography & WordPress by C H E L S E A O T A K A N
  • 2. Legibility vs Readability
  • 5. Legibility the ability to recognize and understand individual letters
  • 6. Readability the ease of reading and understanding text
  • 7. Readability This is the normal amount of tracking for this font. Tracking uniformly adjusts the spacing Tracking between letters. The amount of universal space between letters This is an example of positive tracking. This is an example of negative tracking. CSS Property Kerning, unlike tracking, is the amount of letter-spacing space between specific letters designed by the type designer. Kerning attempts to distribute whitespace evenly between letters.
  • 8. Readability This is a nice spacey amount of leading. The lines still read as the same paragraph, but do Leading not interfere with the shapes of the words. The amount of space Leading is set at 1.5. That’s halfway between between lines of text single and double spaced. CSS Property This is a very small amount of leading. The leading is set at 1.0, equivalent to single line-height spaced. At this point the descenders and ascenders begin running into each other, compromising word shapes.
  • 9. Readability This is a very large amount of leading. The Leading leading is set at 3.5, equivalent to triple The amount of space between lines of text spaced. At this point the lines begin to look as CSS Property line-height if they are separate paragraphs is more difficult to read as a continuous block of text.
  • 10. Readability Not only is it a wholly remarkable book, it is also a highly successful one - more popular than the Celestial Home Care Omnibus, better selling than Fifty More Things to do in Zero Orphans Gravity, and more controversial than Oolon words by themselves at Colluphid's trilogy of philosophical blockbusters the end of a paragraph Where God Went Wrong, Some More of God's Greatest Mistakes and Who is this God Person Anyway? Douglas Adams The Hitchhiker’s Guide to the Galaxy
  • 11. Readability Not only is it a wholly remarkable book, it is also a highly successful one - more popular than the Celestial Home Care Omnibus, better selling than Fifty More Things to do in Zero Orphans Gravity, and more controversial than Oolon words by themselves at Colluphid's trilogy of philosophical blockbusters the end of a paragraph Where God Went Wrong, Some More of God's Greatest Mistakes and Who is this God Person Anyway? Douglas Adams The Hitchhiker’s Guide to the Galaxy
  • 12. Typography exists to honor content. Robert Bringhurst The Elements of Typographic Style
  • 13. Stop!
  • 14. 1 Get content first! 2 Read and interpret meaning and tone. 3 Determine content hierarchy and form.
  • 15. 1 Get content first! 2 Read and interpret meaning and tone. 3 Determine content hierarchy and form.
  • 16. 1 Get content first! 2 Read and interpret meaning and tone. 3 Determine content hierarchy and form.
  • 17. Transitional Handwritten Choosing Slab Serif Typefaces Geometric Humanist Sans Serif
  • 18. Respect your content via comicsanscriminal.com
  • 20. D E F I B R I L L ATO R
  • 21. Combining Typefaces Vitesse This is Vitesse Sans. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis vehicula mi, ac vestibulum ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac Same Family magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus. Ut scelerisque imperdiet neque ac consectetur. Vivamus hendrerit, quam faucibus porttitor accumsan, ligula metus vulputate mi.
  • 22. Combining Typefaces This is St Transmission This is St Ryde. Both these fonts were designed by Sascha Timplan. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis Same vehicula mi, ac vestibulum ipsum viverra et. Donec Designer libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus.
  • 23. Combining Typefaces This is Otari. This is PMN Caecelia. Both these typefaces are considered to be Humanist typefaces. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra Same convallis. Nam venenatis vehicula mi, ac vestibulum Classification ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus.
  • 24. Combining Typefaces THIS IS ARCHER SEMIBOLD This is Archer Book. The Archer typeface has several variations: book, light, thin, hairline, bold, semibold, medium, and italic styles. In eu leo neque, ut porta ipsum. Same Integer congue nibh sed eros viverra convallis. Nam Typeface venenatis vehicula mi, ac vestibulum ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie.
  • 25. Combining Typefaces This is Times New Roman This is Century Schoolbook. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis vehicula mi, ac vestibulum Too similar ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus.
  • 26. Dynamic Type on the Web
  • 27. Embedding Fonts Bulletproof Syntax @font-face @font-face { Uses CSS to load font font-family: 'StRyde'; files for display in the src: url('fonts/stryde-webfont.eot'); end-user’s browser src: local('?'), url('fonts/stryde-webfont.woff') format('woff'), url('fonts/stryde-webfont.ttf') format Compatibility ('truetype'), url('fonts/stryde- webfont.svg#webfontFGe3Ckun') format('svg'); IE4+ Firefox 3.5+ Safari 3.1+ font-weight: normal; Opera 10+ Chrome 4.0+ font-style: normal; }
  • 28. Embedding Fonts @font-face Uses CSS to load font FontSquirrel @font-face generator files for display in the fontsquirrel.com/fontface/generator end-user’s browser Compatibility FontSquirrel @font-face Kits IE4+ Firefox 3.5+ Safari 3.1+ fontsquirrel.com/fontface Opera 10+ Chrome 4.0+
  • 29. Embedding Fonts Hosted Google Font Directory Services code.google.com/webfonts Uses CSS or JavaScript to load font files hosted TypeKit by a service typekit.com Compatibility IE6+ Firefox 3.5+ Safari 3.1+ Fonts.com Opera 10+ Chrome 4.0+ fonts.com
  • 30. Embedding Fonts cufón Uses JavaScript to replace text with canvas or vml rendering of a font github.com/sorccu/cufon/wiki/about Compatibility IE6+ Firefox 1.5+ Safari 3+ Opera 9.5+ Chrome 1.0+
  • 31. FOUT flash of Google WebFont Loader unstyled text google.com/apis/webfonts/docs/webfont_loader.html when the browser shows the web-safe font for a split second before Adds javascript events and CSS classes for loading the external different stages in the loading process. font file
  • 33. Font Hinting Old Windows Windows 98 ClearType DirectWrite More on font hinting damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x
  • 34. Bring on Retina Displays! Displays that have more pixels per inch than the human eye can perceive will make font-hinting obselete
  • 38. wp-typography wordpress.org/extend/plugins/wp-typography protects against orphans adds CSS classes to &, uppercase words, numbers, forces wrapping of long, and quotations unbroken lines of text smart replacement for marks, supports over 40 languages quotes, dashes, elipses, fractions, ordinal suffixes, mathetmatical symbols etc.
  • 40.
  • 41. TypeKit Fonts for WordPress wordpress.org/extend/plugins/typekit-fonts-for-wordpress
  • 42.
  • 43. @chexee chelsea@livelylabs.com DON’T PANIC