In my previous work experience, I designed and created pages and graphics for a company’s intranet. In this context, SEO practices were not number one on my list of priorities. Adding a few keywords to help the internal search engine sort through the pages was enough. Coming to SEO.com from this environment has been eye-opening to the importance of applying good SEO practices during the design phase. Unfortunately, optimizing content for search engines can often lead to challenges in maintaining a desired design.
Text Rendering: SEO vs. Design
An area of uncertainty that I would like to focus on is the rendering of text, since text is also an important contributor to a page’s search rankings. It is important to try to keep page content coded in HTML with the appropriate tags (h1, p, etc) for search engine and accessibility purposes. How might this limit a designer, when text is coded in HTML and styled with CSS? As with the range of available operating systems, browsers, screens, and settings, all of which can alter the way a web page is displayed, there is variation in the fonts that viewers have installed on their computers. Consequently, choosing a particular font does not guarantee that your text will actually display in this font to all of your users.
Why does it matter if text shows up in Times New Roman instead of Papyrus? Well, it doesn’t necessarily, but if you’re at all concerned with the user experience (And why wouldn’t you be?) then it certainly does. The fonts you use can, for example, emphasize important text, establish your site’s branding, or make content more or less readable, affecting how long a viewer stays on your site and what they decide to do. What, then, is the best way to display the fonts you want while maintaining compatibility with multiple systems and staying search engine friendly?
CSS
First of all, CSS does have a catch if there is a font you wish to use that a user does not have. You can list the name of the desired font, alternative fonts, and even a font family that you want applied to the text if your first choice is not available. However, if your ideal font is not the one that ends up being displayed, layout issues can arise due to variations in font spacing and sizes.
Image Replacement
Another way web designers cope is through image replacement. You can create an image of the text in the font you wish to use and this image will display the content instead of coded text. Problem solved, right? Not necessarily. Using images with “alt” tags will make that text less relevant to search engines than if it were coded and tagged appropriately. There are some work-around techniques for coping with this issue, including placing images in the background and indenting coded text off of the page and out of view, setting the display of the coded text to “none”, or using the CSS layout to hide coded text behind images. However, Google does warn that “Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors.” It is therefore possible that even these adapted techniques can negatively affect your search rankings, as well as interfering with screen reader accessibility.
FLIR
FLIR (Face Lift Image Replacement) plays off of the concept of image replacement, but does so dynamically using PHP. Text can still be coded appropriately in HTML for search engines even though it is being swapped out with an image for the viewer. Possible downsides of this method include its reliance on PHP, and the fact that text cannot be selected, which decreases site usability.
sIFR
Another method is to use Scalable Inman Flash Replacement (sIFR). This method combines Flash, Javascript, and CSS to do dynamic text replacement as well. Like FLIR, text remains SEO friendly but the text is replaced with a Flash file instead of an image. This technique, like the others, is not without its drawbacks which include increased loading time and a reliance on the viewer having a Flash Player installed.
Cufon
Cufon is another popular method which can render fonts using Javascript. This technique allows for faster load times, but uses embedded fonts, which can cause copyright issues with certain font license agreements. Also, unlike sIFR, the text will not be selectable.
CSS3 and Embedded Fonts
Browsers are beginning to support the next version of CSS (level 3), which also allows for fonts to be downloaded from the web. Copyright violations are also a concern here as well as possible security issues.
Conclusion
Although none of these methods are perfect, new technologies and techniques come closer every day to addressing the need for both good design and searchable content. At this point it is up to the designer to navigate these options and adapt their design based on the requirements of the project.
Read more about these web typography techniques here:
http://thinkclay.com/technology/cufon-sifr-flir
http://www.webdesignerwall.com/general/fonts-and-the-web/
You must be logged in to post a comment.