Kaip susikurti savo šriftą. Patarimai ir programos

Daug rašyta apie tipo dizainą, ypač apie jo sukūrimo istoriją. Perskaitėme apie daugybę šriftų kūrimo būdų. Bet nuo ko būtent turėtume pradėti? Jei esate dizaineris ar iliustratorius ir ši disciplina jums nauja, nuo ko pradėti?

Mes radome Naudinga informacija, kuris buvo surinktas iš daugelio šaltinių, ir nusprendė viską sujungti.

1. Pradėkite nuo trumpo

Šrifto kūrimas yra ilgas ir kruopštus darbas, todėl labai svarbu aiškiai suprasti, koks šis šriftas turi būti.

Sukurti trumpą, žinoma, reikės tyrimų ir mąstymo. Kaip bus naudojamas jūsų šriftas: ar jo reikės konkrečiam projektui ar asmeniniam naudojimui? Ar yra problema, kurią jūsų šriftas išspręstų? Ar jūsų šriftas tilps į daugybę panašių dizainų? Kuo jis išskirtinis?

Yra daug variantų. Šriftai gali būti sukurti, pavyzdžiui, specialiai akademiniams tekstams arba plakatams. Tik tada, kai žinote, kaip jūsų šriftas gali būti naudojamas, būsite pasirengę pradėti kurti.

2. Fundamentalus pasirinkimas

Reikia atsiminti daugybę sprendimų. Ar tai bus sans serif ar serif šriftas? Ar tai bus ranka rašytas tekstas, ar labiau geometrinis? Ar šriftas bus skirtas tekstui ir tinka ilgiems dokumentams? O gal tekstas bus rodomas kūrybišku stiliumi ir geriau atrodys didesnio dydžio?

Užuomina: Daroma prielaida, kad sans serif šriftų dizainas pradedantiesiems yra sunkesnis, nes tokių šriftų galimybės yra konkretesnės.

3. Spąstai ankstyvosiose stadijose

Yra keletas spąstų:

  • Galite nuspręsti pradėti nuo rašymo ranka kompiuterizavimo, o tai gali būti naudingas pratimas. Tačiau kadangi rašysena yra tokia individuali, jūsų šriftas gali nepasisekti dėl jo specifiškumo.
  • Neturėtumėte naudoti esamų šriftų kaip pagrindo. Šiek tiek perdarydami jau visiems pažįstamą šriftą geresnio šrifto nesukursite ir savo įgūdžių nelavinsite.

4. Naudokite rankas

Yra daug medžiagos, kaip piešti šriftus naudojant kompiuterines programas, tačiau primygtinai rekomenduojame pirmiausia nupiešti ranka. Bandydami tai padaryti kompiuteriu, jūsų darbas bus daug sunkesnis.

Pabandykite sukurti gražios formos kelias pirmąsias raides ant popieriaus ir tik tada pradėkite darbas kompiuteriu. Vėlesnės raidės gali būti sukurtos pagal esamas formas, atsižvelgiant į pagrindines savybes.

Užuomina: Ranka paprastai galite nubrėžti lygesnes, tikslesnes kreives. Kad būtų patogiau, nebijokite popieriaus lapo pasukti taip, kaip jums reikia.

5. Nuo kokių simbolių pradėti

Pirmiausia sukūrę konkrečius simbolius galite nustatyti šrifto stilių. Na, tada šie simboliai bus naudojami kaip vadovai. Paprastai „valdymo simboliai“, kaip jie vadinami, lotyniškai yra n ir o, o didžiosios raidės yra H ir O. Žodis adhension dažnai naudojamas norint patikrinti pagrindines šrifto proporcijas (tačiau kai kurie rašo šį žodį kaip adhencion, nes raidė s gali būti labai klastinga).

6. Perkelkite šriftą į kompiuterį

Yra daug būdų, kaip perkelti piešinį į kompiuterį. Kai kurie rekomenduoja sekimo programas, tačiau daugelis nori atlikti šį darbą rankiniu būdu visiška kontrolė virš taškų ir formų.

Daugeliui programų reikalingas aiškus ir ryškus dizainas, todėl, kai jums patinka šriftas, pažymėkite jį smulkiu rašikliu ir užpildykite figūras žymekliu.

Užuomina: Jei apdorojote nupieštą šriftą, kaip aprašyta aukščiau, galite tiesiog nufotografuoti piešinį ir dirbti su juo.

7. Programos pasirinkimas

Daugelis dizainerių mėgsta naudoti Adobe Illustrator. Puikiai tinka piešti individualias formas ir eksperimentuoti. Tačiau vėliau tampa akivaizdu, kad jis netinkamas šriftų kūrimui. Jūs norėsite dirbti su programa, kuri leidžia dirbti su tarpais tarp raidžių ir žodžių kūrimu.

Puiki programa yra FontLab Studio, tačiau vis labiau populiarėja nauja programinė įranga, tokia kaip Glyphs ir Robofont. Šios programos nėra pigios, tačiau „Glyghs“ turi „mini“ versiją „Mac“. Programėlių parduotuvė trūksta kai kurių funkcijų, o tai nėra gerai, nes šios funkcijos yra svarbios pradedantiesiems.

8. Programų naudojimas

Nepamirškite išdėstyti kraštutinių raidžių formų taškų (viršuje, apačioje, dešinėje, kairėje), kad galėtumėte geriau valdyti procesą.

9. Žodžiai

Kai baigsite visą formų išlyginimo darbą, pažiūrėkite, kaip jis atrodo visu tekstu. Išsiaiškinkite, kaip šriftas atrodo eilutėje, pastraipoje ir pan. Ir nelaukite, kol atliksite visą abėcėlę.

Viena iš populiariausių šriftų dizaino programų. Galima naudoti „Windows“ ir „Mac“.

Programa yra prieinama „Windows“, turi intuityvią sąsają ir puikiai tinka pradedantiesiems.

Kitas galingas redaktoriusšriftas iš FontLab, leidžiantis kurti naujus šriftus arba modifikuoti esamus. Galima naudoti „Windows“ ir „Mac“.

Ši programa veikia Windows, Mac, Unix/Linux ir buvo išversta į daugelį kalbų. Tai taip pat leidžia kurti naujus šriftus ir redaguoti esamus.

„OpenType“ šriftų rengyklė, prieinama „Windows“ ir „Mac OS X“. Gana paprasta ir turi pakankamai funkcijų.

Kitas nemokama priemonė, su kuria galite kurti taškinius šriftus.

Nemokama bandomoji versija (9 USD už šrifto atsisiuntimą) internetinis įrankis, leidžiantis kurti šriftus iš ranka rašyto teksto.

Kitas internetinis įrankis (taip pat beveik 10 USD atsisiųsti), leidžiantis sukurti šriftą iš ranka rašyto teksto.

Nemokamas ir gana galingas šriftų rengyklė. Puikiai tinka pradedantiesiems ir tiems, kurie nenori leisti pinigų programinės įrangos pirkimui.

Ši programa pasiekiama „iPad“ ir „Windows 8“. Ji leidžia sukurti šriftą iš eskizo ir redaguoti esamus šriftus.

Nemokamas įrankis ribotą laiką. Su juo galite kurti šriftus ir juos atsisiųsti.

Nemokamas internetinis įrankis, leidžiantis kurti TTF ir OTF šriftus iš ranka rašyto teksto.

Yra nemokama ir aukščiausios kokybės versija. Programa veikia Windows, Linux, Mac OS X ir BSD sistemose.

Šioje straipsnio pamokoje aš jums pasakysiu, kaip sukurti savo svetainės šriftą naudojant piktogramas, kurias sukūrėte patys. Viskas, ko mums reikia, yra sukurti programa vektorinė grafika(„Adobe Illustrator“ arba „Inkspcape“) ir prieiga prie interneto. Taigi, pradėkime! Visus tam naudotus vaizdus, ​​piktogramas ir css šriftą galite atsisiųsti straipsnio pabaigoje.

Šioje pamokoje padarysime ką nors paprasto. Pirmajai piktogramai nupiešime įprastą žvaigždę. Antrajai ikonai – erelis su W raide viduje. Gana lengva piešti ir galite sukurti bet kokias formas ir derinius. Šiems tikslams naudojau iliustratorių.

Kai baigsite kūrybinę dalį, jūsų kūrinys turi būti išsaugotas SVG formatu. Spustelėkite „Išsaugoti kaip“ ir pasirinkite failo tipą kaip SVG. Dabar galite pereiti tiesiai prie šrifto kūrimo.

Šiems tikslams naudojame populiarią ir nemokamą paslaugą IcoMoon.

Pirmas dalykas, kurį reikia padaryti, yra sukurti naują projektą, todėl spustelėkite meniu viršutiniame kairiajame kampe ir spustelėkite „Naujas projektas“. Tada įkeliame paruoštus svg failus spustelėję mygtuką „Importuoti piktogramas“. Atlikę šiuos veiksmus, savo monitoriuje turėtumėte pamatyti tokį vaizdą:

Dabar turime galimybę pakeisti kiekvienos piktogramos kodą (mūsų atveju tai bus e600 ir e601), šrifto pavadinimą, CSS priešdėlį ir pan. Visa tai daroma skiltyje „Nuostatos“. Be to, šriftą galime pamatyti paspaudę nuorodą „Įgalinti greitą naudojimą“, kuri leis mums gauti laikiną nuorodą į mūsų šriftą, taip pat galimybę peržiūrėti kodą „CodePen“.

Viską sukonfigūravę spustelėkite puslapio apačioje esantį mygtuką „Atsisiųsti“ ir atsisiųskite archyvą. Šiame archyve rasite savo šriftą ttf, eot, svg ir woff formatais + demonstracinį puslapį su šriftu.

Piktogramų naudojimas svetainėje

Dabar viskas, ko mums reikia, yra įtraukti CSS šriftą naudojant @font-face ir nurodyti kitus parametrus (jie visi įrašyti css faile, esančiame atsisiųstame archyve.

@font-face ( šriftų šeima: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; kalbėkite: none: šrifto variantas: normalus: 1 -smoothing: grayscale; ) .wdm-star:before ( turinys: "\e600"; ) .wdm-eagle:before ( turinys: "\e601"; )

Dabar mes galime naudoti savo šriftą HTML kode taip:

Nurodykite žymos klasės pavadinimą mes gauname savo piktogramą.

.

Sužinojau daug naujų dalykų šia tema. Visų pirma, du šriftų prijungimo būdai, darbo su „Google Fonts“ paslauga ir skaitinė šriftų tankio skalė, ištekliai nemokamų šriftų paieškai, darbo su FontSquirrel generatoriumi sudėtingumas, šriftų piktogramų ištekliai. Man informacija pasirodė be galo naudinga ir įdomi.

Žemiau pateikiu trumpą visų klausimų, kurie man atrodė įdomūs ir nauji mano praktikoje, perpasakoti savais žodžiais, santrauką. Tikiuosi, kad ši medžiaga bus naudinga ne tik man.

Žiniatinklio šriftų prijungimas naudojant @font-face:

  • nestandartinio šrifto prijungimas naudojant direktyvą

direktyvą

Nurodo naršyklei pasirinktiems puslapio elementams taikyti šriftą nurodytu pavadinimu.

Yra keletas žiniatinklio šriftų formatų. Dažniausi yra: EOT, WOFF, OTF arba TTF,

EOT formatas, kurį supranta IE naršyklės iki 8 versijos. Tiesą sakant, šis šrifto formatas buvo sukurtas ir egzistuoja tik dėl šios naršyklės ir jos versijų. Norėdami gauti EOT formato šriftą, jums reikia specialaus programinė įranga konvertuoti TTF į OET formatą.

WOFF formatu(Web Open Font Format) šiandien yra geriausias naudoti žiniatinklyje: mažiausias ir lengviausias, palaikomas visų šiuolaikinių naršyklių (įskaitant IE9 ir naujesnes versijas); šis formatas buvo sukurtas specialiai žiniatinkliui. Tiesą sakant, tai yra lengva TTF arba OTF formato versija.

OTF formatai(Open Type Font) ir TTF (True Type Font) yra labiausiai paplitę kompiuterių šriftai, naudojami daugumoje operacinių sistemų (Windows, Macintosh, Linux) ir šių sistemų programose. Tačiau, be to, tokius šriftus galima lengvai naudoti internete.

SVG formatu- tai net ne šrifto formatas, o grafinis formatas, grafinis vaizdas. Šio formato ypatumas yra tas, kad šio formato grafika kuriama tik naudojant vektorius, tai yra matematines formules.

Dėl šios priežasties šio formato vaizdai keičiami neprarandant kokybės – padidėjus vaizdo dydžiui, kompiuteriui tereikia perskaičiuoti vektorinius taškus. Šio grafinio formato ypatumai leido jį naudoti kuriant „šriftus“. Tai reiškia, kad įprastas šriftas konvertuojamas į SVG formatą, kur kiekvienas šriftas iš tikrųjų yra keičiamo dydžio SVG formato vaizdas.

Kodėl prireikė tokių sunkumų? Reikalas tas, kad naršyklės, kuriose veikia Android OS (labai paplitusi OS mobiliesiems įrenginiams), gali rodyti tik šio formato žiniatinklio šriftus. „iPhone“ skirtos naršyklės („Safari 4.1“ ir senesnės versijos) taip pat negali atpažinti žiniatinklio šriftų. Šiems „nekompetentingiems“ nuotraukos pateikiamos šriftų pavidalu - „jei nežinai, kaip valgyti įprastą maistą, tai bent jau valgyk tai!

Teisinė šriftų naudojimo problema

Klausimas gali būti trumpai suformuluotas šiais dviem sakiniais. Visi šriftai yra suskirstyti į mokama arba Laisvas.

Mokamašriftai skirstomi į tokius, kurie:

  • Gali naudoti žiniatinklyje
  • tai uždrausta naudoti žiniatinklyje

Kad išvengtumėte painiavos šriftų licencijų problemos sprendimo, galite naudoti žiniatinklio paslaugas „Google“ šriftai arba TypeKit, kuriame yra visi šriftai, kurį galima naudoti žiniatinklyje. Šių serverių šriftai yra arba Laisvas („Google“ šriftai), arba mokama(TypeKit).

Trumpas sąrašas nemokami šriftų šaltiniai, kurį galima naudoti internete:

    https://www.theleagueofmoveabletype.com/)
  • FontSquirrel (http://www.fontsquirrel.com/)
  • „Google“ šriftai ( https://www.google.com/fonts)
  • Atviroji šriftų biblioteka (http://openfontlibrary.org/ru)
  • Fontex.org (http://fontex.org/)
  • „Exljbris Font Foundry“ (http://www.exljbris.com/)

Dauguma žiniatinklio paslaugų, teikiančių žiniatinklio šriftus, teikia jas OTF arba TTF formatu. Todėl reikia konvertuoti šį šriftą į keturis aukščiau aprašytus formatus, kad didžiausias svetainės lankytojų skaičius galėtų matyti šios svetainės turinį savo įrenginiuose. Norėdami konvertuoti, jums nereikia ieškoti specialios programinės įrangos. Galite naudoti nemokamą @font-face generatorių, esantį FontSquirrel serveryje (http://www.fontsquirrel.com/).

Vienintelis šios paslaugos apribojimas yra tas, kad ji turi savo juodąjį sąrašą, kuriame yra šriftų, kuriuos pagal licenciją draudžiama naudoti žiniatinklyje. Kitaip tariant, jei „paslydėsite“ šį generatorių su licencijuotu šriftu, įsigytu piratiniu būdu, jis atsisakys generuoti pastarąjį.

Generatorius

yra svarbus ir turėtų būti: @font-face ( šriftų šeima : "PTSans" ; src : url("PTSansRegular.eot") ; src : formatas ("embedded-opentype") , url ("PTSansRegular.woff") formatas ("woff"), url("PTSansRegular.ttf") formatas ("truetype"), url("PTSansRegular.svg") formatas ("svg" )
  • EOT- tik formatas Internet Explorer 8 ir žemiau
  • WOFF- moderniausias ir mažiausias šriftas, kurį supranta dauguma žmonių šiuolaikinės naršyklės
  • TTF- gana didelis šrifto dydis ir gana pasenęs
  • SVG- didžiausias šriftas pagal dydį ir tūrį, todėl jis turi būti dedamas pačioje paskutinėje eilutėje. Be to, šis šrifto formatas naudojamas tik Android OS naršyklėse arba Safari naršyklė 4 (tai yra iPhone)

Naršyklė nuskaito direktyvos turinį

yra neatsitiktinis ir empiriškai patikrintas remiantis ankstesnių žiniatinklio kūrėjų patirtimi. h1 (šriftų šeima: "League Gothic", Arial, sans-serif; šrifto svoris: normalus;)

Teisingas prijungto League Gothic žiniatinklio šrifto naudojimas. Čia pirmiausia nurodomas prijungto šrifto pavadinimas, o tada - atsarginių šriftų, kurie, kaip žinoma, yra įdiegti vartotojo sistemoje(šrifto pavadinimas garantuojamas sistemoje ir šriftų šeimoje).

Dėmesingas skaitytojas atkreips dėmesį į antrąją eilutę ir pasakys: tai nereikalinga, kažkokia nesąmonė. Tiesą sakant, ne visai taip. Pagal numatytuosius nustatymus naršyklės visada bando paryškinti antraštes. Todėl čia mes sakome naršyklei tiesiog to nedaryti, ir viskas.

Be raidžių, šriftus gali sudaryti piktogramos arba vaizdai. Ištekliai, skirti šriftų piktogramų ir piktogramų temai:

Šriftų tipai

Jungiant kompiuteryje įdiegtus šriftus, dažniausiai nekyla klausimų ir nesusimąstome, kaip nutinka, kai naršyklei liepiame paryškinti tekstą naudodami žymą.

tekstas iš tikrųjų rašomas kursyvu; ir paryškintu kursyvu per žymas
1 stiprus em
jis paryškintas kursyvu. Mums atrodo, kad naršyklė sukuria tekstą taip, kaip mes jam sakome.

Tiesą sakant, tai netiesa. Arba ne visai taip. Naršyklė iš tikrųjų atvaizduoja šriftą jai nurodytu būdu, bet negali nieko daryti su pačiu šriftu. Jis tiesiog paima žymos nurodytą šrifto stilių ir parodo jį ekrane. Faktas yra tas, kad dizaineriai ar šriftų įmonės kuria šriftus tokiu būdu: menininkas nupiešia keturis to paties šrifto rinkinius. Tai reiškia, kad simbolių rinkinys nupieštas įprastu stiliumi (įprastas), tada simbolių rinkinys nupieštas kursyvu (kursyvas), tada simbolių rinkinys paryškintu stiliumi (paryškintas) ir galiausiai simbolių rinkinys paryškintu šriftu. kursyvas (paryškintas kursyvas). Visi keturi šie simbolių rinkiniai iš tikrųjų yra atskiri šriftai, nors jie turi tą patį pavadinimą (Georgia, Tahoma, Helvetica ir kt.).

Kai naršyklei pasakoma, kokį stilių naudoti, ji tiesiog paima nurodyto stiliaus šriftą ir jį parodo. Pavyzdžiui, Arial šriftas turi keturis stilius. Jei nurodyta, kad būtinas paryškintas stilius, tada naršyklė naudoja Arial paryškintą stilių. Pati naršyklė niekaip negali konvertuoti vieno stiliaus į kitą. Jis gali padaryti tik vieną dalyką - pabandyti sukurti įprastą „kursyvų“ stilių. Iškviečiama komanda, kuri nurodo naršyklei atlikti tokią užduotį

yra daug sudėtingesnis ir gali būti atliktas dviem būdais: paprastas, kurio IE8 nesupranta (bet supranta visos kitos naršyklės), ir kompleksas, kuris bus prieinamas ir IE8.

Paprastas būdas prijungti žiniatinklio šriftą

Paprastas būdas – pridėti prie direktyvos

ir šios taisyklės atlieka skirtingą vaidmenį, jos verčia naršyklę įkelti nurodyto stiliaus ir svorio žiniatinklio šriftą. Kad būtų aiškiau, iš karto pateiksime PTSans žiniatinklio šrifto sujungimo su keturiomis rodymo parinktimis pavyzdį: @font-face ( font-family : "PTSans" ; src : url("PTSansRegular.eot") ; src : url ("PTSansRegular.eot#iefix") formatas ("embedded-opentype"), url ("PTSansRegular.woff") formatas ("woff"), url ("PTSansRegular.ttf") formatas ("truetype"), url ("PTSansRegular.svg") formatas (" svg"); šrifto svoris: normalus; šrifto stilius: normalus; ) @font-face ( font-family : "PTSans" ; src : url("PTSansItalic.eot") ; src : url("PTSansItalic.eot#iefix") formatas ("embedded-opentype"), url("PTSansItalic" .woff") formatas ("woff"), url ("PTSansItalic.ttf") formatas ("truetype"), url("PTSansItalic.svg") formatas ("svg" ); šrifto svoris : normalus ; šrifto stilius : kursyvas ; ) @font-face ( šriftų šeima : "PTSans" ; src : url("PTSansBold.eot") ; src : url("PTSansBold.eot#iefix") formatas ("embedded-opentype" ), url ("PTSansBold.woff") formatas ("woff") , url("PTSansBold.ttf") formatas ("truetype") , url("PTSansBold.svg") formatas ("svg" : normalus ); ) @font-face ( font-family : "PTSans" ; src : url("PTSansBoldItalic.eot") ; src : formatas ("embedded-opentype" ), url("PTSansBoldItalic.woof") formatas ("woff") , url("PTSansBoldItalic.ttf") formatas ("truetype"), url("PTSansBoldItalic.svg") formatas ("svg" );

Papasakosiu, kaip suprantu šias CSS taisykles. direktyvą

. Šis kintamasis yra masyvas, užpildytas reikšmėmis, naudojant šias taisykles:
  • - įkelti nurodyto svorio šriftą;
  • buvo daroma kiekvieną kartą atskiru funkcijos iškvietimu į pasirinktus puslapio elementus: p ( font-family : PTSans ; )

    Ir tada HTML žymos

    nurodykite, kokį šrifto stilių taikyti nurodytiems elementams: dolor ets< strong >lorem ipsum dolor etslorem ipsum ipsum dolor ets lorem ipsum< em >dolor ets lorem ipsum dolorets lorem ipsum dolor ets

    Naršyklė iš PTSans masyvo „ištrauks“ norimo stiliaus šriftą (pusjuodį arba kursyvą arba paryškintą kursyvą) ir pritaikys jį nurodytiems puslapio elementams.

    Privalumas šis metodasŽiniatinklio šrifto jungtis yra jo universalumas. Pakanka vieną kartą deklaruoti šriftą naudojant direktyvą

    Ir .

    Vietose, kur priklijuojamos žymos

    , IE8 naršyklė pati kurs stilius iš PTSans šrifto. IE8 tinkamo žiniatinklio šrifto ryšio parinkties pavyzdys pateiktas žemiau: @font-face ( šriftų šeima : "PTSansRegular" ; src : url("PTSansRegular.eot") ; src : url ("PTSansRegular.eot#iefix") formatas ("embedded-opentype"), url ("PTSansRegular.woff") formatas ("woff"), url ("PTSansRegular.ttf") formatas ("truetype"), url ("PTSansRegular.svg") formatas (" svg"); ) @font-face ( šriftų šeima : "PTSansItalic" ; src : url("PTSansItalic.eot" ; src : url("PTSansItalic.eot#iefix") formatas ("embedded-opentype"), urlIta("PTSans. woff") formatas ("woff"), url ("PTSansItalic.ttf") formatas ("truetype"), url("PTSansItalic.svg") formatas ("svg" ); ) @font-face ( font-family : "PTSansBold" ; src : url("PTSansBold.eot") src : url("PTSansBold.eot#iefix") formatas ("embedded-opentype") , url("PTSansBold.woff") ("woff") , url("PTSansBold.ttf") formatas ("truetype"), url("PTSansBold.svg") formatas ("svg" ) @font-face ( šriftų šeima : "PTSansBoldItalic" ; src : url( "PTSansBoldItalic. eot" ; src : url ("PTSansBoldItalic.eot#iefix") formatas ("embedded-opentype"), url ("PTSansBoldItalic.woof") formatas ("woff"), url ("PTSansBoldItalic.ttf") formatas ("truetype"), url ("PTSansBoldItalic.svg") formatas (" svg"); )

    Atkreipkite dėmesį, kad nėra taisyklių

    Ir,? Kaip šiuo atveju bus išpūsti stiliaus lapai! O jeigu staiga (neduok Dieve!) tektų atlikti tokio kodo pakeitimus? p ( šriftų šeima : PTSansRegular ; šrifto svoris : normalus ; šrifto kursyvas : normalus ; šrifto dydis : 36 pikseliai ; ) p stiprus ( šriftų šeima : PTSansBold ; šrifto svoris : paryškintas ; šrifto kursyvas : normalus ; ) p em ( šriftų šeima : PTSansItalic ; šrifto svoris : normalus ; šrifto kursyvas : kursyvas ; ) p strong em ( šriftų šeima : PTSansBoldItalic ; šrifto svoris : paryškintas ; šrifto kursyvas : kursyvas ; )

    Naudoti ar nenaudoti antrąjį žiniatinklio šriftų prijungimo būdą priklauso nuo to, kiek tam tikroje svetainėje reikalingas IE8 palaikymas. Atkreipkite dėmesį, kad IE8 dalis krenta ir toliau mažės.

    „Google“ šriftai

    Kad nesivargintumėte ieškant šrifto, atsisiųskite jį TTF arba OTF formatu, konvertuokite naudodami generatorių, pvz., FontSquirrel Generator, gautus CSS stilius sujunkite su projektu naudodami daugybę direktyvų.

    , antrasis yra glaustesnis naudojant direktyvą – užtenka jį prijungti prie stiliaus lapų pradžios, kad pasirinkti šriftai būtų taikomi visiems HTML puslapiams.

    Trečias būdas Su naudojant JavaScript Be sudėtingumo, jis neturi kitų pranašumų prieš kitus du.

    „Google“ nenurodo šrifto svorio naudodama raktinius žodžius.

    , o skaitinėje skalėje – nuo ​​100 iki 900. Reikšmė 400 atitinka Gentium Book Basic šriftą su normaliu kursyvu: em ( šriftų šeima: "Gentium Book Basic", serif; šrifto svoris: 400; šrifto stilius: kursyvas;

    Tai baigia diskusiją apie žiniatinklio šriftus.

Ar pavargote nuo kasdienės monotonijos naudojant įprastus šriftus? O gal turite kokių nors kūrybingų idėjų savo šriftui ir jo stiliui? Jei taip, norime jums pasakyti, kad kadangi esate pakankamai pasitikintis savimi ir kūrybiškas, laikas pradėti lankytis nemokamose svetainėse, kuriose galite įgyvendinti visas su šriftu susijusias idėjas. Taip, tai tiesa, nes internete yra daug grafikos dizainerių skirtų išteklių, kuriuose galite kurti ir kurti savo šriftus. Ateityje galėsite juos naudoti savo projektuose arba dalytis jais su kitais. Verta paminėti, kad šiuo metu yra didžiulė naujų ir įdomių šriftų tipų paklausa. Patikėk, grafiniam pasauliui tiesiog reikia talentingų šriftų kūrėjų, o jei tau tai sekasi, tuomet iš to galima ir papildomai užsidirbti.

Siūlome jums 10 nemokamų šaltinių sąrašą su įrankiais, kurie padės jums kūrybiškai veikti ir kurti naujus kūrybinius šriftus.

„Bird Font“ yra internetinis įrankis, skirtas vektorinei grafikai kurti ir redaguoti. Paslauga siūlo importuoti ir eksportuoti True Type Font (TTF), Embedded OpenType Font (EOF) ir Scalable Vector Graphics (SVG) nustatymus. Svetainėje galite ištirti daugybę galimybių ir įrankių įvairiems kūrimui vektoriniai vaizdai. Populiariausi iš jų yra kreivės orientacija, kontekstinio susiejimo pakeitimas, kerning, objekto pasukimas, fono keitimas ir daug daugiau.

Svetainė sukurta specialiai šriftams kurti ir siūlo veiksmingą platformą jų dizainui. Išteklius bus naudingas entuziastams, mėgstantiems eksperimentuoti su šriftais ir kurti naujus tipus. Naudodami FontStruct galite kurti šriftus naudodami įvairius geometrines figūras, pavyzdžiui, plytelės ar plytų tinklelis. Be to, čia galite rasti paruoštų naujų šriftų tipų. Šriftai, sukurti naudojant FontStruct, vadinami FontStructions ir gali būti įdiegti arba įkelti į tikrojo tipo šrifto (.ttp) failą. Jie taip pat gali būti naudojami „Photoshop“, „Mac“ / „Windows“ programose arba svetainėse ir tinklaraščiuose. Tai svetainė, kurią tikrai verta patikrinti.

Glyphr Studio yra šriftų kūrimo ir redagavimo programa, taip pat įrankis, siūlantis įvairius įdomių savybių. „Glyphr Studio“ galite sukurti savo simbolių ligatūras ir glifus naudodami įvairius vektorinio redagavimo įrankius, tokius kaip rašiklis ir žymeklis. Vienas iš būdingų paslaugos pranašumų yra SVG kodo importas iš „Inkscape“ ir „Illustrator“ Įrankis siūlo dvigubo ekrano režimą patogus dizainas ir redagavimas. Be kita ko, „Glyphr Studio“ palaiko šriftų failus, tokius kaip True Type Font (TTF), Embedded OpenType Font (EOF) ir Scalable Vector Graphics (SVG) šriftų failus.

Svetainė yra naršyklės įrankis, skirtas kurti ir redaguoti bitmap šriftus. Ši paslauga leidžia atsisiųsti arba įkelti šriftus į jų galeriją True Type Font faile.

„MyScriptFont“ yra puikus internetinis įrankis, skirtas kurti vektorinius šriftus pagal jūsų rašyseną. Viskas, ką jums reikia padaryti, tai atsisiųsti šabloną iš PDF formatu arba PNG ir atspausdinkite. Tada ranka parašykite tekstą, nuskenuokite ir įkelkite į svetainę (programa palaiko JPG formatai, PNG, PDF ir kt.). Tekstui rašyti taip pat galite naudoti „Paint“. Skirtingai nuo kitų panašių įrankių, „MyScriptFont“ leidžia peržiūrėti ir atsisiųsti savo kursyvus„Open Type“ ir „True Type“ formatuose. Ranka rašyti šriftai gali būti naudojami grafinėse programose, sveikinimo atvirukuose, logotipuose, asmeniniuose laiškuose ir kt.

FontForge yra internetinė nemokamų šriftų kūrimo platforma. Jį lengva naudoti vartotojo sąsaja ir integruota programa skirtingiems šriftams palyginti. Su FontForge galite kurti ir redaguoti šriftus įvairiais formatais, įskaitant PostScript, SVG, True Type, Open Type ir kt. Taip pat jūsų paslaugoms pilnas tekstas vadovėlis į pagalbą profesinis mokymas apie šriftų kūrimą.

„FontArk“ yra tai, ko ieško kiekvienas šriftų dizaineris. Prieiga prie paslaugos nemokama tik ribotą laiką, tačiau iš tikrųjų ja verta pasinaudoti. „FontArk“ yra naršyklės programa ir šriftų įrankių generavimas su įmontuota sklandaus tinklelio sistema. „FontArk“ dizaino ir redagavimo įrankiai išskiria svetainę iš jos amžininkų. Ji siūlo vartotojams realiu laiku, kelis glifus, simbolių redagavimo ir šriftų kūrimo įrankius, taip pat logotipus. Be to, jis siūlo daug kitų funkcijų ir palaiko kelias kalbas.

PaintFont.com yra dar vienas puikus įrankis ranka rašytą tekstą konvertuoti į vektorinius šriftus. Svetainėje yra daug paruoštų simbolių, suskirstytų į tokias kategorijas kaip ligatūros, matematika ir skyrybos ženklai. Įrankis siūlo įvairių kalbų glifus ir simbolius: japonų, vokiečių, turkų, hebrajų, ispanų ir kitų.

Galite kurti šriftus arba įkelti ir modifikuoti savo naudodami pasirinktinius „Fontastic“ įrankius. Paslauga siūlo keletą funkcijų, tokių kaip spalvų pridėjimas arba keitimas, šešėlių pridėjimas, mastelio keitimas ir sinchronizavimas keliuose įrenginiuose. Svetainėje taip pat yra didžiulė vektorinių piktogramų kolekcija, kurią galima naudoti įgyvendinant bet kurį jūsų dizaino projektą. Kad būtų patogiau, jie suskirstyti į kelias kategorijas.

Šią paslaugą galima vadinti idealia vieta profesionaliems šriftų dizaineriams ir tiesiog mėgėjams. Paslauga turi daugiau nei 20 parametrų, leidžiančių eksperimentuoti su integruotais glifais. Taip pat čia rasite keletą redagavimo ir dizaino funkcijų, kurios ateityje bus plečiamos.

Dar keli šaltiniai, kurie jums gali būti naudingi:

FontPunk.com– nemokamas internetinis įrankis stiliams pridėti ir vizualiniai efektai sukurti vizualiai patrauklų šriftą reklamai, skrajutei ar svetainei.

FontConverter.org- Laisvas internetinis keitiklisšriftų failai.

Šriftas Voverė yra nemokamas internetinis išteklius su žiniatinklio šriftų rinkiniu, licencijuotu komerciniam naudojimui.

Išvada

Dabar žinote, kad sukurti savo šriftus yra labai paprasta, jei turite reikiamų išteklių. „Pasidaryk pats“ ir mėgėjams šie ištekliai yra naudingi mokantis praktinių įgūdžių, pvz., kirpimo, kreivių koregavimo, struktūrinių variantų ir glifų pakavimo.

Dizainas yra didžiulis vandenynas, kuris auga kiekvieną dieną. Nauji šriftų tipai kuriami kiekvieną dieną arba atliekami pasirinktiniai esamų šriftų pakeitimai. Šriftai padidina tekstinio turinio vizualinį patrauklumą, todėl dizaineriai nuolat ieško naujų šriftų stilių, kad jų darbas būtų kuo naujesnis ir naujoviškesnis.

Egzistuoja puiki suma kaip rasti tinkamą šriftą savo svetainei. Pavyzdžiui, galite naudotis paslaugomis su didžiulėmis šriftų bibliotekomis, kurioms reikalinga mokama prenumerata.

Jei turite nedidelį biudžetą arba eksperimentuojate su nedideliu projektu, galite naudoti nemokamus žiniatinklio šriftus, kurie yra viešai prieinami. Jūsų svetainei tinkamo žiniatinklio šrifto paieška gali užtrukti, todėl pateikiame jums geriausių iš jų pasirinkimą.

1. Montserratas

Tipografijai tobulėjant, ji tolsta nuo senovinių miesto plakatų ir ženklų. Šio šrifto kūrėja stengėsi išsaugoti miesto plakatų, kuriuos ji matė Buenos Airių gatvėse, tipografijos grožį.

2. Abril Fatface


Abril Fatface yra didelės šriftų šeimos dalis, kurią sudaro 18 skirtingų stilių. Šis šriftas yra tvirtas ir elegantiškas, todėl tai puikus sprendimas kuriant akį traukiančias antraštes. Dažniausiai jis derinamas su Lato, Open Sans ir Droid Sans.

3. Playfair ekranas


Atsižvelgiant į didelį x aukštį ir mažus raidžių indeksus, Playfair Display taip pat tinka rašyti antraštę, ypač jei vietos yra nedaug. Jis puikiai dera su Gruzija ir dažnai naudojamas su Oswaldu, Lato ir Arvo.

4. GT Walsheim


Šiandien daugelyje tinklaraščių naudojamas GT Walsheim yra geometrinių sans serifų atstovas ir yra Grilli Type šeimos dalis. Turite mokėti už visą šriftų rinkinį, tačiau „Grilli Type“ siūlo nemokamą bandomoji versija GT Walsheim.

5. Merriweatheris


Jei jūsų projekto prioritetas yra skaitomumas ekrane, patikrinkite Merriweather, kuris buvo sukurtas šiam tikslui. Be to, šis šriftas nuolat tobulinamas.

6. Josephine Sans


Josefin Sans yra įkvėptas senovinio švediško dizaino ir pasižymi elegantiška geometrine estetika.

7. Gravitas One


„Gravitas One“ sukurtas remiantis „UK fat face“ – drąsiu reklaminiu šriftu, kuris pasirodė Anglijos pramonės revoliucijos metu. Šis šriftas puikiai atrodo vidutinio ir didelio masto ir tinka antraštėms, pavadinimams ir skirtukams.

8. Jura


Šio šrifto raidės atkartoja Kaya-li raidės formas. Jame taip pat yra kirilicos glifų ir Graikų abėcėlė. Galima įsigyti lengvo, normalaus, vidutinio ir paryškinto svorio.

9.Lyga Gotika


Iš pradžių 1903 m. Morriso Fullerio Bentono sukurta „American Type Founders Company“ „League Gothic“ rado naują panaudojimą, atnaujinus ir pridedant naujų simbolių.

10. Fjordas


Fjord yra serifinis šriftas, iš pradžių sukurtas spausdintoms knygoms ir ypač tinkamas ilgo teksto talpinimui į mažo šrifto formatą. Jis gali būti naudojamas kuriant didelį teksto turinį svetainėje, nes šriftas turi aiškią struktūrą, ryškius serifus ir ilgas, elegantiškas galvutes bei pėdas.

11. Amarantas


„Amaranth“ šriftų šeima pasižymi neįstrižu kursyvu, mažu kontrastu ir pastebimomis kreivėmis. Visi trys Amarantų stiliai puikiai dera su beveik bet kokiu kitu šriftu. Galite žaisti su šiuo šriftu – eksperimentuokite ir išsirinkite geriausią.

12. Poly


Šis vidutinio kontrasto šriftas iš pradžių buvo sukurtas vietinei Wayuunaiki kalbai, kuriai reikalingi platūs simboliai. Jis turi mažus stiebus ir didelį x aukštį, todėl ypač naudingas mažiems dydžiams.

13. Gentium Basic


Šis šriftas buvo sukurtas kaip kelių kalbų šriftas, įskaitant lotyniškas ir graikiškas raides, taip pat kirilicą ir išplėstinį palaikymą Gentium Plus versijoje. „Gentium Basic“ ir „Gentium Book Basic“ yra nemokamose žiniatinklio versijose, tačiau yra tik lotyniška abėcėlė.

14. Atidarykite Sans


Open Sans – humanistinio grotesko atstovas. Šis šriftas yra gerai įskaitomas ir tinka tiek žiniatinklyje, tiek mobiliosios sąsajos. Tai nesudėtingas, paprasto raidžių stiliaus šriftas, pasižymintis neutralia, bet pakankamai malonia išvaizda, kad būtų galima naudoti įvairiems tikslams.

15. Reguliari knyga


Tai daugiafunkcis šriftas su dideliu x aukščiu, stiprus spalvų kontrastas, aiškiai apibrėžti serifai, kurie prisideda prie teksto skaitomumo. Šis šriftas gerai atrodo ir spausdinant, ir mažos raiškos ekrane.

16. Signika


Šis nemokamas žiniatinklio šriftas reprezentuoja sans serif. Mažas kontrastas ir didelis x aukštis leidžia „Signikai“ gerai rodyti ekrane. Platus piktogramų pasirinkimas apima simbolius, piktogramas ir rodykles.

17. Josefino plokštė


Sukurtas pagal XX amžiaus trečiojo dešimtmečio geometrinio šrifto kanonus, pridedant skandinaviškų bruožų, Josefin Slab turi plokščio šrifto savybes ir primena rašomosios mašinėlės šriftą. Įdomu tai, kad jo x aukštis yra pusė didžiosios raidės aukščio.

18. Forumas


Kaip rodo pavadinimas, tai romėniškas šriftas, tinkantis didžiųjų raidžių antraštėms, bet taip pat tinkamas tekstui rodyti. Elegantiškos šio šrifto proporcijos primena klasikinę architektūrą su pusapvalėmis arkomis, horizontaliais karnizais ir vertikaliomis kolonomis.


Tikal Sans, pavadintas vieno garsiausių majų miestų vardu, turi glifų bruožų, kurie buvo naudojami rašant Pietų Amerikos civilizaciją. Jo kūrėjas pasirinko didelį x aukštį, kuris suteikia šriftui šiuolaikišką išvaizdą ir teigiamai veikia jo įskaitomumą, o didelis stilių pasirinkimas leidžia jį naudoti įvairiems tikslams.

20. Arvo


Šis geometrinis plokščių šriftas, tinkamas tiek spausdinti, tiek žiniatinklyje, yra romėniško, kursyvaus, romėniško paryškinto ir paryškinto kursyvo. Mažas Arvo kontrastas pagerina jo skaitomumą ekrane.

21. Bevanas


„Bevan“ buvo sukurtas remiantis tradiciniu 1930-ųjų plokščių šriftu. Raidės buvo suskaitmenintos, jiems suteikta nauja forma ir optimizuotos žiniatinklio versijai. Tai vienas iš nedaugelio itin paryškintų šriftų, tinkamų svetainėms.

22. Senas standartinis TT


Old Standard TT buvo pagrįstas Modern serif šriftu, kuris buvo populiarus XIX amžiaus pabaigoje ir XX amžiaus pradžioje, o vėliau pamirštas ilgam laikui. Šis šriftas tinka tam tikro tipo turiniui pridėti stilių, pvz. moksliniai tyrimai arba tekstai graikų arba kirilica.

23. Kreonas


Idealiai tinka naujienų svetainėms ir tinklaraščiams, šis serifinis šriftas taip pat turi plokščio šrifto ypatybes, tačiau dėl jo balanso ir mažo kontrasto Kreon yra žymiai asmeniškesnis.

24. Droid Sans


Droid Sans buvo optimizuotas taip, kad būtų galima pasiekti maksimalų skaitymą net ir mažose sąsajose, pvz., meniu mobiliojo telefono ekranuose. Tai neutralus, neįstrižas šriftas su paprastomis, atviromis raidžių formomis.

25. italų kalba


Šio šrifto kūrėją įkvėpė klasikinė italų kaligrafija, todėl šriftas labai pravers projektuose, kur reikia pridėti elegancijos. „Italiana“ taip pat tinka naujienų antraštėms rašyti tiek spausdintu, tiek elektroniniu formatu.

26. Vollkornas


Šis išsamus, daug funkcijų turintis serifinis šriftas yra labai populiarus. Jo aiškumas ir tvirtumas perteikia pasitikėjimą ir energiją, todėl šriftas yra vienodai efektyvus tiek didesnio dydžio antraštėms ir pavadinimams, tiek dideliam mažesnio formato teksto kiekiui.

27. Aktorius


Šis šriftas turi ypač didelį x aukštį, kuriam reikia gana daug vietos. Aktorius taip pat pasižymi senamadišku kai kurių personažų stiliumi, pavyzdžiui, skaičiais 6 ir 9.

Humanistinis šriftas Garamond, kurio šaknys siekia XVI amžių, tapo tikra tipografijos ikona, dažnai naudojama kaip pagrindas kuriant šiuolaikinius šriftus, įskaitant EB Garamond.

31. Ubuntu


Ubuntu Grotesque buvo sukurtas siekiant individualizuoti žiniatinklio tekstą tiek staliniuose kompiuteriuose, tiek mobiliuosius įrenginius. Vartotojai raginami eksperimentuoti su šiuo šriftu, keisti ir tobulinti jį taip, kaip jiems atrodo tinkama.

32. Rosario


Rosario yra klasikinis humanistinis sans serif, puikiai tinkantis teksto pastraipoms stilizuoti.

33. Roboto plokštė


Roboto Slab yra vienas iš Roboto šeimos šriftų. Blokinė versija ypač traukia akį savo geometrinėmis formomis ir atviromis kreivėmis. Jis vienodai tinka programėlių ekranams ir spausdintoms tekstų versijoms.

34. Osvaldas


Šriftas yra perdirbta klasikinio Alternate Gothic sans serif versija. Oswald neseniai buvo atnaujintas, kad būtų įvairių svorių, išplėstas simbolių rinkinys ir geresnis kerning.

35. Aklavietė


Stalemate yra aptakus ranka rašytas šriftas, turintis šiek tiek senovinio atspalvio. Tinka kurti akcentus ir personalizuoti svetainę.

36. Raudonasis tekstas


Šis kruopščiai sukurtas klasikinis proporcingas šriftas gali būti naudojamas tiek dideliems teksto kiekiams rodyti, tiek antraštėms rašyti.

Dalintis