Hierarchy. Not all headings are created equal. Looking at two different websites, A List Apart and Subtraction , you’ll notice the different style’s regarding font size and weight on headings to create a sense of hierarchy on the page.
Identity. Your company logo has to be unique. Also, your site design – colors, layout & images must also be unique. To consider headings, you must consider typography, and the current state of HTML typography is very poor, although it is improving, considering that only about 75% of all users have just 8 fonts installed on their computer. We need some style…we need to Diddy the web if you will. Sometimes being subtle is the way to go. Check out Rapha, which has a well harmonized typeface, and it brings out a nice effect.
Image Replacement. This is a nice answer to spruce up your web page with “Diddy” fonts. This means any user with a CSS enabled browser will see the replaced text, but ones without will just see plain text.
HTML like this:
<h1>
Yo! MTV Raps!
</h1>
<p>
…
</p>
Would be replaced by an image. Again, users who have browsers not supported by CSS would just see the plain text.
Text-Indent. With Text-Indent image replacement, a negative text-indent is used on the text inside the heading to make it move off the left of the screen, placing it out of view. Using CSS, you can adopt any design you like.
example:
h1 {
height: 43px;
background-image: url(images/blahblahblah.gif);
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
}
However, users not supporting CSS will not see the image. Oh well, sucks for them.
Providing Additional Markup. Basically, we’re covering up the text with an image, using span inside h1:
<h1>
<span></span>Yo! MTV Raps!
</h1>
This allows us to apply a background image to cover up the HTML text.
This is all I’m going to update today, not to be rude, but I need to concentrate on the book, and less on the wordpress post. Blogs are cool, but Wu Tang is for the children. I’m getting the lesson’s directly from The Art & Science Of CSS by Sitepoint.
I don’t want to leave you without any visual stimulation so here’s a picture from Mel’s Drive In, the Sunset Blvd. one :

OK, back to work.
Filed under: Books, Cascading Style Sheets, Lomo, Web Design , Adobe, CSS, Daily Log, Dreamweaver, HTML, Learning, Mel Drive In, Photo, Picture, Style Sheets