사용법
- 환산할 값과 단위를 고릅니다. 인쇄 시안의 10pt를 웹으로 옮긴다면 10과 pt를 고르면 됩니다.
- 사이트의
html글자 크기를 바꿨다면 루트 글자 크기에, em으로 계산할 요소가 있다면 부모 요소의 글자 크기에 그 값을 적습니다. 모르면 브라우저 기본값 16px을 그대로 둡니다. - 표에서 px, pt, em, rem 값을 확인하고 CSS 열의 값을 그대로 옮겨 씁니다.
- 행간 칸에 글자 크기와 배수를 넣으면 줄 높이가 픽셀로 나옵니다. 시안에 줄 높이가 픽셀로 적혀 있다면 그 값을 넣어 배수를 구합니다.
기준과 계산 방식
- CSS에서 1px은 1/96인치, 1pt는 1/72인치로 정해져 있습니다. 그래서 pt = px × 0.75이고, 16px은 12pt입니다.
- rem = px ÷ 루트(
html) 글자 크기, em = px ÷ 부모 요소의 글자 크기입니다. - 줄 높이(px) = 글자 크기 × 행간 배수, 배수 = 줄 높이 ÷ 글자 크기입니다.
- CSS
line-height는 줄 높이에서 글자 크기를 뺀 나머지를 위와 아래에 반씩 나눕니다. 이 반쪽 값을 반행간이라 부르며, 계산기는 이 명목상 값을 보여 줍니다. 행간 배수가 1보다 작으면 반행간은 음수가 됩니다. - 모든 결과는 소수점 아래 넷째 자리까지 표시합니다. 값과 글자 크기, 행간 배수, 줄 높이에는 0보다 큰 숫자만 받습니다.
예시
본문 16px에 행간 1.6을 주면 줄 높이는 25.6px이고, 반행간은 위아래 각 4.8px입니다. 인쇄 시안의 10pt 본문은 약 13.3333px이며, 루트 16px 기준으로 0.8333rem입니다.
제목이 32px이고 시안의 줄 높이가 40px이라면 배수는 1.25입니다. CSS에는 font-size: 2rem; line-height: 1.25;처럼 적으면 루트 크기가 바뀌어도 비율이 유지됩니다.
한계
- pt 환산은 CSS 정의를 따른 값입니다. 화면에 실제로 보이는 크기는 기기 해상도와 확대 비율에 따라, 인쇄물의 크기는 프린터 설정에 따라 달라집니다.
- 같은 16px이라도 글꼴마다 글자 면의 크기가 달라 보이는 크기가 다릅니다. 하다 산스와 하다 바탕을 같은 크기로 놓아도 한쪽이 더 커 보일 수 있으니 폰트 비교에서 함께 확인해 주세요.
- em은 요소가 겹칠 때마다 곱해집니다. 이 계산기는 부모 한 단계만 반영합니다.
- 반행간은 글자 크기만으로 나눈 명목상 값입니다. 실제로 보이는 글자 위아래 빈 공간은 글꼴의 어센더·디센더 값과 글자 모양에 따라 달라지니, 정확한 간격은 화면에서 확인해 주세요.
- 브라우저 설정에서 기본 글자 크기를 바꾼 사람에게는 rem 값이 다른 픽셀 크기로 보입니다. 그 점이 rem을 쓰는 이유이기도 합니다.
자주 묻는 질문
- 왜 16px이 기본값인가요?
- 대부분의 브라우저가 기본 글자 크기를 16px로 둡니다. 사이트에서
html의 글자 크기를 바꿨다면 그 값을 루트 글자 크기 칸에 적어 주세요. - 행간은 단위 없이 쓰는 게 좋나요?
line-height: 1.5처럼 단위 없는 배수를 쓰면 자식 요소의 글자 크기가 바뀌어도 같은 비율이 적용됩니다. px로 고정하면 큰 제목에서 줄이 겹치거나 작은 글씨에서 줄 사이가 지나치게 벌어질 수 있습니다.- 한글 본문의 행간은 얼마로 시작하면 되나요?
- 화면 본문은 1.5~1.8 사이에서 시작해 글줄 길이와 글꼴을 보며 조정합니다. 한 줄이 길수록, 획이 많은 글꼴일수록 조금 넉넉하게 두면 읽기 편합니다.
함께 쓰면 좋은 것
- 하다 산스: 100–900의 아홉 굵기가 있어 같은 크기에서 굵기만 바꿔 위계를 잡아 보기 좋습니다.
- 하다 라운드: 300·400·500·700·900의 다섯 굵기가 있는 둥근 산세리프입니다. 안내 문구의 크기와 굵기 조합을 맞춰 볼 때 써 보세요.
- 코드를 몰라도 되는 웹폰트 적용법: 크기를 정한 글꼴을 웹사이트에 연결하는 단계를 정리했습니다.