Utilia
Kategorije ▾
Jezik: sr ▾

Kombinovanje fontova za naslov i tekst

Pregledaj kombinacije fontova za naslove i osnovni tekst sa 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 služe sa tvog sajta, bez font CDN-a.

Kako se koristi pregled kombinacija fontova

  1. Počni od jednog od Predloženi parovi (Uredničko, Moderan blog, Odredišna stranica, Vesti, Elegantno, Tehnološki magazin, Knjiga, Klasično, Dokumentacija, Razigrano). Svako dugme prikazuje font naslova i font teksta koje primenjuje.
  2. Ili izaberi sopstveni Font naslova i Font teksta. Liste su grupisane na sans-serif, serif, naslovne (display), monospace i fontove rukopisa. Zameni fontove menja njihova mesta.
  3. Podesi Veličina naslova, Veličina teksta i Visina reda, i izaberi Debljina naslova (Podebljano (700) ili Obično (400)). Uključi Tamna pozadina da proveriš par u tamnom režimu.
  4. Zameni Tekst naslova i Tekst odlomka sopstvenim rečima: pravi naslov i pravi odlomak govore ti mnogo više od pangrama. Ostavi prazan red između odlomaka.
  5. Kopiraj CSS kod, pa prati Sopstveno hostovanje pomoću Fontsource da dodaš fontove u svoj projekat.

Fontovi se učitavaju prvi put kad ih izabereš (oko 12 do 50 KB po debljini). Služe se sa ovog sajta, nikada sa font CDN-a.

Šta čini dobru kombinaciju 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 (na primer dva geometrijska sans-serifa), često izgledaju kao greška.
  • Miran font teksta. U osnovnom tekstu ljudi provode vreme. Izaberi font sa otvorenim oblicima slova i velikom visinom malih slova (Inter, Lato, Open Sans, Source Serif 4, Merriweather), a naslovne fontove poput Playfair Display, DM Serif Display, Oswald ili Caveat čuvaj za kratke naslove.
  • Slične proporcije. Fontovi sa sličnom visinom malih slova dobro stoje zajedno u istom redu i istoj koloni.
  • Dva fonta su dovoljna. Hijerarhiju pravi veličinom, debljinom i razmakom umesto trećim pismom.

Za čitljiv osnovni tekst, 16 do 20 px sa visinom reda između 1,4 i 1,7 dobar je početni opseg, sa oko 60 do 75 znakova po redu. Naslovima obično treba gušća visina reda (1,1 do 1,3), koju CSS kod postavlja umesto tebe.

CSS kod

Kod deklariše dva prilagođena svojstva, --font-heading i --font-body, svako sa rezervnim nizom: ako veb font još nije učitan, pregledač prikazuje sličan sistemski font (Georgia za serife, sistemski UI font za sans-serife). Veličine su zapisane u rem (16 px = 1rem), pa prate podešavanje veličine fonta u čitaočevom pregledaču.

Sopstveno hostovanje i licence

Svih 20 fontova dolazi iz Fontsource-a, koji pakuje fontove otvorenog koda za npm. Okvir za instalaciju daje komandu npm install i redove import za latinični podskup i samo debljine koje koristiš, a tvoj bundler zatim kopira woff2 fajlove u tvoj build. Služenje fontova sa sopstvenog domena je brže (nema dodatne veze), radi bez interneta i izbegava slanje IP adresa tvojih posetilaca spoljnoj font usluzi, što je poznat problem sa GDPR-om u EU.

Svaki font ovde je pod licencom SIL Open Font License 1.1, prema metapodacima njegovog paketa: možeš ga koristiti na sajtovima, u aplikacijama i u štampi, komercijalno ili ne, i ugraditi ga. Ne smeš prodavati same fajlove fonta. Ako izmeniš font, mora zadržati OFL i ne sme koristiti originalni rezervisani naziv. Fajl licence uključen je u svaki paket.

Česta pitanja

Da li ovaj alat koristi Google Fonts?

Ne. Mnoge od ovih porodica dostupne su i na Google Fonts, ali ovde fajlovi dolaze iz Fontsource npm paketa i služe se sa ovog sajta. Nijedan zahtev ne ide ka Google-u niti ka bilo kom drugom font CDN-u.

Zašto neki naslovi ne postaju podebljani?

DM Serif Display postoji samo u običnoj debljini. Alat ga tada prikazuje u 400, to kaže ispod kontrola, a CSS kod koristi 400.

Mogu li da kombinujem dva serifa ili dva sans-serifa?

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

Koji su znakovi uključeni?

Pregled učitava latinični podskup (engleski, francuski i većinu zapadnoevropskih jezika, sa akcentima, œ, « » i znakom za evro) i, kad ga font ima i tvoj tekst ga traži, podskup latin-ext (srednjoevropska slova kao što su č, ć, š, ž i đ iz srpske latinice, kao i ł, ő, ț), ćirilični i grčki podskup. Fontovi bez nekog podskupa prikazuju ta slova rezervnim 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 redove uvoza podskupa koji tvoj jezik traži.

Mogu li ove fontove da koristim 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 fajlova fonta.

Srodni alati