본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

서체의 종류와 스타일

최초 작성일
최종 수정일
이번 시간에는...
CSS로 서체에 스타일을 줄 수 있는, color, font-style, line-height 등의 스타일 속성을 알아 봅니다. 또한 서체의 종류인 세리프, 산세리프, 모노 스페이스 등의 각 서체 종류별 특징 및 쓰임새를 알아 봅니다.

지난 시간에 CSS 선택자를 살펴 보았고요, 이번 시간부터 본격적인 스타일 속성들에 대해서 다뤄보도록 하겠습니다. 그리고 그 스타일 속성 중 글자 스타일 먼저 살펴보도록 하겠습니다.

Color

일단 이미 알고 있는 속성인 color부터 보겠습니다. 이미 아시듯이 color 속성은 글자 색을 지정하는 스타일입니다. 속성 값으로는 HEX코드나, rgb(), 색상 명 등이 올 수 있습니다.

Font-Family

글씨 서체를 지정하는 속성입니다. 예를 들어 글씨체를 '돋움'으로 하실 경우 아래와 같이 작성하면 됩니다.

하지만, 사실 위와 같이만 지정하는 경우는 별로 없습니다. 왜냐하면 여기서 지정하는 서체는 웹 페이지를 방문하는 방문자가 해당 서체를 가지고 있어야 하기 때문입니다. 만약 여러분의 컴퓨터의 '윤고딕' 서체가 있어서 Font-family 속성을 '윤고딕'이라고 지정한다면, 여러분의 컴퓨터에서 볼 때는 서체가 '윤고딕'으로 나오지만, '윤고딕'서체가 없는 다른 대부분의 컴퓨터에서는 '윤고딕'이 아닌 다른 서체로 출력됩니다. 그렇기 때문에 대부분 해당 서체가 없을 경우를 대비하여 대안 서체를 같이 선언합니다. 아래는 대부분의 국내 사이트들에서 서체를 선언하는 방식입니다.

앞의 코드를 살펴보면, 가장먼저 '돋움'을 선언했습니다. 만약 해당 컴퓨터에 '돋움' 폰트가 있다면, 해당 페이지는 '돋움'으로 출력이 됩니다. 하지만, 만약 '돋움' 서체가 없다면, 그 다음 선언된 서체를 찾습니다. 'dotum' 이라는 서체 입니다. (같은 돋움이지만, 만약 한글로 된 서체 명을 인식 못할 경우를 대비해 적어놓았습니다.) 그 다음은 '굴림' 서체를 찾게 되고요. 그 다음으로 gulim, Arial, Helvetia 서체 순으로 살펴봅니다. 만약 위의 서체들이 다 없을 경우 마지막으로 선언된 'sans-serif'를 보게 됩니다. 여기서 'sans-serif'는 서체 이름이 아닙니다. 이것은 서체의 종류를 나타내는 문구입니다. 앞의 모든 서체가 없다면, 'sans-serif' 형태의 서체를 적용하라는 선언입니다.

또한 서체를 선언 할 때에 어떤 서체는 따옴표를 넣고, 어떤 서체는 그냥 적었는데요, 만약 서체 명에 띄어쓰기가 있다거나, 서체 명이 한글일 경우에는 따옴표로 감싸고 아닌 경우는 그냥 적도록 합니다. 예를 들어 Times New Roman 이란 서체는 꼭 "Times New Roman"이라고 작성하셔야 합니다.

이제 서체를 사용하기 전, 서체의 기본적인 종류를 다뤄보도록 하겠습니다.

서체의 종류

서체의 종류는 크게 다섯 가지 입니다. 물론 더 종류가 많을 수 있겠지만, 이 다섯 가지만 아셔도 서체를 이해하시는데 무리가 없을 거라 봅니다. 서체의 종류는 각자의 역할이 있으니, 참고하시어 사용하시기 바랍니다.

Serif

세리프 형태의 서체는 글씨에 꺾쇠가 붙어져 있는 서체입니다. 보통 아래와 같은 형태를 지니고 있습니다.

세리프 서체로 작성된 Hello, 안녕 문구
세리프 서체 예시
서체의 세리프 부분
세리프

이러한 꺾쇠를 세리프라고 부릅니다. 이 세리프는 줄의 연속성을 주게 되어, 보는 사람에게 가독성을 높여줍니다. 때문에, 서적의 본문 및 신문 인쇄물 등에서 자주 사용하는 서체 형태입니다.

영어 서체로는 Georgia, Times New Roman 등이 있고, 한글 서체로는 바탕체, 궁서체, 명조체를 예로 들 수 있습니다.

Sans-Serif

산세리프에서 'Sans'는 "없음"을 뜻하는 프랑스어로 세리프가 없는 글씨체를 말합니다. 국내에서는 고딕체와 같은 것이 이에 해당한다고 할 수 있습니다.

산세리프 서체로 작성된 Hello, 안녕 문구
산세리프 서체 예시

산세리프 서체는 세리프에 비해 더 깔끔해 보이고, 대체로 더 세련되어 보이기 때문에, 잡지와 같은 매체는 산세리프를 더 많이 사용하기도 합니다. 영어 서체로는 Arial, Helvetica 등이 있고, 한글 서체로는 돋움, 굴림, 맑은 고딕, 나눔 고딕 등을 예로 들 수 있습니다.

Monospace

모노스페이스라는 서체 형태는 고정 폭 서체입니다.

즉 만약 'Aid'라는 글씨를 썼다고 했을 때, A와 i의 글씨 폭이 다릅니다. A는 넓고, i는 좁은 글씨 폭을 가지고 있고, 그렇기 때문에 가독성이 높아집니다.

하지만 모노스페이스 서체는 거의 폭이 같습니다. 이 서체는 타자기가 등장했을 때 가변폭일 경우 키가 엉키게 되어 나타난 서체입니다. 이러한 서체는 주로 오타 없이 글자들간의 구분이 쉬워야 하는 코딩에서 주로 사용됩니다. 이 강의 사이트에서 코드를 보여주는 서체 역시 모노스페이스 서체입니다.

모노스페이스 서체로 작성된 Hello, world 문구
모노스페이스 서체 예시

한글은 보통 폭이 동일하고, 코딩은 주로 영어로 이루어지기 때문에, 모노스페이스 글꼴은 주로 영문만 있습니다. 'Courier New', 'Consolas', 'Monaco' 등이 있습니다.

Cursive

커시브 형태는 커브가 많이 들어간, 다시 말해 필기체 같은 형태를 말합니다. 이런 형태의 서체는 딱딱한 다른 서체들에 비해서 인간적인 면을 보여줄 수 있습니다.

커시브 서체로 작성된 greeting 문구
커시브 서체 예시

하지만, 커브가 심한 경우 가독성을 떨어트릴 수 있고, 특히 비 영어권인 사용자들은 글씨 자체를 이해 못할 수 있습니다. 때문에 이 서체를 본문으로 사용할 경우에는 보다 얌전한 형태를 사용해야 하며, 이 형태의 서체는 강조되는 제목 부분 정도만을 사용할 것을 권장 드립니다.

Fantasy

이름에서도 느껴지듯이 일반적인 서체가 아닌, 개성 있고 장식성이 많은 서체들을 나타냅니다.

판타지 서체로 작성된 super web 문구
판타지 서체 예시

굉장히 특이하고, 대부분 많이 꾸며져 있기 때문에, 글의 본문 보다는 제목에 좀 더 어울리는 서체입니다.

웹 안전 서체 (Web Safe Fonts)

앞서 말씀 드렸듯이, 여러분들이 서체를 선언할 때 그 서체가 방문자의 PC에는 없을 수 있습니다. 만약 서체가 여러분이 의도하지 않은 서체로 나온다면, 여러분이 원하던 디자인과는 많이 차이가 생길 것입니다.

때문에, 서체를 선언 할 때에는 대부분의 사람들이 가지고 있을 만한 서체를 선언하는 것이 좋습니다. 그리고 이러한 서체들을 '웹 안전 서체'라고 부릅니다.

사실 이러한 서체에는 정답이 있는 것은 아닙니다. 다만 대부분의 사용자가 PC의 OS로 윈도우 또는 맥(OSX)을 사용하기 때문에 해당 OS에 기본으로 설치되어있는 서체를 선언하는 것 입니다.

국내에서 대부분의 사이트가 '돋움' 또는 '굴림'을 사용하는 이유는 국내에서 대부분의 사용자가 '윈도우'를 사용하기 때문일 겁니다. 또한 요새는 윈도우 XP의 점유율이 낮아지고 7이상의 버전의 점유율이 높아지면서, '윈도우 비스타' 부터 내장되었던 '맑은 고딕'을 기본 서체로 사용하는 사이트들이 늘어나는 추세입니다.

영어권의 서체의 경우는 이러한 웹 안전 서체를 보여주는 웹 사이트도 있으니 참고 하시기 바랍니다.

영어권 웹 안전 서체 참고 페이지

이렇게 웹 안전 서체 만으로는 쓸 수 있는 서체 수가 한계가 있기 때문에 이에 대한 대안으로 '웹 폰트'를 사용하기도 합니다. 하지만 이 강의에서는 이 '웹 폰트'를 아직은 다룰 계획이 없습니다.

그 이유는 일단 이 '웹 폰트'는 CSS3에서 추가된 부분이며, 영어와 달리 한글은 표현해야 하는 문자조합이 워낙 많기 때문에 서체파일 자체의 크기가 커질 수 밖에 없습니다. 이런 이유로 국내에서 사용하기에는 무리가 있습니다.

font-size

글씨의 크기를 나타내는 속성입니다. 보통 px과 같은 단위를 많이 사용하며, 가변적인 스타일을 위해 em, % 등을 사용하기도 합니다.

font-style

글씨의 스타일을 주는 속성입니다. 하지만 사실상, 이탤릭 형식으로 표현할 때 사용합니다.

가능 속성 값

normal
기본적인 형태로 보여줍니다.
italic
이탤릭체로 보여줍니다.
oblique
기울임꼴로 보여줍니다.
inherit
상위의 요소의 font-style을 물려받습니다.

여기서 italic과 oblique을 각각 적용해보면, 보통 아무런 차이가 없습니다. 사실 이 두 가지는 약간의 차이가 있는 게 원칙입니다. oblique는 기본 글꼴을 기울여서 표현을 하는 것이고, italic은 해당 서체의 별개의 italic 스타일의 서체가 있을 경우에 그 서체로 표현해줍니다.

하지만, 대부분 실질적으로 똑같이 나오기 때문에 그냥 이탤릭체로 이해하시고 넘어가셔도 큰 문제는 없을 듯 합니다.

font-weight

글씨의 굵기를 조절하는 속성입니다. 'bold'와 같은 이름으로 넣을 수 있고, 100부터 900까지 백 단위 숫자로도 입력 가능합니다.

가능 속성 값

normal 또는 400
기본적인 굵기 입니다.
lighter 또는 400 이하
기본적인 굵기보다 더 얇은 굵기를 표현합니다.
bold 또는 700
굵은 글씨를 표현합니다.
bolder 또는 700 이상
bold 보다도 더 굵은 글씨로 표현합니다.
inherit
상위 요소의 값을 상속 받습니다.

속성 중에는 'lighter'와 'bolder'가 있습니다만, 이는 해당 서체에서 더 얇은 또는 더 굵은 서체가 있어야 표현이 됩니다. 만약 더 얇거나 굵은 서체가 없다면, 각각 'normal'과 'bold'의 동일한 굵기로 표현됩니다.

사실, 대부분의 서체가 'lighter'와 'bolder'에 해당하는 서체가 없기 때문에 두 속성은 보통 잘 사용하지 않습니다.

font-variant

이 속성은 대소문자에 대한 스타일로, 대소문자가 있는 영어권에서 사용하는 속성입니다. 이 속성을 통해서 소문자를 작은 대문자 형태로 표현할 수 있습니다.

가능 속성값

normal
기본적인 형태로 표현합니다.
small-caps
소문자를 작은 대문자의 형태로 보여줍니다.
inherit
상위 요소의 값을 상속 받습니다.

line-height

줄 간격을 조절하는 속성입니다. 이 줄 간격을 조절함으로써, 문서의 가독성을 보다 향상 시킬 수 있습니다. px이나 % 등의 단위들이 사용가능 하며, 단위 없이 '1.5'와 같은 숫자만 입력할 경우 em과 동일하게 인식합니다.

예를 들어 만약 글씨 크기(font-size)가 12px이고, line-height 값이 1.5 라고 한다면 줄 간격은 12 * 1.5 = 18px 이 됩니다.

font-size 30px에 line-height를 1.6으로 준 문구 예시
line-height의 수치값이 어떻게 표현되는지 살펴보세요

보통 본문과 같이 안에 내용의 글씨크기가 여러 가지가 올 수 있는 경우, '1.5'나 '150%'와 같은 비율로 넣어주는 것이 좋습니다. 하지만 만약 글씨크기가 고정되어있는 경우, line-height 속성값에도 px같은 고정 값을 주는 것이 더 좋을 수 있습니다.

이 line-height를 이용해서 수직정렬을 하기도 하고, 종종 크로스 브라우징을 할 때에 이 속성을 간과해서 애를 먹기도 합니다. 이 부분들은 나중에 좀 더 다루도록 하겠습니다.

font

앞서 살펴보았던 'font-'로 시작하는 속성들을 'font' 하나로 줄여서 선언할 수 있습니다. (line-height도 포함됩니다.)

많은 글씨관련 속성들을 띄어쓰기로 구분하여 경제적으로 표현해낼 수 있습니다. 다만, 이와 같은 단축 속성을 사용할 때에는 순서를 잘 지켜주셔야 합니다. 순서가 바뀔 경우 제대로 표현이 안될 수 있습니다. 속성의 순서는 다음과 같습니다.

위의 속성들 중에 필요 없는 부분들은 생략이 가능합니다만, 마지막에 font-family는 꼭 넣어야 합니다. 또한 생략된 속성들은 기본값으로 덮어씌워지니 이 점 주의하시기 바랍니다.

요점 정리
  • color - 글자 색을 지정.
  • font-family - 글자의 서체를 지정.
  • 서체의 종류
    • 세리프(serif) - 꺽쇠가 있는 서체, 가독성을 보다 높여 줌.
    • 산세리프(sans-serif) - 꺽쇠가 없는 서체, 심플하고 깔끔한 서체.
    • 모노스페이스(monospace) - 글자들의 너비가 동일한 서체, 코딩 작업 등에 주로 사용.
    • 커시브(cursive) - 필기체.
    • 판타지(fantasy) - 장식이 많은 서체, 제목 같은 일부 영역에 유용.
  • 웹 안전 서체는 대부분의 PC에 내장되어 있는 서체.
  • font-size - 글자의 크기를 지정.
  • font-style - 이텔릭과 같은 스타일을 지정.
  • font-weight - 글자의 굵기를 조절.
  • font-variant - 영문자 소문자를 작은 대문자로 변경.
  • line-height - 줄 높이
  • font - 글자 관련 속성의 축약 버전. font-family, font-style, font-size, font-weight, line-height를 한 번에 지정할 수 있음. 단 속성들의 순서가 중요.

이 글이 유용하셨다면 친구들에게 공유 해주세요.