Design Atlas
한국어
Aa Typography

Sans-serif

산세리프

Typefaces without finishing feet — stroke widths stay relatively uniform end to end. "Sans" is French for "without."

Also known as: 고딕 계열
···
html
<div class="stage">
  <span class="word" id="w">Sans-serif</span>
  <div class="readout" id="r">sans-serif — 획 끝이 평평, feet 없음</div>
</div>
css
.word{font:800 15vmin/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);display:block;text-align:center;transition:font-family .3s}
.readout{margin-top:16px;font:12px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center;max-width:60vmin}
js
const w = document.getElementById('w');
const r = document.getElementById('r');
const states = [
  { family: "system-ui,-apple-system,'Segoe UI',sans-serif", label: 'sans-serif — 획 끝이 평평, feet 없음' },
  { family: "Georgia,'Times New Roman',serif", label: 'serif (비교) — 획 끝에 작은 발(foot)' },
];
let i = 0;
function apply(){
  const s = states[i];
  w.style.fontFamily = s.family;
  r.textContent = s.label;
  i = (i + 1) % states.length;
}
apply();
setInterval(apply, 1800);

Early 19th-century advertising called these "grotesque" for looking strange, but 20th-century Swiss Style (Helvetica, Univers) turned sans-serif into shorthand for neutral, modern type.

Without serif ornamentation, strokes stay legible at small sizes and low resolutions, making sans-serif the safe default for screen UI, body copy, and labels alike. This site's own body font (Pretendard), macOS's San Francisco, Android's Roboto, and Windows's Segoe UI are all sans-serif.

It has fewer clearly bounded eras than serif, but is often split by feel into humanist (traces of handwriting), geometric (built from circles and lines), and grotesque (in between).

When to use

A safe default for almost all screen text used at varied, often small sizes — UI, body copy, tables, buttons.