Asociere de fonturi

Q: De ce unele titluri nu devin mai îngroșate?

DM Serif Display există doar într o grosime normală. Instrumentul îl afișează atunci la 400, spune acest lucru sub controale, iar codul CSS folosește 400.

Q: Ce caractere sunt incluse?

Previzualizarea încarcă subsetul latin engleză, franceză și majoritatea limbilor din Europa de Vest, cu accente, œ, « » și semnul euro și, când fontul le are și textul tău le cere, subseturile latin ext litere central europene precum č, ł, ő, ț , chirilic și grec. Pentru româna, literele ș și ț se află în latin ext, pe care previzualizarea îl încarcă automat când textul le conține. Fonturile fără un subset afișează acele litere în fontul de rezervă: Lato, Work Sans sau Space Grotesk nu au chirilic, iar doar Inter, Roboto, Open Sans, Source Serif 4 și Fira Code au grecă. Niciunul dintre cele 20 de fonturi nu are litere arabe. Pe paginile în poloneză, cehă, greacă, bulgară, ucraineană și similare , caseta de instalare listează și liniile de import ale subsetului de care are nevoie limba ta.

Asociere de fonturi

Previzualizează asocieri de fonturi pentru titluri și text cu 20 de fonturi cu licență deschisă, ajustează dimensiunea și copiază stivele CSS font-family.

Perechi sugerate

Fontul titlului Fontul textului

Dimensiunea titlului Dimensiunea textului Înălțimea rândului Grosimea titlului Fundal închis

Textul titlului Textul de bază

Previzualizare

Cod CSS

Găzduire locală cu Fontsource

Instalează pachetele npm și importă doar grosimile pe care le folosești. Fonturile sunt apoi servite de pe propriul tău site, fără un CDN de fonturi.

Cum folosești previzualizarea asocierilor de fonturi

Pornește de la una dintre Perechi sugerate (Editorial, Blog modern, Pagină de prezentare, Știri, Elegant, Revistă de tehnologie, Carte, Clasic, Documentație, Jucăuș). Fiecare buton arată fontul titlului și fontul textului pe care le aplică.
Sau alege propriul Fontul titlului și Fontul textului. Listele sunt grupate în fonturi sans-serif, serif, display, monospace și scris de mână. Inversează fonturile le schimbă între ele.
Ajustează Dimensiunea titlului, Dimensiunea textului și Înălțimea rândului și alege Grosimea titlului (Îngroșat (700) sau Normal (400)). Bifează Fundal închis ca să verifici perechea în modul întunecat.
Înlocuiește Textul titlului și Textul de bază cu propriile cuvinte: un titlu real și un paragraf real îți spun mult mai mult decât o frază-test. Lasă un rând gol între paragrafe.
Copiază Cod CSS, apoi urmează Găzduire locală cu Fontsource ca să adaugi fonturile în proiect.

Fonturile se încarcă prima dată când le alegi (aproximativ 12 până la 50 KB pe grosime). Sunt servite de pe acest site, niciodată de la un CDN de fonturi.

Ce face o asociere de fonturi bună

Contrast, nu conflict. Rețeta clasică este un serif pentru un rol și un sans-serif pentru celălalt: Playfair Display peste Lato sau Montserrat peste Merriweather. Două fonturi asemănătoare, dar nu identice (de exemplu două sans-serif geometrice), arată adesea ca o greșeală.
Un font calm pentru text. În textul de bază își petrec oamenii timpul. Alege un font cu litere deschise și cu o înălțime generoasă a literei x (Inter, Lato, Open Sans, Source Serif 4, Merriweather) și păstrează fonturile display, precum Playfair Display, DM Serif Display, Oswald sau Caveat, pentru titluri scurte.
Proporții potrivite. Fonturile cu înălțimi similare ale literei x stau bine împreună pe același rând și în aceeași coloană.
Două fonturi sunt suficiente. Creează ierarhia prin dimensiune, grosime și spațiere, nu printr-un al treilea font.

Pentru un text de bază lizibil, un punct bun de pornire este între 16 și 20 px, cu o înălțime a rândului între 1,4 și 1,7 și aproximativ 60 până la 75 de caractere pe rând. Titlurile cer de obicei o înălțime de rând mai strânsă (1,1 până la 1,3), pe care o setează codul CSS.

Codul CSS

Codul declară două proprietăți personalizate, --font-heading și --font-body, fiecare cu o stivă de rezervă: dacă fontul web nu s-a încărcat încă, browserul afișează un font de sistem asemănător (Georgia pentru serif, fontul de interfață al sistemului pentru sans-serif). Dimensiunile sunt scrise în rem (16 px = 1rem), deci urmează setarea de dimensiune a fontului din browserul cititorului.

Găzduire locală și licențe

Toate cele 20 de fonturi vin de la Fontsource, care împachetează fonturi open-source pentru npm. Caseta de instalare oferă comanda npm install și liniile import pentru subsetul latin și doar grosimile pe care le folosești; bundlerul tău copiază apoi fișierele woff2 în build. Servirea fonturilor de pe propriul domeniu este mai rapidă (fără conexiune suplimentară), funcționează offline și evită trimiterea adreselor IP ale vizitatorilor către un serviciu terț de fonturi, o problemă GDPR cunoscută în UE.

Toate fonturile de aici sunt sub SIL Open Font License 1.1, conform metadatelor pachetului: le poți folosi pe site-uri, în aplicații și în tipar, comercial sau nu, și le poți încorpora. Nu ai voie să vinzi separat fișierele de font. Dacă modifici un font, acesta trebuie să păstreze licența OFL și să nu folosească numele rezervat original. Fișierul de licență este inclus în fiecare pachet.

Întrebări frecvente

Folosește acest instrument Google Fonts?

Nu. Multe dintre aceste familii sunt disponibile și în Google Fonts, dar aici fișierele provin din pachetele npm Fontsource și sunt servite de acest site. Nicio cerere nu pleacă spre Google sau spre alt CDN de fonturi.

De ce unele titluri nu devin mai îngroșate?

DM Serif Display există doar într-o grosime normală. Instrumentul îl afișează atunci la 400, spune acest lucru sub controale, iar codul CSS folosește 400.

Pot asocia două fonturi serif sau două sans-serif?

Da, dacă diferă clar ca rol și grosime, de exemplu un titlu condensat îngroșat cu un font de text subțire și deschis. Instrumentul afișează o notă când ambele fonturi au același stil, pentru că un contrast serif–sans-serif este mai ușor de realizat corect.

Ce caractere sunt incluse?

Previzualizarea încarcă subsetul latin (engleză, franceză și majoritatea limbilor din Europa de Vest, cu accente, œ, « » și semnul euro) și, când fontul le are și textul tău le cere, subseturile latin-ext (litere central-europene precum č, ł, ő, ț), chirilic și grec. Pentru româna, literele ș și ț se află în latin-ext, pe care previzualizarea îl încarcă automat când textul le conține. Fonturile fără un subset afișează acele litere în fontul de rezervă: Lato, Work Sans sau Space Grotesk nu au chirilic, iar doar Inter, Roboto, Open Sans, Source Serif 4 și Fira Code au grecă. Niciunul dintre cele 20 de fonturi nu are litere arabe. Pe paginile în poloneză, cehă, greacă, bulgară, ucraineană (și similare), caseta de instalare listează și liniile de import ale subsetului de care are nevoie limba ta.

Pot folosi aceste fonturi într-un proiect comercial?

Da. SIL Open Font License permite utilizarea comercială fără plată și fără atribuire în designul tău. Nu este permisă doar revânzarea fișierelor de font ca atare.