포스트

CSS 폰트 스타일 가이드 - font-family, size, weight, color

CSS로 텍스트를 꾸미는 방법을 학습합니다. font-family, font-size, font-weight, font-style, color 속성의 사용법을 다룹니다.

게시일
작성자 ChangSu Park
읽는 시간 6분
CSS 폰트 스타일 가이드 - font-family, size, weight, color

1. font-family

기본 사용법

1
2
3

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

폰트 우선순위:

  1. Georgia (1순위)
  2. “Times New Roman” (2순위)
  3. Times (3순위)
  4. serif (마지막 대체 폰트)

Tip: 폰트명에 공백이 있으면 따옴표로 감싸야 합니다.

실전 예제

1
2
3
4
5
6
7
8
9
10
11

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
}

h1 {
  font-family: Georgia, serif;
}

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

폰트 스택 (Font Stack)

용도폰트 스택
본문'Noto Sans KR', sans-serif
제목Georgia, serif
코드'Monaco', 'Courier New', monospace

2. font-size

단위

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* 픽셀 (권장) */
.big-size-font {
  font-size: 50px;
}

/* 상대 크기 */
.em-size {
  font-size: 2em;
}

/* 루트 기준 상대 크기 */
.rem-size {
  font-size: 1.5rem;
}

단위 비교

단위설명예시
px픽셀 (절대 단위)16px
em부모 요소 기준1.5em
rem루트(html) 기준1.5rem
%부모 요소의 %120%

태그별 크기 조정

1
2
3
4
5
6
7
8

/* 브라우저 기본값 무시하고 직접 지정 */
h1 {
  font-size: 30px;  /* h1이 작아짐 */
}

h4 {
  font-size: 50px;  /* h4가 커짐 */
}

3. font-weight

기본 사용법

1
2
3
4
5
6
7

.bold-font {
  font-weight: bold;
}

.normal-font {
  font-weight: normal;
}

숫자 값

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* 가장 얇음 */
.thin {
  font-weight: 100;
}

/* normal과 동일 */
.normal {
  font-weight: 400;
}

/* bold와 동일 */
.bold {
  font-weight: 700;
}

/* 가장 두꺼움 */
.heavy {
  font-weight: 900;
}

값 비교:

  • normal = 400
  • bold = 700

4. font-style

1
2
3
4
5
6
7
8
9
10
11

a {
  font-style: italic;   /* 이탤릭체 */
}

p {
  font-style: normal;   /* 기본 (직립) */
}

em {
  font-style: oblique;  /* 기울임 */
}

5. color

색상 지정 방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* 1. 색상 이름 */
.pink {
  color: pink;
}

/* 2. HEX 코드 (가장 많이 사용) */
h1 {
  color: #eb4639;
}

/* 3. RGB */
h1 {
  color: rgb(235, 70, 57);
}

/* 4. RGBA (투명도 포함) */
p {
  color: rgba(235, 70, 57, 0.8);  /* 80% 불투명 */
}

/* 5. HSL */
h1 {
  color: hsl(4, 82%, 57%);
}

색상 표현 비교

방법예시장점
이름red, blue간단
HEX#eb4639짧고 명확 ⭐️
RGBrgb(235, 70, 57)직관적
RGBArgba(235, 70, 57, 0.8)투명도 가능
HSLhsl(4, 82%, 57%)색상 조정 쉬움

6. 실전 예제

기본 타이포그래피

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

body {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
}

h2 {
  font-size: 24px;
  font-weight: 600;
  color: #2c2c2c;
}

.highlight {
  color: #007bff;
  font-weight: bold;
}

.muted {
  color: #6c757d;
  font-style: italic;
}

버튼 스타일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background-color: #007bff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background-color: #0056b3;
}

코드 블록

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

code {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  color: #e83e8c;
  background-color: #f8f9fa;
  padding: 2px 6px;
  border-radius: 3px;
}

pre {
  font-family: 'Monaco', monospace;
  font-size: 14px;
  color: #333;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}

7. 웹 폰트 사용하기

Google Fonts

1
2
3

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

1
2
3

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

@font-face

1
2
3
4
5
6
7
8
9
10
11

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: 'MyFont', sans-serif;
}

8. Best Practices

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* ✅ 좋은 예 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #333;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
}

/* ❌ 나쁜 예 */
body {
  font-size: 10px;  /* 너무 작음 */
  color: #f0f0f0;   /* 배경과 대비 부족 */
}

9. 단축 속성

1
2
3
4
5
6
7
8
9
10
11
12
13

/* 개별 속성 */
p {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

/* 단축 속성 */
p {
  font: italic bold 16px Arial, sans-serif;
  /* font: [style] [weight] size family */
}

정리

주요 속성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.text-style {
  /* 폰트 패밀리 */
  font-family: 'Noto Sans KR', sans-serif;

  /* 크기 */
  font-size: 16px;

  /* 두께 */
  font-weight: 700;

  /* 스타일 */
  font-style: italic;

  /* 색상 */
  color: #333;
}

권장 단위

  • font-size: px 또는 rem
  • font-weight: 400 (normal), 700 (bold)
  • color: #hex 또는 rgb()

색상 도구

참고 자료

Web, CSS
css typography
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.