{3줄 요약}

Typography 계층(Typographic Hierarchy)은 텍스트의 중요도를 크기·굵기·색으로 표현하는 구조입니다.
계층이 없으면 모든 텍스트가 같은 무게로 보이고, 사용자는 어디서부터 읽을지 막힙니다.
제목·소제목·본문·캡션을 구분하는 것만으로도 화면이 훨씬 읽기 쉬워집니다.

모든 텍스트가 같은 크기면 어떻게 될까요

뉴스 기사를 상상해봐요.
기사 제목, 부제목, 본문, 작성일, 기자 이름이 전부 같은 크기, 같은 굵기, 같은 색이에요.

읽을 수는 있어요.
하지만 어디서부터 시작해야 할지 모르고, 빠르게 스캔하기 어려워요.
제목인지 본문인지 구분하려면 내용을 읽어봐야 해요.

이 상황이 Typographic Hierarchy(타이포그래피 위계)가 없는 상태예요.

반대로 계층이 잘 잡힌 화면을 보면 - 제목은 크고 굵고, 소제목은 중간, 본문은 읽기 편한 크기, 날짜·출처는 작고 회색으로

  • 사용자는 읽기도 전에 이미 구조를 이해해요.
    그 이해가 읽기 시작을 쉽게 만들어요.

많은 사람들이 Typography 계층을 "디자인을 예쁘게 만드는 것"이라고 생각해요.
하지만 실제로는 정보를 더 빠르게 이해하게 돕는 구조 설계예요.

계층을 만드는 세 가지 도구

크기 (Size): 가장 직관적인 방법이에요.
큰 것이 먼저 눈에 들어와요. 제목은 크고, 본문은 작게.

굵기 (Weight): 같은 크기라도 Bold가 Regular보다 먼저 읽혀요.
소제목을 본문과 같은 크기지만 Bold로 처리하는 게 대표적인 활용이에요.

색·대비 (Color/Contrast): 주요 정보는 진한 색, 부가 정보는 밝은 회색.
비활성 상태, 플레이스홀더, 메타 정보에 낮은 대비 색을 써서 계층을 만들어요.

이 세 도구는 함께 쓸 때 더 강해요.
제목이 크면서 Bold이고 진한 색이면 계층이 아주 명확해져요.
반대로 작으면서 Regular이고 회색이면 '덜 중요한 정보'라는 신호가 돼요.

네 단계 계층 구조가 기본이에요

실무에서 자주 쓰는 기본 계층은 네 단계예요.

H1 - 페이지 제목: 화면당 하나예요.
가장 크고 굵게.
사용자가 지금 어떤 페이지에 있는지 알게 해요.

H2 - 섹션 제목: 본문을 의미 있는 단위로 나누는 구분점이에요.
H1보다 작지만 본문보다 명확하게 커야 해요.

Body - 본문: 실제 읽히는 내용이에요.
가독성 원칙에 맞는 크기(16px 이상)와 행간으로 설정해요.

Caption/Meta - 보조 정보: 날짜, 출처, 주석, 레이블 같은 부가 정보예요.
작고 밝은 색으로 "이건 덜 중요한 정보"라는 신호를 줘요.

토스 앱에서 계좌 목록을 보면 이 구조가 보여요.
잔액은 크고 굵게(주요 정보), 계좌 이름은 중간(서브 정보), 계좌번호는 작고 회색(보조 정보).
읽지 않아도 무엇이 중요한지 눈이 먼저 알아요.

계층 없이 강조를 남발하면 생기는 문제

계층을 세우다 보면 "이것도 중요하고 저것도 중요한데"라는 유혹이 생겨요.
그래서 Bold를 여기저기 쓰거나, 색을 너무 많이 써요.

하지만 모든 것을 강조하면 아무것도 강조되지 않아요.

강조는 배경 대비에서 나와요.
주변이 조용해야 강조된 것이 눈에 들어와요.
대부분의 텍스트가 Regular이고 회색일 때, Bold이고 검은색인 텍스트가 먼저 읽혀요.
주변도 모두 Bold라면 그 효과가 사라져요.

실무 기준: 한 화면에서 H1은 하나, H2는 35개, Bold 강조는 문단당 12곳이 적당해요.

일관성이 있어야 계층이 작동해요

Typography 계층은 한 화면에서만 의미 있는 게 아니에요.
제품 전체에서 일관되게 유지될 때 진짜 힘을 발휘해요.

사용자가 두 번째 페이지에 갔을 때 "이 크기의 굵은 텍스트가 섹션 제목"이라는 걸 이미 학습한 상태라면, 새 화면에서도 설명 없이 구조를 이해해요.

이걸 시스템으로 만든 게 Typography Scale이에요. UI Typography에서 이 개념을 실무에 적용하는 방법을 다뤄요.

관련 아티클

참고 문헌

  • Jason Santa Maria, 《Web Typography》(2014) - 디지털 환경에서 타이포그래피 계층을 설계하는 방법을 실무 관점으로 설명해요.
  • Robert Bringhurst, 《The Elements of Typographic Style》(1992) - 텍스트 위계의 역사적·이론적 기반이에요.