Make Fancy Headings With CSS

Headlines are common on most web pages. In fact, pretty much any text document tends to have at least one headline so that you know the title of what you're reading. These headlines are coded using the HTML heading elements — h1, h2, h3, h4, h5, and h6.

On some sites, you may find that headlines are coded without using these elements. Instead, headlines may use paragraphs with specific class attributes added to them, or divisions with class elements. The reason we often hear about this incorrect practice is that the designer "doesn't like the way headings look". By default, headings are displayed in bold and they are larger in size, especially the h1 and h2 elements which display in much larger font size than the rest of a page's text. Keep in mind this is only the default look of these elements! With CSS, you can make heading look however you want! You can change the font size, remove the bold, and so much more. Headings are the proper way to code a page's headlines. Here are some reasons why.

Why Use Heading Tags Rather Than Divisions

This is the best reason to use headings, and use them in the correct order (ie. h1, then h2, then h3, etc.). Search engines give the highest weighting to text included inside heading tags because there is a semantic value to that text. In other words, by labeling your page title H1, you tell the search engine spider that that is the #1 focus of the page. H2 headings have #2 emphasis, and so on.

You Don't Have to Remember What Classes You Used to Define Your Headlines

When you know that all your Web pages are going to have an H1 that is bold, 2em, and yellow, then you can define that once in your stylesheet and be done. 6 months later, when you're adding another page, you just add an H1 tag to the top of your page, you don't have to go back to other pages to find out what style ID or class you used to define the main headline and sub-heads.

Provide a Strong Page Outline

Outlines make text easier to read. That's why most U.S. schools taught students to write an outline before they write the paper. When you use heading tags in an outline format, your text has a clear structure that becomes apparent very quickly. Plus, there are tools that can review the page outline to provide a synopsis, and these rely on heading tags for the outline structure.

Your Page Will Make Sense Even With the Styles Turned Off

Not everyone can view or use style sheets (and this comes back to #1 — search engines view the content (text) of your page, not the style sheets). If you use heading tags, you're making your pages more accessible because the headlines provide information that a DIV tag would not.

It Is Helpful for Screen Readers and Website Accessibility

Proper use of headings creates a logical structure for a document. This is what screen readers will use to "read" a site to a user with vision impairment, making your site accessible to people with disabilities. 

Style the Text and Font of Your Headlines

The easiest way to move away from the "big, bold, and ugly" problem of heading tags is to style the text the way that you want them to look. In fact, when working on a new website, it's best to typically write the paragraph, h1, h2, and h3 styles first thing. Stick with just font family and size/weight. For example, this might be a preliminary style sheet for a new site (these are just some example styles that could be used):

You can modify the fonts of your headline or change the text style or even the text color. All of these will turn your "ugly" headline into something more vibrant and in keeping with your design.

Borders Can Dress Up Headlines

Borders are a great way to improve your headlines and are easy to add. But don't forget to experiment with the borders — you don't need a border on each side of your headline. And you can use more than just plain boring borders.

We added a top and bottom border to our sample headline to introduce some interesting visual styles. You could add borders in any way that you wanted to achieve the design style you want.

Add Background Images to Your Headlines for Even More Pizazz

Many Web sites have a header section at the top of the page that includes a headline — typically the site title and a graphic. Most designers think of this as two separate elements, but you don't have to. If the graphic is there just to decorate the headline, then why not add it to the heading styles?

The trick to this headline is that we know our image is 90 pixels tall. So we added padding to the bottom of the headline of 90px (padding: 0.5 0 90px 0p;). You can play with the margins, line-height, and padding to get the text of the headline to display exactly where you want it.

One thing to remember when using images is that if you have a responsive website (which you should) with a layout that changes based on screen sizes and devices, your headline will not always be the same size. If you need your headline to be an exact size, this can cause problems. It is one of the reasons why we generally avoid background images in a headline, as cool as they can sometimes look.

Image Replacement in Headlines

This is another popular technique for Web designers because it allows you to create a graphical headline and replace the text of the heading tag with that image. This is truthfully an antiqued practice from web designers, who had access to very few fonts and wanted to use more exotic fonts in their work. The rise of web fonts has really changed how designers approach sites. Headlines can now be set in a wide variety of fonts and images with those fonts embedded are no longer needed. As such, you will only find CSS images replacement for headlines on older sites that have not yet been updated to more modern practices.

Edited by Jeremy Girard