💡 피그마 시안과 맞추는 행간 여백 제거

피그마에서 잡은 버튼·제목 간격을 웹에 옮기면, 마진·패딩을 맞춰도 글자가 살짝 위아래로 떠 보이는 일이 많습니다. 브라우저는 line-height만큼 줄 상하에 빈 공간을 두고, 서체마다 글자 박스 안에도 여분이 있기 때문입니다. 이런 숨은 공간을 흔히 고스트 패딩이라고 부릅니다. 이 행간 여백 제거 도구는 그 값을 계산해, 가상 요소에 넣을 음수 마진 CSS를 바로 만들어 줍니다.

서체(또는 계수), 글자 크기, 행간 배수만 넣으면 위·아래 빈 공간과 크롭용 마진이 표시됩니다. 복사한 클래스를 텍스트에 붙이면 시안과 더 가깝게 맞출 수 있습니다. px·rem 단위를 고를 수 있고, rem일 때는 루트 글자 크기(보통 16px)로 대략적인 픽셀 참고값도 보여 줍니다.

📊 주요 웹폰트별 기본 여백 계수

폰트마다 기본으로 잡는 여백이 다릅니다. 쓰는 서체에 가까운 값을 고르세요. 목록에 없으면 ‘직접 계수 입력’으로 조절하면 됩니다.

* 계수는 폰트 메트릭을 참고해 잡은 대략값입니다. 실제 화면에서 1~2px 단위로 미세 조정하세요. 모바일에서는 표를 좌우로 밀어 확인하면 됩니다.

📌 line-height가 만드는 숨은 여백

브라우저는 글자를 그릴 때 line-height만큼 줄 높이를 잡고, 남는 높이를 위아래로 나눕니다. 예를 들어 24px 글자에 line-height: 1.6이면 줄 높이는 38.4px이고, 위·아래에 각각 약 7.2px(합 14.4px)의 빈 공간이 생깁니다. 여기에 서체 자체 여백까지 겹치면 버튼·카드 안 글자가 시안보다 떠 보이기 쉽습니다.

이 계산기는 대략 글자 크기 × ((line-height − 1) ÷ 2 − 서체 계수)로 음수 마진을 잡습니다. 줄 높이로 생긴 한쪽 여백에서 서체 계수를 반영해, 과하게 끌어당기지 않도록 맞춥니다. 결과가 너무 크면 먼저 행간 배수 자체를 1.5~1.7 근처로 낮춘 뒤 다시 계산해 보세요.

⚙️ 가상 요소와 음수 마진

높이를 강제로 줄이거나 패딩만 깎으면 글자가 잘리거나 겹칠 수 있습니다. 대신 ::before·::after에 음수 마진을 주면 줄바꿈은 유지한 채, 위아래 요소와의 시각적 간격만 좁힐 수 있습니다. 복사한 .cropped-text 클래스를 제목·버튼 라벨 등에 붙이면 됩니다.

피그마의 Auto Layout과 웹의 박스 모델은 기준이 달라서, 행간 여백 제거만으로 모든 화면이 1px까지 같지는 않을 수 있습니다. 핵심 화면은 브라우저에서 한 번 더 눈으로 확인하는 편이 안전합니다.