--- id: identyfikacja-typografia title: "Typografia" section: identyfikacja language: pl version: "2026.1" status: approved updated_at: "2026-10-06" url: https://refindi-guidelines.pages.dev/pl/guidelines/identyfikacja/typografia markdown_url: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/typografia.md --- # Typografia > Krój Satoshi w komunikacji cyfrowej, hierarchia i interlinia tekstu, wyrównanie oraz granica między krojem tekstu a krojem logotypu. Korzystaj przy projektowaniu stron, interfejsów i materiałów z tekstem. Tekst Refindi ma być przede wszystkim czytelny — zasada z brandbooka brzmi „czytelność = funkcjonalność”: dobrze złożony tekst informuje, prowadzi i nie przeszkadza. Obecny system cyfrowy opiera się na jednym kroju — Satoshi — w kilku grubościach. Kroje z brandbooka 2025 (Kumbh Sans, Inter) są historyczne, a Mazzard H żyje wyłącznie w logotypie. ## Krój **Satoshi** (Fontshare) to jedyny krój tekstowy witryny. Fakty z repozytorium `refindi-concierge-web`: - import: `src/index.css`, linia 2 — `https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap`; `index.html` ma `preconnect` do `api.fontshare.com` i `cdn.fontshare.com`; - wagi ładowane: 300, 400, 500, 700, 900; - rodziny w `tailwind.config.ts`: `sans`, `heading` i `body` = `["Satoshi", "sans-serif"]`; zmienna `--font-family: 'Satoshi', sans-serif` w `src/index.css`; - w repo nie ma lokalnych plików fontu (`public/fonts` nie istnieje) — font pochodzi z CDN. **Mazzard H Semibold** — krój, na którym narysowano logotyp. Nie jest dystrybuowany i nie służy do składu (zob. *Logo*). Obowiązujące reguły: - **[MUSI]** W komunikacji cyfrowej — witryna, interfejsy, materiały marketingowe online — używaj kroju Satoshi. _Zakres: digital._ `type-font-01` (źródło: witryna (repo)) - **[NIE POWINNO]** Nie używaj Kumbh Sans ani Inter w nowych materiałach — to kroje poprzedniego systemu. _Zakres: wszystkie media._ `type-font-02` (źródło: witryna (repo)) - **[NIE WOLNO]** Mazzard H Semibold występuje wyłącznie w pliku logo — nie składaj nim nagłówków, tekstu ani elementów UI. _Zakres: wszystkie media._ `type-font-04` (źródło: PDF s. 40) **Błędnie: Nagłówek złożony krojem logotypu.** Nagłówek kampanii złożony Mazzard H, żeby „pasował do logo” — krój logotypu nie jest krojem tekstowym marki. ## Hierarchia Wartości odczytane z kodu stron głównych (stan repo `e7d7db44`): | Element | Wielkość | Grubość | Interlinia / tracking | Kolor | Źródło | |---|---|---|---|---|---| | H1 hero, strona główna | 30 → 36 → 48 px (mobile → desktop) | 700 | `leading-tight`, `tracking-tight` | #292929, akcent #FF9E6D | `src/index.css` (h1), `src/pages/NewB2C.tsx` | | H1 hero, /dla-biznesu | 37 → 44 → do 66 px | 700 | 1,05 / −0,01 em | #151515, akcent #FFAE84 | `src/pages/Business.tsx` | | Nagłówek sekcji | clamp(40 px, 10,5 vw, 55 px) lub 55 px | 700 | 1,1 | #151515 | `src/components/business/*`, `NewB2C.tsx` | | Nadtytuł | 12 px (14 px desktop) | 600 | 0,2 em, wersaliki | brzoskwinia (`text-refindi-peach`) | `NewB2C.tsx`, `Business.tsx` | | Lead pod H1 | 15 → 17 px | 500 | 1,35 | `text-muted-foreground` | `Business.tsx` | | Akapit (styl bazowy) | 15 px | 500 | 1,45 | dziedziczony | `src/index.css` (p) | | Przycisk | 14–15 px | 600 | 1,3 | biały na błękicie / #3A3A3A na #E9E8E6 | `Business.tsx`, `SiteHeader.tsx` | Skala tokenów w `tailwind.config.ts` (`hero`, `h1` 3 rem/1,05–1,1/700/−0,02 em; `h2` 2,25 rem/1,15/500; `h3` 1,5 rem/1,3/500; `body` 1 rem/1,6; `body-lg` 1,125 rem/1,6; `button` 1 rem/1,5/600; `caption` 0,875 rem/1,5) istnieje, ale nowe sekcje rzadko z niej korzystają — ujednolicenie jest otwartą kwestią. Zasada z PDF pozostaje aktualna niezależnie od kroju: hierarchia wynika z relacji wielkości. Nagłówek jest punktem odniesienia, lead i tekst główny są jego ułamkami, a odstępy rosną proporcjonalnie do layoutu. Obowiązujące reguły: - **[POWINNO]** Nagłówki składaj pogrubione (700), z lekko zawężonym światłem (−0,01 do −0,02 em) i ciasną interlinią ok. 1,05–1,15. _Zakres: digital._ `type-hierarchy-01` (źródło: witryna (repo); PDF s. 53) - **[MOŻNA]** Nad nagłówkiem sekcji możesz postawić nadtytuł: krótkie wersaliki, półgruby, szeroko rozstrzelony (0,2 em), w kolorze brzoskwiniowym. _Zakres: digital, materiały marketingowe._ `type-hierarchy-02` (źródło: witryna (repo); PDF s. 54–55) - **[POWINNO]** Hierarchię buduj wielkością i grubością, nie liczbą krojów: jeden krój, nagłówek wyraźnie większy od leadu, lead od tekstu głównego. _Zakres: wszystkie media._ `type-hierarchy-03` (źródło: PDF s. 54; witryna (repo)) **Przykład: Nagłówek hero z akcentem.** Strona główna: wyśrodkowany nagłówek h1 w Satoshi Bold, dwie linie — pierwsza w ciemnym neutralnym, druga w brzoskwini (#FF9E6D). Pod spodem pole wyszukiwania z błękitnym przyciskiem. **Przykład: Nadtytuł i nagłówek sekcji.** Mały brzoskwiniowy nadtytuł wersalikami (12 px, półgruby, rozstrzelony), pod nim duży nagłówek sekcji (40–55 px, Bold, interlinia 1,1, kolor #151515), dalej krótki lead w kolorze stonowanym. ## Interlinia Krótkie, duże teksty (nagłówki) składamy ciasno, dłuższe — luźniej. Nagłówki w kodzie mają 1,05–1,15, co odpowiada zaleceniu PDF (100–110%). Dla tekstu głównego kod stosuje 1,45–1,6, czyli więcej niż 120–140% z PDF; w przyciskach etykieta ma 1,3, a nie 100%. Do czasu decyzji trzymaj się wartości z kodu w digital i wartości z PDF w druku. ## Wyrównanie Tekst wyrównujemy do lewej i osadzamy w siatce modułowej (najczęściej 6–12 kolumn). Witryna centruje krótkie bloki wprowadzające — hero i nagłówki sekcji — ale dłuższy tekst czytamy zawsze od lewej krawędzi. Siatki opisuje temat *Kompozycja*. Obowiązujące reguły: - **[POWINNO]** Domyślnie wyrównuj tekst do lewej — nagłówki, leady i akapity — w obrębie siatki modułowej. Wyśrodkowanie stosuj w krótkich blokach: hero i nagłówkach sekcji. _Zakres: wszystkie media._ `type-align-01` (źródło: PDF s. 55; witryna (repo)) ## Historia Brandbook 2025 (s. 47–55) wskazywał: - **Kumbh Sans** jako krój główny (Bold dla h1, Medium dla h2, Regular dla tekstu; Google Fonts, wagi 300–700, licencja OFL), - **Inter** jako krój zastępczy dla e-maili, dokumentów Office i aplikacji natywnych, - wielkości w punktach dla druku (nagłówek 36–40 pt, lead 20–24 pt, tekst 14–18 pt, podpisy 8–13 pt). - claim „5-gwiazdkowa obsługa RZECZY znalezionych” składany Kumbh Sans Bold z interlinią 110% (s. 12) — w obecnym kroju interlinia claimu nie jest określona (zob. [Hasła i copy](https://refindi-guidelines.pages.dev/guidelines/content/pl/komunikacja/hasla-i-copy.md#zapis-claimu)). Te kroje i wartości nie są już normą. Zachowane zostały zasady niezależne od kroju: proporcje hierarchii, interlinia według funkcji tekstu, wyrównanie do lewej i reguła „czytelność = funkcjonalność”. ## Pliki do pobrania - **Tokeny UI — JSON** (JSON · obecny system digital; application/json; 9 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/tokeny-ui-json/tokens.json · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/tokeny-ui-json/usage.pl.md ## Powiązane tematy - Logo: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/logo.md - Kolory: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/kolory.md - Interfejsy: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/interfejsy.md - Kompozycja: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md ## Źródła i historia zmian - Brandbook PDF (06.06.2025), s. 47-51 — Font główny i zastępczy (historycznie Kumbh Sans i Inter) - Brandbook PDF (06.06.2025), s. 52-55 — Interlinia, relacje wielkości, wyrównanie - Brandbook PDF (06.06.2025), s. 40 — Mazzard H — tylko logotyp - refindi-concierge-web@e7d7db44 — src/index.css, tailwind.config.ts, src/pages/NewB2C.tsx, src/pages/Business.tsx, src/components/business/* - Wersja treści 2026.1, aktualizacja 2026-10-06. - 3 reguł(y) w statusie roboczym lub do przeglądu nie są częścią tego eksportu.