산세리프

<div class="stage">
  <span class="word" id="w">Sans-serif</span>
  <div class="readout" id="r">sans-serif — 획 끝이 평평, feet 없음</div>
</div>

.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}

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);