Texte vs Image pour bannière de titre de site Web?

Question

Le site Web que je suis en train de créer contient un titre assez volumineux pour sa bannière. L'utilisation d'une police simple lui donne un aspect très irrégulier, mais il semble qu'une image anti-aliasée soit un téléchargement assez volumineux. Quel serait le meilleur choix, ou y a-t-il une meilleure méthode pour les gros titres?

Voici la bannière avec du texte pur. Réduit, il n'est pas aussi visible, mais en taille réelle, il est d'environ 600px. Ouvrez l'image séparément pour le plein effet:

Answer 1

Certaines polices sont meilleures que d'autres en ce qui concerne les marques. Cela étant dit, une ombre texte sans déplacement de la même couleur que le texte avec un flou d'un pixel va guérir qu'as ya la plupart du temps:

h1 { 
    . 
    . 
    . 
    color: white; 
    text-shadow: 0 0 1px white; 
} 

j'ai trouvé qu'il est juste assez pour anticrénelage la police, et si je n'utilise pas l'ombre du texte pour d'autres effets, c'est une bonne solution pour tout ce qui est raisonnablement moderne. Les anciens navigateurs (vous savez qui vous êtes) obtiendront les jaggies, mais vous ne pouvez pas les gagner tous.

Answer 2

image est la façon dont j'irais. Il y a techniques out there pour rendre l'image plus petite sans pour autant renoncer à la qualité. De plus, une fois téléchargé la première fois, il peut être mis en cache afin qu'il ne soit plus nécessaire de le télécharger.

Answer 3

Je déconseillerais toujours d'utiliser des images pour du contenu textuel. Les navigateurs modernes ont des capacités anti-aliasing intégrées, de sorte que les grandes polices sont beaucoup plus belles qu'elles ne l'étaient il y a quelques années. (Et cela s'améliore de jour en jour.) En outre, l'utilisation d'un balisage tel que <h1> vous permet de conserver la valeur sémantique de votre titre, qui est perdue lorsque vous utilisez un tag <img> ou un CSS background-image.