- CSS Font Control
- Color Schemes
- An Inflatable Alphabet
- Table-Formed Fonts
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
An Inflatable Alphabet
Back to Josh Satangelo's endquote.com, to examine a little used but highly ingenious GIF alphabet hack. First, view the finished results (see Figure 6). It might surprise you to know that each character is actually a miniscule 4 x 5 pixel GIF. Figure 7 shows the "E" GIF up close. Each character is 3 pixels wide, with an extra pixel of blank space added to the right as a kerning mechanism, to keep the characters from abutting each other.
){kind=link}
){kind=link}
Figure 6 endquote.com.
Figure 7 A tiny "E."
Here's the code that calls the first line of characters into the page:
<table border="0" cellpadding="0" cellspacing="10"> <tr> <td align="right" valign="bottom"><img src="/images/letters/v.gif" height="5" border="0"><img src="/images/letters/o.gif" height="5" border="0"><img src="/images/letters/l.gif" height="5" border="0"><img src="/images/letters/u.gif" height="5" border="0"><img src="/images/letters/m.gif" height="5" border="0"><img src="/images/letters/e.gif" height="5" border="0"></td> <td><img src="/images/letters/t.gif" height="10" border="0"><img src="/images/letters/i.gif" height="10" border="0"><img src="/images/letters/l.gif" height="10" border="0"><img src="/images/letters/d.gif" height="10" border="0"><img src="/images/letters/e.gif" height="10" border="0"></td> </tr> </table>
Notice that the small letters are called in at their actual height, while the big letters are called in at double their height. The browser acts as a makeshift font-enlargement device. This technique works because Josh's particular font is monospaced and aliased. A transparent spacer GIF separates the words. When all the letters are loaded into the browser's cache, they don't have to be reloaded again for the remainder of the session.
Realistically, the bytes saved by these miniscule GIFs are more or less regained by the amount of HTML code it takes to call in and set the GIFs. Still, this inflatable letter hack is a clever alternative to the same old HTML fonts. And if you're constantly changing your header text, inflatable letters might make more sense than re-creating a large multiletter GIF every time you update your site. (Plus, you get to develop your own tiny pixelated fonts. Joy!)