← Индекс руу буцах

Типограф

Font family — 1-2, дээд тал нь 3

Үүнээс олон болбол сайт «эвлүүлэг» шиг харагддаг.

Type scale — 5-8 шатлал

Дур мэдэн px өгөхийн оронд modular scale: суурь хэмжээг тогтмол харьцаагаар үржүүлнэ.

Scale Харьцаа Хэрэглээ
Minor third 1.2 Dashboard, data-нягт UI
Major third 1.25 Ерөнхий вэб апп
Perfect fourth 1.333 Маркетинг, landing page
Golden ratio 1.618 Том hero-той editorial сайт

Жишээ: base 16px × 1.25 → 12.8 → 16 → 20 → 25 → 31 → 39 → 49. Санамж: Tailwind-ийн default scale (12/14/16/18/20/24/30/36/48/60/72) нь modular биш, гараар сонгосон утгууд — modular scale хэрэгтэй бол @theme-д өөрөө тодорхойл.

Default (эргэлзвэл): апп/dashboard 1.2 @ 14px, маркетинг/контент 1.25 @ 16px; нэг бүтээгдэхүүнд ≤8 хэмжээ ашиглана. gerege-ui-ийн бодит scale 08-design-tokens.md-д.

Font-size-ийн нэгж: px биш rem

Элемент тус бүрийн түгээмэл утгууд

Хэрэглээ Хэмжээ Тайлбар
Caption, badge, table header 12px (0.75rem) Доод хязгаар — бүх UI текстэд; ганц үл хамаарах: chart-ийн tick label 11px (12-data-viz.md)
Secondary/UI text, dashboard body 13-14px Data-нягт UI-ийн ажлын морь
Body (контент сайт) 16-18px Урт текстэд 16-аас доошгүй
H4 / card title 16-18px, 600 weight  
H3 20-24px  
H2 24-31px  
H1 / page title 31-39px Апп дотор 24-30px хангалттай
Hero (landing) 48-72px clamp()-тай fluid

Апп UI (13-14px суурь) ба контент/маркетинг (16-18px суурь) хоёр өөр «горим» — нэг проект дотор зэрэгцэж болно (жишээ: admin 14px, landing 16px).

iOS 16px-ээс жижиг input-д автоматаар zoom хийдэг тул форм дээр заавал 16px+.

Fluid typography — clamp()

h1 { font-size: clamp(2rem, 1rem + 3vw, 3.5rem); }

Иерархи нь size-ээс гадна weight + color

Бүх ялгааг хэмжээгээр гаргах гэж 10 шатлал үүсгэхгүй. Ижил 14px текст 400/muted vs 600/foreground байхад л хоёр өөр түвшин болно. Текстийн өнгөний 3 түвшин: foreground / muted / subtle.

Line-height ба мөрийн урт

Letter-spacing / optical size

Ерөнхий зөвшилцөл

1 font family (+mono) · 6-8 size · 3 weight (400/500/600) · 2-3 color түвшин — үүнээс цомхон систем бараг бүх UI-д хүрэлцдэг.

Албан ёсны стандарт гэвэл WCAG л бий (хэмжээ биш contrast + 200% zoom шаарддаг). Material Design (13 түвшин), Apple HIG (11 түвшин) нь convention; практикт 6-8 л ашиглагддаг.

Шрифт ачаалалт

@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
body { font-family: Geist, "Geist Fallback", Inter, system-ui, sans-serif; }

Утгыг гараар биш — Fontaine / Capsize / next/font автоматаар бодно.

Кирилл: сонгосон шрифт бүр кирилл (U+0400-04FF) + монгол-тусгай Ө (U+04E8/04E9), Ү (U+04AE/04AF) үсгийг агуулж байгааг заавал шалга. Geist-д бий (cyrillic-ext subset, 2026-08-20 шалгасан) — гэхдээ subset-ээ ачаалахаа мартвал fallback руу унана; зарим display font-д огт байхгүй. Дутуу бол browser өөр шрифтээс нөхөж «холимог» харагдана. Дэлгэрэнгүй ба жагсаалт: 09-localization-mn.md-г үз.

Эх сурвалж