폰트 이해

우리는 우리가 보는 화면을 모든 독자가 공유하기를 바랍니다. 하지만, 일부 독자는 작성자가 가진 폰트font 가 없을 수도 있습니다. 이 때, 작성자는 여러 대체 폰트를 제시할 수 있습니다. 최대한 비슷한 대체 폰트를 제시하려면 폰트계열에 대한 이해가 필요합니다.

아래 표는 5가지 폰트 계열을 소개합니다. sarif, sans-sarif, monospace는 존재하는 폰트가 아닙니다(폰트 계열명 입니다). 문서를 표현하는 시스템이라면 최소 1개 이상의 글씨체를 저장하고 있을 것이므로, 상기 폰트를 만나면 시스템이 가지고 있는 기본default 계열의 글씨체로 대체합니다.

폰트의 종류
계열명 국문 설명
serif 명조 아름답게 보일 목적으로 획의 끝 부분에 장식을 더함
sans-serif 고딕 sans=없다(프랑스). 세리프가 없는 글자
display 헤드라인 굵고 강렬한 문자
handwriting 손글씨 자유로운 글자, 타이포그라피
monospace 동일간격 모든 문자의 간격을 일정하게 유지(한글: 2글자 취급), ㅇㅇ체

serif

명조(sarif)의 획 끝 부분은 휘어져 있지만, 고딕(sans-sarif)는 그렇지 않습니다.

명조 고딕 명조(serif)와 고딕(sans-sarif) 비교 "what-is-serif.svg", iseohyun.com, CC-BY-SA

monospace

monospace는 모든 글자 및 띄어쓰기의 가로넓이가 동일하지만, 일반 글씨는 그렇지 않습니다.

일반 글씨의 너비는 폰트파일에 정의된 제각각의 너비를 갖지만, monospace는 한글은 2칸, 영문과 사이띄기space는 1칸을 차지합니다.

이 글꼴은 serif입니다. 이 글꼴은 monospace입니다. monospace란 "what-is-monospace.svg", iseohyun.com, CC-BY-SA

참고자료: 폰트의 이해(적용사례, 다운로드, 나눔/두부 시리즈)

폰트 문법

폰트 지정 예시

다음 예시에서 3가지 폰트가 등장합니다. 셋 다 고딕계열입니다. 일반적으로 '맑은 고딕'은 윈도우 사용자의 경우 대부분 가지고 있을 수 있습니다. sans-serif는 엄연히 말하면 폰트 명은 아니고, 시스템 폰트명입니다.

body{
  font-family: '나눔고딕', '맑은 고딕', sans-serif;
}
  1. '나눔고딕'을 가지고 있다면 우선 적용하시오.
  2. 그렇지 않다면 '맑은 고딕'을 적용하시오
  3. 그마저도 없다면 시스템이 정한 고딕계열을 적용하시오.
폰트의 세부설정
특성 설명 예제
font-size
:크기		 선언 px(픽셀), em, rem, % font-size: 12px (12픽셀pixel로)
font-size: 1.2em (:부모 객체ems대비 1.2배)
별명 xx-small, x-small, small, medium(사용자 기본 설정), x-large, xx-large, xxx-large font-size: xx-large
부모객체 대비: smaller, larger font-size: smaller
font-family
:서체		 문법syntax: [<family-name> | <generic-family>] : 우선적용, 스페어1... font-family: Times, "Times New Roman", Georgia, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: "Lucida Console", Courier, monospace;
font-style
:기울임		 normal, italic(이텔릭체 사용), oblique(기본폰트를 기울임), oblique #deg(각도degree, angle:-90 ~ 90º, default:14) oblique 10deg
font-variant
:변수?		 normal |
none |
[ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ] [참고]
font-weight
:두께		 상대 두께 bolder, lighter (부모객체를 참조해 정해진 두께로 변경['meaning_of_relative_weights'단락]) font-weight: bolder
절대 두께 1 ~ 1000 font-weight: 100
별명 100(Thin, Hairline), 200(Extra Light, Ultra Light), 300(Light), 400(Normal, Regular), 500(Medium), 600(Semi Bold, Demi Bold), 700(Bold), 800(Extra Bold, Ultra Bold), 900(Black, Heavy) font-weight: Bold
font-stretch
:자간		 선언 50% ~ 200%
단위:% 50 62.5 75 87.5 100 112.5 125 150 200
Inconsolata e e e e e e e e e
Anek Malayalam e e e e e e e e e
출처: 예제코드:mozilla F_Font >> b_stretch.html

font-stretch를 지원하는 글꼴은 정확히 넚이를 반영하지만, 그렇지 않으면 넓은 것과 좁은 것만 구분합니다.

별명 ultra-condensed(50%), extra-condensed(62.5%), condensed(75%), semi-condensed(87.5%), normal(100%), semi-expanded(112.5%), expanded(125%). extra-expanded(150%), ultra-expanded(200%)
line-height
:행간		 단위 (단위 없음), em, %, px(픽셀) line-height: 2.5
line-height: 2.5em
line-height: 250%
line-height: 25px
별명 normal(1.2) line-height: normal
Global 예약어 inherit, initial, revert, revert-layer, unset
font 속기 문법
F_Font >> a_shorthand.html
font('css font 값');

온라인 폰트

만약 내가 가지고 있는 '나눔고딕'을 적용하게 하고 싶다면 다운로드 받게 할 수 있습니다. 다운로드 받을 경로를 지정해 줍니다. 

@font-face {
  font-family: '나눔고딕';
  src: url('/source/NanumGothic.otf') format('OpenType');
  src: url('/source/NanumGothic.ttf') format('OpenType');
}

@font-face {
  font-family: 'D2Coding';
  src: url('/source/D2Coding-Ver1.3.2-20180524-all.ttc') format('OpenType');
  src: url('/source/D2Coding-Ver1.3.2-20180524-ligature.ttc') format('OpenType');
  src: url('/source/D2Coding-Ver1.3.2-20180524-ligature.ttf') format('OpenType');
}

구글 폰트

F_Font >> c_googleFont.html

구글 폰트에서 다운받아 사용할 수 있습니다. 

<style>
  @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

  .nanum-pen {
    font-family: "Nanum Pen Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1cm;
  }
</style>
<p class="nanum-pen">가나다라 abcd</p>

예시: 가나다라 abcd

format

파일의 타입은 파일을 열어보고 확인 할 수 있습니다. 가장 널리 사용되는 두 타입(truetype, opentype)의 특징은 다음과 같습니다.

글꼴 비교
TrueType OpenType
개발사 Apple, Microsoft Microsoft, Adobe Systems
형식 글리프 데이터를 담은 헤더와 본문 데이터로 구성 TrueType의 형식을 확장하여 PostScript 글꼴 데이터도 포함
언어 개별언어 지원 다국어 지원
파일크기 작음 큼
기능 기본기능 레이아웃과 타이포그래피 기능을 포함하여 글꼴의 더 많은 디자인 옵션을 제공
호환성 대부분 호환
Windows, macOS, Linux 및 Android		 레거시와 호환문제가 있을 수 있음
라이센스 - 무료 ~ 상용글꼴
기타 글꼴