폰트의 실제 크기
이러한 폰트의 실제 크기는 어떻게 될까?
font-size: 100px 이기 때문에 대문자 B의 높이가 100px이 되는것일까?
실제론 68px이다. 🤔
그렇다면 브라우저 상에서 폰트의 영역이 100px 일까? (파란색 박스 영역)
실제론 164px이다. 🤔
font-size를 100px으로 설정했음에도 불구하고, 폰트의 크기와 영역 모두 100px과는 관련없는 값들로 계산된다.
font-size는 어떤 역할을 하는 것일까?
폰트마다 다른 크기와 영역
[출처: ]
위 사진은 Helvetica, Gruppo, Catamaran 폰트를 font-size: 100px로 브라우저에 그렸을 때의 폰트의 크기와 영역을 표시한 모습이다.
폰트마다 다른 크기와 영역을 가지는것을 확인할 수 있다.
위 사진은 Catamaran 폰트를 fontForge라는 프로그램으로 열어본 모습이다.
폰트를 구성하기 위한 여러 값들이 있는데, 각 값들이 의미하는 것은 아래와 같다
값들이 너무 많아 정신없을수 있다
하나씩 차근차근 알아보자
em-square라는 값은 다른 값들을 계산하기 위한 기준이 되는 값이다.
예를들어 소문자를 계산하는데 필요한 X Height가 485이고 em-square가 1000이라면, 485/1000, 48.5% 의 크기만큼 소문자에 적용된다.
- 소문자
소문자 크기 = font_size * (x_height / em_square) = 100 * (485 / 1000) = 48.5px (49px)
- 대문자
대문자 크기 = font_size * (capital_height / em_square) = 100 * (680 / 1000) = 68px
- 폰트 영역 *브라우저마다 상이할 수 있음
content_area = (ascender + descender + line_gap) * font_size / em_square (1100 + 540) * 100 / 1000 = 164px
* line_gap(조판위의 행간격)
폰트의 영역
위에서 계산된 164px의 폰트 영역은 전제조건이 하나 있다.
바로 line-height: normal 일때 164px로 계산되는것이다.
이를 content-area라고 정의한다.
기본 폰트 영역이라고 이해하는것이 쉬울것이다.
이제 line-height 스타일을 다른 값으로 바꾸어보자
line-height: 200px로 바꾸어본 모습이다.
기존 164px에서 총 36px이 늘어났기 때문에 위아래로 18px씩 늘어난 모습이다.
이렇게 line-height가 바뀌면 content-area(164px)를 기준으로 위 아래가 같은 비율로 조절된다.
line-height: 100px 로 바꾸면
기존 content-area(164px)에서 64px이 감소했기 때문에 위아래로 32px씩 줄어든 모습이다.
이번에는 흔히 사용하기도하는 line-height: 1인데, 이는 line-height를 font-size와 같게 설정하겠다는 뜻이다.
line-height = font-size그러므로 영역은 100px로 보이기때문에 폰트의 크기까지 100px이 되었다고 쉽게 오해할 수 있다.
심화 #1
왼쪽은 브라우저, 오른쪽은 jsx와 css코드이다.
line-height: 200px이기 때문에 파란 영역은 200px이다.
content-area는 여전히 164px로 계산된다.
여기서 두번째 span요소의 font-size를 100px → 50px로 변경하였다.
그랬더니, p요소의 영역이 200px → 214px로 늘어난 모습이다.
자식 요소의 font-size를 줄였더니 요소의 영역이 늘어난 황당한 상황이다. 🤷♂️
위에서 알아본 line-height가 계산되는 방식을 적용하여 그려보면 위와같이 표현할 수 있다.
content-area와 line-height의 차이를 위아래로 같은 비율로 늘리다보니 부모요소의 영역을 침범하여 늘어나는 결과가 일어나게 되었다.
심화 #2
폰트의 영역과 행간 간격을 각각 설정해야하는 상황이라면 어떻게 해야할까?
실제로 디자인 툴 xd상에서는 폰트의 크기, 영역, 행간 간격을 따로 설정할수 있게 되어있다.
아래와 같은 텍스트 박스를 구현해야한다고 해보자.
우선, 행간 간격이란 여러 줄의 텍스트에서 각 baseline 의 사이의 거리를 말한다
하지만 행간 간격은 css상에서 지원하는 스타일이 없고, line-height를 통해서만 간접적으로 조절이 가능하다.
그리고, font-size: 28px로 설정해야하며 전체 영역의 높이는 아래와 같이 계산되고 있다.
height = fontSize + (행간 간격 * (행의 갯수-1)) + 2px 78px = 28px + (48px * 1) + 2px
우선 행 사이의 거리를 20px로 계산해볼 수 있다.
앞선 내용을 응용하여 content-area 위 아래로 10px 씩 늘어난다면 20px의 행 사이 거리를 만들어낼 수 있다.
이렇게 line-height: 48px 로 설정한 모습이고
이제 전체 높이를 현재 96px에서 78px로 맞추는 일만 남았다.
상단과 하단에 -9px씩 margin을 준다면 구현할 수 있었다.
결론
웹 상에서 텍스트를 원하는대로 보여주기란 쉽지 않다.
폰트의 크기와 영역, 그리고 line-height가 어떠한 원리로 계산되는지 아는것이 중요하다고 생각한다.
