When designers initially mockup websites and incorporate company logos it can be a real challenge to subsequently match captions and titles with the limited palette of web fonts available. This usually leads to the main page title being represented by an image which can be visually appealing, but unless you find another opportunity to use the main  <h1> tag, it can reduces the overall SEO score for your site.

SEO Tip: A <h1> tag should be included in the <body> section of the page. The text in the <h1> tag should include keywords that reflect the page content and must be between 25 and 150 characters long.

So if you have an image for your title and find it aesthetically difficult to incorporate a <h1> tag you can, with some CSS and HTML wizardry, still have both. If you look at my own header below, it is a simple image on the surface:

PoppaString Heading

Behind the image is <h1> tag and the following HTML code represents how you can accomplish it:

<div class="header">
	<div class="sitename">
		<h1>
			<a href="/">PoppaString A Blog About Windows Development and Digital Design</a>
		</h1>
	</div>
</div>

The following is the CSS responsible for showing the image and hiding the <h1> tag:

.header .sitename {
	width: 316px;
	height: 77px;
	z-index: 10;
	top: 10px;
}

.sitename {
	margin: 0px;
	padding: 0px;
	width: 262px;
	height: auto;
	position: absolute;
	z-index: 10;
}

.sitename h1 {
	margin: 0px;
}

.sitename a {
	width: 100%;
	height: 0px;
	overflow: hidden;
	display: block;
	padding-top: 77px;
	background-image: url("http://www.poppastring.com/home/images/PSHeader.png");
}

As far are as your average search engine indexer is concerned the <h1> tag is a perfectly viable part of the site and provides all the SEO benefits expected. Hope you find this useful!