Controlling the line-height of a <br> tag within a heading tag?

Question

I have a heading (<h1>) that has a sort of tagline below it. (I used a <small> tag and set font-size to a certain percent so it lines up perfectly when I change font-size of the heading for smaller screens. I'm using em units, if that matters.)

At first, the <small> tag sat nicely underneath the main heading, but I realized I forgot the HTML5 DOCTYPE declaration. So, after I discovered this omission and corrected it, the spacing was all wrong.

Here's my code:

HTML:

<h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>

CSS:

h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }

h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100; }

And here's the before and after:

I have searched through StackOverflow, but I'm not sure how to proceed. I've read that a <br /> tag simply line breaks, but it inherits the line-spacing, and line-spacing: (value) does not work, nor do margins or padding.

What I need is a simple, cross-browser solution. I used Chrome for the screenshot. Support for IE6-7 is not needed, though support for IE8 would be nice.

Answer 1

Ultimately the answer that works as the best solution is found here (3rd example):

http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head

@cimmanon posted a very helpful solution, but to be safe, I'll stick with what Steve Faulkner said about this being a more semantic and SEO-friendly solution over using an <h1> tag and <h2> tag for a subheading, or inline elements inside a heading tag, regardless of styling.

Here's the solution:

HTML:

  <header>
    <h1 class="banner">Justin Wilson</h1>
    <p>WEB + GRAPHIC DESIGNER</p>
  </header>

CSS:

  h1.banner {
  text-align: center;
  display: block;
  font-family: 'arvil';
  font-size: 6.5em;
  color: #94babd;
  font-weight: normal;
  margin: 1em 0 0 0;/*purely for display purposes, really*/ }

  header > p {font-family: Helvetica, sans-serif;
  font-size: 1.75em;
  color: #888;
  letter-spacing: 1px;
  font-weight: 100;
  text-align: center;
  margin:0;  }

And the live demo (might not look good to you without the free Arvil font, from Lost Fonts).

http://cssdeck.com/labs/xysgkffs

Thanks for all the answers thus far.