사용법

위 입력란에 비교할 문장을 적습니다. 예시 문장 단추를 누르면 제목, 본문, 숫자, 영문 견본이 들어갑니다.
크기 슬라이더로 실제로 쓸 크기에 맞춥니다. 본문이라면 16–20px, 제목이라면 40px 이상에서 보는 편이 정확합니다.
행간과 자간을 움직여 줄이 얼마나 촘촘해 보이는지 확인합니다.
굵기를 바꾸면 각 줄 오른쪽 위에 그 가족이 실제로 보여 주는 굵기가 나옵니다.
마음에 드는 가족 이름을 누르면 소개 페이지로 가서 파일을 받을 수 있습니다.

기준과 계산 방식

모든 줄에 같은 문장, 같은 크기, 같은 행간과 자간을 적용합니다. 크기는 CSS 픽셀, 행간은 글자 크기에 곱하는 배수, 자간은 글자 크기에 대한 비율(em)입니다. 자간 0.05em은 36px에서 글자 사이를 1.8px 벌린다는 뜻입니다.

가족마다 들어 있는 굵기가 다릅니다. 하다 산스는 100부터 900까지 아홉 굵기가 있지만 하다 바탕은 400과 700 두 가지입니다. 고른 굵기가 없으면 가장 가까운 굵기로 보여 주고, 거리가 같으면 500 이상에서는 굵은 쪽, 그보다 가벼우면 얇은 쪽을 고릅니다. 예를 들어 900을 고르면 하다 바탕은 700으로 보입니다.

글꼴 파일은 줄이 화면 가까이 왔을 때 받습니다. 처음에는 기본 글꼴로 보이다가 잠시 뒤 해당 가족으로 바뀔 수 있습니다.

예시

앱 버튼 문구를 고를 때는 "결제하기 · 장바구니 담기"를 16px, 굵기 500, 행간 1.4로 넣어 보세요. 작은 크기에서 받침이 뭉치지 않는지, 숫자와 한글의 높이가 어울리는지가 바로 보입니다.

책 본문이라면 두세 문장을 넣고 크기 18px, 행간 1.7에서 하다 바탕과 하다 산스를 견주어 보세요. 같은 행간이어도 명조는 줄 사이가 더 넓어 보입니다.

한계

화면에 보이는 모양은 운영체제와 브라우저의 글자 렌더링에 따라 조금씩 다릅니다. 인쇄물이라면 파일을 받아 실제 출력으로 확인하세요.
춤추는사람들과 춤추는사람들 고정폭은 굵기가 하나뿐이라 굵기 슬라이더를 움직여도 모양이 바뀌지 않습니다.
합자, 대체 글자 같은 OpenType 기능은 켜고 끄지 않습니다. 브라우저 기본값 그대로 보입니다.
입력한 문장은 이 페이지 안에서만 쓰이고 저장하거나 서버로 보내지 않습니다.

자주 묻는 질문

굵기 슬라이더를 움직였는데 어떤 줄은 그대로입니다.: 그 가족에 해당 굵기가 없기 때문입니다. 줄 머리에 적힌 굵기가 지금 실제로 쓰고 있는 값입니다.
여기서 본 설정을 웹사이트에 그대로 쓸 수 있나요?: 네. 크기는 font-size, 행간은 line-height, 자간은 letter-spacing 값으로 옮기면 됩니다. 웹폰트 연결 방법은 각 가족 소개 페이지에 있습니다.
다른 회사 폰트와도 비교할 수 있나요?: 이 도구는 하다 타입 가족만 보여 줍니다.

함께 쓰면 좋은 것

하다 산스 — 화면 본문과 표에 쓰는 기본 고딕
하다 바탕 — 긴 글을 위한 명조
용도별로 글꼴 고르는 법 — 비교하기 전에 기준을 정할 때
폰트 목록 — 분류와 이름으로 가족을 찾을 때