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.

Siatka jest liczona w przeglądarce. Parametry i pliki nie opuszczają Twojego urządzenia.

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

Podgląd

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


            
Pobierz: Dobierz pismo do tej siatki

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.

Potrzebujesz projektu publikacji, katalogu lub identyfikacji na solidnej siatce? Zaprojektujemy