Web fonts vs image replacement
This presentation is the property of its rightful owner.
Sponsored Links
1 / 19

WEB FONTS Vs. Image REPLACEMENT PowerPoint PPT Presentation


  • 119 Views
  • Uploaded on
  • Presentation posted in: General

WEB FONTS Vs. Image REPLACEMENT. ART340. Image Replacement. Putting Text in Images. Using an image to display text is not accessible, nor search engine friendly. Why? Visitors who cannot see your images will not be able to read the text. This includes search engine spiders.

Download Presentation

WEB FONTS Vs. Image REPLACEMENT

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Web fonts vs image replacement

WEB FONTS Vs.Image REPLACEMENT

ART340


Image replacement

Image Replacement


Putting text in images

Putting Text in Images

  • Using an image to display text is not accessible, nor search engine friendly.

  • Why? Visitors who cannot see your images will not be able to read the text. This includes search engine spiders.

  • So…what are your options if you want your text in an image?

    • Be inaccessible (not really an option).

    • The Fahrner Image Replacement Method

    • The Phark Method

    • The Shea Method


The fahrner image replacement method

The Fahrner Image Replacement Method

<h3 id=“header"><span>Sample Headline</span></h3>

#header{  width: 300px;  height: 50px;  background: #fffurl(header.gif) top left no-repeat;}

#header span{  display: none;}


Fantastic what s the problem

Fantastic! What’s the problem?

  • This method can cause some screen readers to skip over the heading entirely, as they will not read any text that has a display property of none.


The phark method

The Phark Method

#header{  width: 300px;  height: 50px;text-indent: -5000px;}


Don t tell me this one has a problem too

Don’t tell me this one has a problem, too?

  • In browsers where CSS is on, but images are off, nothing displays.

  • Really though…how often does this happen?


The shea method

The Shea Method

<h3 id="header"><span></span>Original Content</h3>

#header {  width: 329px;  height: 25px;  position: relative; }

#header span {  background: url(header.gif) no-repeat;  position: absolute;  width: 100%;  height: 100%; }

By absolutely positioning an empty <span> over the text element, the text is effectively hidden. If the image fails to load, the text behind it is still displayed. For this reason, images with transparency cannot be used with the Shea method.

Text (hides behind image)

Bg Image (on empty span)


Web fonts

Web Fonts


Embedding fonts

Embedding Fonts?

  • In a perfect world, we could embed the font into a website.

  • Technically, you can:

    @font-face {

    font-family: “League Gothic”;

    src: url(“/type/league_gothic.otf”)

    }

  • Issues regarding this have included:

    • Resistance from type foundries.

    • An inconsistency in supported font formats.


Resistance from foundries

Resistance from Foundries

  • Foundries make their money through licensing the use of their fonts.

  • Therefore, they want to deter people from downloading, copying, and using them for free.


Raw font formats

“Raw Font” Formats

  • OpenType [.otf]

    • The current and newest standard.

    • Screen and print version in single file.

    • Mac/PC compatible.

  • TrueType [.ttf]

    • Screen and print version in single file.

    • Majority of fonts that come automatically installed.

  • PostScript Font (Type 1) [.ps]

    • 2 parts (screen & print) – Must deliver both to printer.

    • Not cross-platform compatible.

    • Allows for high-quality, high-res. printing.

    • While it used to be the professional’s choice, it has been widely replaced.


What is a web font

What is a Web Font?

  • A web font is a specific format with a license that permits its use online.

  • Allows text to be dynamic, searchable and accessible.


Web font formats

Web Font Formats

  • WOFF (Web Open Font Format) fontsare compressed versions of .ttf/.otf. The emerging standard. (Firefox 3.6+, IE 9+, Chrome 5.)

  • Embedded OpenType [.eot] Developed by Microsoft. IE Only.(IE 4+)

  • TrueType Fonts[.ttf] Works in most browsers expect IE and iPhone (Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)

  • SVG (Scalable Vector Graphic) fonts for iPad and iPhone.

  • Cufón fontsuses JavaScript to render fonts.


Issues with file format

Issues with File Format

  • Some browsers support .otf and .ttf.

  • iOS devices (iPad and iPhone) require SVG.

  • IE only uses Microsoft’s proprietary EOT format:http://en.wikipedia.org/wiki/Embedded_OpenType

  • In addition, there is an new open source format (WOFF) that’s supported by newer browsers.


Times they are a changing

Times, they are a changing…

  • Why not just upload a “.ttf,” and link to it with the @font-face declaration.

    • Doing so would most likely violate your End User Licensing Agreement (EULA) with the font’s foundry.

    • To host fonts:

      • They have to be licensed for web embedding.

      • You’ll need several different font formats.

      • You’ll need the latest code for embedding all those formats.


Font squirrel

Font Squirrel

  • Free fonts for web use.

  • Font Squirrel provides for you a “Web Kit” that includes:

    • TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+

    • EOT fonts for Internet Explorer 4+

    • WOFF (Web Open Font Format) fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+ [compressed version of .ttf or .otf]

    • SVG fonts for iPad and iPhone

    • Demo.html andstylesheet.css so you can get going fast


Font hosting services

Font-Hosting Services

  • Typekit: http://typekit.com

    • Subscription-based pricing.

  • Fontdeck: http://fontdeck.com

    • Subscription-based pricing.

  • WebINK: http://www.extensis.com/en/WebINK/

    • Subscription-based pricing.

  • Google WebFonts: http://code.google.com/webfonts

    • Completely free through Creative Commons license!

      Other sites: http://webfonts.info/fonts-available-font-face-embedding


More every week

More every week…

  • Because @font-face is so new, time will tell which sites will be here to stay.

  • Regardless, web fonts are the wave of the future.

  • For more information, visit: http://webfonts.info


  • Login