디자이너라면 꼭 알아야 할 작업 효율을 높이는 타이포그래피 핵심 정리

타이포그래피는 정보 전달의 명확성을 높이고 사용자 경험을 향상시키는 핵심 요소입니다.

서체와 글자 구조는 브랜드 이미지를 구축하고 시각적 위계를 통해 콘텐츠의 흐름을 안내합니다.

가독성과 접근성을 고려한 설계는 다양한 사용자층에게 포용적인 환경을 제공합니다.

따라서 타이포그래피는 디자인의 완성도와 커뮤니케이션 효과를 결정짓는 중요한 수단입니다.

1. 서체 (Typeface) 설정 기준

KRDS에서는 국문과 영문 모두에 사용할 수 있는 통합 서체로 ‘Pretendard GOV’를 기본으로 채택하고 있습니다.

Pretendard GOV는 기존 Pretendard 폰트를 기반으로 하되, 공공 디자인 환경에 적합하게 일부 조정된 서체입니다. 이는 높은 가독성, 시각 균형, 범용성을 고려한 디자인으로, 웹 접근성 기준을 만족시키는 데 중점을 둡니다.

- 표준형 스타일에서는 Pretendard GOV를 본문, 제목 등 전 영역에 일괄 적용하여 시각적 일관성을 확보합니다.

- 확장형 스타일에서는 각 기관의 특성에 따라 자체 서체나 추가 서체를 사용할 수 있으나, 반드시 고딕 계열이며 가독성이 높아야 합니다. 이때, 시스템 전반에 혼란을 주지 않도록 본문 및 제목 서체는 고정하고, 디스플레이나 배너 등에만 개성 있는 서체를 제한적으로 활용하도록 권장합니다.

추천 서체에는 'Noto Sans', '나눔고딕', 'Spoqa Han Sans' 등이 포함되며, 모든 서체는 웹폰트로 제공되어야 하며, 폰트 저작권 문제가 없도록 관리되어야 합니다.

2. 글자 두께 (Font Weight)

KRDS는 명확한 정보 계층화를 위해 글자 두께 사용을 제한합니다. 일반적으로 Regular(400)과 Bold(700)를 기본으로 하여, 다음과 같은 구조를 따릅니다.

- Regular (400): 본문, 일반 설명 문구 등 일상적인 정보에 사용

- Bold (700): 제목, 강조 문구 등 중요도 높은 콘텐츠에 사용

사용자 인터페이스에서 시각적 피로를 줄이고, 혼란을 방지하기 위해 글자 두께는 최대 4단계 이하로 제한하는 것이 원칙입니다. 너무 많은 두께의 혼합 사용은 사용자가 정보의 위계질서를 인식하는 데 혼란을 줄 수 있기 때문입니다.

3. 줄 간격 (Line Height)

줄 간격은 가독성과 시각 피로도를 동시에 고려해야 합니다. KRDS는 150% 이상의 line-height를 권장하며, 특히 본문 콘텐츠의 경우 충분한 줄 간격을 통해 시각적 숨 쉴 공간을 확보합니다.

- 가령, 16px 본문 텍스트에는 24px 이상(1.5em)의 줄 간격을 사용하는 것이 기본입니다.

- px보다는 상대 단위인 em 또는 %를 사용하는 것이 반응형 웹과 접근성 측면에서 유리합니다.

- 줄 간격은 일반 사용자뿐 아니라 시각장애, 난독증 등의 사용자도 보다 편안하게 읽을 수 있도록 설계되어야 합니다.

4. 글자 크기 (Font Size)

KRDS는 본문 기본 크기를 16px 이상으로 설정할 것을 권장합니다. 특히 Pretendard GOV는 일반 서체 대비 상대적으로 작게 보이므로, 실제 적용 시 17px 정도로 설정하면 더 적절합니다.

- 본문: 16~18px

- 소제목: 20~24px

- 대제목: 28~32px 이상

사용자 환경에 따라 다양한 디바이스에서도 안정적인 가독성을 확보할 수 있도록 상대 단위(rem, em)와 고정 단위(px)를 병행하여 구성하는 것이 바람직합니다.

5. 정렬 및 간격 (Alignment & Spacing)

텍스트 정렬은 일반적으로 왼쪽 정렬(Left-align)을 기본으로 사용합니다. 이는 가독성이 가장 높고, 다양한 해상도와 콘텐츠 유형에 대응하기 용이하기 때문입니다.

- 문단 간 간격은 충분한 여백을 주어 시각적 밀도를 완화시키며, 텍스트 블록 간 최소 1em 이상의 여백을 확보하도록 합니다.

- 제목과 본문 사이, 항목 간에는 명확한 구분을 위해 상·하 간격 설정을 표준화해야 하며, 이는 컴포넌트 단위로도 통일성 있게 적용되어야 합니다.

6. 피그마 설정 (디자인 툴 적용 시 유의사항)

디자인 툴인 Figma에서는 KRDS의 타이포그래피 기준을 정확하게 반영하기 위해 다음과 같은 설정을 제안합니다:

- Vertical Trim: 텍스트 간의 상하 불균형을 방지하기 위해 Standard 설정 사용

- Text Style 구성: 제목, 소제목, 본문, 캡션 등 계층 구조별로 텍스트 스타일을 미리 정의하여 일관된 디자인 유지

- Auto Layout 및 Line-height 기준 적용: 실 디바이스에서의 시뮬레이션을 반영해 줄 간격과 폰트 크기를 테스트하면서 적용