The Types of Text Display on a Website

The website you’re building may contain two types of text: graphic text (which is really just an image) and HTML text (which is either in the HTML code or coming from a database). HTML text is also called live text because it is fully editable, just like the text in your word processor. You can apply various font and size settings to live text using CSS styles, or even just with HTML, and you can update the text easily, making live text the ideal choice for your website.

Graphic text versus HTML text

While live text gives you more flexibility to edit and update, it does have limitations. Your choices of fonts and visual effects are relatively limited, and you must rely on good coding to ensure that your text looks the same in all browsers, platforms, and devices. Graphic text, however, is just an image — essentially a picture of the text. Therefore you can apply any font you have in your toolbox — and any kind of effect — to create a cool-looking headline. While that sounds great, live text is the clear winner when it comes to the web — because the ability to edit and update text far outweighs the ability to look cool. In addition, live text has the added benefit of making your page more search-friendly because search engines can read what it says.

Language localization in web design

Another reason it makes sense to use live text for all copy elements is because many sites need to account for language localization (lingo for translation). If you’re developing a site that will support multiple languages and character sets, you cannot afford to use any graphical text (not counting text that is part of photography and content graphics, like an image supporting an article). It’s much more practical to maintain a database of live copy components translated for all the languages you support, and dynamically populate your web pages with the right content based on the country and language that a user selected.

Font specifications in web design

In the past, live text was limited to display in boring system fonts. There are now different ways to utilize custom fonts in your website designs. One of the first methods was sIFR (salable Inman Flash Replacement), an open source solution designed to replace short phrases (like headlines) by overlaying the original text with a Flash movie that displays the text in the assigned custom font. The replacement happens in a blink of an eye, but requires that Flash is installed in the browser. Remember, Flash does not work on Apple’s mobile devices.

Now, most designers are using either the @font-face CSS method, or a type-embedding service to expand the array of fonts available for live text. Designers will use these custom fonts for short phrases, navigation, and headlines, but often stick to the standard system fonts like Arial or Georgia for body copy. As these font-embedding technologies settle in and browsers extend more support for them, the trend will probably shift toward using all-custom fonts in traditional websites and mobile sites.

Have a font-fallback plan

Even if you’re using an embedding-font technology, whenever you specify a font in either HTML or CSS, you’re assuming that the font can be found. If the server that houses your embedded font is down, or the user’s browser does not support the font format, your font will not display properly. If you’re using standard system fonts, and for whatever reason the user doesn’t have the ones you specify, your page will not display properly. The browser will find a substitute font. This can wreak havoc on your page layout and design, because as you may know, fonts vary a great deal in size and width — even when set to the same point size.

Font Formats and Browser Compatibility
Browser Font Formats Supported Font File Extensions
Internet Explorer Embedded OpenType
Web Open Font Format
.eot
.woff
Mozilla (Firefox) OpenType Font
TrueType Font
Web Open Font Format
.otf
.ttf
.woff
Safari and Opera OpenType Font
TrueType Font
Scalable Vector Graphics
Web Open Font Format
.otf
.ttf
.svg
.woff
Chrome OpenType Font
TrueType Font
Scalable Vector Graphics
Web Open Font Format
.otf
.ttf
.svg
.woff
Apple mobile devices (Safari) Scalable Vector Graphics
OpenType Font
TrueType Font
.svg
.otf
.ttf
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.