Utilia
Kategooriad ▾
Keel: et ▾

Fondipaaride eelvaade

Eelvaata pealkirja ja põhiteksti fondipaare 20 avaliku litsentsiga fondiga, kohanda suurust ja reakõrgust ning kopeeri CSS-i font-family virnad.

Soovitatud paarid

Eelvaade

Paigalda npm-paketid ja impordi ainult need jämedused, mida kasutad. Fondid serveeritakse siis sinu enda saidilt, ilma fondi-CDN-ita.

Kuidas fondipaaride eelvaadet kasutada

  1. Alusta ühest Soovitatud paarist (Toimetuslik, Kaasaegne blogi, Maandumisleht, Uudised, Elegantne, Tehnikaajakiri, Raamat, Klassikaline, Dokumentatsioon, Mänguline). Iga nupp näitab pealkirjafonti ja põhitekstifonti, mida see rakendab.
  2. Või vali oma Pealkirja font ja Põhiteksti font. Loendid on rühmitatud seriifita, seriifiga, pealkirja-, püsilaiusega ja käekirjafondideks. Vaheta fondid vahetab need kaks omavahel.
  3. Kohanda Pealkirja suurust, Põhiteksti suurust ja Reakõrgust ning vali Pealkirja jämedus (Paks (700) või Tavaline (400)). Märgi Tume taust, et kontrollida paari tumedas režiimis.
  4. Asenda Pealkirja tekst ja Põhiteksti tekst oma sõnadega: tõeline pealkiri ja tõeline lõik ütlevad palju rohkem kui pangramm. Jäta lõikude vahele tühi rida.
  5. Kopeeri CSS-kood, seejärel järgi jaotist Isehostimine Fontsource’iga, et lisada fondid oma projekti.

Fondid laaditakse esimesel valimisel (umbes 12 kuni 50 KB jämeduse kohta). Neid serveeritakse sellelt saidilt, mitte kunagi fondi-CDN-ist.

Mis teeb fondipaari heaks

  • Kontrast, mitte konflikt. Klassikaline retsept on seriifiga font ühe rolli ja seriifita font teise jaoks: Playfair Display koos Lato-ga või Montserrat koos Merriweatheriga. Kaks sarnast, kuid mitte identset fonti (näiteks kaks geomeetrilist seriifita fonti) näevad sageli välja nagu viga.
  • Rahulik põhitekstifont. Põhitekstis veedavad inimesed oma aega. Vali avatud tähekujudega ja kõrge x-kõrgusega font (Inter, Lato, Open Sans, Source Serif 4, Merriweather) ning jäta pealkirjafondid, nagu Playfair Display, DM Serif Display, Oswald või Caveat, lühikeste pealkirjade jaoks.
  • Sobivad proportsioonid. Sarnase x-kõrgusega fondid sobivad hästi kokku samal real ja samas veerus.
  • Kaks fonti on piisav. Loo hierarhia suuruse, jämeduse ja vahedega, mitte kolmanda kirjatüübiga.

Loetava põhiteksti jaoks on hea alguspiirkond 16 kuni 20 px reakõrgusega 1,4 kuni 1,7 ning umbes 60 kuni 75 märki real. Pealkirjad vajavad tavaliselt tihedamat reakõrgust (1,1 kuni 1,3), mille CSS-kood sinu eest paika paneb.

CSS-kood

Kood deklareerib kaks kohandatud omadust, --font-heading ja --font-body, kummalgi varufontide virn: kui veebifont ei ole veel laaditud, näitab brauser sarnast süsteemifonti (seriifidega fondi jaoks Georgia, seriifita fondi jaoks süsteemi kasutajaliidese font). Suurused on kirjutatud rem-ühikutes (16 px = 1rem), seega järgivad need lugeja brauseri fondisuuruse seadet.

Isehostimine ja litsentsid

Kõik 20 fonti pärinevad Fontsource’ist, mis pakendab avatud lähtekoodiga fonte npm-i jaoks. Paigaldusplokk annab käsu npm install ja import read latin-alamhulga ning ainult sinu kasutatavate jämeduste jaoks; sinu komplekteerija kopeerib seejärel woff2-failid sinu ehitusse. Fontide serveerimine oma domeenilt on kiirem (lisaühendust pole), töötab ilma võrguta ja väldib külastajate IP-aadresside saatmist kolmanda osapoole fonditeenusele, mis on ELis tuntud GDPR-i probleem.

Iga siinne font on paketi metaandmete kohaselt litsentsi SIL Open Font License 1.1 all: võid seda kasutada veebisaitidel, rakendustes ja trükis, kommertseesmärgil või mitte, ning seda põimida. Fondifaile eraldi müüa ei tohi. Kui fonti muudad, peab see säilitama OFL-i ega tohi kasutada originaali reserveeritud nime. Litsentsifail on igas paketis kaasas.

Korduma kippuvad küsimused

Kas see tööriist kasutab Google Fonts?

Ei. Paljud neist perekondadest on saadaval ka Google Fontsis, kuid siin pärinevad failid Fontsource’i npm-pakettidest ja neid serveerib see sait. Ühtegi päringut ei saadeta Google’ile ega ühelegi teisele fondi-CDN-ile.

Miks mõned pealkirjad ei muutu paksemaks?

DM Serif Display on olemas ainult tavalises jämeduses. Tööriist näitab seda siis jämedusega 400, ütleb seda juhtelementide all ja CSS-kood kasutab 400.

Kas võin sobitada kaks seriifiga või kaks seriifita fonti?

Võid, kui need erinevad selgelt rolli ja jämeduse poolest, näiteks paks kitsas pealkiri koos kerge avatud põhitekstifondiga. Tööriist näitab märkust, kui mõlemad fondid on sama stiiliga, sest seriifiga ja seriifita fondi kontrasti on lihtsam õigesti saada.

Millised märgid on kaasas?

Eelvaade laadib latin-alamhulga (inglise, prantsuse ja enamiku Lääne-Euroopa keelte märgid, sealhulgas rõhumärgid, œ, « » ja euromärk) ning, kui fondil need on ja sinu tekst neid vajab, ka latin-ext (Kesk-Euroopa tähed, nagu č, ł, ő, ț), kirillitsa ja kreeka alamhulga. Eesti tähed õ, ä, ö ja ü kuuluvad latin-alamhulka ning š ja ž latin-ext-alamhulka; vajadusel laaditakse mõlemad. Fondid, millel alamhulka ei ole, näitavad neid tähti varufondis: Latol, Work Sans’il ja Space Grotesk’il ei ole kirillitsat ning kreeka tähti on ainult fondidel Inter, Roboto, Open Sans, Source Serif 4 ja Fira Code. Ühelgi 20 fondist ei ole araabia tähti.

Kas ma võin neid fonte kommertsprojektis kasutada?

Jah. SIL Open Font License lubab kommertskasutust ilma tasu ja ilma sinu disainis viitamiseta. Keelatud on ainult fondifailide eraldi edasimüümine.

Seotud tööriistad