Fundamenty Typografia

Fundamenty

Typografia

Krój Inter (neo-grotesk w duchu Pentagram), self-hosted na licencji OFL. Każdy stopień niesie własną interlinię i tracking – im większy stopień, tym ciaśniej. Próbki renderują się realnymi tokenami.

Krój – Inter

Jeden krój na cały serwis, pięć wag. Optical sizing włączone (font-optical-sizing: auto). Polskie znaki obsługuje osobny krój latin-ext.

ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ

0123456789 & @ # % – – „" » «

Wagi

Nagłówki = 600 (Semibold), tekst = 400 (Regular), lead i etykiety = 500 (Medium).

Sweet Lava 300 Light rezerwa

Sweet Lava 400 Regular tekst body

Sweet Lava 500 Medium lead, H4, etykiety

Sweet Lava 600 Semibold nagłówki, przyciski

Sweet Lava 700 Bold akcenty inline

Skala typograficzna

Stopnie nazwane (text-display … text-xs) z companion-zmiennymi Tailwind v4: każdy stopień to rozmiar + interlinia + tracking + waga.

Projektujemy i budujemy produkty cyfrowe

Display

text-display

Token: text-display
Rozmiar: clamp(2rem, 4.2vw, 3.25rem)
Waga: 600
Interlinia: 1.08
Tracking: −0.021em
Zastosowanie: H1 baneru (hero)

Tytuł strony lub artykułu

Nagłówek H1

text-h1

Token: text-h1
Rozmiar: clamp(2rem, 4.2vw, 3.25rem)
Waga: 600
Interlinia: 1.08
Tracking: −0.021em
Zastosowanie: Tytuł podstrony / artykułu

Nagłówek sekcji

Nagłówek H2

text-h2

Token: text-h2
Rozmiar: clamp(1.6rem, 2.8vw, 2.25rem)
Waga: 600
Interlinia: 1.15
Tracking: −0.018em
Zastosowanie: Nagłówek sekcji

Podsekcja treści

Nagłówek H3

text-h3

Token: text-h3
Rozmiar: clamp(1.2rem, 1.9vw, 1.5rem)
Waga: 600
Interlinia: 1.3
Tracking: −0.011em
Zastosowanie: Podsekcja / nagłówek karty

Mniejszy nagłówek

Nagłówek H4

text-h4

Token: text-h4
Rozmiar: clamp(1.06rem, 1.4vw, 1.25rem)
Waga: 500
Interlinia: 1.35
Tracking: −0.006em
Zastosowanie: Mniejsza podsekcja

Zdanie wprowadzające, które rozwija nagłówek. Wyróżnia się wagą (medium), nie kolorem.

Lead

text-lead

Token: text-lead
Rozmiar: 1rem · 16 px
Waga: 500
Interlinia: 1.6
Tracking: –
Zastosowanie: Akapit wprowadzający

Tekst podstawowy strony. To w nim utrzymana jest większość treści czytanej – w jednym kolorze, różnicowanym od leadu wyłącznie wagą.

Body

text-base

Token: text-base
Rozmiar: 1rem · 16 px
Waga: 400
Interlinia: 1.5 · 1.75 w .prose
Tracking: normal
Zastosowanie: Tekst podstawowy

Tekst pomocniczy – np. data publikacji albo podpis.

Small / meta

text-sm · text-muted

Token: text-sm · text-muted
Rozmiar: 0.875rem · 14 px
Waga: 400
Interlinia: 1.4
Tracking: normal
Zastosowanie: Podpisy, daty

Etykieta sekcji

Label / eyebrow

text-xs · uppercase

Token: text-xs · uppercase
Rozmiar: 0.75rem · 12 px
Waga: 500
Interlinia: –
Tracking: 0.14em
Zastosowanie: Etykieta nad nagłówkiem

html

<h1 class="text-h1">Tytuł</h1>
<p class="text-lead">Akapit wprowadzający.</p>
<p class="text-base">Tekst podstawowy.</p>
<span class="text-xs font-medium tracking-[0.14em] text-muted uppercase">Etykieta</span>

W kontekście

Te same style złożone tak, jak występują na stronie – po lewej etykieta, po prawej element.

label

Studio design & development

display

Projektujemy i budujemy produkty cyfrowe

lead

Jesteśmy studiem design & development z Krakowa – z Tobą od pierwszego szkicu aż po wdrożenie.

body

Strony, sklepy, aplikacje i identyfikacje wizualne: projekt wraz z kodem powstają w jednym zespole, więc nic nie ginie po drodze.

Treści długie (.prose)

Artykuły renderujemy w kontenerze .prose: max 74ch szerokości, interlinia 1,75, własne style nagłówków, list, tabel, cytatów i linków.

Nagłówek w treści

Akapit w klasie .prose ma komfortową interlinię i ograniczoną długość wiersza. Link jest podkreślony z offsetem.

Lista punktowana z odstępami,
czytelnym wcięciem markera.

Cytat z lewą obwódką w kolorze mięty i kursywą.

Krój – Inter #

Wagi #

Skala typograficzna #