Utilia
Kategorijos ▾
Kalba: lt ▾

Šriftų derinimo peržiūra

Peržiūrėk antraščių ir teksto šriftų poras su 20 atvirosios licencijos šriftų, keisk dydį ir eilutės aukštį bei nukopijuok CSS font-family rinkinius.

Siūlomos poros

Peržiūra

Įdiek npm paketus ir importuok tik naudojamus svorius. Tada šriftai pateikiami iš tavo svetainės, be šriftų CDN.

Kaip naudotis šriftų derinimo peržiūra

  1. Pradėk nuo vienos iš Siūlomos poros (Redakcinis, Šiuolaikinis tinklaraštis, Nukreipimo puslapis, Naujienos, Elegantiškas, Technologijų žurnalas, Knyga, Klasikinis, Dokumentacija, Žaismingas). Kiekvienas mygtukas parodo antraščių šriftą ir teksto šriftą, kuriuos pritaiko.
  2. Arba pasirink savo Antraščių šriftas ir Teksto šriftas. Sąrašai sugrupuoti į šriftus be užraitų, su užraitais, dekoratyvinius, lygiaplotius ir rašytinius. Sukeisti šriftus juos sukeičia vietomis.
  3. Pakoreguok Antraštės dydis, Teksto dydis ir Eilutės aukštis bei pasirink Antraštės svoris (Pastorintas (700) arba Įprastas (400)). Pažymėk Tamsus fonas, kad patikrintum porą tamsiu režimu.
  4. Pakeisk Antraštės tekstas ir Pagrindinis tekstas savo žodžiais: tikra antraštė ir tikra pastraipa pasako daug daugiau nei pangrama. Tarp pastraipų palik tuščią eilutę.
  5. Nukopijuok CSS kodas, tada sek Savarankiškas talpinimas su „Fontsource“, kad šriftus pridėtum į savo projektą.

Šriftai įkeliami pirmą kartą juos pasirinkus (apie 12–50 KB vienam svoriui). Jie pateikiami iš šios svetainės, niekada ne iš šriftų CDN.

Kas sudaro gerą šriftų porą

  • Kontrastas, o ne konfliktas. Klasikinis receptas: serif vienam vaidmeniui ir sans-serif kitam, pavyzdžiui, „Playfair Display“ virš „Lato“ arba „Montserrat“ virš „Merriweather“. Du panašūs, bet ne identiški šriftai (tarkime, du geometriniai sans-serif) dažnai atrodo kaip klaida.
  • Ramus teksto šriftas. Būtent tekste žmonės praleidžia laiką. Rinkis šriftą su atviromis raidžių formomis ir dideliu x aukščiu („Inter“, „Lato“, „Open Sans“, „Source Serif 4“, „Merriweather“), o dekoratyvinius šriftus, tokius kaip „Playfair Display“, „DM Serif Display“, „Oswald“ ar „Caveat“, palik trumpoms antraštėms.
  • Suderintos proporcijos. Šriftai su panašiu x aukščiu gerai dera toje pačioje eilutėje ir stulpelyje.
  • Pakanka dviejų šriftų. Hierarchiją kurk dydžiu, svoriu ir tarpais, o ne trečiu šriftu.

Įskaitomam tekstui geras pradinis diapazonas yra 16–20 px su eilutės aukščiu tarp 1,4 ir 1,7 ir apie 60–75 ženklų eilutėje. Antraštėms paprastai reikia glaudesnio eilutės aukščio (1,1–1,3), kurį CSS kodas nustato už tave.

CSS kodas

Kode deklaruojamos dvi pasirinktinės savybės, --font-heading ir --font-body, kiekviena su atsarginiu rinkiniu: jei žiniatinklio šriftas dar neįsikėlė, naršyklė rodo panašų sistemos šriftą („Georgia“ serif šriftams, sistemos sąsajos šriftą sans-serif šriftams). Dydžiai užrašomi rem vienetais (16 px = 1 rem), todėl jie seka skaitytojo naršyklės šrifto dydžio nustatymą.

Savarankiškas talpinimas ir licencijos

Visi 20 šriftų yra iš „Fontsource“, kuris pakuoja atvirojo kodo šriftus npm. Diegimo lauke pateikiama npm install komanda ir import eilutės lotynų poaibiui bei tik tavo naudojamiems svoriams; tada tavo paketų sudarytojas nukopijuoja woff2 failus į tavo išvestį. Šriftų pateikimas iš savo domeno yra greitesnis (nereikia papildomo ryšio), veikia neprisijungus ir neleidžia siųsti lankytojų IP adresų trečiosios šalies šriftų paslaugai – tai žinoma BDAR problema ES.

Kiekvienas čia esantis šriftas, pagal paketo metaduomenis, licencijuotas pagal SIL Open Font License 1.1: gali jį naudoti svetainėse, programose ir spaudoje, komerciškai ar ne, ir jį įterpti. Negali parduoti pačių šrifto failų. Jei šriftą modifikuoji, jis turi likti su OFL ir negali naudoti originalaus rezervuoto pavadinimo. Licencijos failas įtrauktas į kiekvieną paketą.

Lietuviškos raidės ir kalbos poaibiai

Peržiūra įkelia lotynų poaibį ir, kai šriftas jų turi ir tavo tekstui jų reikia, lotynų išplėstinį (latin-ext) poaibį. Lietuviškos raidės ą, č, ę, ė, į, š, ų, ū, ž yra latin-ext poaibyje, todėl lietuviškam tekstui jis reikalingas, o pavyzdinis tekstas peržiūroje jau jų turi. Šriftas be reikiamo poaibio tas raides rodo atsarginiu šriftu. Lietuvių kalbos puslapiuose diegimo laukas taip pat išvardija importo eilutes poaibiui, kurio reikia tavo kalbai.

Dažnai užduodami klausimai

Ar šis įrankis naudoja „Google Fonts“?

Ne. Daugelis šių šeimų yra ir „Google Fonts“, bet čia failai gaunami iš „Fontsource“ npm paketų ir pateikiami iš šios svetainės. Jokia užklausa nesiunčiama „Google“ ar kitam šriftų CDN.

Kodėl kai kurios antraštės netampa pastorintos?

„DM Serif Display“ egzistuoja tik įprasto svorio. Tada įrankis rodo jį 400 svoriu, tai pasako po valdikliais, o CSS kodas naudoja 400.

Ar galiu derinti du serif arba du sans-serif šriftus?

Taip, jei jie aiškiai skiriasi vaidmeniu ir svoriu, pavyzdžiui, pastorinta siaura antraštė su lengvu atviru teksto šriftu. Įrankis parodo pastabą, kai abu šriftai turi tą patį stilių, nes serif ir sans-serif kontrastą lengviau suderinti.

Kokie ženklai įtraukti?

Peržiūra įkelia lotynų poaibį (anglų, prancūzų ir daugumos Vakarų Europos kalbų raidės su diakritikais, œ, « » ir euro ženklas) ir, kai šriftas jų turi ir tavo tekstui reikia, lotynų išplėstinį (Vidurio Europos raidės, pvz., č, ł, ő, ț, taip pat lietuviškos), kirilicos ir graikų poaibius. Šriftai be poaibio tas raides rodo atsarginiu šriftu: „Lato“, „Work Sans“ ar „Space Grotesk“ neturi kirilicos, o graikų raidžių turi tik „Inter“, „Roboto“, „Open Sans“, „Source Serif 4“ ir „Fira Code“. Nė vienas iš 20 šriftų neturi arabiškų raidžių.

Ar galiu naudoti šiuos šriftus komerciniame projekte?

Taip. SIL Open Font License leidžia komercinį naudojimą be mokesčio ir be nurodymo tavo dizaine. Draudžiama tik perparduoti pačius šrifto failus.

Susiję įrankiai