Utilia
Kategorije ▾
Jezik: hr ▾

Kombinacije fontova

Pregledaj kombinacije fontova za naslove i tekst s 20 fontova otvorene licence, podesi veličinu i visinu retka te kopiraj CSS font-family popise.

Predloženi parovi

Pregled

Instaliraj npm pakete i uvezi samo debljine koje koristiš. Fontovi se tada poslužuju s tvoje stranice, bez CDN-a za fontove.

Kako koristiti pregled kombinacija fontova

  1. Kreni od jednog od Predloženih parova (Uredničko, Moderan blog, Odredišna stranica, Vijesti, Elegantno, Tehnološki magazin, Knjiga, Klasično, Dokumentacija, Razigrano). Svaki gumb prikazuje font naslova i font teksta koje primjenjuje.
  2. Ili odaberi vlastiti Font naslova i Font teksta. Popisi su grupirani na sans-serif, serif, display, monospace i rukopisne fontove. Zamijeni fontove međusobno mijenja ta dva.
  3. Podesi Veličinu naslova, Veličinu teksta i Visinu retka te odaberi Debljinu naslova (Podebljano (700) ili Normalno (400)). Uključi Tamna pozadina da provjeriš par u tamnom načinu.
  4. Zamijeni Tekst naslova i Tekst odlomka vlastitim riječima: stvaran naslov i stvaran odlomak govore ti puno više od pangrama. Između odlomaka ostavi prazan redak.
  5. Kopiraj CSS kod, a zatim slijedi Vlastiti poslužitelj s Fontsourceom da fontove dodaš u svoj projekt.

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

Što čini dobru kombinaciju fontova

  • Kontrast, a ne sukob. Klasičan recept je serif za jednu ulogu i sans-serif za drugu: Playfair Display nad Latom ili Montserrat nad Merriweatherom. Dva fonta koja su slična, ali ne i jednaka (recimo dva geometrijska sans-serifa), često izgledaju kao pogreška.
  • Miran font teksta. U tekstu ljudi provode najviše vremena. Odaberi font s otvorenim oblicima slova i velikom x-visinom (Inter, Lato, Open Sans, Source Serif 4, Merriweather), a display fontove poput Playfair Displaya, DM Serif Displaya, Oswalda ili Caveata čuvaj za kratke naslove.
  • Usklađene proporcije. Fontovi sličnih x-visina dobro stoje zajedno u istom retku i istom stupcu.
  • Dva fonta su dovoljna. Hijerarhiju stvori veličinom, debljinom i razmakom umjesto trećim pismom.

Za čitljiv tekst dobro je polazno područje 16 do 20 px s visinom retka između 1,4 i 1,7 te oko 60 do 75 znakova u retku. Naslovima obično treba manja visina retka (1,1 do 1,3), koju CSS kod postavlja umjesto tebe.

Podrška za hrvatska slova

Pregled i isječak za instalaciju učitavaju podskup latin za osnovna slova, a za slova č, ć, đ, š i ž (središnja Europa) podskup latin-ext, kad ga font ima i kad ga tvoj tekst treba. Ako font nema potrebni podskup, ta se slova prikazuju zamjenskim fontom, što lako vidiš u pregledu s hrvatskim tekstom. Nijedan od 20 fontova nema arapska slova.

CSS kod

Kod deklarira dva prilagođena svojstva, --font-heading i --font-body, svako sa zamjenskim popisom: ako se web-font još nije učitao, preglednik prikazuje sličan sistemski font (Georgia za serife, sistemski UI font za sans-serife). Veličine su zapisane u remu (16 px = 1rem), pa slijede postavku veličine fonta u čitateljevu pregledniku.

Vlastiti poslužitelj i licence

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

Svaki font ovdje je pod licencom SIL Open Font License 1.1, prema metapodacima njegova paketa: smiješ ga koristiti na web-stranicama, u aplikacijama i u tisku, komercijalno ili ne, te ga ugraditi. Ne smiješ prodavati same datoteke fontova. Ako mijenjaš 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 obitelji dostupne su i na Google Fonts, ali ovdje datoteke dolaze iz npm paketa Fontsource i poslužuje ih ova stranica. Nijedan zahtjev ne ide Googleu ni bilo kojem drugom CDN-u za fontove.

Zašto se neki naslovi ne podebljaju?

DM Serif Display postoji samo u normalnoj debljini. Alat ga tada prikazuje u 400, to navodi ispod kontrola, a CSS kod koristi 400.

Mogu li upariti dva serifa ili dva sans-serifa?

Možeš, ako se jasno razlikuju po ulozi i debljini, na primjer podebljani 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 postići.

Koji su znakovi uključeni?

Pregled učitava podskup latin (engleski, francuski i većina zapadnoeuropskih jezika, s naglascima, œ, « » i znakom eura) i, kad ih font ima i tvoj tekst ih treba, podskupove latin-ext (slova srednje Europe poput č, ł, ő, ț), ćirilicu i grčki. Fontovi bez podskupa prikazuju ta slova zamjenskim fontom: Lato, Work Sans i Space Grotesk nemaju ćirilicu, a grčki imaju samo Inter, Roboto, Open Sans, Source Serif 4 i Fira Code. Nijedan od 20 fontova nema arapska slova. Na stranicama za poljski, češki, grčki, bugarski, ukrajinski (i slične) jezike okvir za instalaciju navodi i retke uvoza podskupa koji tvoj jezik treba.

Mogu li ove fontove koristiti u komercijalnom projektu?

Možeš. SIL Open Font License dopušta komercijalnu uporabu bez plaćanja i bez navođenja autora u tvom dizajnu. Zabranjena je samo preprodaja samih datoteka fontova.

Slični alati