CSS font-weight와 태그 중 무엇을 써야 하나요?

단어가 중요할 때는 , 스타일만 다른 텍스트에는 , 버튼, 레이블, 제목 같은 시각 디자인에는 font-weight를 쓰세요. 태그는 의미를 담고, 속성은 모양일 뿐이에요.

실행 가능한 CSS 문서: 글자 굵기

Q: CSS로 텍스트를 굵게 하려면 어떻게 하나요?

요소에 font-weight: bold; 또는 같은 뜻의 숫자 font-weight: 700;을 쓰세요. 제목이나 에서 굵기를 없애려면 font-weight: normal;(400)을 지정하세요.

Q: font-weight bold와 700은 같은가요?

네. bold는 700으로, normal은 400으로 계산돼서 두 형태는 똑같이 렌더링돼요.

CSS로 텍스트를 굵게 하는 법

font-weight는 글자의 두께를 정해요. bold(700과 같아요)는 텍스트를 굵게 만들고, normal(400과 같아요)은 보통 텍스트예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

제목, <th>, , 은 브라우저 자체 스타일시트 때문에 기본이 굵어요. 그래서 굵기를 없앨 때는 font-weight: normal을 써요. HTML에서 나 을 언제 쓰는지는 HTML 굵은 글씨를 보세요.

숫자 단계: 100에서 900까지

숫자에는 글꼴 패밀리가 따르는 표준 이름이 있어요.

값	흔한 이름
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

1에서 1000 사이의 어떤 숫자든 유효해서 450, 650도 쓸 수 있어요. 차이가 보이는지는 글꼴에 달려 있어요. 브라우저는 글꼴에 실제로 있는 굵기만 그릴 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui는 운영체제의 인터페이스 글꼴이고, 보통 굵기가 많아요. 위의 모든 줄이 두 가지 굵기 중 하나로 보인다면 시스템 글꼴에 regular와 bold만 있는 거예요.

굵기를 바꿔도 변화가 없는 이유

글꼴은 파일 묶음이고, 보통 굵기마다 파일이 하나씩 있어요. 정확한 굵기가 없으면 브라우저는 가진 것 중 가장 가까운 것을 골라요.

500이면 500, 그다음 더 가는 굵기, 그다음 더 굵은 굵기 순으로 찾아요.
600 이상이면 더 굵은 굵기를 먼저, 그다음 더 가는 굵기를 찾아요.
bold 파일이 아예 없으면 대부분의 브라우저는 보통 글자를 두껍게 만들어 흉내 내요(synthetic bold).

굵기가 많은 글꼴과, 대부분의 시스템에서 regular와 bold만 있는 serif를 비교해 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

serif 열에서 300과 500은 보통 regular로, 600은 bold로 대체돼요. "font-weight가 안 돼요" 질문 대부분의 답이 이거예요. CSS는 문제없고, 글꼴에 그 굵기가 없는 거예요. 가변 글꼴(굵기 축이 있는 파일 하나)은 굵기 범위 안의 모든 값을 매끄럽게 그려요.

bolder와 lighter

bolder와 lighter는 요소가 상속받은 굵기를 기준으로 해요. 고정된 양을 더하지 않고 다음 굵기 그룹으로 이동해요.

부모 굵기	`bolder` 결과	`lighter` 결과
100 ~ 349	400	100
350 ~ 549	700	100
550 ~ 749	900	400
750 ~ 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

실전 패턴: 변수로 만든 굵기 단계

숫자를 여기저기 흩뿌리지 말고 사이트 전체에 쓸 굵기를 서너 개 골라 이름을 붙이세요.

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

자주 하는 실수

모든 숫자가 다르게 보일 거라고 기대하기. 글꼴에 있는 굵기만 구분되어 렌더링돼요.
버튼 레이블에  쓰기. 버튼은 font-weight로 꾸미고, 와 은 텍스트에 쓰세요.
숫자에 따옴표 붙이기. font-weight: "700"은 잘못된 값이라 무시돼요. font-weight: 700으로 쓰세요.
모든 곳에 강조용 굵은 글씨. 전부 굵으면 아무것도 눈에 띄지 않아요. 본문 텍스트는 400으로 두세요.
작은 텍스트에 가는 굵기. 작은 크기의 100에서 300은 읽기 어려워요. 대비가 낮은 배경에서는 특히 그래요.

자주 묻는 질문

CSS로 텍스트를 굵게 하려면 어떻게 하나요?

요소에 font-weight: bold; 또는 같은 뜻의 숫자 font-weight: 700;을 쓰세요. 제목이나 에서 굵기를 없애려면 font-weight: normal;(400)을 지정하세요.

font-weight 값에는 무엇이 있나요?

1에서 1000까지의 숫자이고, 보통 백 단위로 써요. 100 thin, 200 extra light, 300 light, 400 normal, 500 medium, 600 semibold, 700 bold, 800 extra bold, 900 black이에요. 키워드 normal과 bold는 400과 700이고, bolder와 lighter는 부모 기준이에요.

font-weight bold와 700은 같은가요?

네. bold는 700으로, normal은 400으로 계산돼서 두 형태는 똑같이 렌더링돼요.

font-weight 500이나 600이 normal이나 bold와 똑같아 보이는 이유는 무엇인가요?

글꼴에 그 굵기가 없기 때문이에요. 글꼴이 400과 700만 제공하면 브라우저는 가장 가까운 파일을 골라서 500은 400처럼, 600은 700처럼 렌더링해요. 굵기가 더 많은 글꼴이나 가변 글꼴을 불러오세요.

CSS font-weight와 태그 중 무엇을 써야 하나요?

단어가 중요할 때는 , 스타일만 다른 텍스트에는 , 버튼, 레이블, 제목 같은 시각 디자인에는 font-weight를 쓰세요. 태그는 의미를 담고, 속성은 모양일 뿐이에요.