CodeKitHubKas yra šis įrankis?
Šriftų porinimas — tai dviejų (kartais trijų) šriftų pasirinkimas naudoti kartu viename puslapyje — dažniausiai vieno antraštėms, kito pagrindiniam tekstui — kad puslapis turėtų vizualinę hierarchiją, bet neatrodytų neatitinkantis ar monotoniškas.
Kiekviena žemiau pateikta pora rodo gyvai atvaizduotą pavyzdį: viršuje — antraštės šriftas, apačioje — teksto šriftas, naudojant tikrus Google Fonts failus, todėl tai, ką matote, gausite ir savo svetainėje.
Kiekviena pora pateikiama su paruoštu naudoti Google Fonts `<link>` įterpimo žymeniu ir atitinkamu CSS fragmentu su `font-family` deklaracijomis antraštėms ir pagrindiniam tekstui — nukopijuokite abu ir viskas paruošta.
Kodėl jį naudoti?
- 28 rankomis atrinktos poros, o ne automatiškai sugeneruotas sąrašas — kiekviena pasirinkta todėl, kad du šriftai iš tiesų vienas kitą papildo.
- Gyva peržiūra: kiekviena pora atvaizduojama su tikrais šriftais, įkeltais iš Google Fonts, o ne su statišku vaizdu ar šrifto pavadinimo spėjimu.
- Filtruokite pagal nuotaiką — Modernus, Elegantiškas, Ryškus, Minimalistinis, Klasikinis — kad susiaurintumėte iki savo projektui reikalingo pojūčio.
- Vienu paspaudimu nukopijuokite tiek `<link>` įterpimo žymenį, tiek CSS `font-family` taisykles.
- Nemokama, veikia jūsų naršyklėje, nereikia paskyros ar prisijungimo.
Kaip naudoti
- Jei norite, spustelėkite nuotaikos filtrą (Modernus, Elegantiškas, Ryškus, Minimalistinis, Klasikinis), kad susiaurintumėte sąrašą, arba palikite pažymėtą „Visi“, kad peržiūrėtumėte viską.
- Peržvelkite gyvos peržiūros korteles — viršutinė eilutė rodo antraštės šriftą, apatinė — teksto šriftą.
- Atverkite jums patikusią porą ir spustelėkite, kad išskleistumėte įterpimo kodo skiltį.
- Nukopijuokite `<link>` žymenį į savo HTML `<head>` skiltį, o CSS fragmentą — į stilių lentelę, kad pritaikytumėte šriftus antraštėms ir pagrindiniam tekstui.
Pavyzdys
Įvestis
Elegantiškas tinklaraštisIšvestis
Playfair Display (antraštės) + Source Sans Pro (tekstas)Filtruojant pagal „Elegantiškas“ atsiranda didelio kontrasto serifiniai antraščių šriftai, suporuoti su švariu, gerai skaitomu beserifiu tekstu — tai dažna kombinacija redakciniuose ir tinklaraščių maketuose.
Gero šriftų porinimo principai
- Kontrastas svarbiau nei panašumas: du beveik identiškai atrodantys šriftai (pavyzdžiui, du panašūs geometriniai beserifiai) dažniausiai atrodo kaip klaida, o ne sąmoningas pasirinkimas. Porinkite serifinį šriftą su beserifiu arba stambų antraštinį šriftą su lengvesniu teksto šriftu, kad skirtumas atrodytų tyčinis.
- Suderinkite x-aukštį ir proporcijas: šriftai, kurių mažosios raidės yra panašaus vizualinio aukščio, dažniausiai atrodo priklausantys tam pačiam puslapiui, net jei jų stiliai skiriasi — nesutampantis x-aukštis yra viena dažniausių priežasčių, kodėl pora atrodo „ne taip“.
- Apsiribokite dviem šeimomis (kartais trimis): viena antraštėms, kita pagrindiniam tekstui, o trečia, jei reikia, — akcentams, tokiems kaip mygtukai ar žymos. Daugiau nei tiek — ir puslapis pradeda atrodyti nepramąstytas.
- Atsižvelkite ne tik į formą, bet ir į nuotaiką: apvalus, draugiškas beserifis šriftas, suporuotas su formaliu serifiniu, siunčia prieštaringus signalus, net jei raidžių formos techniškai dera tarpusavyje — rinkitės šriftus, kurie sutampa tiek tonu, tiek struktūra.
- Testuokite tikrais dydžiais: pora, puikiai atrodanti didelėje peržiūroje, gali prarasti kontrastą teksto dydžiu, o antraštinis šriftas mažu dydžiu gali tapti neįskaitomas — visada patikrinkite abu kraštutinumus.
Poros parinkimas pagal naudojimo atvejį
Nukreipimo puslapiams ir rinkodaros svetainėms paprastai tinka „Ryškus“ arba „Modernus“ filtrai — stiprus, didelio kontrasto antraštinis šriftas patraukia dėmesį matomoje dalyje, o suporuotas su švariu, neutraliu teksto šriftu palengvina ilgesnio teksto skaitymą.
Tinklaraščiams ir redakciniam turiniui dažnai geriausiai tinka „Elegantiškas“ arba „Klasikinis“ poros — rafinuotas serifinis antraštinis šriftas byloja apie apgalvotą, redaguotą balsą, o patogus serifinis ar beserifis tekstas leidžia ilgus straipsnius skaityti nepavargstant.
Elektroninės prekybos ir produktų svetainės dažniausiai renkasi „Minimalistinis“ poras — santūrūs, neutralūs šriftai sutelkia dėmesį į produktų fotografiją ir kainas, o ne į pačią tipografiją, o tai svarbu, kai viename puslapyje rodomos dešimtys produktų kortelių.
Portfeliams ir kūrybinėms svetainėms tenka daugiausiai erdvės eksperimentuoti — daugiau charakterio turinčios „Ryškus“ ar „Elegantiškas“ poros gali puikiai tikti, nes auditorija čia atėjo iš dalies ir dėl to, kad įvertintų vizualinį skonį.
Pastabos apie našumą ir licencijavimą
Įterpimo `<link>` žymuo įkelia šriftus iš Google CDN, kuris yra greitas ir dažnai jau talpykloje daugelyje svetainių, kurias jūsų lankytojai tikriausiai jau lankė — tačiau tai vis tiek prideda išorinę užklausą. Svetainėms, kuriose svarbi kiekviena milisekundė, šriftų failų atsisiuntimas ir jų talpinimas savo serveryje (rankiniu būdu nustatant `font-display: swap`) pašalina šią išorinę priklausomybę, tačiau reikalauja šiek tiek papildomo darbo.
Visi Google Fonts šriftai yra atvirojo kodo ir nemokami komerciniam naudojimui be privalomo autorystės nurodymo, nors, kai tai lengva padaryti, paminėti šrifto kūrėją yra gražus mandagumo gestas.
Dažniausiai užduodami klausimai
Kas lemia, kad du šriftai „gerai dera“?
Geros poros subalansuoja kontrastą ir darną. Kontrastas — kai serifinis šriftas porinamas su beserifiu arba ryškus antraštinis šriftas su paprastu teksto šriftu — sukuria vizualinę hierarchiją, kad antraštės ir tekstas atrodytų aiškiai atskirti. Darna — panašus x-aukštis, panašus brūkšnio storis ir bendras formalumo ar žaismingumo pojūtis — neleidžia šriftams susidurti. Čia esančios poros parinktos atsižvelgiant į abu šiuos aspektus.
Ar antraštės ir tekstas visada turi naudoti skirtingus šriftus?
Ne, vienos šriftų šeimos naudojimas abiem atvejais (kaip šio įrankio pora „Rubik + Rubik“) taip pat puikiai veikia, jei šriftas turi pakankamai storio variantų, kad atskirtų antraštes nuo pagrindinio teksto. Tai tinkamas, minimalistinis pasirinkimas — ne klaida.
Kaip iš tikrųjų pritaikyti porą savo svetainei?
Nukopijuokite `<link>` įterpimo žymenį į savo puslapio `<head>` skiltį, kad įkeltumėte šriftus iš Google CDN, tada nukopijuokite CSS fragmentą į stilių lentelę — jis nustato `font-family` antraštėms (h1, h2, h3) ir pagrindiniam tekstui (body, p). Jei jūsų žymėjimas skiriasi, pakoreguokite CSS selektorius.
Ar Google Fonts įkėlimas sulėtins mano svetainę?
Kiekvienas papildomas šrifto failas prideda tinklo užklausą ir tam tikrą atvaizdavimo blokavimo riziką. Apsiribokite vienu antraštės storiu ir vienu ar dviem teksto storiais, naudokite `display=swap` (jau įtraukta į įterpimo kodą), kad tekstas rodytųsi atsargine šriftu, kol įkeliamas žiniatinklio šriftas, o gamybinėms svetainėms, kurioms reikia kuo greitesnio įkėlimo, apsvarstykite galimybę talpinti šriftų failus savo serveryje.
Ar šiuos šriftus galima nemokamai naudoti komerciniais tikslais?
Taip. Kiekvienas Google Fonts šriftas, įskaitant visas čia pateiktas poras, licencijuojamas pagal SIL Open Font License arba Apache License — abi licencijos leidžia nemokamai naudoti komerciniais tikslais, keisti ir platinti be autorinio atlyginimo.