웹 품질 - 가독성
적절한 글자체와 색상의 사용은 여러분의 웹사이트를 좀 더 읽기 쉽게 만들어 줄 것입니다.
색상 대비 고려하기
흰색 배경에 흑색 문자열, 혹은 흑색 배경에 백색 문자열은, 보는데 문제가 있는 사람들과 질 나쁜 디스플레이 장치에서 최고로 잘 보이는
조합이 될 겁니다.
밝은 배경에 회색 문자열은 매우 좋지 못한 색상 대비 선택 입니다:
| Grey text on a white background (#EEEEEE) |
| Grey text on a white background (#CCCCCC) |
| Grey text on a white background (#AAAAAA) |
| Grey text on a white background (#888888) |
| Grey text on a white background (#666666) |
| Grey text on a white background (#444444) |
| Grey text on a white background (#222222) |
| Grey text on a white background (#111111) |
어두운 배경에 회색 문자열 또한 좋은 색상 대비가 아닙니다:
| Grey text on a black background (#222222) |
| Grey text on a black background (#444444) |
| Grey text on a black background (#666666) |
| Grey text on a black background (#888888) |
| Grey text on a black background (#AAAAAA) |
| Grey text on a black background (#CCCCCC) |
| Grey text on a black background (#DDDDDD) |
| Grey text on a black background (#EEEEEE) |
몇몇 조합 - 흑색과 적색, 흑색과 푸른색, 황색과 녹색 - 은 눈을 항상 피로하게 만들겁니다.
| Black text on a red background |
| Black text on a blue background |
| Yellow text on a green background |
그리고 몇몇 조합은 그리 나쁘지 않아보이는군요.
| Black text on a grey background |
| Black text on a light blue |
| Black text on antique white |
| White text on dark blue |
문자 간격 유의하기
문자간 간격이 가까우면 시력이 손상된 사람이 보기 매우 어렵게 됩니다. 이점을 유념하세요.
간격에 여분의 공간을 더 주면 읽기 쉽습니다.
문자간 간격이 줄어들면 읽기가 어려워 집니다.
줄간격 유의하기
줄간격이 알맞으면
읽기 쉽습니다.
줄간격이 줄어들면
읽기 어렵습니다.
장식성이 강한 글자체는 피하기
요즘 네이버나, 그 밖의 사이트들을 가보면 화려한 폰트를
사용하시는 분이 많으신것 같습니다.
아마, 더 보기 좋게 하려고 그렇게 하시는 거겠지요.
물론, 뜻은 좋습니다.
하지만 가끔씩 가다보면, 글자체가 너무 화려해서
무슨 글자인지 도저히 알아볼 수 없는 글자체가 많더군요.
장식성이 강한 글자체를 사용하긴 사용하되,
어느정도 선까지 사용했으면 합니다.
제 솔직한 바람은, 산뜻하고 깔끔한
기본 폰트를 사용하는 것입니다.
이탤릭체를 더 적게 사용하기
일반 글자체는 읽기 쉽습니다. 일반 글자체는 읽기 쉽습니다. 일반 글자체는 읽기 쉽습니다. 일반 글자체는 읽기 쉽습니다. 일반 글자체는 읽기 쉽습니다. 일반 글자체는 읽기 쉽습니다.
이택릭 글자체는 읽기가 쉽지만은 않습니다.
이택릭 글자체는 읽기가 쉽지만은 않습니다.
이택릭 글자체는 읽기가 쉽지만은 않습니다.
이택릭 글자체는 읽기가 쉽지만은 않습니다.
IT와 기술을 이해하고, 유용한 소프트웨어를 발견하도록 돕고 싶습니다. 윈도우(Windows), 맥(macOS), 리눅스(Linux), 스마트폰 앱, 웹 서비스, 기획 시리즈물까지. 더 많은 것을 발견하고, 더 많은 것을 해보세요.