A Brief Introduction to Text Replacement with SIFRBy Jason Beaird
Webfonts are great, and their adoption by a growing number of browsers has really helped push web design forward. Services such as Typekit make it easy to implement webfonts without a lot of hassle. Unfortunately, there are still a few reasons that you might want to use text replacement — licensing restrictions on the fonts that you need to use for branding reasons being chief among them.
By putting these two concepts together, web designer and developer Shaun Inman was able to create a technique he called Inman Flash Replacement (IFR), the precursor of sIFR. IFR was a revolutionary development in typography for the Web, but it had a few minor shortcomings. Its most notable downside was that it could only be used to replace a single line of text. Recognizing the potential of this technology, Mike Davidson and Mark Wubben, along with countless supporters and testers, have put together a well-documented and easy-to-implement solution — sIFR — that has been released to the development community as open source.
Finding examples of sIFR text on web sites can be difficult, especially when they use it to display fonts that are typically installed on many computers. ABC News, for instance, used to use sIFR to show news headlines in Futura, as the figure below illustrates. Futura is a font that’s installed for OSX users by default, but by using sIFR, ABC can be assured that a large majority of its users see headlines in the same typeface.
Have you used SIFR to replace text on the sites you’ve built? What tips or warnings can you share?
SitePoint WordPress Restaurant Theme
SitePoint WordPress Ecommerce Theme
SitePoint WordPress Portfolio Theme
Design Essentials with Sketch
User Interface Design with Sketch 4
Jump Start Responsive Web Design, 2nd Edition
Designing UX: Prototyping
Researching UX: Analytics
- 1 IDEO Font Map: A Faster Way to Find the Best Google Fonts
- 2 The Top 9 Animation Libraries for UI Designers in 2017
- 3 New Podcast: #Ep1 - Designing for Scale: Inside Atlassian’s Design Teams
- 4 Inspirational UI Design Ideas for Your Next Website Project
- 5 3 Mobile UX Trends That Are Changing How We Design