Utilia
Kategórie ▾
Jazyk: sk ▾

Kombinácie písiem

Vyskúšaj kombinácie písiem pre nadpisy a text s 20 písmami s otvorenou licenciou, uprav veľkosť a výšku riadka a skopíruj zásobníky font-family v CSS.

Navrhované dvojice

Náhľad

Nainštaluj balíky npm a importuj len hrúbky, ktoré používaš. Písma sa potom poskytujú z tvojho vlastného webu, bez CDN pre písma.

Ako používať náhľad kombinácií písiem

  1. Začni jednou z Navrhovaných dvojíc (Redakčný štýl, Moderný blog, Vstupná stránka, Spravodajstvo, Elegantný, Technický magazín, Kniha, Klasika, Dokumentácia, Hravý). Každé tlačidlo ukazuje písmo nadpisu a písmo textu, ktoré použije.
  2. Alebo vyber vlastné Písmo nadpisu a Písmo textu. Zoznamy sú rozdelené na bezpätkové, pätkové, display, neproporcionálne a rukopisné písma. Vymeniť písma ich navzájom zamení.
  3. Uprav Veľkosť nadpisu, Veľkosť textu a Výšku riadka a vyber Hrúbku nadpisu (Tučné (700) alebo Normálne (400)). Zapni Tmavé pozadie, aby si dvojicu skontroloval v tmavom režime.
  4. Nahraď Text nadpisu a Text odseku vlastnými slovami: skutočný titulok a skutočný odsek ti povedia oveľa viac než pangram. Medzi odsekmi nechaj prázdny riadok.
  5. Skopíruj Kód CSS a potom podľa Vlastný hosting cez Fontsource pridaj písma do svojho projektu.

Písma sa načítajú pri prvom výbere (asi 12 až 50 KB na hrúbku). Poskytujú sa z tohto webu, nikdy z CDN pre písma. Nič, čo zadáš, sa neodosiela na server.

Čo robí dobrú kombináciu písiem

  • Kontrast, nie konflikt. Klasický recept je pätkové písmo pre jednu úlohu a bezpätkové pre druhú: Playfair Display nad Lato alebo Montserrat nad Merriweather. Dve písma, ktoré sú podobné, no nie rovnaké (povedzme dve geometrické bezpätkové), často vyzerajú ako chyba.
  • Pokojné písmo textu. V texte trávia ľudia najviac času. Vyber písmo s otvorenými tvarmi písmen a veľkou výškou malých písmen (Inter, Lato, Open Sans, Source Serif 4, Merriweather) a písma typu display, ako Playfair Display, DM Serif Display, Oswald či Caveat, si nechaj na krátke nadpisy.
  • Zodpovedajúce proporcie. Písma s podobnou výškou malých písmen spolu pôsobia dobre na tom istom riadku aj v tom istom stĺpci.
  • Dve písma stačia. Hierarchiu vytvor veľkosťou, hrúbkou a rozostupmi namiesto tretieho písma.

Pre čitateľný text je dobrým východiskom 16 až 20 px s výškou riadka medzi 1,4 a 1,7 a približne 60 až 75 znakmi na riadok. Nadpisy zvyčajne potrebujú tesnejšiu výšku riadka (1,1 až 1,3), ktorú nastaví kód CSS.

Kód CSS

Kód deklaruje dve vlastné vlastnosti, --font-heading a --font-body, každú so záložným zásobníkom: ak sa webové písmo ešte nenačítalo, prehliadač zobrazí podobné systémové písmo (Georgia pre pätkové, systémové písmo rozhrania pre bezpätkové). Veľkosti sú zapísané v rem (16 px = 1 rem), takže sledujú nastavenie veľkosti písma v prehliadači čitateľa.

Vlastný hosting a licencie

Všetkých 20 písiem pochádza z Fontsource, ktorý balí open-source písma pre npm. Inštalačné pole ponúka príkaz npm install a riadky import pre podmnožinu latin a len hrúbky, ktoré používaš; tvoj bundler potom skopíruje súbory woff2 do tvojho buildu. Poskytovanie písiem z vlastnej domény je rýchlejšie (bez ďalšieho pripojenia), funguje offline a vyhýba sa posielaniu IP adries tvojich návštevníkov službe písiem tretej strany, čo je známy problém GDPR v EÚ.

Každé písmo tu je podľa metadát svojho balíka pod licenciou SIL Open Font License 1.1: môžeš ho používať na weboch, v aplikáciách aj v tlači, komerčne aj nekomerčne, a vkladať ho. Nesmieš predávať samotné súbory písma. Ak písmo upravíš, musí si zachovať OFL a nesmie používať pôvodný vyhradený názov. Súbor licencie je súčasťou každého balíka.

Často kladené otázky

Používa tento nástroj Google Fonts?

Nie. Mnohé z týchto rodín sú dostupné aj na Google Fonts, no tu súbory pochádzajú z balíkov npm Fontsource a poskytuje ich tento web. Žiadna požiadavka nejde na Google ani na iné CDN pre písma.

Prečo niektoré nadpisy nezhrubnú?

DM Serif Display existuje len v normálnej hrúbke. Nástroj ho potom zobrazí v 400, uvedie to pod ovládacími prvkami a kód CSS používa 400.

Môžem spojiť dve pätkové alebo dve bezpätkové písma?

Áno, ak sa jasne líšia úlohou a hrúbkou, napríklad tučný úzky nadpis so svetlým, otvoreným písmom textu. Keď obe písma zdieľajú rovnaký štýl, nástroj zobrazí upozornenie, lebo kontrast pätkového a bezpätkového písma sa trafí ľahšie.

Ktoré znaky sú zahrnuté?

Náhľad načíta podmnožinu latin (angličtina, francúzština a väčšina západoeurópskych jazykov, s diakritikou, œ, « » a znakom eura) a, keď ich písmo má a tvoj text ich potrebuje, aj podmnožiny latin-ext (stredoeurópske písmená ako č, ľ, ŕ, ő, ł, ț), cyriliku a gréčtinu. Slovenské znaky s diakritikou (č, š, ž, ľ, ĺ, ŕ, ô, ä, ď, ť, ň) patria do latin-ext, takže ich písma bez tejto podmnožiny zobrazia záložným písmom. Lato, Work Sans či Space Grotesk nemajú cyriliku a gréčtinu majú len Inter, Roboto, Open Sans, Source Serif 4 a Fira Code. Žiadne z 20 písiem nemá arabské písmená. Na slovenských stránkach inštalačné pole uvádza aj riadky importu podmnožiny, ktorú tvoj jazyk potrebuje.

Môžem tieto písma použiť v komerčnom projekte?

Áno. SIL Open Font License povoľuje komerčné použitie bez platenia a bez uvedenia autora vo tvojom dizajne. Zakázaný je len ďalší predaj samotných súborov písma.

Súvisiace nástroje