본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

타이포그래피

서체 (typeface)

기본 글꼴은 국문과 영문 모두 Pretendard를 사용한다. Pretendard는 고딕계열 글꼴로 작은 크기에도 읽기 쉽고 신뢰감을 주는 폰트이다.

가나다 ABC abc 123 @#!?*

글자 스케일(type scale)

  • 본문 폰트 크기는 모든 사용자가 쉽게 읽을 수 있도록 최소 16px 이상으로 설정한다. 적절한 글자 크기는 정보 접근성을 보장하는 중요한 요소로, 특히 디지털 취약계층을 고려하여 설정해야 한다.
  • Pretendard는 다른 서체에 비해 상대적으로 크기가 작아 17px을 기본 크기로 사용한다.
  • 글자 크기와 반응형 디자인을 고려하여 개발 시 코드에서 rem 단위로 변환해 사용한다.

시스템 기본 폰트 크기 17px 기준 = 1.7rem

글자 두께 (font weight)

표준형 스타일은 글자 간의 명확한 대비를 위해 regular(400)와 bold(700) 두 가지 두께(font-weight)를 사용한다. 각 두께는 저시력자를 포함한 대부분의 사용자에게 명확한 대비를 주는 굵기로 regular는 주로 본문에 사용하여 기본 가독성을 보장하고, bold는 강조가 필요한 제목이나 중요한 내용에 사용한다.

Regular 400

대한적십자사는 국제적십자운동 기본원칙에 의거하여, 인간의 존엄성과 생명보호에 공헌하는 인도주의 활동의 대표 기관이다.

Bold 700

대한적십자사는 국제적십자운동 기본원칙에 의거하여, 인간의 존엄성과 생명보호에 공헌하는 인도주의 활동의 대표 기관이다.

줄 간격 (line height)

줄 간격(line-height)은 가독성과 접근성을 위해 최소 150% 이상으로 설정하여, 시각적 피로를 줄이고 시각장애나 난독증 사용자의 읽기 편의를 높인다. 다양한 글자 크기에 대응하기 위해 px 단위가 아닌 em 또는 % 등 상대적 단위를 사용한다.

행간 150%의 줄 간격 예시

콘텐츠 계층 (hierarchy)

사용자에게 정보의 중요도를 명확히 전달하는 역할을 한다. 계층 구조를 명확히 하면 정보 흐름이 자연스러워지며, 사용자는 타이틀을 중요한 정보로 인식해 효율적으로 접근할 수 있다.
타이틀은 본문보다 더 눈에 띄어야 하며, 사용자는 타이틀이 중요한 정보라는 인식을 갖는다. 계층 구조를 명확히 하면 정보의 흐름이 자연스럽고, 사용자가 중요 정보를 혼동하지 않고 접근할 수 있다.

tit1 : Pretendard, bold, 30px, #000000

tit2 : Pretendard, bold, 28px, #111111

tit3
: Pretendard, bold, 24px, #333333

블릿리스트_1 스타일입니다. (Pretendard, Regular, 17px, #1D1D1D)

블릿리스트_2 스타일입니다. (Pretendard, Regular, 17px, #333333)

블릿리스트_3 스타일입니다. (Pretendard, Regular, 16px, #555555)