System siatek to najbardziej niedoceniane narzędzie projektanta: niewidoczna konstrukcja, dzięki której katalog, książka czy strona WWW tworzą spójną całość.
Poniżej metoda krok po kroku, którą przejdziesz w kwadrans, korzystając z naszych bezpłatnych narzędzi. Każdy krok ma link otwierający narzędzie z gotowymi ustawieniami z tego przykładu: katalogu A4.
Krok 1. Format i medium
Zacznij od pytania, gdzie projekt będzie oglądany: druk czy ekran, A4 czy telefon, w ręku czy z odległości. Format wyznacza ramy dalszych decyzji: proporcje strony, możliwe marginesy, szerokość pola składu i zakres sensownych podziałów kolumnowych. Sama liczba kolumn wynika dopiero z rodzaju treści, stopnia pisma, kroju i oczekiwanej miary wiersza.
Jednostki dobierasz do medium: w druku najczęściej milimetry i punkty, w projektach ekranowych jednostki CSS, takie jak px, rem, em czy ch.
Otwórz generator siatek z formatem A4
Krok 2. Marginesy: kanon albo świadoma decyzja
Marginesy wyznaczają pole składu, czyli prostokąt, w którym mieści się tekst. Masz tu dwie drogi: sięgnąć po gotowy kanon albo zdecydować samodzielnie, kierując się przeznaczeniem publikacji.
Kanon to nie jedna liczba, tylko zestaw trzech reguł proporcjonalnych. Po pierwsze, wymiary marginesów są ułamkami wymiarów strony, a nie wartościami w milimetrach, więc ta sama recepta działa na każdym formacie. Po drugie, marginesy rosną w stałej kolejności: najwęższy jest wewnętrzny, potem górny, dalej zewnętrzny, najszerszy dolny. Po trzecie, w konstrukcji Van de Graafa pole składu zachowuje proporcję strony, przez co powtarza jej kształt w mniejszej skali. Zapis 2:3:4:6 daje ten sam efekt tylko na stronie o proporcji 2:3; na A4 pole składu ma już inną proporcję niż strona.
Te reguły nie zostały wymyślone przy biurku, choć warto być ostrożnym z ich rodowodem. W dawnych rękopisach i wczesnych drukach proporcje pola składu bywają uderzająco regularne, a w połowie XX wieku zaproponowano konstrukcje geometryczne, oparte na przekątnych strony i rozkładówki, które te układy odtwarzają. Są to rekonstrukcje: nie wiemy na pewno, czy dawni twórcy posługiwali się dokładnie takim wykreślaniem. Opisał je i spopularyzował Jan Tschichold w eseju o proporcjach książki z połowy lat pięćdziesiątych. Praktyczne uzasadnienie jest proste: rozkładówkę oglądamy jako jedną całość, więc marginesy wewnętrzne, stykające się przy grzbiecie, sumują się optycznie i muszą być węższe. Dolny margines jest najszerszy, bo strona wizualnie osiada, a przy nim spoczywają kciuki czytelnika.
Van de Graaf dzieli stronę na dziewiątki: margines wewnętrzny to 1/9 szerokości, zewnętrzny 2/9, górny 1/9 wysokości, dolny 2/9. Dla strony o proporcji 2:3 daje to relację 2:3:4:6 w kolejności wewnętrzny, górny, zewnętrzny, dolny, czyli układ opisany przez Tschicholda. Oba przepisy nie są więc niezależne: na stronie 2:3 prowadzą do tego samego rozwiązania, a nasz przykład 160 × 240 mm ma dokładnie tę proporcję. Efekt to szerokie, oddychające marginesy i pole składu w proporcji strony.
Druga droga to decyzja, czyli własne marginesy dobrane do zadania. Sięgasz po nią wtedy, gdy publikacja nie jest książką do dłuższego czytania: w katalogu, ulotce, raporcie czy projekcie ekranowym kanon zwykle oddaje zbyt dużo powierzchni. Decyzja nie oznacza jednak dowolności, bo wynika z konkretnych przesłanek: ile treści musi się zmieścić na stronie i czy zależy Ci na oszczędności papieru; w jaki sposób publikacja będzie oprawiona, bo oprawa klejona zabiera część marginesu wewnętrznego i trzeba go poszerzyć; czy grafiki schodzą do krawędzi, co wymaga spadu i zmienia wrażenie szerokości marginesu; jakie elementy stałe muszą się zmieścić na stronie, od paginacji i żywej paginy po kod kreskowy czy stopkę prawną; wreszcie jak czytelnik trzyma publikację i gdzie w związku z tym nie powinno być treści.
Praktyczna wskazówka: zamiast wpisywać okrągłe 20 mm, wybierz proporcję i trzymaj się jej konsekwentnie w całym projekcie. W naszym przykładzie katalogu A4 decydujemy się na marginesy symetryczne 16,8 mm, przy których pole składu zajmuje około 70 do 75 procent powierzchni strony. Generator pokazuje ten udział na bieżąco, więc od razu widzisz, ile miejsca oddajesz na światło, a ile zostaje na treść.
Zobacz kanon Tschicholda na rozkładówce książki 160 × 240
Krok 3. Interlinia, czyli jednostka siatki
Najważniejsza decyzja w całym procesie: interlinia tekstu podstawowego staje się jednostką siatki bazowej. Tekst 10 pt na interlinii 12 pt oznacza siatkę co 12 pt, czyli 4,233 mm. Od tej chwili wszystko, co ma wysokość, liczymy w liniach: pole składu, moduły, obrazy, odstępy.
Dzięki temu wiersze w sąsiednich kolumnach zachowują wspólny rytm, a przy konsekwentnym składzie recto i verso linie tekstu po obu stronach kartki wypadają na tych samych wysokościach, co ogranicza wizualny chaos powodowany przez prześwitywanie cienkiego papieru.
Narzędzie dopasowuje pole składu do pełnej liczby linii na dwa sposoby, do wyboru. Pierwszy przenosi nadmiar wysokości do marginesu dolnego i pokazuje, o ile go powiększa. Drugi zostawia marginesy nietknięte, co jest ważne przy kanonach, i minimalnie koryguje interlinię. Gdy do wypełnienia pola brakuje co najmniej jednej linii, narzędzie podpowiada liczby wierszy, które zmieszczą się bez reszty.
Krok 4. Kolumny i miara wiersza
Liczba kolumn wynika z treści, nie z mody. Dla tekstu ciągłego warto zwykle celować w 45 do 75 znaków w wierszu, z wartością środkową w okolicach 66, a korektę wprowadzić zależnie od kroju, stopnia pisma i charakteru publikacji. Wąskie łamy magazynowe bywają wyraźnie krótsze i przy 35 do 50 znakach potrafią działać bardzo dobrze.
Dwanaście wąskich kolumn to nie dwanaście łamów tekstu, lecz elastyczny podział: tekst zajmuje 3, 4 lub 6 z nich, obrazy dowolną liczbę. Narzędzie szacuje liczbę znaków w wierszu dla jednej kolumny, przyjmując średnią szerokość znaku równą 0,47 firetu, i podpowiada, ile kolumn trzeba połączyć, żeby wejść w zakres wygodny do czytania. To przybliżenie: konkretny krój może dać wynik o kilka znaków inny.
Krok 5. Pola: moduły w pełnych liniach
Moduły powstają na przecięciu kolumn i rzędów: podział pola składu na wiersze zamienia kolumny w siatkę pól. Spotyka się układy 8, 20 czy 32 modułów, ale to przykłady, a nie kanon; równie dobrze działa 12 albo 24. Reguła praktyczna brzmi: wysokości pól oraz odstępy między nimi warto wyrażać całkowitą liczbą jednostek siatki bazowej. Klasycznym i bardzo wygodnym rozwiązaniem jest odstęp równy jednej linii, choć spotyka się też dwie i więcej. Wtedy obraz zajmujący dwa pola w pionie kończy się na tej samej wysokości, co tekst obok.
Otwórz siatkę 20-polową (4 × 5) na A4
Krok 6. Obrazy na siatce
Obraz powinien zajmować całe pola: 1 × 1, 2 × 1, 2 × 2, 3 × 2 i tak dalej. Krawędzie obrazu powinny konsekwentnie odnosić się do granic modułów i do rytmu wierszy. Najpewniejszym odniesieniem jest granica modułu: dolna krawędź obrazu pokrywa się z dolną krawędzią pola, a więc z linią bazową ostatniego wiersza, który się w nim mieści. W klasycznych opracowaniach spotyka się dodatkowo wyrównanie górnej krawędzi do wysokości wersalików sąsiedniego tekstu; wybierz jedną konwencję i trzymaj się jej w całej publikacji.
Tabela rozpiętości w generatorze podaje wymiary i proporcje bloków obejmujących do czterech kolumn i czterech rzędów, czyli szesnaście najczęstszych kadrów. Fotograf lub retuszer wie dzięki temu, jak kadrować, zanim zacznie się skład.
Krok 7. Typografia na tej samej siatce
Siatka bez pisma jest pusta. Przycisk Dobierz pismo do tej siatki przenosi interlinię, stopień i szerokość kolumny do narzędzia typograficznego, które buduje pełną hierarchię: podpis, tekst, lead i trzy poziomy nagłówków.
Interlinie poszczególnych poziomów hierarchii odnoszą się do modułu bazowego: mogą być jego całkowitą albo, w bardziej elastycznej siatce, połówkową wielokrotnością. Podział na półlinie to współczesne rozszerzenie klasycznego modelu, w którym unikano połówek; w naszym narzędziu tekst i podpisy trzymają pełne linie, a lead i nagłówki mogą stanąć na półlinii. Narzędzie liczy same interlinie i nie pilnuje wysokości całych bloków ani odstępów przed nimi i po nich; o powrót na pełną linię musi zadbać projektant.
Otwórz narzędzie typograficzne z ustawieniami tego katalogu (łam sześciokolumnowy)
Krok 8. Sprawdzenie i eksport
Na koniec zadaj sobie cztery pytania: czy hierarchia nagłówków jest wyraźnie widoczna, czy najmniejszy tekst pozostaje komfortowo czytelny w docelowej technologii, czy tekst ciągły ma właściwą miarę i czy elementy konsekwentnie wracają do rytmu siatki.
Narzędzie ostrzega, gdy podpis schodzi poniżej 7 pt w druku albo 12 px na ekranie. To wartości ostrzegawcze przyjęte w kalkulatorze, a nie normy: 7 pt bywa świetnie czytelne w kroju o dużej wysokości x na dobrym papierze i zawodzi w delikatnym piśmie na papierze chłonnym, a wytyczne dostępności stron nie ustalają minimalnego stopnia pisma: wymagają powiększenia tekstu do 200 procent bez utraty treści i poprawnego przepływu układu przy szerokości 320 pikseli CSS.
Gdy wszystko się zgadza, wyeksportuj siatkę jako zestawienie dla programu DTP, PDF w skali 1:1 (podkład i wydruk kontrolny), SVG albo CSS Grid ze zmiennymi dla strony WWW. Link do konfiguracji możesz wysłać współpracownikom: otworzy narzędzie dokładnie w tym stanie.
Gdy projekt będzie oglądany z daleka
Plakat, ściana stoiska czy baner podlegają innej logice: o czytelności decyduje kąt widzenia, a nie stopień pisma. Dla prostego, kontrastowego napisu orientacyjną wysokość wersalika można wyliczyć właśnie z kąta widzenia; przy założeniu 15 minut kątowych daje to około 44 mm z 10 m i około 13 cm z 30 m. W realnym projekcie warto tę wartość zwiększyć, zwłaszcza gdy odbiorca jest w ruchu, napis widzi tylko przez chwilę albo kontrast i oświetlenie są gorsze. Wpływ mają też krój, grubość kresek i wysokość montażu.
Podsumowanie
Dobra siatka nie jest ozdobą, tylko decyzją podjętą raz i konsekwentnie utrzymaną: format, marginesy, interlinia jako jednostka, kolumny, pola. Cała reszta pracy staje się wtedy szybsza, a projekt wygląda spójnie także wtedy, gdy dokłada się do niego kolejne strony.
