Simpre ha sido la mejor opción para los encabezados el usar texto en lugar de imágenes, y si necesitas poner una imagen la mejor opción es utlizar esa imagen de fondo y ocultar en texto dentro de un div
. Esta técnica es muy útil sobre todo para lectores de pantalla y optimización en motores de búsqueda y que en realidad se está utilizando texto.
Ejemplo, tenemos nuestro HTML para el encabezado principal así:
<h1><span>Encabezado principal</span></h1>
Y nuestro CSS debe estar de la siguiente manera
h1 {
background: url(imagen-de-encabezado.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
}
Cómo puedes ver estamos utilizando HTML regular para las etiquetas h1
y por medio del CSS lo estamos reemplazando por una imagen. Al texto lo mandamos hasta la derecha a -5000 pixeles.