폰트(font)

웹 페이지의 폰트(Font, 글꼴)은 페이지의 가독성, 스타일, 브랜드 정체성에 큰 영향을 미칩니다.

CSS를 사용하면 웹 페이지의 폰트를 다양하게 설정할 수 있습니다.

font-family는 웹 페이지의 텍스트에 사용될 폰트을 지정하는 CSS 속성입니다.

복사
element {
  font-family: 폰트1, 폰트2, ...;
}

복사
body {
  font-family: 'Times New Roman', Times, serif;
}

웹 브라우저는 font-family 속성에 나열된 순서대로 폰트를 사용합니다.

만약 첫 번째 폰트가 사용자의 시스템에 설치되어 있지 않다면 브라우저는 두 번째 폰트를 찾아보고, 그다음에는 세 번째 폰트를 찾습니다.

위 예시에서 웹 브라우저는 먼저 Times New Roman 폰트 사용을 시도합니다. 만약 이 폰트가 시스템에 없다면, Times 폰트 사용을 시도하고, 이것도 없으면 serif라는 기본 폰트를 사용합니다.

이런 식으로 사용 가능한 첫 번째 폰트를 사용합니다.

특정 폰트가 사용자의 시스템에 없을 경우를 대비해서 font-family 마지막에는 항상 기본 폰트(예: serif, sans-serif, monospace 등)을 추가하는 것이 좋습니다.

기본 폰트는 브라우저와 폰트 설치 여부에 관계없이 사용 가능합니다.

웹 브라우저는 몇 가지 글꼴 카테고리에 대한 기본 폰트를 제공합니다.

주요 웹 브라우저 기본 폰트 카테고리 3가지는 다음과 같습니다.

serif라는 용어는 글자의 끝에 작은 획 또는 발이 붙어 있는 글꼴 스타일을 뜻합니다.

본문 텍스트, 특히 긴 문서나 기사에 주로 사용됩니다.

Times New Roman, Georgia 등이 대표적인 serif 폰트입니다.

sans는 프랑스어로 '없음'을 의미하며, sans-serif 글꼴은 글자의 끝에 작은 획 또는 발이 없는 글꼴 스타일을 뜻합니다.

이러한 글꼴은 모던하고 깔끔한 느낌을 주며, 웹 및 디지털 디자인에서 널리 사용됩니다.

대표적인 폰트로 Arial, Helvetica, Verdana 등이 있습니다.

monospace 글꼴은 각 글자가 동일한 너비를 가지고 있는 글꼴 스타일을 뜻합니다.

이러한 글꼴은 코드 편집기나 기계에서 출력하는 텍스트에서 주로 사용됩니다.

대표적인 폰트로 Courier New, Consolas, Monospace 등이 있습니다.

폰트 이름에 공백이 있으면 큰 따옴표(" "), 또는 작은 따옴표(' ')로 묶어주는 것이 좋습니다.

예를 들어 CSS 코드 내 Times New Roman과 같이 폰트 이름에 공백이 있는 경우, 아래와 같이 큰 따옴표로 묶어주는 것이 좋습니다.

복사
font-family: 'Times New Roman', serif;