控制标题标记中<br>标记的行高？

Question

我有一个标题(<h1>),下面有一个标语.(我使用了一个<small>标签并设置font-size为一定百分比,因此当我更改font-size较小屏幕的标题时,它会完美排列.我正在使用em单位,如果这很重要.)

起初,<small>标签很好地位于主标题下面,但我意识到我忘记了HTML5 DOCTYPE声明.所以,在我发现这个遗漏并纠正之后,间距都是错误的.

这是我的代码:

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; }

以下是之前和之后:

我已经搜索了StackOverflow,但我不确定如何继续.我已经读过一个<br />标签只是换行符,但是它继承了行间距,并且line-spacing: (value)不起作用,也没有边距或填充.

我需要的是一个简单的跨浏览器解决方案.我使用Chrome浏览器截屏.不需要支持IE6-7,但支持IE8会很好.

Answer 1

最终，可以在这里找到最佳解决方案的答案（第三个示例）：

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

@cimmanon 发布了一个非常有用的解决方案，但为了安全起见，我会坚持 Steve Faulkner 所说的，这是一个更加语义化和 SEO 友好的解决方案，而不是使用标签<h1>和<h2>副标题标签，或标题标签内的内联元素，无论样式如何。

这是解决方案：

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;  }

还有现场演示（如果没有来自 Lost Fonts 的免费 Arvil 字体，您可能看起来不太好）。

http://cssdeck.com/labs/xysgkffs

感谢迄今为止所有的答案。