Чем serif, sans-serif и system-ui отличаются?

Question

Accepted Answer

## О чём речь

Это **generic font families** (и ключевое слово) — запасные семейства, если конкретный шрифт не загрузился.

## Различия

- **`serif`** — с засечками (Times-подобные). Традиционно для длинного текста в печати; в UI реже.
- **`sans-serif`** — без засечек (Arial/Helvetica-подобные). База большинства интерфейсов.
- **`system-ui`** — UI-шрифт платформы (San Francisco, Segoe UI и т.д.). Выглядит «нативно».

```css
body {
  font-family: "Inter", system-ui, sans-serif;
}
article.longform {
  font-family: "Source Serif", Georgia, serif;
}
```

Есть ещё `ui-sans-serif`, `ui-monospace` и т.п. — уточняют роль.

## Итог

`serif`/`sans-serif` — форма глифов; `system-ui` — шрифт ОС. В стеке ставьте конкретный бренд-шрифт первым, generic — в конце.