폰트와 텍스트 스타일링 — 구글 폰트 적용까지

같은 글자, 다른 폰트

"안녕하세요"라는 텍스트도 폰트에 따라 완전히 다른 느낌을 줍니다. 고딕체는 깔끔하고 현대적인 느낌, 명조체는 고급스럽고 전통적인 느낌, 손글씨체는 친근하고 개성 있는 느낌을 냅니다.

웹에서 폰트를 다루는 방법을 배워봅시다.

폰트 설정 — `font-family`

body {
  font-family: 'Noto Sans KR', sans-serif;
}

h1 {
  font-family: 'Georgia', serif;
}

code {
  font-family: 'Courier New', monospace;
}

여러 개를 콤마로 나열하면 왼쪽부터 차례로 시도합니다. 첫 번째 폰트가 없으면 두 번째, 없으면 세 번째… 마지막엔 폰트 종류(serif, sans-serif, monospace) 중 하나를 지정합니다.

폰트 계열	특징	예시
`sans-serif`	획 끝이 깔끔 (고딕)	나눔고딕, Arial
`serif`	획 끝에 장식(세리프) (명조)	Georgia, Times
`monospace`	모든 글자 너비 동일	Courier, Consolas
`cursive`	손글씨 느낌

글꼴 크기 — `font-size`

h1 { font-size: 36px; }
h2 { font-size: 28px; }
p  { font-size: 16px; }
small { font-size: 12px; }

단위:

px (픽셀): 고정 크기. 가장 직관적.
rem: 루트 요소(html) 기준 배수. 1rem = 보통 16px. 반응형에 유리.
em: 부모 요소 기준 배수.
%: 부모 요소의 퍼센트.

처음에는 px로 연습하고, 나중에 rem으로 전환하면 됩니다.

글꼴 굵기 — `font-weight`

p    { font-weight: normal; }   /* = 400 */
h2   { font-weight: bold; }     /* = 700 */
.thin { font-weight: 300; }
.black { font-weight: 900; }

100, 200, ..., 900까지 100 단위로 설정 가능합니다. 폰트에 따라 지원하는 굵기가 다릅니다.

줄 간격 — `line-height`

p {
  font-size: 16px;
  line-height: 1.6;   /* 글자 크기의 1.6배 = 25.6px */
}

숫자만 쓰면 현재 글자 크기의 배수가 됩니다. 본문 텍스트는 1.5~1.8 정도가 읽기 편합니다.

텍스트 정렬 — `text-align`

h1 { text-align: center; }
p  { text-align: left; }      /* 기본값 */
.price { text-align: right; }

텍스트 장식 — `text-decoration`

a {
  text-decoration: none;         /* 밑줄 제거 */
}

.underline {
  text-decoration: underline;    /* 밑줄 */
}

.line-through {
  text-decoration: line-through; /* 취소선 */
}

대소문자 변환 — `text-transform`

.uppercase { text-transform: uppercase; }  /* 전부 대문자 */
.capitalize { text-transform: capitalize; } /* 첫 글자만 대문자 */
.lowercase { text-transform: lowercase; }  /* 전부 소문자 */

글자 간격 — `letter-spacing`

h1 { letter-spacing: 2px; }    /* 글자 사이 간격 넓힘 */
.tight { letter-spacing: -1px; } /* 글자 사이 간격 좁힘 */

구글 폰트 무료로 적용하기

기본 시스템 폰트 외에 다양한 폰트를 무료로 쓸 수 있습니다.

fonts.google.com 접속
원하는 폰트 검색 (한국어 폰트: Noto Sans KR, Black Han Sans, Jua 추천)
폰트 선택 → "Get font" → "Get embed code"
<link> 코드를 HTML <head> 에 붙여넣기
CSS에서 font-family 로 사용

<!-- head에 추가 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

/* CSS에서 사용 */
body {
  font-family: 'Noto Sans KR', sans-serif;
}

실전 타이포그래피 예시

읽기 좋은 텍스트 스타일:

body {
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
}

h1 {
  font-size: 2.5rem;   /* 40px */
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

h2 {
  font-size: 1.75rem;  /* 28px */
  font-weight: 700;
}

p {
  font-size: 1rem;     /* 16px */
  line-height: 1.8;
  margin-bottom: 1em;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

직접 해보기 ✏️

fonts.google.com 에서 마음에 드는 한국어 폰트를 찾아 소개 페이지에 적용하세요.
h1, h2, p 의 font-size와 line-height를 조절해 읽기 편한 타이포그래피를 만들어 보세요.
링크(a)의 밑줄을 제거하고, 마우스 오버 시 밑줄이 생기도록 설정하세요.

정리

속성	용도
`font-family`	폰트 종류
`font-size`	글자 크기
`font-weight`	글자 굵기
`line-height`	줄 간격
`text-align`	텍스트 정렬
`text-decoration`	밑줄·취소선 등
`letter-spacing`	글자 간격

다음 편에서는 CSS의 핵심 개념 중 하나인 박스 모델 (margin, padding, border)을 배웁니다.

같은 글자, 다른 폰트

폰트 설정 — font-family

글꼴 크기 — font-size

글꼴 굵기 — font-weight

줄 간격 — line-height

텍스트 정렬 — text-align

텍스트 장식 — text-decoration

대소문자 변환 — text-transform

글자 간격 — letter-spacing