Typografia: dobór stopnia pisma, interlinii i krojów dla druku i ekranu

Podaj stopień tekstu, proporcję skali, siatkę bazową i szerokość łamu, wybierz kroje, a dostaniesz pełną hierarchię (od podpisu po H1) z interlinią na siatce, liczbą znaków w wierszu, kontrolą zasad składu i oceną pary krojów. Próbka pokazuje wszystko w skali 1:1. Eksport do CSS, JSON i zestawienia tekstowego do przepisania w programie DTP.

Obliczenia i próbka działają w przeglądarce. Ustawienia nie opuszczają Twojego urządzenia.

Medium

Siatka bazowa 0 = bez siatki (interlinia z proporcji). Szerokość łamu 0 = bez liczenia znaków w wierszu. Z generatora siatek przenieś interlinię i szerokość kolumny.

Kroje

Kroje na wolnych licencjach (SIL OFL, Apache) hostowane lokalnie: wysokość x i wersalików zmierzone z plików fontów. Ocena pary opiera się na kontraście klas, zgodności wysokości x i przeznaczeniu kroju.

Ocena pary

Próbka 1:1 dla ekranu 96 dpi

Hierarchia

Kontrola zasad składu

    Kod i ustawienia

    
            
    Pobierz:
    
            
        
    
    
    

    
    
        
    Jak dobrać stopień pisma, interlinię i miarę wiersza?
    Trzy wielkości trzymają się nawzajem: stopień pisma, interlinia i długość wiersza. Tekst ciągły w druku składa się zwykle w 9–11 pt, na ekranie w 16–18 px. Wiersz powinien mieć 45–75 znaków: krótszy rwie czytanie, dłuższy gubi oko przy powrocie do lewego marginesu. Interlinia rośnie wraz z długością wiersza: w druku od 1,2 stopnia (10/12 pt) przy wierszach do 75 znaków do około 1,3 przy dłuższych; na ekranie od około 1,35 przy krótkich wierszach do 1,6 przy bardzo długich. Kroje o dużej wysokości x wyglądają na większe i potrzebują nieco luźniejszej interlinii; kroje o małej wysokości x (antykwy renesansowe) wymagają wyższego stopnia.
    
        
    Hierarchia i skala typograficzna na siatce bazowej
    Hierarchia to zestaw ról (podpis, tekst, lead, H3, H2, H1) o stopniach wynikających ze wspólnej proporcji: 1,2 (łagodna), 1,25, 1,333, 1,5 lub 1,618 (dramatyczna). Różnica między sąsiednimi poziomami powinna być wyraźna (zwykle co najmniej 1,2×), a między H1 a tekstem od około 2× do 4×. Z siatką bazową interlinia każdej roli jest wielokrotnością linii: tekst i podpisy na pełnych liniach, lead i nagłówki mogą stawać na półliniach, pod warunkiem że blok kończy się na pełnej linii. Dzięki temu tekst w sąsiednich kolumnach i na sąsiednich stronach stoi w tych samych liniach.
    
        
    Jak łączyć kroje: kontrast, wysokość x, przeznaczenie
    Dobra para daje kontrast klas (szeryfowy tekst + bezszeryfowy nagłówek albo odwrotnie), a nie „prawie to samo": dwa podobne bezszeryfowe kroje wyglądają jak pomyłka. Zgodna wysokość x sprawia, że teksty w obu krojach mają podobny ciężar optyczny. Kroje display, pisanki i odręczne nadają się wyłącznie do nagłówków i akcentów, nigdy do tekstu ciągłego. Rodziny projektowane razem (np. pary szeryf + bezszeryf tego samego autora) lub jedna rodzina o wielu odmianach to najbezpieczniejszy wybór. Narzędzie ocenia parę w skali 0–100 i podpowiada kroje nagłówkowe do wybranego kroju tekstu.
    
        
    Kroje w próbce są hostowane lokalnie na licencjach SIL Open Font License 1.1 i Apache 2.0; rejestr licencji: LICENSES.md
    
    
    
            
    
        
    Słownik typografii: pojęcia, historia, fakty
    
        
    
            
    Czcionka, font, krój pisma
    Historycznie czcionka to metalowy słupek z odlaną literą, a font to komplet czcionek jednego kroju w jednym stopniu. Dziś font to plik (np. WOFF2, OTF), a krój pisma to projekt graficzny liter niezależny od nośnika. Potocznie słowa te są używane zamiennie; w składzie warto je rozróżniać.
    Rodzina i odmiana
    Rodzina to zestaw odmian jednego kroju: ciężar (Light, Regular, Bold), szerokość (Condensed, Extended), pochylenie (Italic). Fonty zmienne (OpenType 1.8, 2016) zapisują całą rodzinę w jednym pliku z osiami, np. ciężaru (wght) i rozmiaru optycznego (opsz).
    Punkt typograficzny
    Jednostka stopnia pisma. Punkt Didota (Francja, XVIII w.) ma 0,376 mm; punkt anglo-amerykański, przyjęty w DTP, to 1/72 cala = 0,3528 mm. Pica to 12 punktów, cycero to 12 punktów Didota. Piksel CSS to 1/96 cala, więc 1 pt = 1,333 px.
    Stopień pisma
    Nominalna wielkość pisma: dawniej wysokość słupka czcionki, dziś wysokość pola znaku. Litery są mniejsze niż stopień; wersaliki zajmują zwykle 0,66–0,73 stopnia, a wysokość x 0,45–0,55. Dlatego dwa kroje w tym samym stopniu mogą wyglądać na różną wielkość.
    Interlinia
    Odległość między liniami bazowymi kolejnych wierszy. Nazwa angielska leading pochodzi od ołowianych sztabek (lead), które zecerzy wkładali między wiersze czcionek. Zapis 10/12 oznacza stopień 10 i interlinię 12 punktów.
    Linia bazowa, wysokość x, wydłużenia
    Linia bazowa to linia, na której stoją litery. Wysokość x to wysokość małych liter bez wydłużeń (jak x); wydłużenia górne (b, d, k) i dolne (g, p, y) sięgają poza nią. Kroje o dużej wysokości x (np. Verdana, Inter) są czytelniejsze w małych stopniach na ekranie.
    Szeryf
    Poprzeczne zakończenie kreski litery. Szeryfy widać już w rzymskich inskrypcjach (kolumna Trajana, 113 r.); w druku prowadzą oko wzdłuż wiersza. Kroje bez szeryfów nazywamy bezszeryfowymi, groteskami (od XIX-wiecznego angielskiego „grotesque") lub, w tradycji amerykańskiej, gotykami (Gothic).
    Antykwa i jej odmiany
    Antykwa to pismo szeryfowe wywodzące się z humanistycznej minuskuły i rzymskich kapitałów. Renesansowa (Jenson 1470, Garamond XVI w.): mały kontrast, ukośna oś. Barokowa/przejściowa (Baskerville, lata 50. XVIII w.): większy kontrast. Klasycystyczna (Didot, Bodoni, koniec XVIII w.): kontrast bardzo duży, szeryfy włosowe; stąd angielska nazwa didone.
    Egipcjanka (slab serif)
    Krój o grubych, prostokątnych szeryfach, stworzony dla plakatów i reklam w Anglii ok. 1815–1820. Nazwa „egipska" to moda epoki po kampanii egipskiej Napoleona, nie związek z Egiptem. Współczesne egipcjanki (np. Rockwell, Roboto Slab) dobrze znoszą ekran.
    Grotesk, neogrotesk, bezszeryfowe humanistyczne i geometryczne
    Pierwsze groteski to XIX-wieczne pisma reklamowe. Akzidenz-Grotesk (Berlin, 1896–1898) dał początek neogroteskom: Helvetica powstała w 1957 r. jako Neue Haas Grotesk (Max Miedinger, Eduard Hoffmann). Geometryczne (Futura, Paul Renner, 1927) budują litery z koła i prostej; humanistyczne (Gill Sans 1928, Frutiger 1976) zachowują proporcje antykwy i są najczytelniejsze w tekście.
    Klasyfikacja Vox-ATypI
    System klasyfikacji krojów zaproponowany przez Maximiliena Voxa w 1954 r. i przyjęty przez ATypI w 1962 r.: humanistyczne, garaldy, przejściowe, didony, mechaniczne (egipcjanki), lineowe (bezszeryfowe), ryte, pisankowe, odręczne, łamane. ATypI wycofało ją w 2021 r. jako niewystarczającą dla współczesnych krojów, ale nazwy wciąż są w użyciu.
    Kursywa i pismo pochyłe
    Kursywę (italic) wprowadził w 1501 r. wenecki drukarz Aldus Manutius z rytownikiem Francesco Griffo, wzorując się na piśmie kancelaryjnym; miała zmieścić więcej tekstu w kieszonkowych wydaniach. Pochyła (oblique) to tylko mechanicznie przechylona antykwa; prawdziwa kursywa ma własne, odmienne formy liter (a, f, g).
    Wersaliki, minuskuła, kapitaliki
    Wersaliki (majuskuła) pochodzą z rzymskiej kapitały, małe litery z minuskuły karolińskiej (VIII–IX w.). Angielskie uppercase i lowercase to dosłownie górna i dolna kaszta: w drukarniach wersaliki leżały w górnej skrzynce, małe litery w dolnej. Kapitaliki to wersaliki obniżone do wysokości x, używane do skrótów i podtytułów.
    Ligatura
    Dwa lub więcej znaków połączonych w jeden glif, np. fi, fl, ffl, żeby uniknąć kolizji kropki nad i z kreską f. Znak & to ligatura łacińskiego „et". W fontach OpenType ligatury włącza funkcja liga; w CSS odpowiada jej font-variant-ligatures.
    Kerning i tracking (światło)
    Kerning to korekta odstępu między konkretną parą liter (AV, To, Wa), tracking to równomierna zmiana odstępów w całym tekście. Nazwa kern pochodzi z czasów ołowiu: tak nazywano część litery wystającą poza słupek czcionki, która nachodziła na sąsiada. Tracking stosuje się ostrożnie: duże dodatnie wartości psują słowa, ujemne sklejają litery.
    Justowanie i chorągiewka
    Justowanie (wyrównanie do obu marginesów) wymaga dzielenia wyrazów i kontroli odstępów, inaczej powstają rzeki bieli. Chorągiewka (wyrównanie do lewej) daje równe odstępy i naturalny rytm; dobry skład chorągiewkowy ma łagodnie zróżnicowane zakończenia wierszy, bez schodków i bez samotnych krótkich słów.
    Sieroty, wdowy, bękarty
    Polskie zasady składu: sierota to jednoliterowy spójnik lub przyimek (i, w, z, a) pozostawiony na końcu wiersza; przenosi się go twardą spacją. Wdowa to ostatni wiersz akapitu na początku nowej kolumny lub strony, bękart to pierwszy wiersz akapitu na jej końcu. Programy DTP pilnują ich w ustawieniach akapitu.
    Dywiz, półpauza, pauza
    Trzy różne znaki: dywiz (-) łączy i dzieli wyrazy; półpauza (–, szerokości n) oznacza zakresy (45–75) i w polskiej praktyce często zastępuje myślnik; pauza (—, szerokości m) to klasyczny myślnik w składzie książkowym. Nazwy em i en pochodzą od szerokości liter M i N w danym stopniu.
    Cudzysłowy
    Polski cudzysłów to „dolny i górny" (99-66), w wersji drugiego stopnia «francuski». Angielski to “66-99” u góry, niemiecki „99-66“ jak polski, ale z innym zamknięciem. Prosty znak " z klawiatury to cudzysłów maszynowy; w składzie zastępuje się go typograficznym.
    Ruchoma czcionka i Gutenberg
    Johannes Gutenberg ok. 1450 r. w Moguncji połączył metalową czcionkę odlewaną z matryc, prasę i farbę olejną; jego 42-wierszowa Biblia (ok. 1455) jest pierwszą większą książką drukowaną w Europie. Ruchoma czcionka była znana wcześniej: ceramiczna w Chinach (Bi Sheng, ok. 1040) i metalowa w Korei (Jikji, 1377, najstarsza zachowana książka drukowana czcionką metalową).
    Lorem ipsum i pangramy
    Lorem ipsum to tekst zastępczy złożony z przekształconego fragmentu Cycerona „De finibus bonorum et malorum" (45 r. p.n.e.); spopularyzowały go arkusze Letraset w latach 60. XX w. i program PageMaker (1985). Pangram to zdanie ze wszystkimi literami alfabetu: polskie „Zażółć gęślą jaźń" zawiera komplet dziewięciu polskich znaków diakrytycznych.
    Polskie znaki diakrytyczne
    Ogonek (ą, ę), kreska (ć, ń, ó, ś, ź), kropka (ż) i przekreślenie (ł). Krój do polskiego składu musi mieć je zaprojektowane, nie doklejone automatycznie: ogonek powinien wyrastać z litery, a kreska mieć nachylenie kroju. W tabelach znaków to pozycje Unicode bloku Latin Extended-A (1991, Unicode 1.0).
    Pismo na ekranie
    Ekran rysuje litery pikselami, więc w małych stopniach liczy się hinting (dopasowanie konturów do siatki pikseli) i wygładzanie. Przyjęte minima: 16 px dla tekstu ciągłego, 12 px dla podpisów. Format WOFF2 (W3C, 2018) kompresuje fonty internetowe, a funkcja font-display decyduje, co widać, zanim font się załaduje.
    Licencje fontów
    Font to program komputerowy i utwór, więc podlega licencji. SIL Open Font License (2005, wersja 1.1 z 2007) pozwala używać, osadzać i rozpowszechniać font, zakazuje sprzedaży go osobno i zastrzega nazwy dla wersji zmienionych; Apache 2.0 jest podobnie liberalna. Fonty komercyjne mają osobne licencje na druk, web, aplikacje i osadzanie w PDF.
    Rozmiary optyczne i kroje tekstowe
    Ten sam krój w 8 pt i 72 pt nie powinien wyglądać identycznie: małe stopnie potrzebują większej wysokości x, luźniejszych odstępów i mocniejszych kresek, duże mogą być subtelne i ciasne. Dawniej każdy stopień cięto osobno; dziś robi to oś opsz fontów zmiennych albo osobne odmiany Text i Display.
            
    
    
    
    
        
    Potrzebujesz składu publikacji, identyfikacji lub strony z dopracowaną typografią? Zaprojektujemy