HTML/CSS 기초 - 폰트 속성 사용하기

웹사이트에서 폰트의 사용은 아주 중요합니다. 폰트의 모양과 크기는 디자인에서 가장 중요한 역할을 하고 검색엔진은 글내용을 기준으로 검색을 해서 캐시에 저장을 해놓기 때문에 어떤 폰트를 사용하든 상관없지만 이것은 컨텐트에 해당하고 디자인을 위한 프리젠테이션을 담당하는 CSS는 모양을 결정하기 위해서 다양한 폰트중에 하나를 선택하고 크기를 결정하기 위해서 CSS의 폰트 속성을 사용합니다. 

웹페이지는 픽셀기준이기 때문에 폰트로 표현하는데 한계가 있어서 좋은 디자인을 위해서는 포토샵에서 폰트로 이미지를 만들어 글자 대신에 사용하기도 합니다. CSS3가 지원되지 않는 웹브라우저에서도 원하는 효과를 내기 위해서는 글자의 그라데이션이라든가 그림자효과를 포토샵을 이용해서 이미지를 만들어 사용하더라도 텍스트는 반드시 포함시켜야하죠. 그래서 이미지 대체 테크닉 을 사용하기도 합니다. 이번글에서는 여러가지 폰트 속성에 대해서 알아봅니다.

index.html

첨부파일을 열면 나눔고딕 웹폰트를 사용할 수 있도록 링크가 있으며 2의 폰트이름을 폰트패밀리에 입력하면 나눔 고딕으로 나오게 됩니다. 웹폰트를 사용하면 내 컴퓨터에 이 폰트가 없더라도 나눔고딕으로 나오게 되고 방문자의 컴에 이 폰트가 없어도 나눔고딕으로 나오게 됩니다. 설정방법은 이곳 을 참고하세요. 3과 4의 각 요소에 대해서 폰트 속성을 적용해 보는 것이 좋습니다.

1. 폰트 속성의 단축형(Font Property Shorthand)

font:italic small-caps bold 12px/30px Georgia, serif;

폰트속성은 단축형을 많이 사용하는데 위와같은 순서로 나와야합니다. 즉 font-style font-variant font-weight font-size/line-height font-family 의 순서입니다. 폰트 사이즈와 폰트 패밀리는 항상 포함되어야 하지만 없는 경우 기본폰트를 상속(inherit)받습니다. 또한 font-style, font-variant, font-weight 가 생략된 경우 기본 값으로 설정됩니다. 기본값은 모두 normal입니다. 개별 속성에 대해서 알아봅니다.

2. 폰트 패밀리(font-family)

font-family:"Times New Roman",Georgia,Serif;

폰트 속성은 위와같이 개별적으로 사용할 수도 있습니다. 폰트패밀리는 폰트의 이름을 사용하는데 같은 폰트 패밀리라도 이름이 다양하게 있습니다. 예를들어 디자인에 많이 쓰이는 Helvetica 폰트도 백여가지의 폰트가 있습니다. 모두 다른 이름이 있죠. 이런 폰트 집합체를 폰트 패밀리라고 하는 것이 아니라 font-family 다음에 여러가지 폰트를 설정한 경우 방문자의 컴퓨터에 첫번째 폰트가 없는 경우 두번째 폰트를 사용하고 그래도 없는 경우 마지막으로 세리프 폰트를 사용하는 것이죠. 그래서 이 모두를 합쳐서 폰트 패밀리라고 합니다. Times New Roman과 같이 폰트 이름이 두개 이상인 경우 항상 쌍따옴표를 사용해서 묶어줘야합니다.
폰트 이름 다음에는 콤마가 필요합니다.

폰트 패밀리의 마지막에 오는 단어는 모든 종류의 폰트이름을 지정할 수 없기 때문에 총괄적인 이름을 사용합니다.

Serif는 글자의 선 끝에 장식을 말합니다. 영문폰트의 Serif 폰트의 예는 Times체가 있습니다. 한글의 경우 바탕체에 해당합니다.

Sans는 None을 의미하며 sans-serif는 장식이 없는 글자이며 대표적으로 Helvetica가 있습니다. 한글의 경우 굴림, 돋움에 해당합니다.

Cursive는 필기체를 의미합니다. 한글의 경우 궁서체에 해당합니다.

Fantasy는 틀에 얽메이지 않은 다양한 형태의 글자인데 한글의 경우 아주 많죠. 이 폰트 패밀리 이름만 입력하면 한글부분은 굴림으로 나오지만 영문부분은 한양 헤드라인체가 나옵니다.

Monospace는 글자의 폭이 일정한 폰트를 말합니다. 예를 들어 영문 소문자 i 나 l은 폭이 좁지만 Monospace를 사용하면 폭이 일정한 폰트가 나오게 됩니다. 대표적인 폰트로 Times New Roman이 있죠. 폭이 일정하기 때문에 알아보기 쉬워서 개발자용 코딩폰트로 많이 사용합니다. 한글로는 굴림체, 돋움체, 바탕체, 궁서체가 있습니다. 한글의 폰트 이름에 ~체가 들어가면 Monospace 폰트입니다. 첨부파일을 웹에디터에 열고 직접 실험해보시는 것이 좋습니다. 

이러한 폰트 패밀리를 지정하지 않으면 기본으로 Sans-serif 폰트로 나오게 됩니다. 

3. 폰트 사이즈

폰트 사이즈의 단위는 대부분 픽셀(px)을 사용하지만 사용하는데 편리한 것은 em입니다. 이것은 body 태그에 기본 폰트 사이즈를 픽셀로 입력해두고 헤드의 타이틀이나 본문의 제목글, 본문글의 사이즈 단위를 em으로 설정하면 body의 폰트 크기만 변동시켜도 em으로 설정한 곳은 모두 비율적으로 변동됩니다. 

우선 body 태그에 12px/1.5 를 입력합니다. 1.5는 line-height로 단위가 em이며 생략가능합니다. 기본 폰트 사이즈에 비율적으로 줄넓이가 변동되는 것입니다. 3의 h1태그에는 폰트 사이즈를 입력하지 않아도 사용하는 웹브라우저의 CSS에 따라서  h1태그 자체에 기본적으로  폰트 사이즈가 2em으로 설정되어있습니다. 4의 p 태그는 body 태그의 폰트 사이즈를 상속받습니다. 이대로 저장하고 웹에서 보면 5처럼 나옵니다. h1태그에 2em을 p태그에 1em을 입력해도 같은 모양으로 나옵니다. 그러면 h1태그에 3em, p태그에 1.2em을 입력하면 6처럼 글자가 조금 커져서 나옵니다. em을 사용하는 편리한 점은 다음 단계입니다. 7의 수치를 15픽셀로 하고 웹에서 보면 모든 글자의 사이즈가 아래 이미지처럼 모두 변경됩니다. 만일 모든 글자의 사이즈를 픽셀로 지정했다면 일일히 픽셀 수치를 변경해줘야 가능한 일이죠.

4. 줄높이(line-height)

line-height는 글의 가독성에 큰 영향을 미치므로 특히 본문 글에는 반드시 적절한 line-height를 설정해두는 것이 좋습니다. 단위없이 사용하면 배율을 의미하고 퍼센트(%)를 사용해도 됩니다. 현재 설정된 폰트 사이즈를 기준으로 합니다. 

line-height:normal; 

대부분의 경우 line-height를 설정하지 않으면 기본적인 줄높이가 설정되지만 위와 같이 사용하는 경우는 부모요소로부터 상속받지 않고 기본 line-height로 설정할때 사용합니다.

line-height:3; 

단순히 숫자만 있는 경우는 배율을 의미합니다. 폰트 사이즈를 기준으로 합니다. 폰트사이즈가 12픽셀이라면 line-height는 36픽셀이 됩니다.

line-height:30px; 

정확한 수치를 위해 픽셀을 단위로 설정할 수도 있지만 픽셀을 사용하면 폰트사이즈가 변동될 경우 같은 비율로 늘어나지 않기 때문에 불편합니다.

5. 자간(letter-spacing; Kerning)

letter-spacing:3px; 

글자간의 간격을 조절하여 가독성을 높이게 됩니다. 주로 픽셀을 사용하여 세밀한 조정을 하지만 em을 사용하여 폰트 사이즈가 변경됨에 따라서 비율적으로 변동되도록하는 것이 좋습니다. 이 속성은 단축형에는 사용되지 않습니다. line-height의 경우는 마이너스 값을 갖지 못하지만 이 속성은 마이너스 값을 가질 수 있어서 세밀한 조정이 가능합니다.

6. font-weight

font-weight:bold; 

폰트의 굵기는 기본이 normal이고 굵게하기는 bold입니다. 부모요소보다 더 굵게 하려면 bolder를 사용합니다. 더 가늘게는 lighter라는 값을 사용하지만 실제로 이런 값을 사용해도 변화는 없습니다. 그러니 주로 normal과 bold를 사용합니다. 폰트의 크기가 여러종류라면 어떨지 모르지만 font-weight의 값을 백단위 숫자로도 사용이 가능한데 100이 제일 가늘고 200, 300, 400, 500, 600, 700, 800, 900의 순서대로 굵어집니다. 실제 웹브라우저에 실험을 해보면 100부터 500까지는 normal로 나오고 600부터 900까지는 bold로 나옵니다. 

7. 폰트 스타일(font-style)

font-style:oblique; 

폰트 스타일은 옆으로 기울어진 이탤릭체인가 아닌가의 구별입니다. 속성값으로 normal, italic, oblique가 있는데  oblique는 이탤릭과 같은 의미입니다. 다만 폰트 이름에  oblique가 있을 경우 이를 검색해서 나타내도록 합니다. 결국에는 이탤릭과 같습니다.

8. font-variant

font-variant:small-caps; 

이는 영문에만 해당하는 속성으로 단어의 첫글자를 대문자로 하고 그다음 글자를 소문자로 했을 경우 소문자는 크기는 소문자 크기이지만 글자의 형태는 대문자로 나오게 됩니다. 물론 첫글자를 소문자로 했다면 이 글자도 대문자로 나오면서 크기는 소문자 크기로 나옵니다.

9. text-transform

text-transform:uppercase;

정확하게는 폰트 속성은 아니지만 폰트를 관리하므로 이곳에 포함시킵니다. uppercase는 모든 글자를 대문자로 만들고 lowercase는 소문자로 capitalize는 문장의 단어에서 첫글자를 대문자로 만듭니다.

10. @font-face <css3>

@font-face {
    font-family: 'Museo300';
    src: url('Museo300-Regular-webfont.eot');
    src: url('Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Museo300-Regular-webfont.woff') format('woff'),
         url('Museo300-Regular-webfont.ttf') format('truetype'),
         url('Museo300-Regular-webfont.svg#Museo300') format('svg');
}

영문폰트의 경우 폰트 사이트에서 웹폰트를 다운 받으면 서버에 업로드하여 사용할 수가 있습니다. Myfont.com에서 무료 폰트를 다운받으면 웹폰트로 사용할 수 있는데 위처럼 사용방법도 포함되어있습니다. 여러개의 폰트파일이 있는데 여러가지 웹브라우저에 최적화하기 위한 것입니다. 위 폰트들을 업로드하고 업로드 폴더를 url에 입력합니다. 폰트의 이름은 font-family:다음에 오는 이름으로 관리됩니다. 위 코드는 CSS에 입력하고 일반적인 폰트 사용법처럼 사용하면 됩니다. 다른 서버에 있는 폰트를 사용할 경우 다음과 같이 인터넷 주소를 입력합니다.

src: url('http://www.w3schools.com/css3/Sansation_Light.ttf')