typography-baseline

베이스라인을 모르면 타이포그래피가 어긋납니다 thumbnail

버튼 안의 텍스트가 분명 가운데 정렬인데 이상하게 위로 떠 보일 때가 있습니다. 아이콘과 글자를 같은 높이로 맞췄는데 실제 화면에서는 글자만 조금 내려앉아 보이기도 합니다. 카드 목록에서는 제목과 본문 사이 간격을 같은 값으로 줬는데, 어떤 항목은 더 답답하고 어떤 항목은 더 헐거워 보입니다.

이런 문제를 단순히 align-items: center나 line-height 값의 문제로만 보면 계속 미세 조정에 갇히게 됩니다. 실제 원인은 텍스트가 박스의 정중앙에 놓이는 것이 아니라, 글꼴이 가진 베이스라인(baseline) 을 기준으로 배치된다는 점에 있습니다.

타이포그래피에서 베이스라인은 눈에 잘 보이지 않지만, 텍스트 정렬의 기준이 되는 선입니다. 이 선을 이해하지 못하면 폰트 크기, 줄 높이, 아이콘 정렬, 버튼 높이, 그리드 시스템이 모두 조금씩 어긋납니다.

베이스라인이란?

베이스라인은 대부분의 글자가 놓이는 기준선입니다. 영문 소문자 x, n, o 같은 글자는 보통 이 선 위에 앉고, g, p, y처럼 아래로 내려가는 부분은 베이스라인 아래로 내려갑니다.

여기서 같이 봐야 하는 개념이 있습니다.

어센더(ascender): b, d, h처럼 x-height 위로 올라가는 부분
디센더(descender): g, p, q, y처럼 베이스라인 아래로 내려가는 부분
x-height: 소문자 x의 높이를 기준으로 보는 중간 높이
line-height: 한 줄이 차지하는 전체 높이

즉, 텍스트의 시각적 중심은 박스의 수학적 중심과 다를 수 있습니다. 같은 16px 텍스트라도 폰트마다 x-height, 어센더, 디센더의 비율이 다르기 때문입니다.

그래서 height: 40px, line-height: 40px을 줬다고 해서 텍스트가 항상 시각적으로 중앙에 보이는 것은 아닙니다. 숫자로는 중앙인데 눈으로는 어긋나 보이는 상황이 여기서 발생합니다.

웹에서 텍스트는 박스가 아니라 줄 상자 안에 놓입니다

CSS에서 인라인 텍스트는 단순한 사각형 하나로 배치되지 않습니다. 브라우저는 인라인 포맷팅 컨텍스트 안에서 줄 상자(line box)를 만들고, 그 안에서 글리프와 인라인 요소를 베이스라인 기준으로 정렬합니다.

MDN의 vertical-align 문서에서도 기본값은 baseline입니다. 인라인 요소나 테이블 셀 안에서 별도 값을 주지 않으면, 요소는 부모의 베이스라인에 맞춰집니다.

이 기본 동작은 합리적입니다. 글자는 원래 줄을 따라 읽히는 요소이기 때문입니다. 문제는 UI 컴포넌트에서 텍스트를 사각형 안의 장식 요소처럼 다룰 때 생깁니다. 버튼, 배지, 탭, 칩, 내비게이션처럼 텍스트와 아이콘이 섞인 컴포넌트에서는 베이스라인 기준 정렬과 박스 기준 정렬이 충돌합니다.

예를 들어 아이콘은 대개 정사각형 박스입니다. 반면 텍스트는 베이스라인, x-height, 어센더, 디센더를 가진 글리프입니다. 둘을 단순히 center로 맞추면 박스끼리는 가운데가 맞지만, 글자의 시각적 중심과 아이콘의 중심은 다르게 보일 수 있습니다.

line-height는 여백이 아니라 줄의 높이입니다

line-height를 텍스트 위아래 여백처럼 생각하면 타이포그래피 시스템이 쉽게 흔들립니다. line-height는 한 줄이 차지하는 높이이며, 브라우저는 글꼴 메트릭을 기준으로 이 높이를 줄 상자에 배분합니다.

중요한 점은 line-height: 24px이라고 해서 글자 위 4px, 아래 4px이 항상 예쁘게 나눠지는 것이 아니라는 점입니다. 폰트의 어센더와 디센더 비율, 내부 leading, 렌더링 엔진에 따라 실제로 보이는 균형은 달라질 수 있습니다.

그래서 디자인 시스템에서 font-size: 16px, line-height: 24px 같은 토큰만 정의해도 충분하지 않습니다. 해당 조합이 실제 UI에서 어떤 시각적 높이를 만드는지 확인해야 합니다.

특히 한글과 영문을 함께 쓰는 서비스에서는 이 문제가 더 잘 드러납니다. 한글은 영문 소문자 중심의 x-height 감각과 다르게 보이고, 숫자와 영문 약어가 섞이면 같은 줄 안에서도 밀도가 달라집니다. 한국어 UI에서 ABC, 2026, 설정, Typography를 모두 테스트해야 하는 이유입니다.

베이스라인 그리드는 언제 도움이 될까?

베이스라인 그리드는 텍스트의 베이스라인을 일정한 간격의 그리드에 맞추는 방식입니다. 편집 디자인에서는 오래된 개념이고, 웹 UI에서도 긴 읽기 콘텐츠나 복잡한 정보 화면에서는 여전히 유용합니다.

예를 들어 본문 텍스트의 line-height를 24px로 정하고, 문단 간격과 섹션 간격을 4 또는 8의 배수로 맞추면 화면 전체의 리듬이 안정됩니다. 텍스트가 많은 관리자 화면, 문서 페이지, 테이블 중심 UI에서는 이런 리듬이 가독성에 직접적인 영향을 줍니다.

하지만 모든 UI를 엄격한 베이스라인 그리드에 끼워 맞추는 것은 비추천입니다. 버튼, 입력창, 카드, 모달, 모바일 내비게이션은 터치 영역, 상태 표시, 아이콘 크기, 컴포넌트 밀도 같은 제약을 함께 받습니다. 이때 베이스라인 그리드를 절대 규칙으로 두면 오히려 컴포넌트가 부자연스러워질 수 있습니다.

베이스라인 그리드는 전체 레이아웃을 지배하는 법칙이라기보다, 텍스트가 많은 영역에서 리듬을 확인하는 기준선에 가깝게 쓰는 편이 좋습니다.

디자인 시스템에서는 무엇을 정해야 할까?

베이스라인 문제를 줄이려면 타이포그래피 토큰을 단순한 크기 목록으로 끝내면 안 됩니다. 최소한 다음 기준은 함께 정해야 합니다.

1. 폰트 크기와 line-height를 한 세트로 정의하기

font-size와 line-height는 따로 움직이면 안 됩니다. 같은 16px 텍스트라도 본문, 버튼, 캡션에서 필요한 줄 높이는 다릅니다.

:root {
  --text-body-font-size: 16px;
  --text-body-line-height: 24px;

  --text-button-font-size: 14px;
  --text-button-line-height: 20px;

  --text-caption-font-size: 12px;
  --text-caption-line-height: 16px;
}

이렇게 세트로 정의하면 컴포넌트마다 임의로 line-height를 바꾸는 일을 줄일 수 있습니다. 디자이너와 개발자가 같은 이름의 토큰을 보고 이야기할 수 있다는 점도 중요합니다.

2. 아이콘과 텍스트의 정렬 기준 정하기

아이콘 버튼이나 텍스트 버튼에서는 아이콘의 박스 중심과 텍스트의 시각적 중심이 다를 수 있습니다. 이때 모든 경우를 align-items: center로 해결하려고 하면 특정 폰트나 특정 크기에서 어긋납니다.

실무적으로는 다음 기준이 필요합니다.

텍스트와 아이콘을 center로 맞추되, 자주 쓰는 크기에서 시각 보정을 허용할지
아이콘 크기를 텍스트 line-height보다 작게 둘지, 같은 값으로 둘지
버튼 높이를 텍스트 줄 높이 기준으로 만들지, 터치 영역 기준으로 만들지
특정 폰트에서 필요한 top 또는 translateY 보정을 토큰화할지

여기서 중요한 것은 보정값의 존재 자체가 아닙니다. 보정값이 컴포넌트 내부에 흩어져 있으면 문제가 됩니다. 필요한 보정이라면 한 곳에서 관리해야 합니다.

3. 실제 문자열로 검수하기

타이포그래피는 가나다, ABC, 123만으로 검수하면 부족합니다. 어센더와 디센더가 모두 있는 문자열, 한글과 영문이 섞인 문자열, 숫자와 기호가 섞인 문자열을 같이 봐야 합니다.

예를 들어 버튼과 배지는 이런 문자열로 확인하는 편이 좋습니다.

Agjyp 설정 2026
Typography 기준선
결제 완료 1,280원

이런 테스트 문자열은 단순히 폰트 모양을 보는 용도가 아닙니다. 실제 제품에서 텍스트가 위아래로 치우쳐 보이는지, 아이콘과 어색하게 맞물리는지, 줄 높이가 너무 빽빽하거나 헐거운지 확인하는 도구입니다.

피해야 할 접근

가장 흔한 실수는 모든 문제를 패딩으로 덮는 것입니다. 버튼 텍스트가 위로 떠 보인다고 padding-top만 1px 늘리고, 다른 버튼에서는 다시 padding-bottom을 조정하는 식입니다. 이렇게 하면 컴포넌트가 늘어날수록 기준이 사라집니다.

두 번째 실수는 폰트를 바꾸면서 타이포그래피 토큰을 그대로 두는 것입니다. 폰트가 바뀌면 x-height, 어센더, 디센더, 내부 leading이 바뀝니다. 같은 font-size와 line-height라도 화면에서 차지하는 인상은 달라집니다. 폰트 교체는 색상 교체보다 훨씬 큰 레이아웃 변경일 수 있습니다.

세 번째 실수는 디자인 도구에서 보이는 텍스트 박스만 믿는 것입니다. Figma 같은 디자인 도구와 브라우저는 텍스트 박스를 계산하고 렌더링하는 방식이 완전히 같지 않을 수 있습니다. 시안에서 맞아 보였던 정렬도 실제 CSS에서는 다르게 보일 수 있으므로, 중요한 컴포넌트는 브라우저에서 확인해야 합니다.