# 디지털 타입세팅의 미래 Leading-Trim 텍스트 박스 사이로 패딩 혹은 line-height를 정의할 때마다 ‘라인 박스 사이 여백을 없애고 글자 기준으로 레이아웃을 짜면 얼마나 좋을까’ 생각해본 적 있으신가요? 특히 영문과 국문을 혼합할 때 시각적으로 완벽하게 정렬하고 싶어도 알파벳 베이스라인에 맞춰 짜진 영문과 정사각형 틀에서 짜여진 국문의 기준선이 이미 다르고, 또 폰트마다 글자 내 여백이 다르기 디자인 되어있기 때문에 거의 불가능에 가까웠는데요, 이 고민을 해결해줄 CSS property가 나왔습니다. Leading trim이라는 것인데요 대문자 높이(Cap height)와 알파벳이 놓이는 Alphabetic baseline을 기준으로 위아래 여백(half leading)을 잘라주는 css입니다. 이를 잘 이용하면 시각적으로 버튼 레이블을 정확히 중앙에 정렬하면서도 패딩 값을 모두 같게 설정 할 수 있게 됩니다. 그것도 폰트에 상관없이! 이 Leading-trim은 CSS Inline Layout Module Level 3에 포함되어있으니 자세한 내용은 미디엄 글과 이 w3c 사이트에서 확인해보세요! https://www.w3.org/TR/2020/WD-css-inline-3-20200618/