[Front-End] 텍스트 디자인

★ 어떤 사용자도 웹 사이트의 모든 문장을 꼼꼼히 읽지 않을 것이다.

그러므로 사용자가 읽고 싶은 내용과 건너뛸 수 있는 내용을 쉽게 구분할 수 있도록해야한다.

---

- HTML 헤더

제목 및 부제목과 같은 중요한 텍스트 부분을 구별해 보여줌.

ex) HTML요소

• <h1> — 제목에 사용. 페이지 당 하나의 헤더만 존재.
• <h2> — 제목에 사용. 사용자가 주로 주목해야 하는 주요 섹션.
• <h3> — 부제목에 사용. 

→ 시각적 계층 구조를 생성. 

 

 

- 글꼴

텍스트를 구분하는 데 유용한 역할을 함. 

그러나 각 단락을 새 글꼴로 구분하거나 모든 제목을 다른 글꼴로 사용하면 페이지가 혼란스럽고 읽기 어려움.

대부분의 텍스트를 serif 글꼴로 만든 다음 sans-serif 글꼴로 제목이나 부제목과 대비를 만드는 것이 일반적임.

글꼴의 스타일, 크기, 두께, 색깔에 따라서도 텍스트를 구분해줄 수 있음.

글꼴은 한 페이지에 3개 이하로 쓰는 것이 적당함.

 

 

- 공백

적절한 간격과 균형을 사용해야 함.

좋은 공백은 텍스트의 가독성을 높이고 사용자가 요소를 훑어보는 것을 방지함.

실제로는 존재하지 않지만 페이지 내의 여러 섹션들을 구분해주는 경계의 역할을 하기도 함.

 

 

- 텍스트 가독성

가독성을 높이기 위해서 아래의 1-3단계를 주의.

1. 텍스트가 충분히 큰지(16px 이상) 확인한다.

2. 전경과 배경의 대비를 준다.

3. 줄과 문자 사이에 충분한 공간이 있는지 확인한다.

 

<조절할 수 있는 속성들>

① 줄 간격(=행간) : 두 텍스트 줄 사이의 거리

② Tracking(자간?) : 글자와 글자 사이의 거리

③ 커닝(Kerning) : 두 글자 사이의 공간. 일반적으로 잘 디자인된 서체에는 이미 최적의 커닝이 설정되어 있음.

 

 

-텍스트 탐색 기능

사용자가 클릭 할 수 있는 항목과 위치가 명확해야 함.

1. 클릭할 수 있는 항목을 표시하는 규칙을 지킨다. (일반적으로 링크는 파란색이며 밑줄이 있다.)

2. 사용자가 클릭을 할 수 있다고 착각하지 않도록 텍스트의 일반적인 강조 색상에서 파란색은 제외한다.

3. 탐색 버튼에 텍스트가 있어야 하며, 각 버튼의 기능에 대한 불확실성은 모두 없애야 한다.

 

 

-텍스트 길이, 열, 그리고 줄 길이

인터넷 텍스트를 소비하는 사용자들은 웹 페이지를 거의 읽지 않음. (특히 큰 텍스트 블록이 있는 경우)

→ 평균 인터넷 단락은 1-3 문장으로 구성하고, 가능할 때마다 문장과 단락 대신 목록을 사용하는 것이 더 효과적임.

☆ 줄 길이 : 사용자는 실제로는 긴 줄을 더 빨리 읽을 수 있지만 짧은 줄을 선호함.

 즉, 한 줄에 대략 50-75자를 포함하도록 열을 구성해야 한다.

 

 

- 사용자가 주목해야 할 콘텐츠

① 우선순위 및 최신

사람들은 목록이나 페이지의 첫 번째와 마지막 요소를 더 잘 알아차리고 기억한다. → Primacy 및 Recency 효과

② 이미지 페어링

사용자의 눈은 텍스트보다 이미지에 더 쉽게 끌리므로 중요한 텍스트를 이미지와 연결 지어 사용한다.

이 페어링은 카드 디자인으로 그룹화하여 수행할 수 있습니다 (공유 배경 색상과 함께 div에 배치).

 

 

- 사용자의 시선

사용자는 화면 왼쪽에서 화면 오른쪽으로, 화면 상단에서 화면 하단으로 시선을 이동하여 콘텐츠를 스캔한다. 

→ 우리가 한 줄을 다 읽을 때마다 우리의 눈은 화면 왼쪽으로 돌아간다. 

이것은 사용자의 눈이 F 패턴을 만들기 때문에 "F-Shaped Skimming"이라고 한다.

+) F 모양은 왼쪽에서 오른쪽으로 읽는 언어에만 해당됨. 히브리어 또는 아랍어와 같이 오른쪽에서 왼쪽으로 읽는 언어로 읽을 사이트를 디자인하는 경우에는 반대로 해야 한다.

 

↳ Font Pairing을 볼 수 있는 사이트(www.reliablepsd.com/ultimate-google-font-pairings/)

The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)