본문 바로가기
비전공자를 위한 디자인 노트

2. 가독성을 위한 웹 타이포그래피의 9가지 원칙

by 쌈박한 노른자 2022. 7. 4.
반응형

 

 


1. 머리글 (헤더)

머리글 (헤더) 는 웹, 인쇄에서 모두 중요한 요소이고 검색 가능한 콘텐츠의 주요 요소이다.
헤더 사이즈는 본문 텍스트의 크기만큼이나 중요하다.
내용이 많은 헤더를 너무 크게 사용하면 흐름을 망치고 방해물이 되며 균형을 잃을 수 있다. 너무 작으면 계층이 파괴되며 사용자의 주의를 끌수없다. 헤더와 본문 사이에 충분한 공간을 확보하는 것이 중요하다.

 

2. 적절한 포커스

적절한 포커스를 준다.
헤더 크기 및 위치, 본문 텍스트 크기, 텍스트 줄 높이, 텍스트 대비 및 포커스 포인트의 차이점 등 많이 요소가 있다.
포커스 포인트는 사용자의 주의를 끌거나 레이아웃내의 특정 요소 또는 객체다.

 

3. 공백

공백 공간은 가독성에 기여한다.
레이아웃이 매우 깨끗하고 효율적이면 공백이 크기 때문에 사용자의 시선이 텍스트 요소에 쉽게 이동할 수 있다.

 

4. 일관성

사용자에게 친숙한 레이아웃도 중요하다. 모든 헤더의 크기 색상 및 글꼴이 같아야 한다.
텍스트의 크기 등의 간격 옵션에 의해 영향을 받는다 내용이 너무 작서나 너무 넓지 않도록 이 모든 것의 균형을 찾으면 읽기 쉽고 스캔 가능한 완벽한 밀도를 얻을 수 있다.

 

5. 강조

특정 중요 요소를 강조하는 것. 링크 강조 표시, 중요한 텍스트 굵은 글씨 및 따옴표 표시 등 웹 타이포 그래피에서는 포커스가 필수다. 포인트와 오브젝은 단조로운 텍스트를 분해하는데 도움이 된다.

 

6. 정리

기사의 정보를 정리하는 방법은 가독성을 강화할 수 있다. 사용자는 정보를 찾기 쉬기 때문에 적절하게 구성된 콘텐츠를 통해 쉽게 안내받을 수 있다.

7. 깔끔한 표현

텍스트 본문은 이미지, 아이콘, 그래프 또는 일러스트에 관계없이 시각적인 지원이 필요하다. 기사에 그래픽을 배치하는 것은 어려울 수 있다. 그래픽과 텍스트 사이에 충분한 공간이 필요하다. 그래픽 요소가 이미지인 경우 텍스트와 명확하게 구분하기 위해 깨끗한 테두리를 사용하는 것이 좋고 테두리는 사용자의 시선을 유도하는데 도움이 된다.
그러나 테두리는 단순하게 유지하는 것이 중요하고 색상 팔레트는 은은해야 하며 너무 크면 안 된다. 아이콘이나 일러스트와 같은 그래픽 요소의 경우 공백만 사용해야 한다. 텍스트와 따로 구분돼 있어야 한다.

8. 분리

구분 기호는 텍스트를 깔끔하고 체계적으로 섹션으로 분할하는 간단하고 쉬운 방법 있다. 헤더 및 분문 텍스트와 같은 계층 요소를 분할하는 방법. 또한 간단한 형테는 단일 선이다. 계층 요소를 분할하는데 많이 사용되며 여전히 가독성에 큰 역할을 하는데 매우 유용하다.
콘텐츠를 나누는 또 다른 일반적 방법은 상자를 사용하는 것이다.
텍스트 상자는 관련 없는 내용을 한 페이지에 구분하는 데 적합하다. 복잡한 레이아웃을 통해 사용자의 눈을 움직일 수 있다. 상자를 사용하여 콘텐츠를 깔끔하게 구분이 가능하다.

9. 마진

공백은 실제로 사용자의 시선을 텍스로로 끌어당기는데 도움이 된다. 빈 영역은 눈이 텍스트로 가는데 초점을 맞춘다. 공백은 콘텐츠의 흐름과 가족성에 영향을 미친다.
여백은 최고의 공백 요소 중 하나이며 택스트 요소를 잘 지원한다. 양쪽 여백이 있으면 사용자는 기사의 핵심 내용에 시선을 집중하고 깔끔하고 간결한 페이지가 된다.

반응형

댓글