06. 폰트 속성

해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

웹 타이포그래피의 이해

타입패밀리는 유사한 성격을 가진 서체분류를 말한다. (웹디자인에서는 폰트패밀리라고 부른다.)

 

플래시나 기타 그래픽에 사용된 텍스트와 비교해 HTML텍스트의 장점은 수정이 필요할 때마다 쉽게 편집할 수 있고, 보이는 화면 크기에 맞게 텍스트의 크기 조절이 가능하다는 점이다. 또한 데이터베이스를 활용해 텍스트 콘텐츠를 저장하고 이를 HTML텍스트 결과물로 내보낼 수 있다는 장점도 있다.

하지만 사용자의 기기에 있는 폰트에 따라 디자인 제약을 받는다는 단점이 있다. 

 

- 캐릭터 셋 지정 

HTML문서 작성시 페이지에서 사용할 캐릭터셋을 지정해야한다. 캐릭터셋은 브라우저가 텍스트를 보여주기 위해 인식하는 고유코드나 이름을 가진 문자들의 목록을 말한다. 

 

캐릭터셋은 메타 태그를 이용해 HTML 페이지의 헤드에 지정한다. 가장 인기있는 국제 캐릭터셋은 UTF-8(8비트 유니코그 변형 형식)이다. 

<meta charset="utf-8">

이와 더불어 페이지에서 영어만 사용하는 경우 ISO 8859-1 캐릭터셋이 대안으로 자주 사용된다. 

 

지정한 캐릭터셋에 존재하지 않는 문자를 HTML에 사용하면 브라우저가 글자 자리에 에러표시를 보여준다. 

 

폰트 스택 설정

font-family 속성을 사용하면 텍스트를 보여줄 폰트를 선택해 메세지의 시각적인 효과를 지정 할 수 있다. 

 

- 폰트와 폰트 패밀리

폰트패밀리는 Times처럼 외양이 비슷한 폰트들을 의미하는 반면 폰트는 Times normal, Times bold, Times italic, Times bold italic등 특정버전을 가리킨다. 

 

- 폰트와 일반 폰트 패밀리를 포함시켜야 하는 이유?

폰트 목록을 지정하면 브라우저는 해당 목록의 첫번째 폰트를 사용하려고 시도한다. 해당 폰트를 사용할 수 없는 경우 브라우저는 사용자의 컴퓨터에 설치된 폰트를 찾을때까지 폰트목록에 있는 폰트들을 하나씩 검사한다. 

일치하는 폰트가 없는 경우 브라우저는 사용자의 기본폰트를 사용해 텍스트를 보여준다.

 

일반 폰트를 지정할 때의 장점은 폰트목록에 있는 특정 폰트를 사용할 수 없는경우애도 브라우저가 같은 폰트를 사용해 텍스트를 보여줄 수 있다는 점이다.

 

최후의 수단으로 일반 폰트 패밀리를 포함시키면 브라우저가 해당 폰트와 가장 비슷한 폰트를 선택해 텍스트를 보여주게 된다. 

 

대체폰트와 일반 폰트 패밀리를 사용할 때의 장점은 특정 폰트를 사용할 수 없을 때도 특정 위치에 어떤 폰트를 사용할지 어느정도 제어할 수 있다는 점과 퇴소한 가장 근접한 폰트를 사용할 수 있다는 점이다.

 

폰트 선택

Arial, Georgia, Verdana, Trebuchet MS, Times New Roman이 가장 많이쓰이는 5가지 폰트이고 이들은 사실상 모든 맥과 PC에 기본적으로 설치되어있는 폰트이다. 

 

- 다운로드 가능한 웹 폰트

브라우저에서 웹폰트를 다운로드해서 수많은 웹 사용자에게 제공할 수 있게 되었지만 각 브라우저에서 서로 다른 파일 형식을 사용한다. 

 > TTF / OTF : 트루타입 및 오픈타입 폰트. 폭 넓게 사용되며 상용으로 거래되는 폰트 중 대부분이 이 형식에 속한다. 

하지만 이 폰트 현식에는 라이선스를 위반하고 폰트를 사용하는 것을 막을 수 있는 보안 기능이 내장되어 있지 않다. 

> EOT : 임베디드 오픈 타입포맷은 웹에서 안전한 폰트 다운로드를 위해 마이크로소프트가 1990년대말에 개발한 형식이다. 하지만 이 형식은 오랫동안 마이크로소프트가 권리를 가진 형식이었고 만들기 어렵다는 점에서 인기를 얻지 못했다.

> SVG : CSS에서 사용할 수 있는 W3C 별도 표준인 SVG은 폰트정보를 포함할 수 있다. 

> WOFF : 웹 오픈 폰트 포맷. 이 형식에는 라이선스 같은 폰트 보호 기능도 포함되어 있으면서 EOT처럼 번거롭지도 않다. 

> WOFF2 : WOFF보다 30~50% 더 압축된 형식. Internet Explorer를 제외한 모든 브라우저에서 사용할 수 있다. 

폰트 크기 설정

CSS를 사용하면 전통적인 인쇄 기준 포인트 크기, 백분율, 절대크기,주변 텍스트에 대한 상대 크기 등 여러 가지 표기와 방식으로 화면에 보이는 텍스트 크기를 지정할 수 있다. 

폰트는 표준 측정 단위를 기반으로 크기를 정의하는 절대 크기로 설정하거나 브라우저의 기본 설정과 관련한 상대 크기로 설정할 수 있다. 

 

- 엘리먼트의 폰트 크기 정의

 

> 상대 또는 절대 길이 단위 (보통 픽셀 또는 em폰트 크기)

> 기본 페이지 크기에 대한 상대값을 갖는 절대 크기 키워드 : xx-small, x-small. small, medium, large, x-large, xx-large

> 부모 엘리먼트와 관련해 폰트 크기를 지정하는 smaller, larger 상대크기 키워드

 

대체 폰트의 크기 조절

폰트 크기는 대문자의 크기를 기준으로 측정된다. 하지만 정작 폰트에 따라 크기가 자주 바뀌는 대상은 소문자다. 대체 폰트를 사용할 때는 폰트 크기를 똑같이 설정하더라도 폰트 크기가 많이 다르게 보일 수 있다. 

문제 해결을 위해 CSS3에서는 font-size-adjust속성을 도입했다. 이 속성을 사용하면 대문자가 아니라 소문자 기준으로 폰트 크기를 설정할 수 있다.

 

font-size-adjust: .5;

 

> 0보다 큰 값은 현재 폰트 크기에 대한 곱셈인자로 사용돼 x-height를 기준으로 텍스트 크기가 조절된다. 

> none 폰트 크기를 조절하지 않을때 사용된다.

 

여러 폰트 값 일괄 설정 

- 단일 규칙 내에서의 여러 폰트 어트리뷰트 동시 정의 

 

font : italic bold small-caps 3em/.9 'Title Font', Constantia, Georgia, Times;