Predogled kombinacij pisav

Kako uporabljati predogled kombinacij pisav

1. Začni z enim od Predlagani pari (Uredniško, Sodoben blog, Pristajalna stran, Novice, Elegantno, Tehnološka revija, Knjiga, Klasično, Dokumentacija, Igrivo). Vsak gumb prikazuje pisavo naslova in pisavo besedila, ki ju uporabi.
2. Ali pa izberi svojo Pisava naslova in Pisava besedila. Seznami so razvrščeni v skupine: sans-serif, serif, naslovne, enakoširinske in pisane pisave. Zamenjaj pisavi ju zamenja med seboj.
3. Prilagodi Velikost naslova, Velikost besedila in Razmik med vrsticami ter izberi Debelina naslova (Krepko (700) ali Navadno (400)). Obkljukaj Temno ozadje, da par preveriš v temnem načinu.
4. Zamenjaj Besedilo naslova in Besedilo odstavka s svojimi besedami: pravi naslov in pravi odstavek povesta veliko več kot pangram. Med odstavki pusti prazno vrstico.
5. Kopiraj Koda CSS, nato sledi razdelku Lastno gostovanje s Fontsource, da pisave dodaš v svoj projekt.

Pisave se naložijo ob prvi izbiri (približno 12 do 50 KB na debelino). Strežejo se s tega spletnega mesta, nikoli iz CDN za pisave.

Kaj naredi dober par pisav

• Kontrast, ne konflikt. Klasičen recept je serif za eno vlogo in sans-serif za drugo: Playfair Display nad Lato ali Montserrat nad Merriweather. Dve pisavi, ki sta podobni, a ne enaki (recimo dva geometrijska sans-serifa), sta pogosto videti kot napaka.
• Mirna pisava za besedilo. Pri besedilu ljudje preživijo največ časa. Izberi pisavo z odprtimi oblikami črk in veliko višino x (Inter, Lato, Open Sans, Source Serif 4, Merriweather), naslovne pisave, kot so Playfair Display, DM Serif Display, Oswald ali Caveat, pa obdrži za kratke naslove.
• Ujemajoče se razmerje. Pisave s podobno višino x se dobro ujemajo v isti vrstici in stolpcu.
• Dve pisavi sta dovolj. Hierarhijo ustvari z velikostjo, debelino in razmikom, ne s tretjo pisavo.

Za berljivo besedilo je dobro izhodišče 16 do 20 px z razmikom med vrsticami med 1,4 in 1,7 ter približno 60 do 75 znaki v vrstici. Naslovi običajno potrebujejo tesnejši razmik (1,1 do 1,3), ki ga koda CSS nastavi namesto tebe.

Koda CSS

Koda deklarira dve lastni lastnosti, --font-heading in --font-body, vsako z rezervnim naborom: če spletna pisava še ni naložena, brskalnik prikaže podobno sistemsko pisavo (Georgia za serife, sistemsko pisavo vmesnika za sans-serife). Velikosti so zapisane v rem (16 px = 1rem), zato sledijo nastavitvi velikosti pisave v bralnikovem brskalniku.

Lastno gostovanje in licence

Vseh 20 pisav prihaja iz Fontsource, ki odprtokodne pisave pakira za npm. Polje za namestitev poda ukaz npm install in vrstice import za latinski podnabor in samo debeline, ki jih uporabljaš; tvoj bundler nato kopira datoteke woff2 v tvojo gradnjo. Strežba pisav z lastne domene je hitrejša (ni dodatne povezave), deluje brez povezave in se izogne pošiljanju naslovov IP tvojih obiskovalcev storitvi za pisave tretje osebe, kar je znana težava z GDPR v EU.

Vsaka pisava tukaj je po metapodatkih paketa pod licenco SIL Open Font License 1.1: uporabiš jo lahko na spletnih straneh, v aplikacijah in v tisku, komercialno ali ne, in jo vdelaš. Datotek pisave ne smeš prodajati samostojno. Če pisavo spremeniš, mora obdržati licenco OFL in ne sme uporabljati izvirnega rezerviranega imena. Datoteka z licenco je vključena v vsak paket.

Podpora za slovenske znake

Predogled naloži latinski podnabor in, ko ga pisava ima in ga tvoje besedilo potrebuje, podnabor latin-ext, v katerem so šumniki (č, š, ž). Pisave brez podnabora prikažejo te črke v nadomestni pisavi, zato šumnike preveri v predogledu, preden se odločiš. Arabskih znakov nobena od 20 pisav nima.