디자인 아틀라스
EN
Aa 타이포그래피

강조점 (방점)

Text emphasis marks

글자 옆이나 위에 작은 점·동그라미를 찍어 강조하는 동아시아 전통 표기법. CSS `text-emphasis`가 이걸 그대로 구현합니다.

다른 이름: 방점圈点Emphasis dots
···
html
<div class="stage">
  <p class="line" id="line">중요한 부분</p>
  <div class="readout">text-emphasis-style: <span id="style">dot</span></div>
</div>
css
.stage{display:grid;justify-items:center;gap:16px}
.line{margin:0;font:700 clamp(20px,7vmin,34px)/2.4 -apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg);text-emphasis-color:var(--accent);-webkit-text-emphasis-color:var(--accent)}
.readout{font:11px ui-monospace,Menlo,monospace;color:var(--muted)}
#style{color:var(--accent);font-weight:700}
js
const line = document.getElementById('line');
const label = document.getElementById('style');
const styles = ['dot', 'circle', 'double-circle', 'triangle', 'sesame'];
let i = 0;
function apply(){
  const s = styles[i % styles.length];
  line.style.textEmphasisStyle = s;
  line.style.webkitTextEmphasisStyle = s;
  label.textContent = s;
  i++;
}
apply();
setInterval(apply, 1300);

훈민정음 관련 옛 문헌은 글자 옆에 점을 찍어 소리의 높낮이(성조)를 표시했는데, 이를 방점이라 부릅니다. 중국어·일본어 문헌에서도 강조하고 싶은 구절 옆에 점(圈点, 방점)을 찍는 관행이 있었습니다. 서양의 이탤릭체·볼드체가 하던 "강조"의 역할을 동아시아 세로쓰기 전통에서는 옆에 찍는 점이 대신한 셈입니다.

밑줄이 서양 텍스트에서 자연스럽듯, 동아시아 조판 전통에서는 강조점이 자연스럽습니다. 밑줄은 한글·한자처럼 획이 촘촘한 글자에서 받침·삐침과 시각적으로 겹쳐 보이기 쉬운 반면, 글자 위쪽의 점은 그런 간섭이 적습니다.

CSS `text-emphasis-style`은 `dot`(●), `circle`(○), `double-circle`, `triangle`(▲), `sesame`(방점과 닮은 모양) 같은 값을 지원하고, `text-emphasis-position`으로 위/아래(세로쓰기에서는 좌/우) 위치를, `text-emphasis-color`로 점의 색을 강조 색상과 다르게 줄 수 있습니다. `text-emphasis`는 이 세 속성의 단축형입니다.

언제 쓰나

한글·한자 텍스트에서 밑줄 대신 짧은 구절을 강조하고 싶을 때. 라틴 문자에는 이탤릭·볼드가 여전히 더 익숙한 강조 수단입니다.