均匀分配多尺寸标题中的空间

Question

我正在尝试使用CSS和HTML复制旧样式的标题。这是我想出的代码。

body {
  font-family: Palatino;
}

header {
  text-align: center;
}

h1 {
  text-transform: uppercase;
  font-weight: normal;
}

.small {
  font-size: 12pt;
  letter-spacing: .1ch;
}

.medium {
  font-size: 18pt;
  letter-spacing: .2ch;
}

.large {
  font-size: 27pt;
  letter-spacing: .3ch;
}

<h1>
  <span class="large">Officia in mollit</span><br>
  <span class="medium">elit anim ut culpa in irure</span><br>
  <span class="small">enim officia excepteur ex ad sint magna</span><br>
  <span class="large">magna ut minimu</span><br>
  <span class="medium">nisi dolore minim aute</span><br>
  <span class="small">nisi dolore minim aute laboris</span><br>
  <span class="medium">ex laboris culpa</span><br>
</h1>

但是，我的问题是标题的不同行之间的空间分布不均匀。

Answer 1

删除<br>元素，并将span元素设置为display: block;（或将它们替换为div元素）。在line-height: 1元素上设置<h1>，使行高适合字体大小。

body {
  font-family: Palatino;
}

header {
  text-align: center;
}

h1 {
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1;
}

h1 > span {
  display: block;
}

.small {
  font-size: 12pt;
  letter-spacing: .1ch;
}

.medium {
  font-size: 18pt;
  letter-spacing: .2ch;
}

.large {
  font-size: 27pt;
  letter-spacing: .3ch;
}

<h1>
  <span class="large">Officia in mollit</span>
  <span class="medium">elit anim ut culpa in irure</span>
  <span class="small">enim officia excepteur ex ad sint magna</span>
  <span class="large">magna ut minimu</span>
  <span class="medium">nisi dolore minim aute</span>
  <span class="small">nisi dolore minim aute laboris</span>
  <span class="medium">ex laboris culpa</span>
</h1>