Tipografi

Merid metinleri Geist ile; kodu, etiketleri ve token adlarını Geist Mono ile dizer. İkisi de variable font olarak pakete dahildir. Rakamlar her yerde tabular'dır; böylece tablolarda sayılar hizalanır, fiyatlar değiştikçe kaymaz.

Ölçek

Boyutlar token'dır: boyut için --mrd-text-*, satır yüksekliği için eşleşen --mrd-leading-* ve gerektiği yerde harf aralığı için --mrd-tracking-*.

Varsayılan olarak net

--mrd-text-displayclamp(40px, 6vw, 72px) / 1.05 / -0.04emHero başlığı

Varsayılan olarak net

--mrd-text-h2clamp(30px, 3.6vw, 40px) / 1.1 / -0.03emBölüm başlığı

Varsayılan olarak net

--mrd-text-h320px / 1.3 / -0.015emKart başlığı

Varsayılan olarak net

--mrd-text-lg18px / 1.6Giriş paragrafı

Varsayılan olarak net

--mrd-text-md16px / 1.6Gövde metni

Varsayılan olarak net

--mrd-text-sm15px / 1.5Buton, input, navigasyon, liste

Varsayılan olarak net

--mrd-text-xs14px / 1.45Küçük buton, etiket, pill

Varsayılan olarak net

--mrd-text-2xs13px / 1.4Meta, yardım metni, notlar

Varsayılan olarak net

--mrd-text-3xs12px / 1.3Badge, açıklama yazısı

Display ve bölüm boyutları clamp() kullanır ve viewport'la birlikte ölçeklenir. Yukarıdaki örnekler bunları temsili bir masaüstü boyutunda gösterir.

Ağırlıklar

400 (--mrd-weight-regular): gövde metni.
500 (--mrd-weight-medium): tüm arayüz metinleri; butonlar, etiketler, navigasyon, tab'lar.
600 (--mrd-weight-semibold): başlıklar ve vurgu gereken sayılar.

700 ağırlığı hiç kullanılmaz. 600 yeterli kontrastı vermiyorsa ağırlık yerine tonu değiştir.

Kurallar

Büyük başlıklar sıkıdır: negatif harf aralığı ve 1'e yakın satır yüksekliği. Gövde metni 1.6 ile ferahtır.
Başlıklar text-wrap: balance kullanır; böylece kısa başlıklar son satırda tek bir kelime bırakmaz.
Okuma genişliğini --mrd-prose (720px) veya altında tut.
Hiyerarşi için üç metin tonunu kullan: başlıklar için --mrd-ink, metin için --mrd-body, meta için --mrd-muted.

Font stack'leri

css

--mrd-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--mrd-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;