16px이 최소라면, 17px은 더 나은 기본

KRDS DS-034 — 본문 폰트 크기를 최소 17px 이상으로 설정하고 있다.

0. 들어가며 — 또 하나의 크기 기준

지난 33편에서 “본문은 최소 16px(1rem) 이상”이라고 했습니다. 그런데 이번 34편은 “본문은 최소 17px 이상”이라고 합니다. 16px이라더니 17px? 30·31편의 ’두께 둘/넷’처럼, 두 규칙이 함께 하나의 그림을 그립니다.

DS-033(16px 최소) + DS-034(17px 권장) = “최소 16px은 지키되, 가능하면 17px 이상으로.”

DS-033이 ’절대 하한(16px)’이라면, DS-034는 ’권장 기준(17px)’입니다. 16px 미만은 절대 안 되고(033), 이왕이면 17px 이상이 더 좋다(034)는 것이죠. 단 1px 차이지만, 이 한 픽셀에 담긴 의미가 있습니다. 이번 편은 왜 KRDS가 16px을 넘어 17px을 권하는지, 그 작은 차이의 가치를 풀어냅니다.

1. 규칙 원문 — 한 단계 높은 기준

DS-034 (디자인 스타일 > 타이포그래피) “본문 폰트 크기를 최소 17px 이상으로 설정하고 있다.”

33편과 함께 보면 구조가 분명합니다.

규칙	의미
DS-033	절대 하한 16px(1rem) — 이 미만은 금지
DS-034	권장 기준 17px — 가능하면 이 이상

정리: 본문은 최소 16px을 넘어, 이왕이면 17px 이상으로 설정하라. 이게 DS-034입니다.

2. 왜 17px인가 — 한글과 Pretendard GOV를 위한 배려

16px이 웹 표준인데, KRDS는 왜 한 단계 높은 17px을 권할까요? 한글의 특성 때문입니다.

영문 알파벳은 비교적 단순한 형태지만, 한글은 자음·모음·받침이 결합된 복잡한 구조입니다. 같은 픽셀 크기라도 한글은 영문보다 획이 많아, 작은 크기에서 더 빽빽하고 읽기 어려워집니다. 그래서 한글 본문은 영문 기준보다 조금 더 큰 것이 편안합니다. 16px이 영문 기준의 표준이라면, 한글이 대부분인 정부 서비스에서는 17px이 더 적합한 것이죠.

또한 정부 서비스의 표준 글꼴인 Pretendard GOV(27편)의 특성, 그리고 정부 서비스 사용자층(고령 비중이 높은)을 고려하면, 한 단계 큰 본문이 가독성에 유리합니다. 1px이라는 작은 차이지만, 누적되면 긴 본문을 읽는 편안함에 분명한 차이를 만듭니다. 특히 노안이 온 사용자에게는 16px과 17px의 차이가 ’겨우 읽힘’과 ’편하게 읽힘’을 가르기도 합니다.

즉 17px 권장은 ’한글·정부 서비스·고령 사용자’라는 구체적 맥락을 반영한 세심한 배려입니다. 국제 표준 (16px)을 따르되, 한국의 상황에 맞게 한 단계 더 높인 것이죠. 색의 매직넘버가 국제 기준을 따르되 한국식으로 정교화한 것(2편)과 같은 맥락입니다.

3. ’최소’와 ’권장’을 함께 두는 이유

DS-033(16px)과 DS-034(17px)를 따로 둔 이유는, 30·31편(두께 둘/넷)에서 본 것과 같습니다 — 절대선과 권장선을 함께 두면 더 유연하고 견고한 기준이 됩니다.

16px이라는 절대 하한이 있으면, 어떤 경우에도 그 아래로는 내려가지 않습니다(033). 그리고 17px이라는 권장이 있으면, 이왕이면 더 나은 기본을 지향하게 됩니다(034). 만약 17px 하나만 강제하면 16px로도 충분한 특수 상황에서 경직될 수 있고, 16px 하나만 두면 더 나은 기준을 지향할 동기가 없습니다. 두 규칙을 함께 두어, ’최소한 16px, 지향은 17px’이라는 명확한 운영 원칙을 만드는 것이죠.

실무에서는 이렇게 적용합니다 — 본문 기본값을 17px(또는 그 이상)로 설정하고, 정말 공간이 빠듯한 특수 영역에서만 16px까지 허용. 이러면 대부분의 본문이 권장(17px)을 따르면서도, 절대 하한(16px)은 어떤 경우에도 지켜집니다. 권장을 기본값으로 삼으면 자연스럽게 더 나은 가독성에 수렴합니다.

4. 1px의 가치 — 작은 차이가 쌓이면

“겨우 1px인데 그렇게 중요한가?” 싶을 수 있습니다. 하지만 가독성에서 작은 차이는 누적되어 큰 영향을 줍니다.

한 글자에서 1px은 미미해 보입니다. 하지만 본문은 수백, 수천 글자입니다. 그 모든 글자가 1px씩 커지면, 긴 글을 읽는 전체 경험의 편안함이 달라집니다. 마치 의자 높이가 1cm만 안 맞아도 오래 앉으면 불편한 것처럼, 글자 크기의 작은 차이도 오래 읽으면 피로의 차이로 나타납니다.

게다가 이 차이는 시력이 약한 사용자에게 증폭됩니다. 시력 좋은 사람에게 16px과 17px은 거의 같아 보이지만, 노안이나 저시력 사용자에게는 그 1px이 ’읽을 수 있느냐’의 경계에 걸리기도 합니다. 가독성 기준은 늘 ’가장 잘 안 보이는 사용자’를 기준으로 잡아야 하므로(21편), 그들에게 의미 있는 1px의 여유를 더하는 것입니다. 작은 배려가 누군가에게는 결정적 차이가 됩니다.

5. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① 16px에 안주. 16px로만 → 하한은 지키나 권장 미달. → 17px 이상 지향. 함정 ② 14px 본문. 17px은커녕 16px도 미달 → 명백한 위반(033·034 동시). → 17px 이상으로. 함정 ③ 권장 무시. “16px이면 됐지”로 권장 외면 → 한글 가독성 손해. → 기본값을 17px로.

무엇을 점검하나

본문 크기 — 본문이 17px 이상인가(최소 16px은 절대 충족).

기본값 설정 — 본문 기본값이 권장(17px) 이상으로 설계됐는가.

한글 가독성 — 한글 본문이 충분히 편안하게 읽히는가.

Before / After

/* ❌ Before: 16px에 안주 */ body { font-size: 1rem; } /* =16px, 하한만 */ /* ✅ After: 17px 이상 권장 */ body { font-size: 1.0625rem; } /* =17px, 한글에 더 편안 */ /* 또는 html { font-size: 106.25%; } 후 body { font-size: 1rem; } */

6. 우리 사이트에 해당될까?

기관 유형	DS-034 적용
중앙행정기관(대표)	✅ 권장
중앙행정기관(운영)	✅ 권장
공공기관	✅ 권장
지방자치단체	✅ 권장

본문이 있는 모든 사이트에 권장됩니다. 최소 16px(033)은 필수, 17px(034)은 권장입니다.

7. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문이 17px 이상인가요? (최소 16px은 당연히 충족)

□ 본문 기본값을 권장(17px)으로 설계했나요?

□ 한글 본문이 답답하지 않게 읽히나요?

□ 16px에 안주하지 않았나요?

❓ FAQ

Q1. 16px이면 위반인가요? DS-033(최소 16px)은 충족하지만, DS-034(권장 17px)에는 못 미칩니다. 위반이라기보다 ’권장 미달’입니다. 가능하면 17px 이상으로 높이는 것이 좋습니다.

Q2. 왜 한글은 17px이 좋나요? 한글은 자음·모음·받침이 결합돼 영문보다 획이 복잡합니다. 그래서 같은 크기라도 영문보다 빽빽해, 한 단계 큰 17px이 더 편안합니다. 한글이 대부분인 정부 서비스에 적합한 기준입니다.

Q3. 17px보다 더 크면요? 더 커도 됩니다. 17px은 권장 하한이라, 18px·19px 등 더 큰 본문도 좋습니다. 다만 너무 크면 한 화면에 들어가는 정보가 줄어드니 적정선을 찾으세요.

Q4. 모든 본문을 17px로 통일하나요? 본문 기본은 17px 이상으로, 보조 텍스트는 그보다 약간 작을 수 있으나 16px 미만으로는 내려가지 않게 합니다. 크기 계층은 다음 편들(036·037)에서 다룹니다.

Q5. 16px과 17px을 px로 줘도 되나요? 크기는 충족하지만 rem으로 주면 사용자 확대에 대응해 더 좋습니다(DS-035). 16px=1rem, 17px≈1.0625rem입니다.

8. 마무리 — 한 픽셀의 배려

DS-034의 메시지는 작지만 따뜻합니다.

국제 표준(16px)을 지키되, 한글과 우리 사용자를 위해 한 픽셀을 더 배려한다.

16px은 누구나 따르는 웹 표준이지만, KRDS는 거기서 한 걸음 더 나아가 17px을 권합니다. 한글의 복잡한 구조, 정부 서비스의 고령 사용자층을 고려한 세심한 배려죠. 1px이라는 작은 차이가 긴 본문에서는 편안함의 차이로, 시력 약한 사용자에게는 결정적 차이로 누적됩니다. 표준을 따르되 우리 맥락에 맞게 한 단계 더 — 이는 가독성을 끝까지 챙기는 공공서비스의 태도입니다.

다음 편은 이 크기들을 어떤 ’단위’로 다뤄야 하는지를 봅니다. DS-035 — “개발 시 코드에서 글자 크기를 rem 단위로 변환해 사용한다.” px가 아니라 rem을 써야 하는 이유, 사용자의 글자 확대에 대응하는 법을 다룹니다.

다음 편 예고 ▶ 「035. 개발 시 코드에서 글자 크기를 rem 단위로 변환해 사용하고 있다.」

우리 사이트의 본문 크기가 권장을 따르는지 확인하려면? ViewCheck는 본문 글자 크기가 17px 권장(최소 16px)을 충족하는지, 한글 가독성에 적합한지를 진단합니다.

📚 참고 출처

KRDS 서체(Typography) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_03.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준