1 / 19

WEB FONTS Vs. Image REPLACEMENT

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.

ember
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB FONTS Vs.Image REPLACEMENT ART340

  2. Image Replacement

  3. 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

  4. 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;}

  5. 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.

  6. The Phark Method #header{  width: 300px;  height: 50px;text-indent: -5000px;}

  7. 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?

  8. 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)

  9. Web Fonts

  10. 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.

  11. 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.

  12. “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.

  13. 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.

  14. 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.

  15. 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.

  16. 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.

  17. 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

  18. 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

  19. 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

More Related