웹 타이포그래피

웹 타이포그래피(Web typography)는 월드 와이드 웹의 글꼴 사용을 가리킨다. HTML이 처음 개발되었을 당시 폰트페이스(font face)와 스타일은 각 웹 브라우저의 설정에 의해서만 조정되었다. 넷스케이프가 1995년 font 요소를 도입하기 전까지는 개별 웹 페이지가 글꼴 표시를 통제하는 매커니즘이 없었다. 이후 이 요소는 HTML 3.2 사양에 도입되었다. 그러나 font 요소에 지정된 글꼴은 사용자의 컴퓨터에 설치되어 있어야 했으면, 그렇지 않은 경우 브라우저의 기본 산세리프 또는 모노스페이스 글꼴 등 폴백 글꼴이 사용되었다. 최초의 CSS 사양은 1996년 출판되어 동일 기능을 제공하였다. CSS2 사양은 1998년 출시되었으며 글꼴 일치, 합성, 다운로드를 추가함으로써 글꼴 선택 프로세스 개선을 시도하였다. 이 기법들은 그리 많이 사용되지 않아 CSS2.1 사양에서 제거되었다. 그러나 인터넷 익스플로러는 1997년 출시된 버전 4.0에 글꼴 다운로드 기능 지원을 추가하였다.^[1] 나중에 글꼴 다운로드 기능은 CSS3 폰트 모듈에 포함되었으며 그 뒤로 사파리 3.1, 오페라 10, 모질라 파이어폭스 3.5에 구현되고 있다. 이를 통해 웹 타이포그래피, 그리고 폰트 다운로드에 대한 관심이 증대되었다.

CSS1

최초 CSS 사양에서^[2] 개발자들은 일련의 속성을 통해 글꼴 속성을 지정하였다.

font-family
font-style
font-variant
font-weight
font-size

모든 글꼴은 이름으로만 식별되었다. 위의 속성 외에 디자이너는 글꼴에 스타일을 입히는 방법이 없었다.

폰트페이스 이용 예시

@font-face 구성의 CSS 예시는 다음과 같다:

 @font-face {
 	font-family: 'Journal';
 		src: url('http://your-own.site/fonts/journal/journal.woff') format('woff'),
 		url('http://your-own.site/fonts/journal/journal.svg#Journal') format('svg'),
 		url('http://your-own.site/fonts/journal/journal.ttf') format('truetype'),
 		url('http://your-own.site/fonts/journal/journal.eot'),
 		url('http://your-own.site/fonts/journal/journal.eot?#iefix') format('embedded-opentype');
 	font-weight: normal;
 	font-style: normal;
 }