✏️ Projekt wizualny

Typografia i copy

Zasady typografii i UX writingu. Jak pisać czytelnie i budować hierarchię tekstu w interfejsach.

Wszystkie zasady

01

Czytelne copy Clear Copy

Tekst w interfejsie powinien być krótki, jednoznaczny i napisany prostym językiem. Każde zdanie powinno mieć jeden cel. Unikaj zdań wielokrotnie złożonych, strony biernej i żargonu. Użytkownik skanuje tekst, nie czyta go jak książkę.

Tip: Przeczytaj każdy tekst w swoim interfejsie na głos. Jeśli musisz wziąć oddech w środku zdania, jest za długie. Jeśli musisz go przeczytać dwa razy, jest za skomplikowane. Skracaj i upraszczaj.
02

Mikrocopy i komunikaty Microcopy and Messages

Mikrocopy to krótkie teksty przy przyciskach, formularzach i komunikatach: placeholder w inputcie, tekst na przycisku, tooltip, komunikat błędu. Dobry mikrocopy wyjaśnia, co się stanie i pomaga podjąć decyzję. Zły jest pustym frazesem lub technicznym żargonem.

Tip: Każdy przycisk powinien zaczynać się od czasownika: 'Zapisz zmiany', 'Wyślij wiadomość', 'Dodaj do koszyka'. Unikaj ogólników: 'OK', 'Dalej', 'Submit'. Użytkownik powinien wiedzieć, co się stanie, zanim kliknie.
03

Hierarchia typograficzna Typographic Hierarchy

Hierarchia typograficzna kieruje wzrokiem użytkownika od najważniejszych informacji do szczegółów. Nagłówki są duże i grube, podtytuły mniejsze, tekst akapitu jeszcze mniejszy. Bez hierarchii użytkownik nie wie, od czego zacząć czytanie i wszystko wygląda tak samo ważne.

Tip: Użyj maksymalnie 3-4 poziomów hierarchii: nagłówek (24-32px bold), podtytuł (18-20px semibold), treść (14-16px regular), drobny tekst (12px). Każdy kolejny poziom powinien być wyraźnie mniejszy od poprzedniego.
04

Ograniczenie krojów pisma Typeface Limitation

Używaj maksymalnie dwóch krojów pisma w całym produkcie: jednego do nagłówków, drugiego do tekstu. Trzy lub więcej krojów rozbijają spójność wizualną i zwiększają czas ładowania strony. Jeden dobry krój z wieloma wagami (Regular, Medium, Bold) wystarczy.

Tip: Wybierz jeden krój pisma z rodziną co najmniej 4 wag (Regular, Medium, SemiBold, Bold) i użyj go w całym produkcie. Zróżnicowanie uzyskasz przez wagę, rozmiar i kolor, nie przez mieszanie krojów.
05

Spójność terminologii Terminology Consistency

Każde pojęcie w interfejsie powinno mieć jedną nazwę w całym produkcie. Jeśli w jednym miejscu piszesz 'koszyk', a w innym 'torba zakupowa', użytkownik nie wie, czy to to samo. Dotyczy to przycisków, nagłówków, komunikatów, helptekstów i dokumentacji.

Tip: Stwórz słowniczek produktowy: listę kluczowych terminów i ich jedynych prawidłowych nazw. Np. 'Projekt' (nie 'task', nie 'zadanie', nie 'projekt roboczy'). Udostępnij go całemu zespołowi i traktuj jak źródło prawdy.
06

Responsywna typografia Responsive Typography

Tekst powinien być czytelny na każdym urządzeniu bez zoomowania. Na mobile nagłówki muszą być mniejsze niż na desktopie, a długość linii nie powinna przekraczać 70-80 znaków. Zbyt długie linie utrudniają śledzenie tekstu, a zbyt krótkie rozbijają czytanie.

Tip: Ustaw max-width na kontenerze tekstu: 680-720px na desktopie (65-75 znaków na linię). Na mobile użyj clamp() do płynnego skalowania: font-size: clamp(16px, 4vw, 20px) dla tekstu akapitu.

Powiązane kategorie

Chcesz wiedzieć więcej?

Skonfiguruj skalę typograficzną w Figma

Sprawdź DS Darmowe Narzędzia →