웹 타이포그래피(Web typography)는 월드 와이드 웹(World Wide Web) 환경에서 글꼴을 사용하고 텍스트를 시각적으로 구성하는 디자인 영역을 가리킨다. 웹사이트나 웹 애플리케이션에서 사용되는 글꼴의 선택, 크기, 줄간격, 자간, 행 길이, 색상 대비, 위계(hierarchy) 등 텍스트의 스타일과 레이아웃 전반을 다루며, 사용자 경험과 정보 전달의 명확성에 직접적인 영향을 미친다.
역사적 배경
HTML이 처음 개발되었을 당시에는 글꼴의 종류와 스타일이 각 웹 브라우저의 설정에 의해서만 조정되었다. 1995년 넷스케이프(Netscape)가 font 요소를 도입하기 전까지는 개별 웹 페이지가 글꼴 표시를 통제하는 메커니즘이 없었으며, 이후 이 요소는 HTML 3.2 사양에 포함되었다. 그러나 font 요소에 지정된 글꼴은 사용자의 컴퓨터에 설치되어 있어야 했고, 그렇지 않은 경우 브라우저의 기본 폴백(fallback) 글꼴이 대신 사용되었다.
1996년 최초의 CSS(Cascading Style Sheets) 사양이 출판되어 font-family, font-style, font-weight, font-size 등의 속성을 통해 글꼴을 제어할 수 있게 되었다. 1998년 CSS2 사양은 글꼴 일치, 합성, 다운로드 기능을 추가하였으나 널리 사용되지 않아 CSS2.1에서 제거되었다. 한편 마이크로소프트 인터넷 익스플로러 4.0(1997년 출시)은 글꼴 다운로드 기능을 최초로 지원하였다. 이후 CSS3 폰트 모듈에 @font-face 규칙이 포함되었고, 사파리 3.1, 오페라 10, 모질라 파이어폭스 3.5 등 주요 브라우저가 이를 구현하면서 웹 폰트(Web font)와 웹 타이포그래피에 대한 관심이 크게 증대되었다.
주요 구성 요소
웹 타이포그래피는 다음과 같은 요소들을 포함한다.
- 서체(Font family): 시스템 폰트(사용자 기기에 설치된 글꼴)와 웹 폰트(서버에서 다운로드하는 글꼴)로 구분된다. Google Fonts, Adobe Fonts 등의 서비스를 통해 다양한 웹 폰트를 사용할 수 있다.
- 글자 크기(Font size): 본문은 일반적으로 16px 이상이 권장되며, 반응형 디자인에서는
clamp()함수 등을 사용하여 화면 크기에 따라 유동적으로 조정한다. - 행간(Line-height): 글자 크기의 1.6~1.8배가 일반적인 가독성 기준으로 제시된다.
- 줄 길이(Line length): 한글 기준 한 줄에 25~40자가 적정한 가독성을 제공하는 것으로 알려져 있다.
- 색상 대비(Color contrast): 본문과 배경 간 명도 대비는 WCAG(Web Content Accessibility Guidelines) 기준 4.5:1 이상을 권장한다.
- 타이포그래피 위계(Typographic hierarchy): 크기, 굵기, 색상, 여백을 조합하여 제목, 본문, 보조 텍스트 간의 시각적 위계를 설정한다.
- 한글 줄바꿈 처리: CSS
word-break: keep-all속성을 적용하여 어절 단위로 줄을 바꾸는 방식이 한글 웹 타이포그래피에서 중요한 디테일로 다루어진다.
웹 폰트와 시스템 폰트
웹 폰트는 디자이너가 사용자의 컴퓨터에 설치되지 않은 글꼴을 웹 페이지에서 사용할 수 있게 해준다. @font-face CSS 규칙을 통해 글꼴 파일을 서버에서 다운로드하여 표시한다. 반면 시스템 폰트는 사용자 기기에 이미 설치된 글꼴을 활용하므로 추가 다운로드가 필요 없어 초기 로딩 속도가 빠르다. 실제 웹 디자인 실무에서는 본문에는 시스템 폰트를 사용하고 브랜드 정체성이 중요한 제목에만 웹 폰트를 적용하는 방식이 속도와 디자인 품질을 균형 있게 유지하는 방법으로 권장된다.
접근성과의 관계
웹 타이포그래피는 웹 접근성(Web Accessibility)과 밀접하게 연결된다. 적절한 글자 크기, 충분한 색상 대비, 가독성 있는 행간과 줄 길이는 시각 장애가 있는 사용자나 인지 기능에 어려움이 있는 사용자에게도 중요한 요소로, WCAG(Web Content Accessibility Guidelines)에서 관련 기준을 제시하고 있다.
