- 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
Table-Formed Fonts
Finally, here's an exercise in the absurd but possible. By day, Peter Rentz is the senior multimedia designer at CNN Interactive. By night, he invents fonts using HTML tables and a 1 x 1 pixel colored GIF. When you get right down to it, Web fonts are just a series of pixels arranged in a specific way. And HTML tables have the ability to arrange images in a specific way. Hmmm. What if you coded a series of table data cells that repeatedly called in the same single-pixel GIF? And what if you arranged those data cells to form specific patters? And what if the patterns you formed looked like letters? Then you would have created the mesa.beta font (see Figure 8).
){kind=link}
Figure 8 forcefield.co.uk.
To get an idea of how this works, here's the code that generates the 22-point letter K:
<!--start 22k--> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td ><img src="pixel.gif" width="7" height="2" ></td> <td ></td> <td ><img src="pixel.gif" width="7" height="2" ></td> </tr> <tr> <td><img src="pixel.gif" width="7" height="8" ></td> <td></td> <td><img src="pixel.gif" width="7" height="8" ></td> </tr> <tr> <td><img src="pixel.gif" width="7" height="4" ></td> <td><img src="pixel.gif" width="7" height="4" ></td> <td align="left"><img src="pixel.gif" width="5" height="4" ></td> </tr> <tr> <td><img src="pixel.gif" width="7" height="4" ></td> <td></td> <td><img src="pixel.gif" width="7" height="4" ></td> </tr> <tr> <td><img src="pixel.gif" width="7" height="4" ></td> <td></td> <td><img src="pixel.gif" width="7" height="4" ></td> </tr> </table> <!--end 22k-->
To obtain mesa.beta font, simply visit http://www.forcefield.co.uk/mesa/ and download the HTML. Create a colored 1 x 1 pixel GIF, and you're ready to go. Granted, table-formed fonts aren't exactly the most direct way to generate Web type. It would be much simpler to download Rentz's regular bitmapped version of the font, create your text in Photoshop, and save it as a GIF.
But table-formed fonts are a crowning example of HTMinimaList ingenuity. With the advent of handheld Net devices, solutions such as table-formed fonts may yet come into their own as more than mere novelties. The point is, HTML is powerful in its own right, even without Photoshop, Illustrator, or Flash.