타이포그래피 기초와 실전 가이드라인

이번에 웹 디자인에서 가장 중요한 요소인 타이포그래피(Typography) 에 대한 개념부터 실전 적용 가이드라인까지를 다루고 있습니다.

1. 타이포그래피의 정의

• 타이포그래피는 “문자를 읽기 쉽고 아름답게 배열하는 예술이자 기술”로, 글자의 가독성과 시각적 매력을 모두 고려합니다.

2. 세리프(Serif) vs 산세리프(Sans‑serif)

• 세리프 서체: 문자 획 끝에 작은 장식(세리프)이 붙어 있어 전통적이고 신뢰감을 주며, 긴 본문에 적합합니다.
• 산세리프 서체: 장식이 없고 깔끔·단순한 형태로 현대적 분위기를 연출하며, 인터페이스 초보자에게 선택이 쉽습니다.

3. 추천 서체

• 산세리프: Inter, Open Sans, Roboto, Montserrat, Work Sans, Lato
• 세리프: Merriweather, Aleo, Playfair Display, Cormorant, Cardo, Lora
• 초보자는 한 페이지당 최대 2가지 서체를 넘기지 않는 것이 무난합니다.

4. 폰트 크기와 굵기

• 본문(일반 텍스트): 16–32px 권장
• 긴 본문(블로그·기사): 20px 이상 고려
• 큰 제목: 50px 이상, 굵기(weight) 600 이상
• 최소 굵기 400(regular) 미만은 피하여 가독성을 확보

5. 행 길이(line length)와 줄간격(line height)

• 행 길이: 65–75자 이내
• 줄간격: 본문 1.5–2.0배, 제목은 1.1–1.2배로 조절
• 너무 짧거나 긴 줄간격은 눈의 피로를 유발

6. 자간(letter spacing)과 대문자 활용

• 제목이 부자연스러울 때는 자간을 음수로 조정하여 자연스럽게 배열
• 짧은 부제나 강조 텍스트는 모두 대문자와 자간 확장, 굵은 글씨를 활용

7. 정렬과 정당화

• 웹에서는 양쪽 정렬(justify) 사용 금지, 일반적으로 좌측 정렬 유지
• 작은 블록 텍스트를 제외하면 중앙 정렬도 가독성 저하 우려로 자제