In one of my help projects, I put together styles for the topic titles and headings that visually divides the sections of the topics. Size and font weight aren’t the only things available for making headings stand out and the structure of a help topic understandable for the user. Here’s the styling I used, as well as another style that may help headings visually noticeable.

These styles involve a background image, though a background color can do just as well. I created an image 1 pixel wide and about 20 high to tile horizontally across the heading. The image is a gradient from tan to white. Here is the CSS for the topic title:

h1 {
font-size: 14pt;
font-weight: normal;
font-style: normal;
border-top: 1px solid #dfd4b9;
border-bottom: 1px solid #dfd4b9;
width: 100%;
text-indent: 12pt;
color: #44536c;
white-space: nowrap;
margin-bottom: 12pt;
line-height: 150%;
background: top left url("images/h1.jpg") repeat-x;
}

The borders and the background image run the width of the document (width: 100% and the repeat-x attributes) to give a complete visual separation between sections. The margin of my document is zero, so the text-indent pushes the text inward; the white-space: nowrap attribute will keep the title all on one line so we don’t get strange indentation on a second line. The line height sets the spacing between the heading text and the borders.

A second way to get the heading to stand out would be to use a background image that is 1 pixel high and a few thousand pixels wide. The image would have a gradient running from left to right and have a repeat-y attribute in the CSS. Otherwise using the above styles, the heading would have a color gradient that would begin at the left edge of the page and thus help catch attention.

Part of the purpose of this kind of styling is not just to catch attention, but also to add some visual interest to the document.