This first headline is created with an H1 tag, specifying a font-size of 2em, and a font-family of Fontin. However, since most of my viewers are not likely to have Fontin installed, I have also specified Georgia, Times New Roman, and a generic Serif font as defaults.
H1 {
font-family: Fontin, Georgia, Times New Roman, Serif;
font-size: 2em;
}
For the second headline, also an H1 tag, I have specified a background image called headline.gif, which I created in Photoshop (with Fontin as the font). I also wrapped it in DIV with an ID=styled to allow me to specify a style separate from ALL H1 tags in the document. I specified the width and height of the H1 to be sure the entire image shows, and added auto-margins to center the image for Firefox, etc.
#styled h1 {
width: 500px;
height: 85px;
margin-left: auto;
margin-right: auto;
background: url(headline.gif) no-repeat left top;
}
This third headline is identical to the second, with the addition of a SPAN tag. I have then set the contents of the SPAN tag to not display, leaving only the background image. However, if someone using a screen reader or a text-only browser (or a search engine) visits, they'll get the text.
#styled h1 {
width: 500px;
height: 85px;
margin-left: auto;
margin-right: auto;
background: url(headline.gif) no-repeat left top;
}
#styled h1 span {
display: none;
}