Web Guide글자 크기타이포그래피위계
타이포그래피 스케일 정하기
글자 크기를 그때그때 정하면 화면마다 제목 크기가 달라집니다.
몇 가지 크기만 정해 두고 그것만 쓰면 사이트 전체가 정돈됩니다.
01크기 단계를 정한다
필요할 때마다 크기를 정하면 18px, 19px, 20px처럼 미묘하게 다른 크기가 생깁니다. 차이가 애매해 위계도 안 보이고 정돈되지도 않습니다.
5~7단계 정도를 정해 두고 그중에서만 고르는 것이 원칙입니다.
대제목 — 페이지 제목
가장 큼. 페이지마다 하나
중제목 — 섹션 제목
내용을 나누는 단위
소제목 — 문단 제목
중제목 아래 세부 구분
본문 — 기본 크기
가장 많이 쓰입니다. 읽기 편한 크기로
보조 — 캡션, 날짜
본문보다 작게
02단계 사이에 충분한 차이
제목과 본문의 크기 차이가 작으면 위계가 보이지 않습니다. 훑어볼 때 제목이 눈에 들어오지 않게 됩니다.
인접한 단계 사이에 확실한 차이를 두세요. 크기만으로 부족하면 굵기도 함께 조정합니다.
차이가 작을 때
제목 18px, 본문 16px · 훑을 때 제목이 안 보임 · 위계가 느껴지지 않음 · 화면이 밋밋함
차이가 충분할 때
제목 24px 굵게, 본문 16px · 훑어도 제목이 들어옴 · 구조가 보임 · 읽기 편함
03본문 크기를 충분히 키운다
웹에서 본문이 작으면 읽기 어렵습니다. 디자이너가 큰 모니터에서 작업하면 작게 느껴지지 않지만, 실제 사용자는 불편합니다.
특히 고객층에 연령대가 높은 분이 있다면 더 키워야 합니다.
01
본문 크기
너무 작지 않게. 요즘은 예전보다 큰 크기가 표준입니다.
02
줄 간격
글자 크기의 1.5~1.8배. 좁으면 답답하고 넓으면 흩어집니다.
03
한 줄 길이
너무 길면 다음 줄을 찾기 어렵습니다. 본문 영역 폭을 제한합니다.
04
고령층 고려
고객층에 따라 기본 크기를 올립니다.
05
모바일
PC보다 작게 하지 않습니다. 오히려 비슷하거나 크게.
04반응형에서의 크기
PC에서 큰 제목이 모바일에서 그대로면 화면을 가득 채워 버립니다. 화면 크기에 따라 제목 크기가 줄어들어야 합니다.
다만 본문은 줄이지 않습니다. 작은 화면이라고 글자까지 작으면 읽을 수 없습니다.
대제목
PC에서 크게, 모바일에서 상당히 축소. 화면 폭에 따라 유동적으로.
중·소제목
약간 축소. 본문과의 차이는 유지합니다.
본문
줄이지 않습니다. 모바일에서 같거나 오히려 크게.
보조 텍스트
줄이지 않습니다. 이미 작아 더 줄이면 안 보입니다.
CHECK POINT
□ 글자 크기 단계가 5~7개로 정해져 있는가
□ 정해진 크기 외의 값이 쓰이지 않는가
□ 제목과 본문의 크기 차이가 충분한가
□ 본문 크기가 읽기 편한 수준인가
□ 줄 간격이 글자 크기의 1.5배 이상인가
□ 본문 영역 폭이 제한되어 있는가
□ 모바일에서 본문 크기를 줄이지 않았는가
#글자 크기#타이포그래피#위계#줄 간격#본문 가독성#반응형#디자인 시스템#홈페이지 디자인#웹비스타#홈페이지 제작