Systemy siatek: generator siatki layoutu dla druku i ekranu
Zbuduj system siatek jak w podręcznikach typografii: format strony lub ekranu, marginesy z kanonu (Van de Graaf, Tschichold) albo preset (złoty podział, modułowy, równe marginesy) albo własne, kolumny z odstępami, moduły w całych liniach bazowych, interlinia i skala typograficzna zgodna z siatką bazową. Podgląd na żywo, eksport do SVG, PDF, CSS Grid, JSON i ustawień dla programów DTP.
Gotowe ustawienia dla typowych projektów. Wybór wypełnia pola poniżej, które możesz dalej zmieniać.
Strona / ekran
Marginesy
Kanony książkowe (Van de Graaf, Tschichold) i preset złotego podziału celowo dają szerokie marginesy: pole składu to ok. 40–60% strony. Do ulotek, plakatów i ekranu wybierz marginesy symetryczne lub własne.
Kolumny i moduły
Siatka bazowa
Skala typograficzna
Wartości
Rozpiętości obrazów na siatce
Obraz zajmuje całe pola: dolna krawędź na linii bazowej, górna ok. 0,7 stopnia pisma nad linią bazową pierwszego wiersza (wysokość wersalików). Odstęp między polami = jedna linia.
Kod i ustawienia
Czym jest system siatek i po co go budować?
System siatek to niewidzialna konstrukcja layoutu: marginesy wyznaczają pole składu, kolumny i odstępy porządkują szerokości, moduły porządkują wysokości, a siatka bazowa (interlinia) sprawia, że tekst w sąsiednich kolumnach i na sąsiednich stronach stoi w tych samych liniach. Dobrze zbudowana siatka skraca projektowanie, ujednolica publikację i pozwala łączyć druk z ekranem na wspólnej logice proporcji.
Kanony marginesów (Van de Graaf, Tschichold) i preset złotego podziału
Kanon Van de Graafa to konstrukcja geometryczna dzieląca stronę na dziewiąte części: margines wewnętrzny 1/9 szerokości, zewnętrzny 2/9, górny 1/9 wysokości, dolny 2/9. Pole składu ma proporcję strony. Tschichold opisał proporcje 2:3:4:6 (wewnętrzny : górny : zewnętrzny : dolny). Preset oparty na złotym podziale skaluje marginesy współczynnikiem 1,618 (1 : φ : φ : φ², od 1/12 szerokości strony); nie jest to kanon historyczny. Generator liczy te wartości dla dowolnego formatu i pozwala je poprawić ręcznie. Kanon jest punktem wyjścia, nie dogmatem.
Siatka bazowa i skala typograficzna
Interlinia tekstu podstawowego (np. 12 pt) staje się jednostką siatki bazowej: pole składu dopasowujemy do całkowitej liczby linii, moduły mają wysokość w pełnych liniach, a stopnie nagłówków ze skali (1,2 · 1,25 · 1,333 · 1,5 · 1,618) dostają interlinię będącą wielokrotnością jednostki. Dzięki temu wszystko „siedzi" na jednej siatce. Dla ekranu ta sama logika działa w pikselach (np. 8 px), z eksportem do CSS Grid i zmiennych CSS.
Słownik pojęć: siatki, skład i łam
- System siatek
- Zestaw reguł układu strony: marginesy, kolumny, moduły i siatka bazowa, które razem porządkują położenie tekstu i obrazów w całej publikacji lub serwisie.
- Skład
- Układanie tekstu i grafiki na stronie według ustalonych parametrów: formatu, marginesów, łamów, stopnia pisma i interlinii. Dawniej składanie czcionek, dziś praca w programie DTP albo w CSS.
- Pole składu
- Obszar strony wewnątrz marginesów, w którym umieszcza się tekst i obrazy. W typografii książkowej nazywany też kolumną (w znaczeniu obszaru) lub lustrem strony.
- Łam
- Pionowy pas tekstu o ustalonej szerokości (miarze); strona może mieć jeden lub więcej łamów. W projektowaniu stron WWW odpowiada mu kolumna treści.
- Kolumna siatki
- Jednostka podziału szerokości pola składu. Łam tekstu może zajmować jedną lub kilka kolumn siatki, np. 3 z 12.
- Odstęp międzyłamowy (gutter)
- Pusty pas między kolumnami lub łamami. Często ustawia się go na wartość interlinii albo jej wielokrotność, żeby siatka pozioma zgadzała się z pionową, ale ostatecznie dobiera się go do szerokości łamu i stopnia pisma.
- Marginesy
- Obszary między krawędzią strony a polem składu: górny (główkowy), dolny (stopkowy), wewnętrzny (grzbietowy) i zewnętrzny (boczny). W rozkładówce marginesy wewnętrzne stykają się w grzbiecie.
- Kanon marginesów
- Historyczna konstrukcja wyznaczająca proporcje marginesów, np. Van de Graafa (1/9 i 2/9 strony) czy Tschicholda (2:3:4:6). Preset to współczesna, umowna proporcja, nie kanon.
- Moduł (pole)
- Prostokąt powstały z przecięcia kolumny i wiersza siatki; jednostka, do której przypina się bloki tekstu i obrazy. Układ 8-, 20- czy 32-polowy to układ o takiej liczbie modułów w polu składu.
- Siatka bazowa
- Zestaw poziomych linii w odstępie równym interlinii tekstu podstawowego. Linie bazowe wierszy we wszystkich kolumnach i na sąsiednich stronach leżą na tych samych liniach.
- Linia bazowa
- Niewidoczna linia, na której stoją litery bez wydłużeń dolnych (a, m, x). Interlinia to odległość między kolejnymi liniami bazowymi.
- Interlinia
- Odległość między liniami bazowymi kolejnych wierszy, w punktach lub pikselach. Zapis 10/12 pt oznacza stopień 10 pt i interlinię 12 pt.
- Stopień pisma
- Nominalna wielkość pisma w punktach (1 pt = 0,353 mm) lub pikselach. Wysokość liter jest mniejsza i zależy od kroju: w większości krojów tekstowych wersaliki zajmują około 0,66–0,73 stopnia.
- Miara wiersza
- Szerokość łamu wyrażona liczbą znaków w wierszu. Dla tekstu ciągłego najczęściej zaleca się 45–75 znaków; krótsze wiersze rwą czytanie, dłuższe męczą oko, choć granice zależą od kroju, stopnia i rodzaju tekstu.
- Hierarchia typograficzna
- Uporządkowany zestaw ról tekstu (podpis, tekst, lead, nagłówki) różniących się stopniem, interlinią i ciężarem, zbudowany na wspólnej skali.
- Skala typograficzna
- Ciąg stopni pisma wynikających z jednej proporcji, np. 1,25: każdy kolejny stopień to poprzedni pomnożony przez proporcję.
- Rozkładówka
- Para sąsiadujących stron otwartej publikacji. Marginesy są w niej lustrzane: wewnętrzny przy grzbiecie, zewnętrzny przy krawędzi.
- Rytm pionowy
- Regularność odstępów w pionie wynikająca z siatki bazowej: wysokości bloków i odstępy między nimi są wielokrotnością interlinii.
- Spad
- Obszar grafiki wystający poza linię cięcia (zwykle 3 mm), który zabezpiecza przed białymi paskami po przycięciu. Nie należy do pola składu.
- DTP
- Desktop publishing: komputerowe przygotowanie publikacji do druku. Narzędzie nie eksportuje plików dla programów DTP; generuje tekstowe zestawienie (marginesy, łamy, siatka bazowa), które przepisuje się ręcznie w ustawieniach dokumentu.