[UI 디자인] 텍스트 스타일링의 원리(크기, 두께, 컬러)

UI 디자인에서 텍스트는 정보 전달의 핵심입니다.
따라서 ‘어떤 폰트를 쓰느냐’보다 어떻게 스타일링하느냐가 훨씬 더 중요합니다.
오늘은 UI에서 꼭 기억해야 할 텍스트 3대 원칙을 정리해봅니다.

 

1. 텍스트 크기 (Size)

1️⃣ 기본 본문(기준): 14–18px

 

웹과 앱에서 가장 많이 쓰이는 범위입니다.
가독성과 공간 활용을 동시에 고려하면 이 구간이 가장 안정적입니다.

 

2️⃣ 정보의 중요도에 따라 크기를 조절

• 중요한 제목 → 더 크게
• 부가 설명 → 더 작게

시각적 위계를 만드는 가장 기본적인 방법입니다.

 

3️⃣ 크기가 커지면 ‘라인하이트’도 더 넉넉하게

 

큰 글자는 시각적 무게가 증가하기 때문에
라인하이트를 넓게 설정해야 읽기 쉬워집니다.

 

4️⃣ 최소 12px 이상 추천

 

11px 이하에서는 텍스트가 흐려지고
모바일에서는 특히 읽기 어려워집니다.

라인하이트 예시

 

2. 텍스트 두께(Weight)

 

1️⃣ UI에서 가장 많이 쓰는 두께

• Regular
• Medium
  이 두 가지면 대부분의 위계를 구성할 수 있습니다.

2️⃣ 두꺼울수록 강조되는 효과

 

Bold 이상의 두께는 제목·상태·숫자 등에 사용하면 좋습니다.

 

3️⃣ 너무 얇은 폰트(Light 이하)는 피해야 함

• Light
• Extra Light
• Thin

얇은 두께는 작은 글자일수록 가독성이 매우 떨어지기 때문에
UI에서는 거의 사용하지 않는 것이 좋습니다.

 

3. 텍스트 컬러(Color)

 

1️⃣ 기본은 ‘뉴트럴 톤’ 사용

 

텍스트는 보통 블랙이 아닌 중립 그레이 계열을 사용해야
과하게 강하지 않으면서도 안정적인 UI가 됩니다.

 

2️⃣ 배경 대비를 반드시 확보

• 밝은 배경 → 어두운 텍스트
• 어두운 배경 → 밝은 텍스트

이 대비가 부족하면 사용자는 내용을 읽기 매우 어렵습니다.

 

3️⃣ 중요한 텍스트는 대비를 더 높이기

 

하지만 너무 낮춰버리면 접근성이 떨어집니다.
WCAG 기준(4.5:1)을 지키면 안전합니다.

 

 

 

정리하면

 

 

텍스트는 적절한 크기, 중간 두께, 뉴트럴 컬러 대비만 지켜도 UI 전체의 품질이 크게 향상된다.

 

작은 원칙이지만 실제 제품 디자인에서는 매우 중요한 기본기입니다.
앞선 개념들을 기반으로 텍스트 시스템을 구축하면
가독성 높은 UI를 만드는 데 큰 도움이 됩니다.