Okay, I just did my first “cufón vs. @font-face” comparison and cufón ended up looking way better. These tests are from my online resume where I have been using cufón for quite some time to display the headers in the Kon Tiki Kona font (you won’t be able to tell the difference unless you are viewing this article on its own; if you view it from the front page of the blog both images will appear squished):

@font-face Test

cufón Test

Conclusion

Unless I can find a way to get lettering displayed with the CSS @font-face property to turn up clearer I may be forced to stick with cufón for now.

When I started learning about CSS in 1999 one of the CSS values I learned about was that of overline for the text-decoration property. It didn’t seem to have much to use it for but I did stumble across one website where overline and underline effects were added to links when hovered over.

A short time later I started a site at http://radio.lionking.org and since the title treatment for this animated film has an overline effect in it I decided to add one with CSS to the title of my site. The H1 for the title is as follows:

<h1>R<span>ADIO</span> L<span>ION KIN</span>G</h1>

Using my old school CSS techniques from “The Year 2000″ I set the base font-size for the H1 to 70 pixels (I might change it to an em-based sizing sometime) then set anything wrapped within a SPAN in the H1 to 75% of that. Then the second SPAN (the one that needs the overline effect) has text-decoration: overline; applied to it. The result, which turned out quite well, can be seen below or at the site:

In twelve-plus years of working with HTML I’ve noticed that many web developers take a crash course in it, learn a few basics, then “move on” to the “real stuff.” While HTML is admittedly easy to learn and not super difficult to master there are still many concepts relating to it which seem to be ignored or are maybe completely unheard of in the web development world. When these concepts are grasped they significantly increase productivity, clarity of code, ease-of-maintenance, etc. But so many people seem content to live without these benefits. In my own development experience I’ve come to be aware of many of these concepts but thought they were too idiosyncratic to bring up to other people. But the book I’m currently reading, HTML & CSS: The Good Parts by Ben Henick and published by O’Reilly Press, crystallizes my thought process on these matters and shows that they really are important to sites of any size. This is not a book to learn HTML or CSS from. It exists at an intermediate or perhaps advanced level but any serious web developer wanting to perfect their coding practices will benefit from reading this book. As I write this I am on page 68 in the book so I may add more to this entry later.