SlideShare a Scribd company logo
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

Your code as a crime scene
Your code as a crime sceneYour code as a crime scene
Your code as a crime scene
Vicenç García-Altés
 
Connecting with users
Connecting with usersConnecting with users
Connecting with users
Katherine Wahl
 
My fav dogs
My fav dogsMy fav dogs
My fav dogs
ashcolt
 
Garden a-woodward
Garden a-woodwardGarden a-woodward
Garden a-woodward
ashcolt
 
Agile Inception
Agile InceptionAgile Inception
Agile Inception
Vicenç García-Altés
 
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
Chelsea Otakan
 
สาส์นนิเทศศาสตร์
สาส์นนิเทศศาสตร์สาส์นนิเทศศาสตร์
สาส์นนิเทศศาสตร์
Nattapong Manlee
 
Novedades Visual Studio 2013
Novedades Visual Studio 2013Novedades Visual Studio 2013
Novedades Visual Studio 2013
Vicenç García-Altés
 
Wahl user interviews
Wahl user interviewsWahl user interviews
Wahl user interviews
Katherine Wahl
 
Portfolio2013
Portfolio2013Portfolio2013
Portfolio2013
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

Typography
TypographyTypography
Typography
Sai Kiran Reddy
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
ssusercc3ff71
 
Practical Typography or Typography vs Design
Practical Typography or Typography vs DesignPractical Typography or Typography vs Design
Practical Typography or Typography vs Design
Ravi 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 jetzt
Eric Eggert
 
Itch Scratching
Itch ScratchingItch Scratching
Itch Scratching
RubyX
 
Better css font stacks unit verse
Better css font stacks   unit verseBetter css font stacks   unit verse
Better css font stacks unit verse
Xuan Le
 
VA1160 - Class 11
VA1160 - Class 11VA1160 - Class 11
VA1160 - Class 11
Bryan Chung
 
Css1 properties
Css1 propertiesCss1 properties
Css1 properties
Sahil Alipuria
 
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
Michael Bernstein
 
Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End Developers
Pascal Rettig
 
Unit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacingUnit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacing
Lauren 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 Typography
Ravi 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 web
Luke 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
 
Web Typography
Web TypographyWeb Typography
Web Typography
Denise Kolodzey
 
Type
TypeType
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
 
N-Share: Typography
N-Share: TypographyN-Share: Typography
N-Share: Typography
Siti Aishah Zahari
 
Dalton mag typo pdf
Dalton mag typo pdfDalton mag typo pdf
Dalton mag typo pdf
Addie Kosmaczewska
 
Typography manual2pages
Typography manual2pagesTypography manual2pages
Typography manual2pages
KristinaNiesova
 

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

Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 

Recently uploaded (20)

Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Artificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic WarfareArtificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic Warfare
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 

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