Articles & Notes

HTML 4.01 defines 6 levels of head­ings: <h1> - <h6>. These head­ings are hier­ar­chi­cal in nature, indi­cat­ing the impor­tance of their con­tent from most impor­tant to least. It is a matter of best prac­tice to label the title of each page with the <h1> tag.

Seman­ti­cally, it is impor­tant the <h1> tag iden­tify the core essense of the sub­ject page. Such prac­tice is also ben­e­fi­cial to the acces­si­bil­ity and search rank­ing of your site.

Yet in prac­tice, many web design­ers con­sis­tently wrap the site iden­ti­fi­ca­tion (i.e. com­pany name or web­site name) in the <h1> tag, leav­ing the remain­der of the con­tent to share the <h2> - <h6> tags. Now, it is com­pletely appro­pri­ate to wrap the site iden­ti­fi­ca­tion in a <h1> tag on the home­page, but this prac­tice should be resisted on sub­pages. But out of lazi­ness, this is often done.

Let’s remove excuse for the lazy, and pro­vide code to prop­erly use the <h1> tag.

The fol­low­ing HTML and PHP code pro­vides the logic to wrap the site iden­ti­fi­ca­tion in a <h1> tag on the home page, and in a simple <div> tag on the remain­der of pages:

<?php
  function isHomePage() {
    if( ($_SERVER["REQUEST_URI"] == "/") || (substr($_SERVER["REQUEST_URI"], 0, 7) == "/index.") {
      return TRUE;
    }
    return FALSE;
  }
?>

<?php if( isHomePage() ) { ?>
  <h1 id="siteID">Company Name</h1>
<?php } else { ?>
  <div id="siteID">
    <a href="/">Company Name</a>
  </div>
<?php } ?>

Of course, some con­tent man­age­ment sys­tems have built in func­tions that do the job of isHomePage(). For exam­ple, with Word­Press you can use is_page('Home').

The fol­low­ing is an exam­ple of CSS for styling your <h1> and site identification:

h1 {
  clear: both;
  margin: 36px 0 18px;
  font: 54px/54px  "Palatino Linotype", serif;
  text-align: left;
  color: #333;
  text-shadow: #ccc 3px 3px 3px;
  text-transform: capitalize;
  }
h1#siteID, div#siteID {
  clear: both;
  float: left;
  height: 90px;
  width: 400px;
  margin: 0;
  padding: 0;
  text-indent: -9999px;
  background: url('images/logo.png') no-repeat;
  }

With this han­dling of the site iden­ti­fi­ca­tion, you are now free to iden­tify the title of each sub­or­di­nate page as <h1>.

The theory and the appli­ca­tion of opti­mal line height — called lead­ing in typo­graphic cir­cles — varies greatly in web design. Typog­ra­phy ref­er­ences con­sis­tently put ideal line height at 1.2 ems (a mea­sure of type equiv­a­lent to the the letter height or point size of a typeface).

Yet, pre­mier web design­ers (and typog­ra­phy affec­tion­atos) reg­u­larly set line height to 1.5 ems or more. That is a 33% over­state­ment of the pre­ferred height. This cre­ates a strip­ing of text, rather than the desired grey­ing. When Jason Santa Maria crafted the cur­rent A List Apart design, he set the line height to a whop­ping 1.8 ems. Why is this done?

This is partly explained when one con­sid­ers the line length of the sub­ject designs. The designs require line lengths (or mea­sure) notably longer than those rec­om­mended in typo­graphic ref­er­ences. The increased line length demands increased line height to aide eye track­ing. This does not make for ideal type, but it does make for the best typog­ra­phy for the sub­ject design. James Felici says it well in his book The Com­plete Manual of Typography:

An axiom of com­put­er­ized type is that lead­ing should gen­er­ally be 1.2 times the point size of type. This isn’t a ter­ri­bly useful guide­line, because it’s clear that lead­ing must increase along with the measure.

One con­se­quence of this is other web design­ers look at what the elite are doing, and apply that line height regard­less of line length. This leads to line heights that are unnec­es­sar­ily out of proportion.

So as a gen­eral rule, an opti­mal line length is 60 to 65 char­ac­ters, or 30 ems. At that mea­sure, the ideal line height should be approx­i­mately 1.2 ems. As line length increases, line height should follow pro­por­tion­ately. The body text in the KING­desk design is set to a mea­sure of nearly 27 em and a line height of 1.2 ems.