타이포그래피

접근성을 고려한 타이포그래피

Typeface (글꼴)

• 일반적인 글꼴 사용: Arial, Times New Roman, Calibri, Verdana와 같은 보편적인 글꼴을 사용하면 읽기 속도가 빨라지고 이해도가 높아짐.

• 복잡한 글꼴 피하기: 너무 화려하거나 손글씨 스타일의 글꼴, 한 가지 문자 케이스(대문자만)만 제공하는 글꼴은 피해야 함.

• 문자 식별성 중요: "I"와 "l", "1" 등과 같은 글자는 헷갈릴 수 있으므로 글자의 차이를 명확하게 설정해야 함.

• 커닝(글자 간격): 너무 좁은 글자 간격은 읽기 어려움. 예: "rn"이 “m”으로 읽힐 수 있는 등

글꼴 크기와 스타일

• 상대적인 글꼴 크기 사용:
• %나 rem, em 등의 단위로 크기를 설정하여 사용자가 글꼴 크기를 조정할 수 있게 해야 함.
• px은 고정된 크기이므로 사용자가 확대해도 크기가 변하지 않음. 따라서 지양하기.

<!-- bad -->
h2 {font-size: 16px;}

<!-- good -->
h2 {font-size: 1rem;}

• 과도한 글꼴 변형 피하기: 가독성을 높이기 위해 서체(글꼴) 변형의 사용을 제한해야 한다.
• 자제하기 :
• 색상 변화, 굵게(Bold), 대문자(ALL CAPS), 기울임꼴(Italics) 등의 사용 최소화
• 사용하기 :
• 별표(*)(asterisks), 대시(-)(dashes), 특정 단어를 강조 표시(하이라이팅)

• 이미지 텍스트 사용 자제: 화면 리더가 이미지에 삽입된 텍스트를 읽지 못하므로, 이미지에 텍스트를 넣는 대신 HTML 텍스트를 사용해야 함.

구조와 레이아웃

단순한 레이아웃

명확한 그룹화와 구분: 비슷한 요소를 함께 묶고, 중요한 요소는 서로 구분되도록 배치.

글자 간격:

• 문단, 문장, 단어 간의 간격을 넉넉하게 하여 읽기 쉽게 만듦.

• 너무 긴 줄은 읽기 어렵기 때문에 짧은 줄을 사용.

정렬:

• 텍스트의 정렬은 왼쪽 정렬이 가장 가독성이 좋으며,

• 양쪽정렬은 피해야 함. 공백이 고르지 않으면 읽기 어려워질 수 있고, 단어들이 비정상적으로 뭉쳐지거나 늘어나게 되어, 단어 경계를 인식하는 것이 어려워질 수도 있다.

• 좋은 줄 간격(Good Line-Height)

• 황금 비율 계산기(Golden Ratio Calculator)와 같은 도구들이 있습니다.

구조와 레이아웃의 모범 사례

• 머리글, 하위 제목, 목록 등을 사용하여 페이지를 구분하고 구조를 명확하게 만듦.

• 문단 간 간격과 단어 간 간격을 적절히 설정.

• 한 줄의 너비를 80자 이하로 제한(logograms은 40자 이하).
• 너무 긴 줄이 한 화면에 들어가면 가독성이 떨어지기 때문

• 정렬을 왼쪽 정렬로 설정하여 rivers of space(불규칙한 공백)을 피함.
• 단어 사이의 간격이 일정하지 않거나 눈에 띄게 넓은 간격이 생겨서 텍스트의 흐름이 부자연스럽게 보일 때

결론

• 접근 가능한 타이포그래피는 사용자의 다양한 요구를 반영하여 디자인을 결정하는 것입니다. 사용자의 가독성과 이해를 돕기 위해 타이포그래피에 신경을 쓰면 더 많은 사람들이 명확하게 콘텐츠를 이해할 수 있습니다.