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.

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

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

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

#header span{ display: none;}

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

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

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

<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

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

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

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?

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

WOFF (Web Open Font Format) fonts are 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 fonts uses JavaScript to render fonts.

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… 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

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 and stylesheet.css so you can get going fast

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…

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