• CSS Fonts
• CSS Web Safe Fonts
• CSS Fonts Fallbacks
• CSS Font Style
• CSS Font Size
• CSS Google Fonts
• CSS Great Font Parings
• CSS Font Property

웹사이트에 적합한 폰트를 선택하는 것이 중요합니다.

적합한 폰트를 선택하는 것은 사용자의 웹사이트 경험에 커다란 영향을 미칩니다.

적합한 폰트는 브랜드에 대한 강렬한 정체성을 만들어줄 수 있습니다.

읽기 쉬운 폰트를 사용하는 것이 중요합니다. 폰트는 텍스트에 가치를 부여합니다. 그래서 해당 폰트에 대한 적합한 컬러와 텍스트 크기를 선택하는 것도 중요합니다.

CSS에는 5개의 범용 글꼴 집합이 있습니다.

1. Serif (세리프) 폰트에는 각 철자의 가장자리에 작은 획이 있습니다. 격식과 우아함을 만듭니다.
2. Sans-serif (쌘 세리프) 폰트에는 매끈한 선이 있습니다(부착된 작은 획이 없습니다). 현대적이고 단순한 모양을 만듭니다.
3. Monospace (모노스페이스) 폰트에서 모든 철자들은 동일한 고정 너비를 가지며, 기계적인 모양을 만듭니다.
4. Cursive (컬씨브) 폰트는 인간의 손글씨를 모방합니다.
5. Fantasy (팬터시) 폰트는 장식적이고 재미있는 폰트입니다.

다른 모든 폰트 이름들은 범용 글꼴 집합들 중의 하나에 속합니다.


Note:
컴퓨터 스크린에서, serif 폰트보다 sans-serif 폰트가 읽기에 더 쉽다고 여겨집니다.

CSS에서, 텍스트의 폰트를 지정하기 위해서 font-family속성을 사용합니다.

font-family속성은 “fallback (대비책)” 시스템으로 여러 개의 폰트 이름을 가져서 브라우저/운영시스템 사이에서 최대한의 호환성을 보장합니다.
원하는 폰트로 시작하고 범용 글꼴 집합으로 끝마칩니다.(이용할 수 있는 다른 폰트가 없는 경우, 브라우저가 범용 글꼴 집합에서 유사한 폰트를 선택하도록)
폰트 이름은 쉼표(, 콤마)로 구분되어야 합니다.

Note:
폰트 이름이 한 단어 이상인 경우, 쌍따옴표로 표시해야 합니다.ex) “Times New Roman”

하기 예제에서는 3개의 문단에 대해 일부 다른 폰트를 지정합니다.

.p1 {
  font-family: "Times New Roman", Times, serif;
}
 
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
 
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Web Safe Fonts (웹 안전 폰트)는 모든 브라우저와 자치에 보편적으로 설치되는 폰트입니다.

하지만, web safe font가 100% 완전하게 있을 수는 없습니다. 폰트를 찾을 수 없거나 제대로 설치되지 않을 가능성이 항상 존재합니다.

그러므로, 항상 fallback 폰트를 사용하는 것이 매우 중요합니다.

이는 font-family속성에 유사한 'backup 폰트' 목록을 추가해야 하는 것을 의미합니다. 첫 번째 폰트가 적용되지 않을 경우, 브라우저는 차례로 다음 폰트 적용을 시도합니다. 항상 범용 글꼴 집합 이름으로 목록 명으로 끝내야 합니다.

하기 예제에는 3가지의 폰트 타입이 있습니다: Tahoma, Verdana, sans-serif. 두 번째(Verdana)와 세 번째(sans-serif) 폰트는 첫 번째 폰트가 발견되지 않을 경우를 대비한 백업(예비) 폰트입니다.

p {
  font-family: Tahoma, Verdana, sans-serif;
}

아래의 목록은 HTML과 CSS를 위한 최고의 Web Safe Fonts입니다.

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Gerogia (serif)
• Garamond (serif)
• Courier New (monospace) - monospace: 고정너비의
• Brush Script MT (cursive) - cursive : 필기체의

Note:
퍼블리싱을 하기 전에, 항상 사용한 폰트가 다양한 브라우저와 장치에서 어떻게 보여지는지를 확인하고, 항상 fallback 폰트를 사용합니다.

상기 10개 폰트의 예제를 Best Web Safe Fonts for HTML and CSS에서 참조하세요

5개의 범용 글꼴 집합(Serif, Sans-serif, Monospace, Cursive, Fantasy)으로 구성되고 일반적으로 사용되는 fallback 폰트를
CSS Font Fallbacks에서 참조하세요.

font-style속성은 이탤릭체의 텍스트를 지정하는 것에 주로 사용됩니다.

font-style속성은 하기의 세 가지 값을 가집니다.

• normal - 텍스트가 정상적으로 표시됩니다.
• italic - 텍스트가 이탤릭체로 표시됩니다.
• oblique - 텍스트가 기울어져 있습니다. (oblique는 이탤릭과 매우 유사하지만, 지원이 적습니다.)

p.normal {
  font-style: normal;
}
 
p.italic {
  font-style: italic;
}
 
p.oblique {
  font-style: oblique;
}

font-weight속성은 폰트의 두께 (weight)를 지정합니다.

p.normal {
  font-weight: normal;
}
 
p.thick {
  font-weight: bold;
}

font-variant속성은 텍스트가 'small-caps (소대문자(小大文字)) 폰트'로 표시되는 여부를 지정합니다.

small-caps 폰트에서, 모든 소문자들은 대문자로 변환됩니다. 하지만, 변환된 대문자들은 기존 텍스트의 대문자보다 더 작은 폰트 크기로 보여집니다.

p.normal {
  font-variant: normal;
{
 
p.small {
  font-variant: small-caps;
}

font-size속성은 텍스트의 크기를 설정합니다.

웹 디자인에서 텍스트 크기를 조절할 수 있는 것은 중요합니다. 하지만, 문단을 제목처럼 보이게 만들거나, 제목을 문단처럼 보이도록 만들기 위해 폰트 크기 조정을 사용하지 말아야 합니다.

항상 - 제목에는 <h1>~<h6>, 그리고 문장에는 <p>와 같은 - 적합한 HTML 태그를 사용합니다.

폰트 크기 값은 absolute size 또는 relative size가 될 수 있습니다.

Absolute size:

• 텍스트를 지정 크기로 설정합니다.
• 사용자가 모든 브라우저에서 텍스크 크기를 변경하도록 허용하지 않습니다.(접근성 이유로 좋지 않습니다)
• 출력의 물리적 크기를 알고 있는 경우에 유용합니다.

Relative size:

• 주위 요소들에 대한 상대적인 크기로 설정합니다.
• 사용자가 브라우저에서 텍스트 크기를 변경하도록 허용합니다.

Note:
폰트 크기를 지정하지 않는 경우, 문장(단락)과 같은 일반 텍스트의 기본 크기는 16px(=1em)입니다.

텍스트 크기를 픽셀로 설정하면, 텍스트 크기룰 완전히 제어할 수 있습니다.

h1 {
  font-size: 40px;
}
 
h2 {
  font-size: 30px;
}
 
p {
  font-size: 14px;
}

Tip: 픽셀 단위 사용 시 줌 툴 (zoom tool)을 사용하여 전체 웹 페이지 크기를 조정할 수 있습니다.

사용자가 브라우저 메뉴에서 텍스트 크기 조절을 허용하기 위해, 개발자들이 픽셀 대신에 em단위를 사용합니다.

1em의 기본 크기는 16px입니다.

pixels/16=em 공식을 사용하여 픽셀에서 em으로 사이즈를 계산할 수 있습니다.

h1 {
  font-size: 2.5em;  /* 40px/16=2.5em */
}
 
h2 {
  font-size: 1.875em;  /* 30px/16=1.875em */
}
 
p {
  font-size: 0.875em;  /* 14px/16=0.875em */
}

상기 예제에서, em단위의 텍스트 크기는 픽셀 단위의 이전 예제와 동일합니다. 하지만, em 단위를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.

하지만, 인터넷 익스플로러의 이전 버번에서는 여전히 문제가 있습니다. 텍스트는 더 크게 만들어졌을 때 보다 더 커지고, 더 작게 만들어졌을 때 보다 더 작아집니다.

모든 브라우저에서 작동하는 해결책은 <body>요소에서 백분율로 기본 폰트 크기를 설정하고 em단위를 사용하는 것입니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}
 
h1 {
  font-size: 2.5em;
}
 
h2 {
  font-size: 1.875em;
}
 
p {
  font-size: 0.875em;
}
</style>
</head>
<body>
 
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>
 
</body>
</html>

상기 예제는 모든 브라우저에서 동일한 텍스트 크기를 보여주고, 모든 브라우저상에서 텍스트를 zoom하거나 크기를 조절하는 것을 확인할 수 있습니다.

텍스트 크기는 vw (viewport width)단위로 설정할 수 있습니다.
이렇게 하면 텍스트 크기는 브라우저 창의 크기를 따릅니다.

<h1 style="font-size:10vw">Hello World</h1>

Note:
Viewport는 브라우저 창의 크기입니다. 1vw = 1% of viewport width. viewport가 50cm 너비이면, 1vw는 0.5cm입니다.