Utilia
Kategorie ▾
Jazyk: cs ▾

Kombinace písem

Vyzkoušej kombinace písem pro nadpisy a text z 20 písem s otevřenou licencí, uprav velikost a řádkování a zkopíruj CSS zásobníky font-family.

Navržené dvojice

Náhled

Nainstaluj balíčky npm a importuj jen tloušťky, které používáš. Písma se pak servírují z tvého webu, bez CDN pro písma.

Jak používat náhled kombinací písem

  1. Začni jednou z Navržených dvojic (Redakční, Moderní blog, Vstupní stránka, Zpravodajství, Elegantní, Technický magazín, Kniha, Klasika, Dokumentace, Hravé). Každé tlačítko ukazuje písmo nadpisu a písmo textu, které použije.
  2. Nebo vyber vlastní Písmo nadpisu a Písmo textu. Seznamy jsou rozdělené na bezpatková, patková, display, neproporcionální a rukopisná písma. Prohodit písma obě zamění.
  3. Uprav Velikost nadpisu, Velikost textu a Řádkování a vyber Tloušťku nadpisu (Tučné (700) nebo Normální (400)). Zaškrtnutím Tmavé pozadí zkontroluješ dvojici v tmavém režimu.
  4. Nahraď Text nadpisu a Text odstavce vlastními slovy: skutečný titulek a skutečný odstavec ti řeknou mnohem víc než pangram. Mezi odstavci nech prázdný řádek.
  5. Zkopíruj Kód CSS a pak podle části Vlastní hostování s Fontsource přidej písma do svého projektu.

Písma se načtou při prvním výběru (asi 12 až 50 KB na tloušťku). Servírují se z tohoto webu, nikdy z CDN pro písma.

Co dělá dobrou kombinaci písem

  • Kontrast, ne konflikt. Klasický recept je patkové písmo pro jednu roli a bezpatkové pro druhou: Playfair Display nad Lato nebo Montserrat nad Merriweather. Dvě písma, která jsou podobná, ale ne totožná (třeba dvě geometrická bezpatková), často vypadají jako chyba.
  • Klidné písmo textu. U textu čtenáři tráví nejvíc času. Vyber písmo s otevřenými tvary písmen a velkou x-výškou (Inter, Lato, Open Sans, Source Serif 4, Merriweather) a písma typu display, jako Playfair Display, DM Serif Display, Oswald nebo Caveat, nech pro krátké nadpisy.
  • Odpovídající proporce. Písma s podobnou x-výškou spolu na stejném řádku i ve stejném sloupci ladí.
  • Dvě písma stačí. Hierarchii vytvářej velikostí, tloušťkou a mezerami místo třetího písma.

Pro čitelný text je dobrým výchozím rozsahem 16 až 20 px s řádkováním mezi 1,4 a 1,7 a asi 60 až 75 znaky na řádek. Nadpisy obvykle potřebují těsnější řádkování (1,1 až 1,3), které kód CSS nastaví za tebe.

Kód CSS

Kód deklaruje dvě vlastní proměnné, --font-heading a --font-body, každou se záložním zásobníkem: pokud se webové písmo ještě nenačetlo, prohlížeč zobrazí podobné systémové písmo (Georgia pro patková, systémové písmo rozhraní pro bezpatková). Velikosti jsou zapsané v rem (16 px = 1 rem), takže se řídí nastavením velikosti písma v prohlížeči čtenáře.

Vlastní hostování a licence

Všech 20 písem pochází z Fontsource, který balí open-source písma pro npm. Instalační pole nabízí příkaz npm install a řádky import pro podmnožinu latin a jen tloušťky, které používáš; tvůj bundler pak soubory woff2 zkopíruje do sestavení. Servírování písem z vlastní domény je rychlejší (žádné další spojení), funguje offline a nepředává IP adresy návštěvníků službě třetí strany, což je v EU známý problém z hlediska GDPR.

Každé zdejší písmo je podle metadat balíčku pod licencí SIL Open Font License 1.1: smíš ho používat na webech, v aplikacích i v tisku, komerčně i nekomerčně, a vkládat ho. Samotné soubory písma prodávat nesmíš. Pokud písmo upravíš, musí si ponechat licenci OFL a nesmí používat původní vyhrazený název. Soubor s licencí je součástí každého balíčku.

Časté dotazy

Používá tento nástroj Google Fonts?

Ne. Mnohé z těchto rodin jsou dostupné i v Google Fonts, ale tady soubory pocházejí z balíčků npm Fontsource a servíruje je tento web. Žádný požadavek nejde na Google ani na jiné CDN pro písma.

Proč některé nadpisy netučnějí?

DM Serif Display existuje jen v normální tloušťce. Nástroj ho pak zobrazí ve 400, upozorní na to pod ovládacími prvky a kód CSS používá 400.

Mohu kombinovat dvě patková nebo dvě bezpatková písma?

Ano, pokud se zřetelně liší rolí a tloušťkou, například tučný úzký nadpis s lehkým, otevřeným písmem textu. Když obě písma sdílejí stejný styl, nástroj zobrazí upozornění, protože kontrast patkového a bezpatkového písma se trefuje snáz.

Které znaky jsou zahrnuty?

Náhled načítá podmnožinu latin (angličtina, francouzština a většina západoevropských jazyků s diakritikou, œ, « » a znakem eura) a, pokud je písmo má a tvůj text je potřebuje, podmnožiny latin-ext (středoevropská písmena jako č, ł, ő, ț), cyrilici a řečtinu. Písma bez podmnožiny zobrazí tato písmena záložním písmem: Lato, Work Sans a Space Grotesk nemají cyrilici a řečtinu mají jen Inter, Roboto, Open Sans, Source Serif 4 a Fira Code. Žádné z 20 písem nemá arabská písmena. Na českých, polských, řeckých, bulharských, ukrajinských (a podobných) stránkách instalační pole uvádí také řádky import pro podmnožinu, kterou tvůj jazyk potřebuje, takže česká diakritika (ě, š, č, ř, ž, ý, á, í, é, ů) se zobrazí správně.

Mohu tato písma použít v komerčním projektu?

Ano. Licence SIL Open Font License povoluje komerční použití bez placení a bez uvedení autora ve tvém návrhu. Zakázáno je jen další prodávání samotných souborů písma.

Související nástroje