El método más simple que he encontrado para reemplazar texto con imágenes, por ejemplo, para hacer más vistosos los títulos en una web y no perder la semántica del HTML, es el de text-indent (creado por Mike Rundle).
Solo se necesita:
h1 { text-indent: -9000px; background: url(image.jpg) no-repeat 0 0; width: 200px; /* Ancho de la imagen */ height: 80px; /* Alto de la imagen */ } |
Lo encontré en esta presentación super intersante sobre tipografía para Web.