SlideShare una empresa de Scribd logo
1 de 46
Descargar para leer sin conexión
IMPACT FONT   It makes the

      baby jesus

    CRY
(Alternate title: Font usage in WordPress Blogs)
             Ernie Hsiung, WordCamp Miami
                       April, 2013
WHO AM I?
(Source: http://bit.ly/GBhFaj)
The baby Jesus should never cry over a font


   WHAT HAS
  IMPACT EVER
  DONE TO YOU
Actually, surprise! Most of this
          presentation will be in Impact.

          But the point of it is is that in worlds
          of design and font selection: make sure
          whatever fonts you make are
          appropriate for whatever mood you
          design.




UNIQUE, BUT
APPROPRIATE
It’s ironic that I am
giving a presentation
on fonts and design
that I actually won’t be
talking much about
typography on a talk
for fonts. There are
probably talks better
suited. Instead I’ll leave
you with some quick
thoughts.
CONTRAST
REPETITION
ALIGNMENT
PROXIMITY
CRAP
FEDM font: Bevan (Google fonts)
Caption font: Condiment (Google fonts)
After kerning (CSS property: letter-spacing)
BACK IN THE
 OLD DAYS
     We used table tags and
Times New Roman and we liked it
LET’S JUST USE
   IMAGES
The project manager said to the developers,
          as they wept and wept.
<h1>
    <img src=”its-an-image-made-of-words.gif”>
</h1>

<font face=”Arial” size=”4”>
    <p>It’s a great day in 1996! I’m wearing my
bucket hat and listening to my new Jordan Knight
single!</p>
</font>
OKAY THEN,
     HOW ABOUT
     USING CSS
Issues with screen readers or no-image settings?
            Blindness schmindness!
h1 {
       background: url(‘thought-of-day-img.gif’);
       background-color: transparent;
       border: 0;
       overflow: hidden;
       *text-indent: -9999px;
}




<h1>Today’s thought of the day</h1>

<p>In 2035, we’ll turn to an oldies station and hear
“Toxic” by Britney Spears.</p>
SIFR & CUFON




  THE AMERICAN JUNIORS OF
WEB REPLACEMENT TECHNIQUES
@FONT-FACE
@font-face {
!    font-family: 'MyWebFont';
!    src: url('webfont.eot'); /* IE9 Compat Modes */
!    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
!         url('webfont.woff') format('woff'), /* Modern Browsers */
!         url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
!         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

h1 {
       font-family: 'MyFontFamily', Fallback, sans-serif;
}




<h1>Today’s thought of the day</h1>

<p>In 2035, we’ll turn to an oldies station and hear
“Toxic” by Britney Spears.</p>
For the love of all things Holy,


 SHOW ME
SOME LINKS
 ALREADY
MORE “DESIGNERY” STUFF
Thanks for tuning in!


ANY QUESTIONS?

                      Ernie Hsiung (e@erniehsiung.com)
                      Website: erniehsiung.com
                      Twitter: @ErnieAtLYD

Más contenido relacionado

Similar a Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)

Forget AMP – Make Fast Sites!
Forget AMP – Make Fast Sites!Forget AMP – Make Fast Sites!
Forget AMP – Make Fast Sites!Jon Henshaw
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2elliotjaystocks
 
Font embedding for the web
Font embedding for the webFont embedding for the web
Font embedding for the webWojtek Zając
 
Web Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenWeb Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenMark Wubben
 
Typography online
Typography onlineTypography online
Typography onlineJake Smith
 
Employing Custom Fonts
Employing Custom FontsEmploying Custom Fonts
Employing Custom FontsPaul Irish
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web TypographyTrent Walton
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline Worldelliotjaystocks
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?Greg Veen
 
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsThe NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsJason CranfordTeague
 
The New Web Typography
The New Web TypographyThe New Web Typography
The New Web TypographyForum One
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010canarymason
 

Similar a Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs) (20)

The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
Forget AMP – Make Fast Sites!
Forget AMP – Make Fast Sites!Forget AMP – Make Fast Sites!
Forget AMP – Make Fast Sites!
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
Font embedding for the web
Font embedding for the webFont embedding for the web
Font embedding for the web
 
Web Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenWeb Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp Copenhagen
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the web
 
Typography online
Typography onlineTypography online
Typography online
 
Employing Custom Fonts
Employing Custom FontsEmploying Custom Fonts
Employing Custom Fonts
 
Q6
Q6Q6
Q6
 
What the @font-face
What the @font-faceWhat the @font-face
What the @font-face
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
Q6
Q6Q6
Q6
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
 
The State of Web Type
The State of Web TypeThe State of Web Type
The State of Web Type
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?
 
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsThe NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
 
The New Web Typography
The New Web TypographyThe New Web Typography
The New Web Typography
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010
 

Último

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 

Último (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 

Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)

  • 1. IMPACT FONT It makes the baby jesus CRY (Alternate title: Font usage in WordPress Blogs) Ernie Hsiung, WordCamp Miami April, 2013
  • 4. The baby Jesus should never cry over a font WHAT HAS IMPACT EVER DONE TO YOU
  • 5. Actually, surprise! Most of this presentation will be in Impact. But the point of it is is that in worlds of design and font selection: make sure whatever fonts you make are appropriate for whatever mood you design. UNIQUE, BUT APPROPRIATE
  • 6.
  • 7.
  • 8. It’s ironic that I am giving a presentation on fonts and design that I actually won’t be talking much about typography on a talk for fonts. There are probably talks better suited. Instead I’ll leave you with some quick thoughts.
  • 9.
  • 11. CRAP
  • 12.
  • 13.
  • 14. FEDM font: Bevan (Google fonts) Caption font: Condiment (Google fonts)
  • 15. After kerning (CSS property: letter-spacing)
  • 16.
  • 17. BACK IN THE OLD DAYS We used table tags and Times New Roman and we liked it
  • 18.
  • 19. LET’S JUST USE IMAGES The project manager said to the developers, as they wept and wept.
  • 20.
  • 21. <h1> <img src=”its-an-image-made-of-words.gif”> </h1> <font face=”Arial” size=”4”> <p>It’s a great day in 1996! I’m wearing my bucket hat and listening to my new Jordan Knight single!</p> </font>
  • 22. OKAY THEN, HOW ABOUT USING CSS Issues with screen readers or no-image settings? Blindness schmindness!
  • 23. h1 { background: url(‘thought-of-day-img.gif’); background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } <h1>Today’s thought of the day</h1> <p>In 2035, we’ll turn to an oldies station and hear “Toxic” by Britney Spears.</p>
  • 24. SIFR & CUFON THE AMERICAN JUNIORS OF WEB REPLACEMENT TECHNIQUES
  • 26. @font-face { ! font-family: 'MyWebFont'; ! src: url('webfont.eot'); /* IE9 Compat Modes */ ! src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ ! url('webfont.woff') format('woff'), /* Modern Browsers */ ! url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ ! url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } h1 { font-family: 'MyFontFamily', Fallback, sans-serif; } <h1>Today’s thought of the day</h1> <p>In 2035, we’ll turn to an oldies station and hear “Toxic” by Britney Spears.</p>
  • 27.
  • 28.
  • 29.
  • 30. For the love of all things Holy, SHOW ME SOME LINKS ALREADY
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46. Thanks for tuning in! ANY QUESTIONS? Ernie Hsiung (e@erniehsiung.com) Website: erniehsiung.com Twitter: @ErnieAtLYD