(번역) CSS에 대한 깊은 이해: 폰트 매트릭스, line-height와 vertical-align

Catamaran 폰트를FontForge 에서 열어 매트릭스를 살펴봅시다:

• em-square는 1000입니다.
• ascender는 1100이고, descender는 540입니다. 몇 가지 테스트를 진행해 보니, 브라우저가 OSX에서는 HHead Ascent/Descent 값을 사용하며, Windows에서는 Win Ascent/Descent 값을 사용하는 것으로 보입니다.(이 값들은 서로 다릅니다.) 또한, Capital Height는 680이고, X height 값은 485입니다.

그림 3. FontForge를 사용한 폰트 매트릭스 값

즉, Catamaran 폰트는 1000단위 em-square에서 1100+540단위를 사용하며, font-size: 100px;을 설정하면 높이값은 164px이 됩니다. 이 계산된 높이는 요소의 content-area를 정의하며이 아티클의 나머지 부분에서 이 용어를 참조할 것입니다. content-area는 background 값이 적용되는 영역이라고 생각할 수 있습니다. ²

또한 대문자는 68px(680단위), 소문자(x-height)는 49px(485단위)일 것이라는 것을 예상할 수 있습니다. 결과적으로, 1ex = 49px 이고, 1em 은 164px이 아닌 100px입니다. (감사하게도, em은 계산된 높이값이 아닌 font-size를 기반으로 합니다.)

그림 4. Catamaran 폰트: font-size:100px;을 설정했을 때 UPM(Units Per Em)과 픽셀 사이즈.

더자세히살펴보기에앞서, 앞으로 살펴볼 내용과 관련된 사항을 간단히 정리하도록 하겠습니다. <p>요소가스크린에렌더링될때, 너비에따라서여러줄로구성될수있습니다. 각각의라인은한개혹은여러개의인라인요소들(HTML 태그혹은텍스트컨텐츠를위한익명의인라인요소)들로구성될수있으며, 각라인은 line-box라고 불립니다. line-box의높이는자식 요소의높이값을기반으로 합니다. 결국브라우저는각인라인요소들의높이를계산합니다. 그리고자식의가장높은곳부터가장낮은곳까지의길이가 line-box의 높이가 됩니다. 결과적으로, line-box는 기본적으로그들의자식을모두포함하기충분한높이값을가지게됩니다.

각 HTML 요소는사실 line-box의 스택입니다. 만약 각 line-box의높이값을알고있다면, 여러분은한요소의높이값을알고있을것입니다.

이전의 HTML 코드를아래와같이업데이트 한다면:

 <p>
 Good design will be better.
 <span class="a">Ba</span>
 <span class="b">Ba</span>
 <span class="c">Ba</span>
 We get to make a consequence.
</p>

3개의 line-box가 생성될 것입니다.

• 첫 번째와 마지막 line-box는 각각 단일 익명 인라인 요소(text context)를 포함하고 있습니다.
  
• 두 번째 line-box는 두 개의 익명 인라인 요소와, 3개의 <span>을 포함하고 있습니다.

그림 5. <p>(검은선)은 line-box(흰선)들로만들어져있습니다. 이 line-box는인라인요소들(실선)과익명인라인요소들(점선)을포함하고있습니다.

두 번째 line-box의 높이가 그것의 자식, 좀더자세히말하면 Catamaran 폰트를사용한것때문에계산된 content-area로 인해 다른 line-box들에비해확연이높은것을볼수있습니다.

line-box의 형성에서가장어려운부분은우리가정확하게볼수없을 뿐만 아니라 CSS로이것을제어할수없다는것입니다. ::first-line을 이용해 background를 적용하더라도 line-box의 높이에대한어떠한시각적인단서도제공하지않을것입니다.

line-height : 문제를 뛰어 넘어서

지금까지 두 가지 개념에 대해 설명했습니다 : content-area와 line-box. 만약 앞의 내용을 잘 읽었다면, line-box의 높이는 자식 요소의 높이에 따라 계산된다고 했다는 것을 알 수 있을 것입니다. 분명히 말하지만, line-box의 높이는 자식 요소의 content-area 높이가 아닙니다. 이것은 매우 큰 차이를 만듭니다.
이 말이 이상하게 들리겠지만, inline 요소는 두 개의 다른 높이를 가집니다 : content-area 높이와 virtual-area 높이.(우리 눈에 보이지 않는 높이라는 의미로 virtual-area라는 용어를 지어냈기 때문에, 어떤 스펙 문서에서도 이를 찾아볼 수 없을 것입니다.)

• content-area높이는 앞에서 보았듯이 폰트 매트릭스에 의해 정의됩니다.
• virtual-area높이는 line-height이고, 이 높이는 line-box의 높이 계산에 사용됩니다.

그림 6. 인라인 요소는 두 가지 높이 값을 가집니다.
즉, line-height는 baseline간의 간격이라는 일반적인 믿음이 무너졌습니다. 적어도 CSS에서는 말입니다. ³

그림 7. CSS에서 line-height는 baseline 간의 간격이 아닙니다.
virtual-area와 content-area 높이의 차이를 행간이라고 합니다. 이 행간의 절반은 content-area의 상단에 더하고, 나머지 절반은 하단에 더합니다. 때문에 content-area는 항상 virtual-area의 중앙에 위치합니다.
계산된 line-height(virtual-area)는 content-area보다 더 클뿐만 아니라 작거나 같을 수도 있습니다. content-area 보다 virtual-area가 작은 경우, 행간은 음수가 되며 line-box는 자식보다 더 작아 보입니다.
다른 종류의 inline 요소가 있습니다 :

• 대체된 inline 요소(<img>, <input>, <svg> 등)
• inline-block과 모든 inline-* 요소
• 특정한 formatting context가 있는 인라인 요소(예. flexbox안의 모든 flex아이템들은 블록화됩니다.)

이러한 특정 인라인 요소들 때문에, 높이는 height, margin 그리고 border 속성을 기반으로 계산됩니다. 만약 height 값이 auto이면 lihe-height가 사용되고, content-area는 line-height와 정확히 동일해집니다.

그림 8. 대체된 인라인 요소(repaced inline elements), inline-block / inline-*, 블록화 된 인라인 요소는 height나 line-height와 동일한 content-area를 가집니다.
어쨌든, 여전히 우리가 직면하고 있는 문제는 ‘line-height 속성의 normal 값은 얼마일까?’ 입니다. 그것은 content-area의 높이 계산과 관련이 있는데, 폰트 메트릭스 안에 해답이 있습니다.
FontForge로 돌아가 봅시다. Catamaran의 em-square는 1000입니다. 하지만 우리는 여러개의 ascender / descender 값들을 볼 수 있습니다 :

• generals Ascent/Desent : ascender는 770이고 descender는 230. 문자를 그리는 데 사용됩니다. (table "OS/2")
• metrics Ascent/Desent : ascender는 1100이고 descender는 540. content-area의 높이에 사용됩니다. (table "hhea" and table "OS/2")
• metric Line Gap(두 줄의 텍스트 사이에 있어야 하는 거리, 줄 간격)의 값을 Ascent/Descent 매트릭스에 추가하여 line-height:normal의 값을 구합니다.

Catamaran 폰트의 line-gap은 0이므로 line-height : normal은 content-area와 동일한 값을 가집니다. 이 값은 1640 단위 또는 1.64입니다.
이와 비교하여 Arial폰트의 em-square는 2048 단위이며, ascender는 1854, descender는 434, line gap은 67입니다. font-size: 100px을 설정했을 때, content-area는 112px(1117 단위)이며, line-height: normal은 115px(1150 단위 혹은 1.15)임을 의미합니다. 매트릭스의 이러한 값은 폰트에 따라 다르며 각 값은 폰트 디자이너가 설정합니다.
이제 line-height : 1을 설정하는 것은 나쁜 습관이라는 사실이 명백해졌습니다. 단위 없는 값은 content-area가 기준이 아닌 font-size의 상대 값이며 content-area 보다 작은 virtual-area을 다루는 것이 많은 문제의 원인이 된다는 것을 기억하길 바랍니다.

그림 9. line-height: 1을 사용하면 line-box가 content-area보다 작을 수 있습니다.
하지만 line-height:1만 문제가 되는 것은 아닙니다. 도움이 될진 모르겠지만, 제 컴퓨터에 설치되어있는 1117개의 폰트(네, 저는 Google Web Font의 모든 폰트를 설치했습니다.) 중 약 95%에 달하는 1059개의 폰트가 1보다 큰 계산된 line-height를 가집니다. 폰트의 계산된 line-height는 0.618~3.378의 값을 가집니다. 여러분은 분명히 봤습니다. 3.378이라는 숫자를요!
line-box 계산에 대한 세부 사항:

• 인라인 요소의 경우 padding 및 border가 배경 영역은 증가시키지만 content-area의 높이는 증가시키지 않으며 line-box의 높이도 증가시키지 않습니다. 따라서 content-area는 항상 화면에서 볼 수 있는 것은 아닙니다. margin-top과 margin-bottom은 아무런 영향을 미치지 않습니다.
• 대체된 인라인 요소(replaced inline elements), inline-block 및 블록화 된 인라인 요소의 경우 : padding, margin, border가 높이를 증가시키므로 content-area의 높이가 line-box의 높이가 됩니다.

vertical-align: 모든 것을 지배하는 하나의 속성

vertical-align 속성이 line-box의 높이를 계산하는데 필수적인 요소임에도 불구하고 아직 이에 대해 언급하지 않았습니다. 심지어는 vertical-align이 inline formatting context에 주도적인 역할을 할 수 있다고말할 수도 있습니다.
vertical-align의 기본 값은 baseline입니다. 폰트 매트릭스의 ascender와 descender를 기억하시나요? 이 값의 비율에 따라 baseline의 위치를 결정합니다. ascenders와 descenders 사이 비율이 거의 50/50이 아니기 때문에 예기치 않은 결과가 발생할 수 있습니다. 형제 요소로 예를 들어봅시다.
아래 코드로 시작해봅시다:

 <p>
 <span>Ba</span>
 <span>Ba</span>
</p>
p {
 font-family: Catamaran;
 font-size: 100px;
 line-height: 200px;
}

font-family, font-size 고정된 line-height를 상속한 2개의 형제 <span> 요소를 갖고 있는 <p> 태그가 있습니다. Baseline은 일치하고 있으며, line-box의 높이와 line-height값은 같습니다.

그림 10. 동일한 폰트 값, 동일한 baseline 모든 것이 괜찮아 보입니다.
두 번째 요소의 폰트 크기가 더 작은 경우 어떻게 될까요?

span:last-child { font-size: 50px; }

이상하게 들리겠지만, 기본 baselines 정렬은 아래 이미지에서 볼 수 있듯이 더 높은(!) line-box를 만들 수 있습니다.
line-box의 높이는 자식 요소의 가장 높은 지점에서 가장 낮은 지점까지를 계산한 값이라는 것을 기억합시다.

그림 11. 더 작은 자식 요소는 line-box의 높이를 더 높일 수 있습니다.
line-height에 단위 없는 값을 사용하는 것이 좋다라는 주장이 있을 수 있습니다. 하지만, 완벽한 수직 리듬을 만들기 위해서는 고정된 값이 필요합니다. 솔직히 말하면, 당신이 무엇을 선택하든 항상 인라인 정렬에 문제를 겪을 것입니다.
또 다른 예를 봅시다. line-height: 200px인 <p> 태그는 line-height값이 상속된 한 개의 <span>을 포함하고 있습니다.

<p>
 <span>Ba</span>
</p>
p {
 line-height: 200px;
}
span {
 font-family: Catamaran;
 font-size: 100px;
}

line-box의 높이는 얼마입니까? 우리는 200px을 기대 하지만, 실제 값은 그렇지 않습니다. 여기서 문제는 <p> 자체에 다른 font-family (기본값으로 serif)가 있다는 것입니다. <p> 태그와 <span> 사이의 baseline이 다를 수 있기 때문에, line-box의 높이가 예상보다 높게 나타납니다. 이러한 현상이 발생하는 이유는 너비가 0인 문자(strut)에서부터 line-box가 시작되는 것처럼 브라우저가 계산을 하기 때문입니다.

보이지 않는 문자, 눈에 보이는 영향.

이야기를 계속하자면, 우리는 여전히 형제 요소에 관하여 이전과 동일한 문제에 직면해 있습니다.

그림 12. 각 자식은 line-box가 보이지 않는 너비 0인 문자로 시작하는 것처럼 정렬됩니다.
baseline 정렬에서는 틀어져 보입니다. 그렇다면, vertical-align: middle을 사용해보면 어떨까요? 스펙에서 읽을 수 있듯이 middle값은 “부모 박스의 baseline에 부모의 x-height의 절반을 더한 지점에 박스의 수직 중간 점을 정렬시킵니다”. x-height 의 비율이 다른 것처럼 baselines의 비율도 다르기 때문에 middle 정렬 또한 신뢰할 수 없습니다. 최악의 경우 대부분의 시나리오에 middle은 절대로 “중간에” 있지 않습니다. 너무 많은 요인(x-height, ascender/ descender ratio 등)들이 관련되어 있으며 CSS를 통해 설정할 수 없습니다.

부가적으로, 다음과 같은 4가지 값이 있으며 경우에 따라 유용합니다.

• vertical-align: top / bottom을 이용한 line-box의 상단 또는 하단 정렬
• vertical-align: text-top / text-bottom을 이용하여 content-area의 상단 또는 하단에 정렬

그림 13. Vertical-align: top, bottom, text-top, text-bottom
하지만 이 역시 조심해야 합니다. 모든 경우에 virtual-area을 기준으로 정렬하므로 보이지 않는 높이가 생깁니다. vertical-align: top을 사용한 간단한 예제를 확인해 봅시다. 보이지 않는 line-height는 이상하긴 해도 그다지 놀랍지 않은 결과를 낳을 것입니다.

그림 14.vertical-align은 처음에는 이상한 결과를 만드는 듯 하지만, line-height를 시각화 한다면 충분히 예상가능합니다.
마지막으로 vertical-align은 기준선과 관련하여 박스를 올리거나 내리는 숫자 값도 허용합니다. 이 옵션이 유용할 수 있을 것입니다.

CSS는 놀랍습니다

line-height와 vertical-align이 어떻게 함께 동작하는지에 대해서 알아보았습니다. 하지만 이제 ‘폰트 매트릭스는 CSS로 제어 가능한가?’라는 의문이 듭니다. 저도 정말로 가능하길 바라지만 대답은 ‘아니요!’입니다. 어찌 되었든, 저는 우리가 무언가 좀 더 해보아야 한다고 생각합니다. 폰트 매트릭스는 변함이 없기 때문에 우리는 무언가 할 수 있어야 합니다.

예를 들어 대문자 높이가 정확히 100px인 Catamaran 폰트의 텍스트를 사용하기를 원한다면 어떻게 해야 할까요? 할 수 있을 것 같은데…. 수학 좀 해 봅시다.

첫 번째로 CSS 커스텀 속성⁴ 을 이용해 폰트 매트릭스를 설정하고, 대문자 높이가 100px이 될 수 있도록 font-size를 계산합니다.

p {
 /* 폰트 매트릭스 */
 --font: Catamaran;
 --fm-capitalHeight: 0.68;
 --fm-descender: 0.54;
 --fm-ascender: 1.1;
 --fm-linegap: 0;
 /* 원하는 대문자 높이 */
 --capital-height: 100;
 /* font-family를 적용합니다 */
 font-family: var(--font);
 /* 원하는 대문자 높이를 맞추기 위한 font-size값 계산 */
 --computedFontSize: (var(--capital-height) / var(--fm-capitalHeight));
 font-size: calc(var(--computedFontSize) * 1px);
}

그림 15. 이제 대문자의 높이는 100px이 되었습니다.
꽤 간단하지 않나요? 아닌가요? 하지만 저 텍스트가 세로 중앙 정렬되어 보이길 원한다면, 그래서 저 남은 공간을 “B” 위와 아래에 똑같이 분배하고 싶다면 어떻게 해야 할까요? 이 요구사항을 반영하기 위해서는 vertical-align을 ascender/descender 한 비율을 기반으로 계산해야 합니다.
첫째, line-height: normal과 content-area의 높이 계산 :

p {
 ...
 --lineheightNormal: (var(--fm-ascender) + var(--fm-descender) + var(--fm-linegap));
 --contentArea: (var(--lineheightNormal) * var(--computedFontSize));
}

다음 단계에서 필요한 사항 :

• 대문자의 하단부터 하단 선의 거리
• 대문자의 상단부터 상단 선의 거리

다음과 같이 구합니다 :

p {
 ...
 --distanceBottom: (var(--fm-descender));
 --distanceTop: (var(--fm-ascender) - var(--fm-capitalHeight));
}

이제 vertical-align을 계산할 수 있습니다. 이 두 간격의 차와 계산된 font-size를 곱한 값입니다.(반드시 인라인 자식 요소에 이 값을 적용해야 합니다.)

p {
 ...
 --valign: ((var(--distanceBottom) - var(--distanceTop)) * var(--computedFontSize));
}
span {
 vertical-align: calc(var(--valign) * -1px);
}

p {
 ...
 /* desired line-height */
 --line-height: 3;
 line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
}

span::before {
 content: '';
 display: inline-block;
 width: calc(1px * var(--capital-height));
 height: calc(1px * var(--capital-height));
 margin-right: 10px;
 background: url('https://cdn.pbrd.co/images/yBAKn5bbv.png');
 background-size: cover;
}