Parapamje e çiftimit të fonteve
Shiko çiftimet e fonteve për tituj e tekst me 20 fonte me licencë të hapur, rregullo madhësinë dhe lartësinë e rreshtit dhe kopjo vargjet CSS font-family.
Çifte të sugjeruara
Pamja paraprake
Instalo paketat npm dhe importo vetëm trashësitë që përdor. Atëherë fontet shërbehen nga faqja jote, pa një CDN fontesh.
Si ta përdorësh parapamjen e çiftimit të fonteve
- Nise me një nga Çiftet e sugjeruara (Editorial, Blog modern, Faqe uebi promovuese, Lajme, Elegant, Revistë teknologjike, Libër, Klasik, Dokumentim, Lozonjar). Çdo buton tregon fontin e titullit dhe fontin e tekstit që aplikon.
- Ose zgjidh vetë Fontin e titullit dhe Fontin e tekstit. Listat janë të grupuara në fonte sans-serif, serif, display, monospace dhe shkrim dore. Këmbe fontet i ndërron të dy.
- Rregullo Madhësinë e titullit, Madhësinë e tekstit dhe Lartësinë e rreshtit, dhe zgjidh Trashësinë e titullit (I trashë (700) ose Normal (400)). Shëno Sfond i errët për ta provuar çiftin në modalitet të errët.
- Zëvendëso Tekstin e titullit dhe Tekstin kryesor me fjalët e tua: një titull real dhe një paragraf real të thonë shumë më tepër se një fjali me të gjitha shkronjat. Lër një rresht bosh mes paragrafëve.
- Kopjo Kodin CSS, pastaj ndiq Strehim vetjak me Fontsource për të shtuar fontet në projektin tënd.
Fontet ngarkohen herën e parë që i zgjedh (rreth 12 deri 50 KB për trashësi). Shërbehen nga kjo faqe, kurrë nga një CDN fontesh.
Çfarë e bën një çiftim fontesh të mirë
- Kontrast, jo përplasje. Receta klasike është një serif për një rol dhe një sans-serif për tjetrin: Playfair Display mbi Lato, ose Montserrat mbi Merriweather. Dy fonte që janë të ngjashëm por jo identikë (dy sans-serif gjeometrikë, të themi) shpesh duken si gabim.
- Një font i qetë teksti. Teksti kryesor është vendi ku njerëzit kalojnë kohën. Zgjidh një font me forma të hapura shkronjash dhe lartësi x bujare (Inter, Lato, Open Sans, Source Serif 4, Merriweather) dhe ruaji fontet display si Playfair Display, DM Serif Display, Oswald ose Caveat për tituj të shkurtër.
- Përpjesëtime të përputhura. Fontet me lartësi x të ngjashme qëndrojnë mirë bashkë në të njëjtin rresht dhe të njëjtën kolonë.
- Dy fonte mjaftojnë. Krijo hierarki me madhësi, trashësi dhe hapësirë në vend të një shkronje të tretë.
Për tekst të lexueshëm, 16 deri 20 px me lartësi rreshti mes 1,4 dhe 1,7 është një interval i mirë fillestar, me rreth 60 deri 75 karaktere për rresht. Titujt zakonisht kanë nevojë për lartësi më të ngushtë rreshti (1,1 deri 1,3), që e cakton kodi CSS për ty.
Kodi CSS
Kodi deklaron dy veti të personalizuara, --font-heading dhe --font-body, secila me një varg rezervë: nëse fonti i uebit nuk është ngarkuar ende, shfletuesi shfaq një font sistemi të ngjashëm (Georgia për serif, fonti UI i sistemit për sans-serif). Madhësitë shkruhen në rem (16 px = 1rem), kështu ndjekin cilësimin e madhësisë së shkronjave të shfletuesit të lexuesit.
Strehimi vetjak dhe licencat
Të 20 fontet vijnë nga Fontsource, që paketon fonte me burim të hapur për npm. Kutia e instalimit jep komandën npm install dhe rreshtat import për nëngrupin latin dhe vetëm trashësitë që përdor; paketuesi yt pastaj i kopjon skedarët woff2 në build-in tënd. Shërbimi i fonteve nga domeni yt është më i shpejtë (pa lidhje shtesë), funksionon pa internet dhe shmang dërgimin e adresave IP të vizitorëve te një shërbim fontesh i palës së tretë, problem i njohur GDPR në BE.
Çdo font këtu është nën SIL Open Font License 1.1, sipas metadatave të paketës: mund ta përdorësh në faqe interneti, në aplikacione dhe në printim, për qëllime tregtare ose jo, dhe ta ngulitësh. Nuk mund t’i shesësh skedarët e fontit vetëm. Nëse e modifikon një font, duhet të mbajë OFL dhe të mos përdorë emrin origjinal të rezervuar. Skedari i licencës përfshihet në çdo paketë.
Pyetje të shpeshta
A përdor ky mjet Google Fonts?
Jo. Shumë nga këto familje ndodhen edhe në Google Fonts, por këtu skedarët vijnë nga paketat npm Fontsource dhe shërbehen nga kjo faqe. Asnjë kërkesë nuk shkon te Google ose te ndonjë CDN tjetër fontesh.
Pse disa tituj nuk bëhen më të trashë?
DM Serif Display ekziston vetëm në trashësi normale. Atëherë mjeti e shfaq në 400, e thotë këtë nën kontrollet, dhe kodi CSS përdor 400.
A mund të çiftoj dy fonte serif ose dy sans-serif?
Po, nëse dallojnë qartë në rol e trashësi, për shembull një titull i trashë i ngushtuar me një font teksti të lehtë e të hapur. Mjeti shfaq një shënim kur të dy fontet kanë të njëjtin stil, sepse kontrasti serif me sans-serif arrihet më lehtë.
Cilat karaktere përfshihen?
Pamja paraprake ngarkon nëngrupin latin (anglisht, frëngjisht dhe shumicën e gjuhëve të Evropës Perëndimore, me shenja diakritike, œ, « » dhe shenjën e euros) dhe, kur fonti i ka dhe teksti yt ka nevojë për to, nëngrupet latin-ext (shkronja të Evropës Qendrore si č, ł, ő, ț), cirilik dhe greqisht. Fontet pa një nëngrup i shfaqin ato shkronja me fontin rezervë: Lato, Work Sans ose Space Grotesk nuk kanë cirilik, dhe vetëm Inter, Roboto, Open Sans, Source Serif 4 dhe Fira Code kanë greqisht. Asnjë nga 20 fontet nuk ka shkronja arabe. Shkronjat shqipe ë dhe ç janë në nëngrupin latin bazë, ndaj shfaqen me fontet e zgjedhura.
A mund t'i përdor këto fonte në një projekt tregtar?
Po. SIL Open Font License lejon përdorim tregtar pa pagesë ose atribuim në dizajnin tënd. Nuk lejohet vetëm rishitja e skedarëve të fontit më vete.
Mjete të ngjashme
- Konvertues PX në REM Konverto px në rem dhe em me çdo madhësi shkronje rrënjë, ndërto një tabelë konvertimi në masë dhe kthe çdo vlerë px të një copëze CSS në rem me një klik.
- Gjenerator palete ngjyrash Gjenero palete ngjyrash nga një ngjyrë bazë me rregullat e harmonisë: plotësuese, analoge, triadike, tetradike, katrore dhe monokromatike.
- Kontrollues kontrasti Kontrollues falas i kontrastit WCAG. Shkruaj ngjyrën e tekstit dhe të sfondit për raportin e kontrastit, rezultatet AA/AAA dhe ngjyrën më të afërt që kalon.
- Gjenerator gradienti CSS Krijo gradientë CSS linearë, radialë dhe konikë me pamje të drejtpërdrejtë. Shto e zhvendos pikat e ngjyrave, cakto këndin dhe kopjo kodin CSS me një klik.