Design Atlas
한국어
Aa Typography

Serif

세리프

Typefaces with small feet — finishing strokes — at the ends of letterforms. Rooted in print tradition, often credited with helping body-text legibility.

Also known as: 명조 계열
···
html
<div class="stage">
  <div class="frame">
    <span class="word">Serif</span>
    <div class="spot" id="spot"></div>
  </div>
  <div class="readout">획 끝의 작은 "발"(foot) — 세리프</div>
</div>
css
.frame{position:relative;display:inline-block}
.word{font:800 22vmin/1 Georgia,'Times New Roman',serif;color:var(--fg)}
.spot{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;border:2px solid var(--accent-2);box-shadow:0 0 0 5px color-mix(in srgb, var(--accent-2) 16%, transparent);transition:left .8s ease,top .8s ease;pointer-events:none}
.readout{margin-top:16px;font:12px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
js
const spot = document.getElementById('spot');
const positions = [[6,80],[26,84],[44,80],[62,16],[80,10]];
let i = 0;
function apply(){
  const p = positions[i];
  spot.style.left = 'calc(' + p[0] + '% - 7.5%)';
  spot.style.top = 'calc(' + p[1] + '% - 7.5%)';
  i = (i + 1) % positions.length;
}
apply();
setInterval(apply, 900);

Serifs likely trace back to chisel marks in Roman stone-carved capitals. Because the serif "finishes" each stroke, it's argued to create a subtle horizontal thread connecting letters, aiding reading on low-resolution media like print.

Broad families: old-style (Garamond-like, low stroke contrast), transitional (Times-like), modern (Didot-like, extreme contrast), and slab serif (Rockwell-like, thick and blocky feet). On the web, `Georgia` and `'Times New Roman'` ship with most operating systems, so you can use serif type with no font loading at all.

Common for body text in books, magazines, and editorial sites. It was once considered worse on low-DPI screens than sans-serif, but reads fine on today's retina displays.

When to use

Good for long-form editorial and blog body text, and brands wanting a sense of trust or tradition. For small, dense UI labels and buttons, sans-serif is the safer default.