10 Web-typografiasääntöä, jotka jokaisen suunnittelijan tulisi tietää

Voit sisällyttää web-suunnitteluun monia elementtejä, jotka aktivoivat ja pitävät kävijöiden huomion. Näitä ovat kuvat, videot ja jopa ääni. Kuitenkin tärkein osa melkein jokaista verkkosivustoa on sisältö, jonka vierailijat lukevat saadakseen lukemansa tiedon.

Jos haluat tehdä näistä tiedoista helpommin luettavia, visuaalisesti kiinnostavia ja lisätäksesi tekstiä verkkosivuston yleiseen ulkoasuun, sinun on ymmärrettävä typografia. Tämä on taitoa ja taitoa tehdä kirjoitetusta sanasta sekä toimivaa että esteettisesti miellyttävää.

Jos haluat oppia käyttämään typografiaa eduksesi, tutustu näihin 10 sääntöön, jotka jokaisen suunnittelijan tulee pitää mielessä.

1 LoremIpsumin käyttö alkuperäisen suunnitteluprosessin jälkeen

Jos sisältö on kuningas, miksi sitä ei oteta vakavasti huomioon web-suunnitteluprosessissa? Käyttämällä väärennettyä sisältöä paikkamerkkinä verkkosuunnittelijat siirtävät sisällön toissijaiseen rooliin. Tämä on suuri osoitus siitä, että suunnitteluprioriteetit ovat täysin poissa. Se ei ole niin ongelmallista alkuvaiheessa, esimerkiksi kun pilkkaat erilaisia ​​sivuasetteluja. Kun olet kuitenkin kaventanut asioita, on tärkeää työskennellä todellisen verkkosisällön kanssa lopullista suunnittelua luotaessa. Näin varmistetaan, että tietyllä verkkosivulla sanotulle annetaan yhtä paljon merkitystä kuin asettelulle ja visuaalisille elementeille.

Tämän lisäksi todellisella tekstillä on merkitystä suunnittelun ja asettelun kannalta. Et halua olla sellaisessa asemassa, että olet täysin suunnitellut verkkosivua, vain oppiaksesi, että se ei toimi todellisen sisällön kanssa. Tästä syystä on erittäin tärkeää saada varsinainen teksti sisällöntuottajalta mahdollisimman pian.

2 Tee tekstistä ilman serif

Serif-teksti on todella kaunista. Nämä ovat upeita fontteja käytettäväksi tulostuksessa ja suurissa tulostussovelluksissa, kuten otsikoissa, otsikoissa ja alaotsikoissa. Valitettavasti näytöllä serifit eivät skaalaudu hyvin, kun on kyse pienempiä sisältönäyttöjä, kuten tekstilohkoja. Suuremmassa koossa näyttävät serifit tekevät tekstistä vaikeasti luettavan, kun fontti pienenee. Tästä syystä on suositeltavaa tallentaa serifit isoa tekstiä varten ja luottaa ilman, että luettavuus saattaa olla ongelma. Vielä parempi, omaksu puhdas, tyylikäs ja moderni ulkoasu ilman fontteja ja säästä serifejä painokonetta varten. Näin sinun ei koskaan tarvitse käsitellä luettavuuden heikkenemistä kauniilta näyttävän kirjasimen käytön hyväksi.

3 Ajattele älykkäitä lainauksia ja muita symboleja suunnitteluprosessin varhaisessa vaiheessa

On mahdollista, että olet käynyt verkkosivustolla, jossa tietyt symbolit eivät näy oikein. Joskus ne korvataan kysymyksellä tai oudolta näyttävillä hahmoilla. Toisinaan niitä ei yksinkertaisesti ole olemassa. Tämä tapahtuu usein älykkäillä tai "kiharoilla" lainausmerkeillä. Tämä johtuu usein tekstin luomisesta MS Wordissa tai muussa paketissa ja siirtämisestä sitten verkkosivulle. Asiat eivät yksinkertaisesti käänny haluamallasi tavalla. Se on yleistä myös euroille symboli, kaksitavuiset merkit ja muut ulkomaisesta sisällöstä poimitut symbolit.

Jotta voit välttää tämän ongelman lopullisessa suunnittelussasi, sinulla on pari vaihtoehtoa. Ensinnäkin voit muokata sisältöäsi päästäksesi eroon näistä symboleista. Tämä toimii, jos olet valmis muuttamaan symbolit luonnolliseksi kieleksi. Voit myös käyttää HTML:ää varmistaaksesi, että symbolit näkyvät oikein sen sijaan, että luottaisit vain kopioimiseen ja liittämiseen. Mitä tahansa päätätkin, muista testata verkkosivua kaikilla mahdollisilla selaimilla. Se, mikä saattaa ratkaista symbolien ongelman yhdessä selaimessa, ei välttämättä toimi ollenkaan toisessa.

4 edistyneet CSS-taidot ovat erittäin tärkeitä

Jos sinulla on hyvät CSS-taidot, kävijöiden pitäisi pystyä navigoimaan verkkosivustosi sivuilla täysin saumattomalla tavalla. Jos luot tyylitaulukot oikein, sinulla voi olla jopa useita versioita samasta sivusta säilyttäen silti erinomaisen jatkuvuuden typografian suhteen. Tietenkään sinun ei tarvitse käyttää paljon temppuja. Hyvä CSS voi auttaa sinua välttämään pieniä, mutta yleisiä ongelmia, kuten kirjasinten ja kirjasinkoon muuttamisen sivulta toiselle.

Miksi johdonmukainen typografia on niin välttämätön? CSS:n käyttäminen johdonmukaisen typografian ylläpitämiseen antaa verkkosivustollesi ammattimaisen ja terävän ilmeen. Se tarkoittaa myös, että sinun ei tarvitse miettiä typografiaa jokaista sivua suunniteltaessa. Sen sijaan käytät vain sopivaa tyylitaulukkoa. Jos päätät jollakin tietyllä sivulla rikkoa normia ja tehdä jotain toisin typografialla luodaksesi tehosteen tai kiinnittääksesi huomion johonkin, se erottuu paremmin CSS-käytön ansiosta.

5 Sekä mikro- että makrotypografia ovat tärkeitä

Mikrotypografia liittyy typografian yksityiskohtiin, jotka liittyvät luettavuuteen. Esimerkiksi välit ovat ongelma, joka liittyy mikrotypografiaan, samoin kuin skaalaus ja kontrasti. Kaikki säädöt, jotka teet varmistaaksesi, että tekstilohko on luettavissa millä tahansa laitteella tai selaimella, liittyvät mikrotypografiaan.

Makrotypografia liittyy tapaan, jolla typografiaa koskevat valinnat liittyvät yleiseen suunnitteluasi. Se liittyy estetiikkaan.

Hyvä typografia ottaa huomioon sekä mikro- että makrotypografian. Oletko koskaan käynyt verkkosivustolla, joka käytti todella siistin näköistä, mukautettua fonttia, jota oli myös lähes mahdoton lukea? Näin tapahtuu, kun huomiota kiinnitetään makrotypografiaan, mutta ei mikrotypografiaan.

6 Tunne sekä sisältö että suunnittelu

Kuten tiedät, hyvällä verkkosivustolla on virtaa. Osa tästä on sivulla olevan sisällön luettavuus. Olemme jo keskustelleet siitä, miten seriffit vaikuttavat tähän, ja olemme keskustelleet siitä, kuinka tyhjä teksti ei korvaa todellista asiaa suunnittelun myöhemmissä vaiheissa. Emme ole vielä ohi. Sisältö on todella kuningas. Kun lopullinen suunnittelu, mukaan lukien sisältö, on paikallaan, sinun on luettava verkkosivu.

Kun luet sisällön suunnittelun valmistumisen jälkeen, voit määrittää, onko siinä väli- tai rivinvaihtoongelmia. Nämä voivat tehdä sisällöstä hämmentävää tai jopa muuttaa sisällön merkitystä tahattomasti. Korjaamalla nämä ongelmat muutamalla typografiatemppulla voit varmistaa, että lopputuotteesi viestii täsmälleen mitä sinä tai asiakkaasi aikovat.

7 Ymmärrä hierarkian merkitys

Hierarkia on tiekartta, jonka annat verkkosivustollasi vieraileville ihmisille. Voit käyttää kuvia, videoita, värejä ja (tietysti) typografiaa luodaksesi tämän hierarkian.

Kyse on yksinkertaisesti siitä, että vierailija ohjataan ensimmäisestä asiasta, jonka haluat hänen näkevän, seuraavaan ja niin edelleen. Typografian avulla voit käyttää kokoa, fontin muutoksia ja välilyöntejä määrittääksesi hierarkian, jota haluat käyttäjien seuraavan. Itse asiassa, jos sinulla on sivu, joka ei tuota tulosta, sinun kannattaa kokeilla typografiaa nähdäksesi, auttavatko tekemäsi muutokset ohjaamaan kävijöitä toimintakehotuspainikkeeseen.

8 Ole luova mutta varovainen värien kanssa

Helpoin tapa varmistaa, ettet koskaan aiheuta luettavuusongelmia kirjasinten värin ja taustavärin ongelmista, on käyttää mahdollisimman kontrastisia värejä, mustaa ja valkoista. Valitettavasti se voi tehdä melko tylsästä suunnittelusta.

Älä pelkää käyttää värejä. Itse asiassa, älä pelkää käyttää väriyhdistelmiä, jotka eivät vaikuta toimivilta. Joskus sinun ei tarvitse tehdä muuta kuin yksi tai kaksi sävyä vaaleammaksi tai tummemmaksi. Sitten typografiasi muuttuu lukukelvottomasta täydellisesti havaittavaksi ja todella siistin näköiseksi.

9 Ditch Centered Text

Keskitettyyn tekstiin liittyy lukuisia ongelmia. Ensinnäkin se voi saada verkkosivusi muistuttamaan huonosti suunniteltuja lentolehtisiä. Tämän lisäksi päätyy melkein aina outoja marginaaleja ja tekstiä, joka näyttää ikään kuin se olisi tarkoitettu vanhan rock-albumin runoksi tai liner-noteiksi. Vaikka keskitettyä tekstiä voi käyttää otsikoissa, sinun on yleensä parasta välttää sitä kokonaan. Pysy vasemmalla säädetyllä tekstillä, niin lukijasi löytävät sisältösi paljon helpompi lukea.

10 Mieti, miltä tekstisi näyttää suurennettuna

Käyttävätpä he peukaloaan ja etusormeaan tai napsauttavat zoomauspainiketta, ihmiset tekevät tekstistäsi isomman. Joskus he tekevät tämän kompensoidakseen pienemmän näytön. Toisinaan he tekevät niin, koska heidän on vaikea lukea tekstiäsi normaalikokoisena.

Olisi hienoa, jos kaikki voisivat tarkastella tekstiäsi tarkoitetulla tavalla, mutta boomers tarvitsevat usein lisäapua tekstin näkemiseen, joten se ei yksinkertaisesti ole mahdollista. Varo käyttämästä kirjasintyyppiä, joka heikkenee, jos sitä suurennetaan.

Hyödyllisiä työkaluja ja resursseja

Tässä on muutamia hyödyllisiä työkaluja ja resursseja, jotka auttavat sinua tekemään enemmän typografian kanssa:

• FontFace Ninja: Tämä apuohjelma auttaa sinua tunnistamaan Internetistä löytämäsi fontit. Tämä on loistava työkalu, kun törmäät fonttiin, joka todella kiinnittää huomiosi. Tämä Chrome-laajennus auttaa sinua tunnistamaan, löytämään ja ostamaan minkä tahansa kaupallisesti saatavilla olevan kirjasimen, jonka näet millä tahansa verkkosivustolla.
• TypePlate: Tämä on täydellinen typografiakehys, joka on täydellinen web-suunnittelijoille. TypePlate pystyy käsittelemään pudotuskorkkia, lainausmerkkejä, skaalausta, värejä ja monia muita typografiaan liittyviä haasteita.
• Modulaarinen asteikko: Tämä on asteikko, jonka avulla voit määrittää ihanteellisen fontin ja fontin koon. Se auttaa myös luomaan tasapainon otsikoidesi ja otsikoidesi fontin koon ja tekstillesi valitsemasi fontin välillä.
• TIFF: Tämän työkalun avulla voit tuoda esiin kaksi eri fonttia. Sitten se näyttää erot kummankin fontin välillä puolestasi. Sen avulla voit jopa vertailla eri kirjaimia ja numeroita kirjasimesta toiseen.
• TypeWolf: Käytä tätä verkkosivustoa saadaksesi korjauksen joihinkin Internetin tyylikkäimmistä fonteista ja inspiroivimmasta typografiasta. Tämä on erinomainen inspiraation ja tiedon lähde.
• Miksi kirjasimilla on väliä, Sarah Hyndman: Tämä on erinomainen kirja, jossa tutkitaan fonttien merkitystä ja tapoja, joilla typografia voi vaikuttaa mielentilaan. Se on loistava kirja ihmisille, jotka ovat intohimoisia typografiasta, mutta myös ihmisille, jotka saattavat tarvita vakuuttamista oikean työn valitsemisen tärkeydestä.

Johtopäätös

Toivottavasti tämä artikkeli saa web-suunnittelijat pohtimaan hieman enemmän typografiaa ja myös löytämään tapoja käyttää tekstiä tehokkaammin ja luovemmin suunnittelussaan.