작은 글씨는 누군가를 배제한다

KRDS DS-033 — 본문 폰트 크기를 최소 16px(1rem) 이상으로 설정하고 있다.

0. 들어가며 — 글자 ’크기’라는 가장 직접적인 가독성

글꼴(027~029), 두께(030·031), 줄 간격(032)을 지나, 이번엔 가독성에 가장 직접적으로 영향을 주는 요소 — 글자 크기입니다.

아무리 좋은 글꼴, 적절한 두께, 넉넉한 줄 간격이어도, 글자 자체가 작으면 안 읽힙니다. 크기는 가독성의 가장 기본 토대입니다. 그리고 작은 글씨는 단순히 ‘불편한’ 정도가 아니라, 저시력·고령 사용자를 배제하는 장벽이 됩니다.

DS-033은 본문 글자 크기의 최소선을 16px(1rem) 으로 못 박습니다. 본문이 그보다 작으면 안 된다는 것이죠. 이번 편은 왜 16px이 본문의 최소 기준인지, 작은 글씨가 왜 접근성 문제인지를 풀어냅니다.

1. 규칙 원문 — 명확한 최소값

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

“본문 폰트 크기”

읽는 본문 텍스트의 글자 크기입니다. 제목이 아니라 일반 본문이죠.

“최소 16px(1rem) 이상”

본문은 16px(=1rem) 이상이어야 한다는 뜻입니다. 1rem은 브라우저 기본 글자 크기(보통 16px)를 1로 보는 단위로, 16px과 같습니다.

정리: 본문 글자는 최소 16px(1rem) 이상으로 설정하라. 이게 DS-033입니다. (KRDS는 더 나아가 17px 이상도 권장합니다 — 다음 편 DS-034.)

2. 왜 16px이 최소선인가

16px이라는 숫자에는 근거가 있습니다. 웹 본문의 사실상 표준 이기 때문입니다.

대부분의 브라우저는 기본 글자 크기를 16px로 설정합니다. 즉 16px은 ‘브라우저가 정한 읽기 좋은 기본값’ 입니다. 본문을 이 기본값 이상으로 두면, 대부분의 사용자가 편하게 읽을 수 있습니다. 반대로 본문을 14px, 12px로 줄이면 — 디자인상 깔끔해 보일 수 있지만 — 작아진 만큼 읽기 어려워집니다.

특히 작은 글씨가 문제가 되는 것은 저시력·고령 사용자에게입니다. 노안이 오면 작은 글씨에 초점을 맞추기 어렵고, 12~14px 글씨는 흐릿하게 보입니다. 16px은 이들도 어느 정도 읽을 수 있는 최소선입니다. 즉 16px 기준은 ‘대부분에게 편하고, 시력이 약한 사용자도 읽을 수 있는’ 경계입니다. 그 아래로 내려가면 일부 사용자를 배제하게 됩니다.

정부 서비스는 모든 국민을 대상으로 하므로, 작은 글씨로 누군가를 배제하면 안 됩니다. 그래서 DS-033은 본문 최소 크기를 명확히 16px로 규정해, 작은 글씨로 인한 배제를 차단합니다. 색의 명도 대비(2편), 줄 간격 (32편)과 같은 정신 — ’모두가 읽을 수 있게’를 크기에 적용한 것입니다.

3. 작은 글씨의 유혹과 그 대가

디자이너는 종종 작은 글씨에 끌립니다. 글씨가 작으면 더 많은 정보를 좁은 공간에 넣을 수 있고, 세련되고 정교해 보이기 때문입니다. 민간의 트렌디한 디자인에는 작은 글씨가 흔하죠.

하지만 이 유혹에는 대가가 따릅니다. 작은 글씨로 정보를 빽빽이 넣은 화면은, 시력 좋은 디자이너에게는 ‘정교해’ 보여도 고령 사용자에게는 ‘읽을 수 없는’ 화면입니다. 특히 정부 서비스에서 작은 글씨로 처리되는 정보(약관, 유의사항, 부가 안내 등)는 종종 가장 중요한 내용인데, 그게 작아서 안 읽히면 사용자가 손해를 봅니다. “작은 글씨로 적혀 있어서 못 봤다”는 일이 실제 피해로 이어지는 것이죠.

그래서 공공서비스의 본문은 작은 글씨의 유혹을 절제해야 합니다. 정보를 좁은 공간에 욱여넣는 대신, 충분한 크기로 펼쳐 모두가 읽을 수 있게 하는 것 — 이는 ’정교함’보다 ’접근성’을 택하는 공공의 원칙입니다. 16px 최소선은 그 원칙을 지키는 안전장치입니다.

한 가지 더 — ‘중요하지 않아 보이는’ 정보일수록 작게 만드는 경향이 있는데, 이것도 경계해야 합니다. 부가 설명, 캡션, 각주 같은 텍스트도 사용자에게는 필요한 정보입니다. 이런 보조 텍스트가 16px보다 작으면, 정작 도움이 필요한 사용자가 그 도움말을 못 읽습니다. 본문급 정보는 모두 16px 이상을 지키는 것이 안전합니다.

4. 16px과 1rem — 단위의 의미

DS-033이 ’16px(1rem)’을 함께 쓴 데도 의미가 있습니다. rem이라는 단위를 권장하는 것이죠(자세한 건 DS-035에서).

px는 고정된 절대 크기이고, rem은 브라우저 기본 크기를 기준으로 한 상대 크기입니다. 16px과 1rem은 보통 같지만, 중요한 차이가 있습니다 — 사용자가 브라우저 설정에서 글자 크기를 키우면, rem은 그에 맞춰 함께 커지지만 px는 고정됩니다.

저시력 사용자 중에는 브라우저나 OS에서 기본 글자 크기를 키워 쓰는 사람이 많습니다. 본문을 rem으로 설정하면 이들이 글자를 키울 때 본문도 함께 커져 더 잘 읽힙니다. 반면 px로 고정하면, 사용자가 아무리 키워도 본문은 그대로라 도움이 안 됩니다. 그래서 DS-033은 16px이라는 크기와 함께 1rem이라는 단위를 제시해, 크기 확대 대응까지 고려합니다. 단순히 ’16px’이 아니라 ’16px이되 rem으로’가 완전한 충족입니다.

5. 흔한 위반 패턴

DS-033 위반은 이렇게 나타납니다.

함정 ① 작은 본문. 본문을 14px·12px로 → 가독성 저하, 저시력 배제. → 16px(1rem) 이상.

함정 ② 보조 텍스트 과소. 캡션·각주·안내를 너무 작게 → 정보 누락. → 본문급은 16px 이상.

함정 ③ px 고정. 본문을 px로 고정 → 사용자 크기 확대 시 안 커짐. → rem 단위(DS-035).

함정 ④ 모바일 축소. 모바일에서 본문을 더 작게 → 작은 화면에서 더 안 보임. → 모바일도 16px 이상.

핵심: 본문 최소 16px(1rem). 작은 글씨는 정교함이 아니라 배제입니다.

6. 무엇을 점검하나

DS-033은 본문 글자 크기가 16px 이상인지를 봅니다.

본문 크기 — 본문 폰트 크기가 16px(1rem) 이상인가.

보조 텍스트 — 캡션·각주 등 본문급 텍스트도 충분한가.

단위 — rem 단위로 설정돼 크기 확대에 대응하는가(DS-035).

반응형 — 모바일에서도 16px 이상이 유지되는가.

7. 누가 담당하나

역할	책임
디자이너	본문 크기를 16px 이상으로 설계
퍼블리셔/개발	본문 font-size를 rem으로 16px 이상 적용
접근성 담당	다양한 기기·확대 환경에서 본문 크기 검증

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

적용 대상

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

본문 텍스트가 있는 모든 사이트 = 해당.

예외(N/A)

본문이 있는 사이트는 모두 대상입니다.

9. 단계별 개선 방법

Before / After

/* ❌ Before: 작은 본문, px 고정 */ body { font-size: 14px; } /* ✅ After: 16px 이상, rem 단위 */ html { font-size: 100%; } /* 16px 기준 */ body { font-size: 1rem; } /* =16px, 확대 대응 */ .caption { font-size: 1rem; } /* 보조 텍스트도 충분히 */

정비 순서

본문 크기 — 14px 이하 본문을 16px(1rem) 이상으로.

보조 텍스트 — 캡션·각주 크기 점검.

rem 전환 — px 고정을 rem으로(DS-035).

반응형 확인 — 모바일에서도 16px 유지.

10. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문 글자가 16px(1rem) 이상인가요?

□ 14px·12px 본문을 쓰고 있지 않나요?

□ 캡션·각주 등 보조 텍스트도 충분한가요?

□ rem 단위로 설정해 크기 확대에 대응하나요?

□ 모바일에서도 본문이 작아지지 않나요?

❓ FAQ

Q1. 14px이 더 세련돼 보이는데요? 세련됨과 가독성은 다릅니다. 14px은 시력 좋은 사람에겐 정교해 보여도 고령·저시력 사용자에겐 안 보입니다. 공공서비스는 모두가 읽을 수 있어야 하므로 16px 이상이 기본입니다.

Q2. 보조 텍스트(캡션)도 16px이어야 하나요? 본문급 정보라면 16px 이상이 안전합니다. 정말 부차적인 텍스트는 약간 작을 수 있으나, 정보를 담고 있다면 너무 작게 하지 마세요. 작은 글씨가 정보 누락으로 이어질 수 있습니다.

Q3. 16px과 17px, 뭐가 맞나요? 16px은 ‘최소’(DS-033), 17px은 KRDS의 ‘권장’(DS-034)입니다. 16px 이상이면 DS-033은 충족하되, 17px 이상이면 더 좋습니다. 두 규칙의 관계는 다음 편에서 다룹니다.

Q4. px로 16px을 줘도 되나요? 16px이면 크기 자체는 충족하지만, px는 사용자가 글자를 키울 때 안 커집니다. rem으로 주면 확대에 대응해 더 좋습니다(DS-035).

Q5. 모바일에서는 더 작게 해도 되나요? 아닙니다. 모바일에서도 본문은 16px 이상이어야 합니다. 작은 화면일수록 작은 글씨가 더 안 보이므로, 오히려 충분한 크기가 중요합니다.

11. 마무리 — 크기는 포용의 문제다

DS-033의 메시지는 단순하지만 무겁습니다.

작은 글씨는 정교함이 아니라 배제다 — 본문은 모두가 읽을 수 있는 크기여야 한다.

글자 크기는 가독성의 가장 직접적인 토대입니다. 16px이라는 최소선은 ‘대부분에게 편하고 시력 약한 사용자도 읽을 수 있는’ 경계이고, 그 아래로 내려가면 누군가를 배제하게 됩니다. 정교해 보이는 작은 글씨의 유혹을 절제하고 충분한 크기를 택하는 것 — 이는 색·줄 간격과 같은, ’모두가 읽을 수 있게’라는 공공서비스의 원칙 입니다. 크기는 디자인의 문제이기 전에 포용의 문제입니다.

다음 편은 이 최소선을 한 단계 높입니다. DS-034 — “본문 폰트 크기를 최소 17px 이상으로 설정한다.” 16px이 최소라면 왜 17px을 또 권하는지, 두 규칙의 관계를 다룹니다.

다음 편 예고 ▶ 「034. 본문 폰트 크기를 최소 17px 이상으로 설정하고 있다.」

우리 사이트의 본문 크기가 충분한지 확인하려면? ViewCheck는 본문 글자 크기가 16px(1rem) 이상인지, rem 단위로 확대에 대응하는지, 모바일에서도 유지되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 Understanding 1.4.4 Resize Text — https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

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

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