Utilia
Kategorije ▾
Jezik: bs ▾

Parovi fontova

Pregledaj parove fontova za naslove i tekst s 20 fontova otvorene licence, podesi veličinu i visinu reda i kopiraj CSS font-family nizove.

Predloženi parovi

Pregled

Instaliraj npm pakete i uvezi samo debljine koje koristiš. Fontovi se tada serviraju s tvoje stranice, bez font CDN-a.

Kako koristiti pregled parova fontova

  1. Počni od jednog od Predloženi parovi (Uredničko, Moderni blog, Odredišna stranica, Vijesti, Elegantno, Tehnološki magazin, Knjiga, Klasično, Dokumentacija, Razigrano). Svako dugme prikazuje font naslova i font teksta koje primjenjuje.
  2. Ili odaberi vlastiti Font naslova i Font teksta. Liste su grupisane na sans-serif, serif, display, monospace i fontove rukopisa. Zamijeni fontove razmjenjuje ta dva.
  3. Podesi Veličina naslova, Veličina teksta i Visina reda, te odaberi Debljina naslova (Podebljano (700) ili Normalno (400)). Uključi Tamna pozadina da provjeriš par u tamnom načinu.
  4. Zamijeni Tekst naslova i Osnovni tekst svojim riječima: stvaran naslov i stvaran odlomak govore ti mnogo više od pangrama. Između odlomaka ostavi prazan red.
  5. Kopiraj CSS kôd, pa slijedi Samostalno hostovanje s Fontsourceom da fontove dodaš u svoj projekat.

Fontovi se učitavaju prvi put kad ih odabereš (oko 12 do 50 KB po debljini). Serviraju se s ove stranice, nikad s font CDN-a.

Šta čini dobar par fontova

  • Kontrast, a ne sukob. Klasičan recept je serif za jednu ulogu i sans-serif za drugu: Playfair Display uz Lato ili Montserrat uz Merriweather. Dva fonta koja su slična, ali ne i identična (recimo dva geometrijska sans-serifa), često izgledaju kao greška.
  • Miran font teksta. Osnovni tekst je mjesto gdje ljudi provode vrijeme. Odaberi font s otvorenim oblicima slova i velikom x-visinom (Inter, Lato, Open Sans, Source Serif 4, Merriweather), a display fontove poput Playfair Display, DM Serif Display, Oswald ili Caveat čuvaj za kratke naslove.
  • Usklađene proporcije. Fontovi sa sličnim x-visinama dobro stoje zajedno u istom redu i istoj koloni.
  • Dva fonta su dovoljna. Hijerarhiju stvaraj veličinom, debljinom i razmakom umjesto trećim pismom.

Za čitljiv osnovni tekst dobar početni raspon je 16 do 20 px uz visinu reda između 1,4 i 1,7 i oko 60 do 75 znakova po redu. Naslovima obično treba uža visina reda (1,1 do 1,3), što CSS kôd postavlja umjesto tebe.

CSS kôd

Kôd deklariše dva prilagođena svojstva, --font-heading i --font-body, svako s rezervnim nizom: ako web font još nije učitan, preglednik prikazuje sličan sistemski font (Georgia za serife, sistemski UI font za sans-serife). Veličine su zapisane u rem (16 px = 1rem), pa slijede postavku veličine fonta u čitaočevom pregledniku.

Samostalno hostovanje i licence

Svih 20 fontova dolazi iz Fontsourcea, koji pakuje fontove otvorenog koda za npm. Okvir za instalaciju daje naredbu npm install i linije import za latin podskup i samo debljine koje koristiš; tvoj bundler zatim kopira woff2 datoteke u tvoj build. Serviranje fontova s vlastite domene je brže (nema dodatne veze), radi bez interneta i izbjegava slanje IP adresa tvojih posjetilaca vanjskoj usluzi fontova, što je poznat problem s GDPR-om u EU.

Prema metapodacima paketa, svaki font ovdje je pod licencom SIL Open Font License 1.1: smiješ ga koristiti na web stranicama, u aplikacijama i u štampi, komercijalno ili ne, i ugraditi ga. Ne smiješ prodavati same datoteke fonta. Ako izmijeniš font, mora zadržati OFL i ne smije koristiti izvorni rezervirani naziv. Datoteka licence uključena je u svaki paket.

Česta pitanja

Koristi li ovaj alat Google Fonts?

Ne. Mnoge od ovih porodica dostupne su i na Google Fontsu, ali ovdje datoteke dolaze iz Fontsource npm paketa i servira ih ova stranica. Nijedan zahtjev ne ide Googleu niti bilo kojem drugom font CDN-u.

Zašto neki naslovi ne postaju podebljani?

DM Serif Display postoji samo u normalnoj debljini. Alat ga tada prikazuje u 400, kaže to ispod kontrola, a CSS kôd koristi 400.

Mogu li upariti dva serifa ili dva sans-serifa?

Da, ako se jasno razlikuju po ulozi i debljini, na primjer podebljan uski naslov s laganim, otvorenim fontom teksta. Alat prikazuje napomenu kad oba fonta dijele isti stil, jer je kontrast serifa i sans-serifa lakše pogoditi.

Koji znakovi su uključeni?

Pregled učitava latin podskup (engleski, francuski i većinu zapadnoevropskih jezika, s naglascima, œ, « » i znakom eura) i, kad ih font ima, a tvoj tekst ih treba, latin-ext (slova srednje Evrope poput č, ć, đ, š, ž, ł, ő, ț), ćirilični i grčki podskup. Fontovi bez podskupa prikazuju ta slova u rezervnom fontu: Lato, Work Sans ili Space Grotesk nemaju ćirilicu, a grčku imaju samo Inter, Roboto, Open Sans, Source Serif 4 i Fira Code. Nijedan od 20 fontova nema arapska slova. Na stranicama za jezike koji to trebaju okvir za instalaciju navodi i linije uvoza podskupa koji tvoj jezik traži.

Mogu li ove fontove koristiti u komercijalnom projektu?

Da. SIL Open Font License dozvoljava komercijalnu upotrebu bez plaćanja i bez navođenja autora u tvom dizajnu. Zabranjena je samo preprodaja samih datoteka fonta.

Srodni alati