Web Guide반응형 글자가독성타이포그래피
반응형 타이포그래피
화면이 작아지면 글자도 작아져야 할까요.
무조건 줄이면 읽기 어려워집니다. 기준이 필요합니다.
01기본 원칙
읽히는 것이 먼저입니다.
1
최소 크기
본문은 일정 크기 아래로 내리지 않습니다.
2
줄 길이
한 줄이 너무 길면 읽기 어렵습니다.
3
줄 간격
좁은 화면일수록 넉넉하게.
4
대비
배경과 글자색 차이를 충분히.
5
제목 축소
제목은 모바일에서 줄여도 됩니다.
6
본문 유지
본문은 함부로 줄이지 않습니다.
02크기 조절 방식
화면에 따라 자연스럽게 바뀌게 합니다.
단계별 변경
기준점마다 크기를 지정 · 통제가 쉬움 · 중간 크기에서 어색할 수 있음
연속 변경
화면에 비례해 부드럽게 변함 · 자연스러움 · 최소 최대 제한 필수
03자주 생기는 문제
실무에서 반복되는 실수들입니다.
점검 항목
너무 작은 본문
모바일에서 확대해야 읽힙니다.
긴 제목 깨짐
단어가 이상하게 잘립니다.
영문 혼용
긴 영단어가 넘칩니다.
줄 간격 부족
답답해 보입니다.
흐린 글자색
밝은 곳에서 안 보입니다.
이미지 속 글자
작아지면 못 읽습니다.
04확인 방법
실제 환경에서 봐야 알 수 있습니다.
실제 기기손에 들고 읽어봅니다.
야외 환경밝은 곳에서 확인.
글자 확대기기 설정을 키워 확인.
긴 제목가장 긴 내용으로 테스트.
다양한 연령주 이용층 기준으로.
가로 모드눕혀서도 확인합니다.
CHECK POINT
□ 모바일 본문 글자가 확대 없이 읽히는가
□ 한 줄 길이가 적당한가
□ 줄 간격이 충분한가
□ 글자색 대비가 충분한가
□ 긴 제목이 깨지지 않는가
□ 기기 글자 설정을 반영하는가
□ 밝은 야외에서 확인했는가
□ 가로 모드에서도 자연스러운가
#반응형 글자#가독성#타이포그래피#글자 크기#줄 간격#대비#모바일#반응형#웹비스타#홈페이지 제작