CSS 글꼴

글꼴 선택은 중요합니다.

올바른 글꼴을 선택하는 것은 독자들이 웹사이트를 사용하는 것에 큰 영향을 미칩니다.

올바른 글꼴을 사용하면 브랜드에 대한 강력한 이미지를 구축할 수 있습니다.

읽기 쉬운 글꼴을 사용하는 것은 중요합니다. 글꼴은 텍스트에 가치를 더합니다. 또한 글꼴의 올바른 색상과 텍스트 크기를 선택하는 것도 중요합니다.

범용 글꼴 패밀리

CSS에는 5개의 범용 글꼴패밀리가 있습니다

• Serif 글꼴은 각 글자의 가장자리에 작은 획이 있습니다. 격식을 차리고 우아한 느낌을 줍니다.
• Sans-serif 글꼴에는 깨끗한 선이 있습니다(작은 획이 붙어 있지 않습니다). 모던하고 미니멀한 룩을 연출합니다.
• Monospace 글꼴은 모든 글자의 너비가 동일합니다. 기계적인 느낌을 줍니다.
• Cursive 글꼴은 사람의 필체를 모방합니다.
• Fantasy 글꼴은 장식용/장난용 글꼴입니다.

Serif 글꼴과 Sans-serif 글꼴의 차이

Note: 컴퓨터 화면에서는 sans-serif 글꼴이 serif 글꼴보다 읽기 쉽습니다.

폰트 예제

Serif :

Times New Roman

Georgia

Garamond

Sans-serif :

Arial

Verdana

Helvetica

Monospace :

Courier New

Lucida Console

Monaco

Cursive :

Brush Script MT

Lucida Handwriting

Fantasy :

Copperplate

Papyrus

font-family 속성

CSS에서는 font-family 속성을 사용하여 텍스트의 글꼴을 지정합니다.

Note: 글꼴 이름이 두 개 이상의 단어일 경우 “Times New Roman”과 같이 따옴표로 묶어야 합니다.

Tip: 글꼴 패밀리 속성은 브라우저/운영 체제 간의 호환성을 최대화하기 위해 “fallback” 시스템으로서 여러 글꼴 이름을 포함해야 합니다. 원하는 글꼴로 시작하여 일반 계열로 끝납니다(다른 글꼴을 사용할 수 없는 경우 브라우저가 일반 계열에서 유사한 글꼴을 선택할 수 있습니다). 글꼴 이름은 쉼표로 구분해야 합니다.

예제 1

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

웹 세이프 폰트란?

웹 세이프 글꼴은 모든 브라우저 및 장치에 보편적으로 설치되는 글꼴입니다.

예비 글꼴

그러나 100% 웹 안전 글꼴은 없습니다. 글꼴이 발견되지 않거나 올바르게 설치되지 않았을 수 있습니다.

따라서 항상 예비(fallback) 글꼴을 사용하는 것이 매우 중요합니다.

즉, 유사한 “백업 글꼴” 목록을 글꼴 패밀리 속성에 추가해야 합니다. 첫 번째 글꼴이 작동하지 않으면 브라우저는 다음 글꼴과 다음 글꼴을 차례로 시도합니다. 목록 끝은 항상 일반 font-family 이름으로 끝내십시오.

예제 2 - 다음 세 가지 글꼴 유형이 있습니다. 타호마, 베르다나, 산세리프. 두 번째 및 세 번째 글꼴은 첫 번째 글꼴을 찾을 수 없는 경우를 대비한 백업입니다.

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

HTML 및 CSS용 최적의 웹 세이프 폰트

HTML 및 CSS에 가장 적합한 웹 세이프 글꼴은 다음과 같습니다.

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Note: 웹 사이트를 게시하기 전에 항상 다른 브라우저 및 장치에 글꼴이 어떻게 표시되는지 확인하고 항상 폴백 글꼴을 사용하십시오.

Arial (sans-serif)

Arial은 온라인 및 인쇄 매체 모두에서 가장 널리 사용되는 글꼴입니다. Arial은 Google Docs의 기본 글꼴이기도 합니다.

Arial은 가장 안전한 웹 글꼴 중 하나로 모든 주요 운영 체제에서 사용할 수 있습니다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Verdana (sans-serif)

Verdana는 매우 인기 있는 글꼴입니다. Verdana는 작은 글꼴로도 쉽게 읽을 수 있습니다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Helvetica (sans-serif)

Helvetica는 디자이너들에게 사랑받고 있습니다. 여러 종류의 비즈니스에 적합합니다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Tahoma (sans-serif)

Tahoma는 문자 사이의 간격이 작습니다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Trebuchet MS (sans-serif)

Trebuchet MS는 1996년에 마이크로소프트에 의해 설계되었습니다. 이 글꼴은 주의해서 사용하십시오. 일부 모바일 운영체제에서는 지원되지 않습니다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Times New Roman (serif)

Times New Roman은 세계에서 가장 인지도가 높은 글꼴 중 하나입니다. 전문적으로 보이고 많은 신문과 “뉴스” 웹사이트에서 사용되고 있습니다. 또, Windows 디바이스와 애플리케이션의 프라이머리 폰트이기도 합니다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Georgia (serif)

Georgia는 우아한 세리프 글꼴입니다. 다양한 글꼴 크기로 매우 읽기 쉽기 때문에 모바일 대응 디자인에 적합합니다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Garamond (serif)

Garamond는 많은 인쇄된 책에 사용되는 고전 글꼴입니다. 좋은 가독성을 가지고 있습니다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Courier New (monospace)

Courier New는 가장 널리 사용되는 monospace serif 글꼴입니다. Courier New는 종종 코딩 디스플레이와 함께 사용되며 많은 전자 메일 공급자가 기본 글꼴로 사용합니다. Courier New는 영화 시나리오의 표준 글꼴이기도 합니다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Brush Script MT (cursive)

Brush Script MT 글꼴은 필기를 모방하도록 설계되었습니다. 우아하고 세련되었지만 읽기 어려울 수 있습니다. 조심해서 사용하세요.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

자주 사용되는 글꼴 폴백

5개의 범용 글꼴패밀리로 정리된 자주 사용되는 글꼴폴백을 다음에 나타냅니다.

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

Serif Fonts

“Times New Roman”, Times, serif

This is a Heading

Georgia, serif

This is a Heading

Garamond, serif

This is a Heading

Sans-Serif Fonts

Arial, Helvetica, sans-serif

This is a Heading

Tahoma, Verdana, sans-serif

This is a Heading

“Trebuchet MS”, Helvetica, sans-serif

This is a Heading

Geneva, Verdana, sans-serif

This is a Heading

Monospace Fonts

“Courier New”, Courier, monospace

This is a Heading

Cursive Fonts

“Brush Script MT”, cursive

This is a Heading

Fantasy Fonts

Copperplate, Papyrus, fantasy

This is a Heading

폰트 스타일

font-style 속성은 대부분 이탤릭체를 지정하는 데 사용됩니다.

이 속성에는 다음 세 가지 값이 있습니다.

• normal - 일반적인 텍스트로 표시됩니다.
• italic - 이탤릭체 텍스트로 표시됩니다.
• oblique - 기울어진 텍스트로 표시됩니다.

예제 3

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

폰트 굵기

font-weight 속성은 글꼴의 굵기를 지정합니다.

예제 4

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

폰트 변형

font-variant 속성은 텍스트를 소문자 글꼴로 표시할지 여부를 지정합니다.

소문자 글꼴에서는 모든 소문자가 대문자로 변환됩니다. 그러나 변환된 대문자는 텍스트의 원래 대문자에 비해 작은 글꼴 크기로 표시됩니다.

예제 5

p.normal {
  font-variant: normal;
}

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

폰트 사이즈

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

웹 디자인에서는 텍스트 크기를 관리할 수 있는 것이 중요합니다. 그러나 단락을 제목처럼 보이게 하거나 제목을 단락처럼 보이게 하기 위해 글꼴 크기 조정을 사용하면 안 됩니다.

항상 적절한 HTML 태그(제목에는 <h1> - <h6>, 문단에는 <p> 등)를 사용합니다.

글꼴 크기 값은 절대 크기 또는 상대 크기를 지정할 수 있습니다.

절대 크기 :

• 텍스트를 지정된 크기로 설정합니다.
• 사용자가 모든 브라우저에서 텍스트 크기를 변경할 수 없습니다.
• 절대 크기는 출력의 물리적 크기를 알고 있는 경우에 유용합니다.

상대 크기 :

• 주변 요소에 상대적인 크기를 설정합니다.
• 사용자가 브라우저에서 텍스트 크기를 변경할 수 있습니다.

글꼴 크기를 지정하지 않으면 문단과 같은 일반 텍스트의 기본 크기는 16px(16px=1em)입니다.

픽셀을 이용한 폰트 사이즈 설정

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

예제 6

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Tip: 픽셀을 사용하는 경우에도 확대/축소 도구를 사용하여 전체 페이지의 크기를 조정할 수 있습니다.

em을 이용한 폰트 사이즈 설정

사용자가 (브라우저 메뉴에서) 텍스트 크기를 조정할 수 있도록 하기 위해 많은 개발자가 픽셀 대신 em을 사용합니다.

1em은 현재 글꼴 크기와 동일합니다. 브라우저의 기본 텍스트 크기는 16px입니다. 따라서 1em의 기본 사이즈는 16px 입니다.

크기는 픽셀에서 em까지 다음 공식을 사용하여 계산할 수 있습니다: pixels/16=em

예제 7

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 크기를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.

퍼센트와 em 혼합 사용법

모든 브라우저에서 기능하는 솔루션은 <body> 요소의 기본 글꼴 크기를 퍼센트 단위로 설정하는 것입니다.

예제 8

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

모든 브라우저에서 동일한 텍스트 크기를 표시하고 모든 브라우저에서 텍스트를 확대/축소하거나 크기를 조정할 수 있습니다.

반응형 폰트 사이즈

텍스트 크기는 “viewport width”를 의미하는 vw 단위를 사용하여 설정할 수 있습니다.

이렇게 하면 텍스트 크기가 브라우저 창의 크기를 따릅니다.

예제 9

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

Viewport는 브라우저 창 크기입니다. 1vw = 뷰포트 폭의 1%. 뷰포트의 폭이 50cm일 경우 1vw는 0.5cm입니다.

구글 폰트

HTML에서 표준 글꼴을 사용하지 않으려면 Google 글꼴을 사용할 수 있습니다.

Google 글꼴은 무료로 사용할 수 있으며 선택할 수 있는 글꼴이 1000개가 넘습니다.

구글 폰트 사용법

<head> 섹션에 스타일시트 링크를 추가하고 CSS 글꼴을 참조합니다.

예제 10

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>

CSS에서 글꼴을 지정할 때는 예상치 않은 동작을 방지하기 위해 항상 폴백 글꼴을 1개 이상 나열하십시오. 따라서 여기서도 목록 끝에 일반 글꼴 패밀리(serif 또는 sans-serif 등)를 추가해야 합니다.

구글 폰트 다중 사용

여러 Google 글꼴을 사용하려면 다음과 같이 글꼴 이름을 파이프 문자(|)로 구분합니다.

예제 11

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

여러 글꼴을 요청하면 웹 페이지가 느려질 수 있습니다!

구글 폰트 스타일링

CSS를 사용하여 Google 글꼴을 원하는 대로 스타일링할 수 있습니다.

예제 12

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>

폰트 효과

Google은 사용자가 사용할 수 있는 다양한 글꼴 효과도 활성화했습니다.

먼저 Google API에 effect=effectname을 추가한 다음 특수 효과를 사용할 요소에 특수 클래스 이름을 추가합니다. 클래스 이름은 항상 font-effect- 로 시작하고 effectname으로 끝납니다.

예제 13

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-fire">Sofia on Fire</h1>

</body>

여러 글꼴 효과를 요청하려면 다음과 같이 효과 이름을 파이프 문자(|)로 구분합니다.

예제 14

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>

폰트 페링스

훌륭한 글꼴 쌍(페링스)은 훌륭한 디자인에 필수적입니다.

폰트 쌍 규칙

1. 보완

서로 보완하는 글꼴 쌍을 찾는 것이 항상 안전합니다.

훌륭한 글꼴 조합은 너무 비슷하거나 너무 다르지 않게 조화를 이루어야 합니다.

2. 글꼴 슈퍼패밀리 사용

폰트 슈퍼 패밀리는 서로 잘 연동되도록 설계된 폰트 세트입니다. 따라서 동일한 슈퍼패밀리 내에서 다른 글꼴을 사용하는 것이 안전합니다.

예를 들어, Lucida 슈퍼 패밀리에는 다음과 같은 글꼴이 있습니다. Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida.

3. 대비

너무 비슷한 두 글꼴은 종종 충돌합니다. 그러나 대비를 올바르게 실시하면, 각각의 폰트에 최적인 것을 얻을 수 있습니다.

예: serif와 sans-serif를 조합하는 것은 잘 알려진 조합입니다.

강력한 슈퍼 패밀리는 동일한 글꼴의 serif 및 sans-serif 변형을 모두 포함합니다(예: Lucida 및 Lucida Sans).

4. 하나의 상위값

글꼴 하나가 상위 값이어야 합니다. 그러면 페이지의 글꼴에 대한 계층이 설정됩니다. 크기, 무게 및 색상을 다양하게 조정하여 이를 달성할 수 있습니다.

예제 15

body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}

Georgia and Verdana

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Helvetica and Garamond

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

인기 있는 구글 폰트 쌍

HTML에서 표준 글꼴을 사용하지 않으려면 Google 글꼴을 사용할 수 있습니다.

Google 글꼴은 무료로 사용할 수 있으며 선택할 수 있는 글꼴이 1000개가 넘습니다.

Merriweather - Open Sans

Ubuntu - Lora

Abril Fatface - Poppins

Cinzel - Fauna One

Fjalla One - Libre Baskerville

Space Mono - Muli

Spectral - Rubik

Oswald - Noto Sans

폰트 축약 속성

코드를 단축하기 위해 하나의 속성에서 모든 개별 글꼴 속성을 지정할 수도 있습니다.

font 속성은 다음을 나타내는 줄임말 속성입니다.

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Note: font-size 및 font-family 값이 필요합니다. 다른 값 중 하나가 누락된 경우 해당 값이 사용됩니다.

예제 16 - font를 사용하여 하나의 선언에 여러 글꼴 속성을 설정합니다.

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}