홈페이지 글자 크기와 줄 간격 기준

홈페이지 본문 글자는 16~18px, 줄 간격은 글자 크기의 1.6~1.8배, 한 줄은 한글 25~40자 안으로 잡으면 대부분의 화면에서 편하게 읽힙니다. 세 값은 따로 노는 값이 아니라 한 묶음입니다 — 글자를 키우면 줄 간격도 같이 벌어져야 하고, 줄이 길어지면 다음 줄을 찾는 눈이 흔들립니다. 기기와 화면마다 다르니 정한 값으로 실제 화면에서 한 번 확인합니다.

자리마다 글자 크기를 얼마로 잡나요

기준은 본문입니다. 본문을 먼저 정하고 나머지는 거기서 위아래로 벌려 잡습니다. 그래야 페이지가 늘어나도 크기가 뒤엉키지 않습니다.

자리	좁은 화면	넓은 화면	줄 간격
본문	16~17px	17~18px	1.6~1.8배
소제목	19~22px	22~26px	1.3~1.4배
큰 제목	26~32px	36~48px	1.1~1.25배
표 안 글자·보조 설명	14~15px	14~16px	1.5~1.6배
버튼 글자	15~17px	16~18px	1.2~1.4배

14px 아래로는 내리지 않는 편이 낫습니다. 아래쪽 저작권 표시처럼 읽지 않아도 되는 한 줄만 12~13px로 두고, 사람이 읽어야 하는 내용은 14px를 바닥으로 봅니다. 글자가 커질수록 줄 간격 배수는 내려갑니다 — 큰 제목에 1.8배를 주면 줄끼리 떨어져 한 덩어리로 안 읽힙니다.

16px를 바닥으로 두는 이유는 화면과 눈 사이 거리에 있습니다. 폰은 30~40cm, 컴퓨터는 50~70cm 떨어뜨려 봅니다. 같은 16px라도 멀리 있는 화면에서 더 작게 보이므로 넓은 화면 쪽 값을 한 단계 올려 잡습니다. 이 값들은 홈페이지 제작을 시작할 때 한 번 정해 문서에 적어 둡니다 — 페이지가 늘어난 뒤에 정하면 이미 만든 화면을 전부 다시 재야 합니다.

한 줄 길이와 글자 색은 무엇으로 정하나요

한 줄에 한글 25~40자가 들어가게 본문 상자의 최대 폭을 잡습니다. 16px 기준으로 대략 가로 600~760px입니다. 화면이 넓다고 본문을 끝까지 늘리면 한 줄이 60자를 넘고, 줄이 바뀔 때마다 눈이 왼쪽 끝을 다시 찾습니다.

문단 사이 간격은 줄 간격보다 넓게 둡니다. 본문 한 줄 높이의 0.8~1배가 적당합니다 — 줄 간격과 문단 간격이 같으면 문단이 어디서 끊기는지 보이지 않아 한 덩어리로 읽힙니다. 글은 왼쪽 끝만 맞추고 오른쪽은 들쭉날쭉하게 둡니다. 양쪽을 억지로 맞추면 낱말 사이가 벌어져 문단 가운데에 세로로 흰 길이 생깁니다.

색은 대비로 봅니다. 대비 — 글자 색과 그 뒤 배경색의 밝기 차이를 숫자로 나타낸 값입니다. 본문은 4.5:1 이상, 굵거나 18px보다 큰 글자는 3:1 이상을 기준으로 잡습니다. 흰 배경에 연한 회색을 얹을 때 자주 걸립니다 — 연한 회색은 화면 밝기를 낮추거나 밖에서 볼 때 가장 먼저 사라집니다. 대비를 재 주는 도구에 두 색 값을 넣으면 숫자가 바로 나옵니다.

지금 화면을 어떤 순서로 확인하나요

순서	해 보는 것	무엇을 보나
1	폰을 팔 길이만큼 떼고 본문 읽기	눈을 가늘게 뜨게 되면 작은 것입니다
2	화면 밝기를 30% 아래로 낮추기	연한 회색 글자가 먼저 사라집니다
3	기기 설정에서 글자 크기 가장 크게	글자가 상자 밖으로 넘치는 자리를 봅니다
4	컴퓨터 창을 최대로 넓혀 보기	한 줄이 40자를 넘는 문단을 찾습니다
5	화면을 흑백으로 바꿔 보기	색으로만 구분하던 글자가 드러납니다

다섯 가지 모두 합쳐 5분이면 끝납니다. 만든 사람은 무슨 말인지 이미 알고 있어 늘 읽히는 것처럼 느껴집니다 — 처음 보는 사람 눈에 맞추려면 이렇게 조건을 일부러 나쁘게 만들어 봅니다. 세 번째 항목에서 가장 많이 걸립니다. 높이를 고정해 둔 상자와 버튼 안 글자가 대표적으로, 글자가 커지면 뒷줄이 상자 밖으로 밀려납니다.

기준을 벗어나면 어디부터 안 읽히나요

벗어난 값	가장 먼저 안 읽히는 자리	바꿀 값
본문 13px 이하	긴 안내문·배송 안내·약관	16px로 올리고 폭을 줄입니다
줄 간격 1.3배 이하	세 줄 넘는 문단의 가운데	1.6배로 벌립니다
한 줄 50자 이상	문단 끝 두세 줄	본문 폭을 720px 안쪽으로
대비 3:1 미만	회색 설명 글·입력칸 안내 글자	글자 색을 한 단계 어둡게
이미지에 넣은 글자	줄어든 화면의 작은 글자	글자를 이미지 밖으로 뺍니다

위 세 줄은 값 하나만 바꾸면 끝나고, 아래 두 줄은 색 정의나 이미지를 다시 만들어야 해서 시간이 더 듭니다. 확인은 위에서 아래로 하되, 고치기는 위 세 줄을 먼저 끝내고 남은 둘을 따로 잡습니다.

고치는 순서는 어떻게 되나요

한 번에 다 바꾸지 않습니다. 본문 → 색 → 폭 → 나머지 순서로 갑니다. 앞 단계를 고치면 뒤 단계에서 손댈 자리가 줄어듭니다. 반대로 이번에 손대지 않을 것도 정해 둡니다 — 서체를 바꾸는 일과 페이지 구성을 다시 짜는 일은 넣지 않습니다. 서체를 바꾸면 모든 자리의 크기를 처음부터 다시 재게 됩니다.

먼저 본문 글자 크기와 줄 간격을 한 값으로 통일합니다. 페이지마다 15px·16px·17px가 섞여 있는 경우가 많습니다. 다음으로 회색으로 쓴 글자를 모아 한 단계 어둡게 내립니다. 그다음 본문 상자의 최대 폭을 정합니다. 마지막으로 버튼과 입력칸 안내 글자를 14px 위로 올립니다. 랜딩페이지처럼 한 화면에서 결정이 나는 자리부터 손보면 효과가 먼저 보입니다.

오늘 할 일

사람이 가장 많이 들어오는 페이지 하나를 열어 본문 문단 세 개의 글자 크기·줄 간격·글자 색을 적어 두십시오. 세 값을 16px·1.6배·진한 회색으로 맞추고 폰 밝기를 낮춘 채 다시 읽어 보면 오늘 안에 끝납니다.