Reageeriva veebitüpograafia peamised tegurid

5

Öeldakse: "Ärge kunagi hinnake raamatut selle kaane järgi", kuid uuringud näitavad, et võrgukasutaja otsustab, kas ta peaks teie veebisaidile jääma, vaid 50 millisekundit.

Teises Stanfordi uuringus, mis uuris veebi usaldusväärsust, leiti, et 75% kasutajatest tunnistasid, et otsustasid ettevõtte usaldusväärsuse kohta oma veebisaidi kujunduse põhjal. Suurepärane veebitüpograafia on värav rohkemate äripäringute ja sellele järgnevate konversioonide genereerimiseks.

On ütlematagi selge, et teavet tuleb kuvada atraktiivselt ja tõhusalt. Probleem on aga selles, et mobiilseadmeid on palju ja seetõttu peab tüpograafia vastama kõigile neile platvormidele.

Kuidas siis veebitüpograafiat kõige paremini ära kasutada?

1 Fontide mõistlik kasutamine tagab, et tüpograafia on tundlik, kuid samas tõhus

Alates funktsiooni Font Face kasutuselevõtust tervitasid veebidisainerid vabadust kasutada oma kujunduses erinevaid fonte. See oli teravas kontrastis varasema ajastuga, mil kasutati ainult veebikindlaid värve.

Kuna nende käsutuses on palju fonte, peavad disainerid teadma, kuidas neid õigesti kasutada. Responsiivset veebidisaini kasutab enamik veebisaite ja see on seadnud piirid tüpograafia mängimisele, mida nüüd kujundatakse erinevate seadmete ja vastavate ekraanisuuruste järgi. Seetõttu peavad veebidisainerid olema tundlikus veebidisainisüsteemis mitme fondi kombineerimisel ettevaatlikud. Ärge kasutage veebisaidi jaoks liiga palju kirjatüüpe. Pigem hoidke seda kolmest. See tagab puhtama ja tõhusama veebidisaini. Samal ajal vältige ka väga populaarsete fontide kasutamist, kuna see ei pruugi anda teie lehele teiste ees eelist.

Juhtumiuuring: Checkout vox.com. See sait ühendab kaks Sans-Serifi fonti ja teeb seda vaevata. Nad kasutavad Baltot kõigi pealkirjade jaoks, Alright Sansi põhiteksti jaoks, välja arvatud Harrieti, mis on saidi siseselt läbi põimitud. Saadud välimus on puhas ja elegantne.

Vastupidi, vaadake angelfire saiti. See sait sisaldab mitut fonti ning näeb välja räbal ja ebaprofessionaalne.

2 Tõstke oma pealkirjad esile

Veebi tüpograafia uuringud on näidanud, et veebisaidi tüpograafia muudab selle pealkirjad silmapaistvaks. See tähendab, et teie veebikülastajad veedavad teie saidil rohkem aega. Selle saavutamiseks kasutage glüüfe ja ligatuure, et anda oma pealkirjadele ainulaadne välimus.

Ligatuurid on tähed, mis näivad olevat omavahel ühendatud. Näiteks tähed f ja i, mis moodustavad sõna kala esimese osa, liidetakse kirjas ‘fi'na. Ligatuure saate hõlpsalt lisada oma brauseri fondifunktsioonide seadistuste kaudu või kasutades funktsioone "Teksti renderdamine – loetavuse optimeerimine". Firefoxil on juba vaikimisi ligatuurid. Konkreetse ligatuuride kombinatsiooni kasutamine teatud fonditüüpides võib teie veebikujundusele ilu ja stiili lisada. Ligatuure saab sisse või välja lülitada lehepaigutuse tarkvara menüüdes Text, Type või Open Type. Tarkvara tagab ligatuuride automaatse sisestamise kohtadesse, kus seotud tähed kokku saavad.

Juhtumiuuring: vaadake seda veebisaiti ja näete hõlpsalt, kui elegantsed nende ligatuurid välja näevad. Need kaunilt koostatud pealkirjad teie veebisaidile lisatuna parandaksid kindlasti selle välimust ja tagaksid teie vaatajatele parema kasutuskogemuse.

3 Pange oma veebisait oma vaatajaskonnaga rääkima, kasutades sobivat erineva suuruse ja värviga fonte

Nagu ülaltoodud jooniselt nähtub, peame valima fondid, mida saab lugeda ja selgelt näha nii mobiili- kui ka töölauaekraanidel. Stiil, milles fonte trükimeedias kuvatakse, erineb sellest, kuidas need kuvatakse digitaalmeedias. Peame mõistma fondiperekonda, stiili ja efekti. Veebifontide spetsifikatsioonid on toodud W3C CSS-i spetsifikatsioonides, mille kohaselt on fondiperekonnad Serif, Sans-Serif, Monospace, Fantasy ja Cursive.

Teiseks valige kirjatüüp vastavalt oma veebisaidi teemale või kategooriale. See tagab, et teie veebileht kõnetab teie sihtrühma ja annab soovitud tulemuse. Serifi fonte saab kasutada ka teksti loetavuse suurendamiseks, mis aitab veelgi teravdada hääle mõju. Probleem seisneb selles, et see Serifi atribuut töötab hästi kõrge eraldusvõimega ekraanidel, kuid võib viia ebasoovitavate tulemusteni madalama eraldusvõimega ekraanide puhul. Lühikeste pealkirjade jaoks on soovitatav kasutada kunstilisi fonte, põhiteksti jaoks aga tagasihoidlikumaid fonte.

4 Mõõtme moduleerimine on tundliku tüpograafia jaoks oluline

Veebilehe rea pikkus peab olema moduleeritud. Fondi mõõdu või rea pikkuse moduleerimine aitab kaasa tüpograafia reageerimisvõimele. Tundlikud kujundused hõlmavad tundliku muudatusi fontides vastavalt erinevate ekraanisuuruste nõuetele. Seetõttu on see kohustuslik.

Mõistel "mõõt" või "rea pikkus" on seos loetavusega või sellega, kuidas inimesed veebis teksti loevad. Fondi rea pikkuse suurendamine või vähendamine on üks viis tundliku veebitüpograafia loomiseks. Ideaalne rea pikkus või mõõt on vahemikus 45–75 tähemärki rea kohta prindi või veebilehe kohta, sealhulgas tühikud ja kirjavahemärgid. Seda saab pikendada 45–85 tähemärgini rea kohta. See on tuletatud uuringutest selle kohta, kuidas inimesed teksti loevad ja neile vastavaid silmaliigutusi. Selle põhjal soovitavad mõned eksperdid vasakule joondatud teksti veebisisu jaoks sobivaks, kuna silmade lugemisliigutused järgivad horisontaalset vasakult paremale suunda.

Juhtumiuuring: veebisaidi komplekt piirab tähemärke rea kohta umbes 75 tähemärgini. Nagu näete, näeb see elegantne välja ja võib selle lugemise ajal vaatajates huvi hoida.

Teisest küljest on veebisaidi gatesnfences rea kohta vähemalt 120 tähemärki. Selle tulemusena näeb see ebameeldiv välja ja heidutab sisu lugemast.

5 Erinevate kirjasuuruste kasutamine parandab loetavust ekraanist erinevatel kaugustel. See on tundliku tüpograafia nõue.

Valige fondi suurus, mis tagab fondi vaadatavuse ja loetavuse. See võib olla vajalik kompromissiga "ideaalse meetme" osas, mis võib olla disaineritele pisut keeruline. Keeruline osa seisneb selles, et "ideaalse mõõduga" kaasneb kas fondi suuruse vähendamine või fondi suuruse suurendamine, mis võib muuta teksti loetamatuks. Põhimõte on see, et sisu peaks olema vaatajatele mugavalt loetav. Seetõttu on tundliku tüpograafia üks põhielemente tagada, et erinevate lugemiskauguste jaoks kasutatakse erinevaid kirjasuurusi. Erineva lugemiskauguse juures tajutava fondi suuruse arvutamiseks on olemas meetod ja selle teostamiseks on saadaval suuruse kalkulaatorid.

Juhtumiuuring: vaadake veebisaiti moonbase. See on veebisait, mis aitab klientidel oma veebisaite kujundada ja oma ettevõtteid brändida. Pildi keskel olev tekst paistab silma ja annab edasi veebisaidi sisu. Näeme seda vaid ühe pilguga. See köidab kasutaja tähelepanu ja sunnib seejärel läbima ülejäänud veebisaidi, mis on kirjutatud standardses kirjasuuruses.

6 Tundlik tüpograafia nõuab, et veebibrauserid toetaksid erinevaid fonte

Kui kujundate veebisaite konkreetsete kohandatud fontidega, peate tagama, et brauser toetab nende fontide laadimist ja kuvamist. Isegi kui teie kood on veatu ja selge, võivad brauseri kokkusobimatuse probleemid teie jõupingutusi takistada. Samuti peate kontrollima, kas vorming, milles teie fondifailid salvestatakse, ühildub fontiga, mida soovite veebilehel kasutada. Ühildumatusprobleemid võivad mõjutada teie fontide laadimist ja seega ka teie veebilehtede kuvamist.

Juhtumiuuring: ülaltoodust võime järeldada, et peame kasutama kas standardseid fonte või kasutama "fondivirnasid". Esimene samm on fondi testimine, et teha kindlaks, kas font on veebis ohutu või mitte. Põhimõtteliselt vaatab brauser iga fontide järjestust esimese fondivalikuna, teise fondivalikuna, kolmanda fondivalikuna ja nii edasi. Kui brauser ei leia järjestuses ühtegi fonti, naaseb see olenevalt kasutatavast fondiklassifikatsioonist vaikimisi Serif, Sans Serif või Monospace.

Näiteks on suurel protsendil operatsioonisüsteemidest font Century Gothic. Seetõttu võiksite luua fondivirna, mille esimene fondivalik oli Century Gothic, millele järgnesid Arial, Helvetica ja lõpuks Sans-Serif üldine klassifikatsioon. Pange tähele, et CSS-i puhul tuleb fondid, mille pealkirjas on mitu sõna, panna jutumärkidesse. Näiteks font-perekond: “Century Gothic", Arial, Helvetica, Sans-Serif.

See käskis brauseril esmalt otsida Century Gothic fonti. Kuna suurel osal süsteemidest on see font, näeks enamik teie vaatajatest saiti Century Gothicu abil. Ilma Century Gothicita vaatajate jaoks kasutaks brauser esmalt Arialit, seejärel Helveticat ja lõpuks Sans-Serifi alternatiivi.

7 Fontide füüsiliste omadustega seotud tegurid võivad mõjutada fontide kujunduses kasutamise paindlikkust

Kuigi mõõtmete, reavahe ja fondi suuruse osas on palju paindlikkuse võimalusi ja kuigi nende variatsioone saab kohandada paigutusega, võivad tundlikku tüpograafiat piirata tegurid, mis mõjutavad glüüfe. Need on kaal, laius, käigu kontrastsus, laskumine ja optiline suurus. Nende parameetrite muutused võivad saiti mõjutada. Saadaval on tööriistad, mis aitavad disaineritel nendest piirangutest üle saada, kujundades fontide perekondade vahel nende määratud füüsiliste parameetrite piires matemaatilisi interpolatsioone mitmesuguseid kirjastiile.

Kaks näidet sellistest tööriistadest on Superpolator või FlowType.js. Kui ekraani suurus väheneb, suureneb skaalade suhteline proportsionaalne erinevus. Seega peab ekraani suuruse ja suhtelise skaala vahel olema tasakaal. Seda silmas pidades on välja töötatud mõned kaalud ja neid saab kasutada mõjukamate veebisaitide kujundamiseks. Proportsioon viitab sellele, mitu korda on pealkirja font suurem või väiksem kui põhitekst. Seetõttu vajame tundlikku tüpograafiat. Vajame tüpograafiat, mis kohandub katkestuspunktides kahanema, sest disainerid ei saa teha raskusi oma lehe iga tüpograafilise elemendi kõigi oma algtaseme stiilide lähtestamisega.

Juhtumiuuring: kontrollige voolutüüpi. Lohistage liugurit ja näete, mida teeb tundlik tüpograafia tänu sellistele tööriistadele nagu Superpolator ja FlowType.js.

Vastuvõtlikku tüpograafiat täiustab praktika. Kui teil on teatud teadmised meediumipäringute kasutamise kohta ja testimiseks erineva ekraanisuurusega seadmete komplekt, saate sellega hakkama. Nüüd, kui olete teadlik sellest, mida tuleb teha, et saada parim tüpograafia, meelitada rohkem vaatamisi ja teisendada rohkem müügivihjeid, saate rakendada ülaltoodud põhimõtteid, et näha nende realiseerumist füüsilises reaalsuses.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More