폰트와사이즈
웹 타이포그래피의 가독성, 계층구조, 여백 등 핵심 원칙을 알아봅니다
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
폰트와 사이즈
Legibility (레저빌러티) : 가독성
가독성은 특정 서체에서 한 문자를 <ins>다른 문자와 구별하는 것이 얼마나 쉬운지</ins>를 측정한 것입니다.
서체, 글자 및 세부 사항에 초점을 맞춘 마이크로 타이포그래피로, 가장 일반적인 문제는 대문자 I과 소문자 l의 구별이 부족하다는 것입니다. 이런 종류의 글꼴을 피할 필요가 있습니다.
Readability (리더빌리티) : 가독성
전반적인 독서 경험을 말합니다. 텍스트 레이아웃을 스캔하고 머리글, 소제목, 단락 및 블록을 쉽게 구별할 수 있도록 작성합니다. 이는 콘트라스트, 색상, 크기, 구성 및 작은 세부 묘사의 기술로 구현할 수 있습니다.
x-height
대문자와 소문자의 문자 비율이 클수록 더 읽기 쉬운 서체가 됩니다.
Counters (카운터)
글자 안의 공백을 말하는 것으로 "o" "u" "d" 같은 글씨의 안에 여백을 카운터라고 합니다. 공백이 큰 글꼴일수록 읽기 쉽습니다.
Font weight (폰트 굵기)
더 가벼운 서체는 일반적으로 더 무거운 유형의 weights보다 읽기 쉽습니다.
Letter spacing (자간)
UI 디자인의 경우 일반적으로 헤더 부분에 적용되는 것으로 문자 간격을 적절히 줄여줍니다.
Serif vs Sans Serif
긴 문장의 인쇄물에서는 명조체(serif)가 적절하지만 웹이나 모바일에서 긴 텍스트를 즐쳐 쓰지 않기 때문에 고딕(sans serif)체가 많이 쓰입니다.
Line height (행높이)
행높이는 글자 크기에 1.618을 곱하면 황금 비율의 라인높이(line-height)를 얻을 수 있습니다.
Text block width (문단 너비)
문단의 너비가 너무 넓으면 눈이 다음 줄을 찾는데 어렵고 너무 좁으면 읽기 리듬이 깨집니다.
Colors (색상)
프로젝트마다 다르긴 하지만, 순수한 회색(또는 검은색)을 사용하는 대신 주색상을 해당 영역의 색상을 사용합니다.
White space (여백)
여백의 기본 역할은 방문자가 한꺼번에 볼 수 있는 텍스트의 양을 줄이는 것입니다. 공백은 레이아웃을 통해 우리의 눈을 안내하고 질서, 정교함 및 우아함을 만들어줍니다.
Hierarchy (계층)
계층구조(위계 구조)는 내용을 읽는 방법을 정의합니다. 제목, 부제목, 본문을 구분하는 방법을 알려줍니다. 대비, 텍스트 크기, 패딩, 여백 등을 활용할 수 있습니다.
타이포그래피 위계 구조가 없을 때
1. Size (가장 쉬운 접근)
2. Color
3. Position
4. Contrast (대비)
Color와 Weight로 계층 구조 만들기
중요하니까 글씨를 키우자, 덜 중요하니까 글씨 크기를 조금 줄이자라는 식으로 폰트 사이즈로 위계(계층구조)를 잡을 수도 있지만 color와 weight를 이용하여 위계를 잡을 수도 있습니다.
Color
Weight
색상이 있는 배경에는 회색 글씨를 사용하지 않는다
흰색 배경에는 밝은 회색을 사용하면 좋지만 색상이 있는 배경에는 그렇지 않습니다. 배경색에 회색을 사용하면 색대비가 줄어들어 가독성이 떨어집니다.
회색으로 처리하는 것이 아니라 색상환에서 배경색과 가까운 컬러를 선택하는 것이 좋습니다.
흰색 글씨의 투명도(opacity)를 낮춰라
배경색 또는 그림에서 색상 사용하기
배경이 그림이나 패턴일 경우에는 텍스트의 opacity를 낮추는 것보다는 배경색이나 그림에서 색상을 추출해서 사용해서 가독성을 올릴 수 있습니다.
Shadow (그림자 사용하기)
배경은 사방으로 주는 것보다 각도를 주어 거리를 두는 것이 좋습니다.
Separators (구분선)
콘텐츠를 섹션으로 나누는 좋은 방법은 separator(구분선)를 사용하는 것입니다. 가장 인기 있는 것은 단순한 선이며 미묘한 도구이지만 여전히 가독성에 큰 역할을 합니다. 또 다른 방법은 지금 인기 있는 카드 형식을 사용하는 것입니다.
테두리 남용하지 않기
테두리보다는 배경과 간격으로 구분하기
선 대신 그림자 사용하기
선 대신 배경색상으로 구분하기
선 대신 여백 사용하기
Repetition and rhythm (반복과 리듬)
반복되는 요소는 단일성을 제공합니다. 반복은 positioning, text size, colors, padding, margins, use of rules(선), background and boxes일 수 있습니다.
Use icon (아이콘 사용)
아이콘을 분산시키지 않고 집중할 수 있도록 합니다.
Accent border (포인트 테두리)
아이콘은 메뉴 글씨보다 살짝 가볍게 사용합니다.
상단 선으로 포인트 컬러를 추가합니다.
Button background (버튼 배경)
모든 버튼이 배경색이 필요한 건 아닙니다. 선택과 집중이 필요합니다.
