10 Web-typografiset säännöt Jokaisen suunnittelijan tulisi tietää
Kun joku käy verkkosivuilla, jonka olet suunnitellut, kertoimet ovat, että he eivät välitä paljon väreistä, kuvista tai ääniä, he katsovat heti tekstiä.
Riippumatta siitä, kuinka monta kynsiä ja pillejä olet sisällyttänyt verkkosivustolle, jokainen luottaa tekstiin, jotta he voivat tehdä mitä he vierailevat sivustolla tekemään .
Se yksinään pitäisi tehdä typografiaa, järjestelyn taidetta, prioriteetti tahansa web-suunnittelija.
Tässä artikkelissa tarkastelemme 10 helppokäyttöistä sääntöä, jotka on otettava huomioon, kun suunnittelet seuraavan verkkoprojektin.
1. Lue itse tekstin läpi
Suunnittelulla kuten JonesingFor suunnittelija ilman suurta käsitystä tekstistä olisi kamppaillut koottamaan typografian, joka tekee tästä sivustosta todella toimivan. Kun käsittelet itseäsi typografian, et luultavasti tarvitse huolehtia sivuston tekstin kirjoittamisesta - mutta sinun täytyy lukea se!
Jotkut web-suunnittelijat ajattelevat, että vain kopioiminen ja liittäminen tekstitiedostosta muodostaa niiden tekstitoimintojen kokonaisuuden. Tekstin lukeminen tarjoaa kuitenkin ainakin perusajatuksen siitä, miten tekstiä voidaan integroida verkkosivustoon, jolloin vältetään yhteys verkkosivujen kirjoittamisen ja suunnittelun välillä.
Voit lyödä typografianne vielä kerran, jos voit lukea tekstin, kun se on valmis. Ole erityisen varovainen kirjainten ympärillä . Onko sinulla epätavallisen suuria tiloja, jotka näyttävät outoa? Vähän huolellinen typografia voi poistaa nämä ongelmat. Voit myös saada käsityksen riveistä, jotka saattavat olla liian pitkiä, jotta ne ovat helposti lukeneita, hankalia rivejä ja vastaavia aiheita.
2. Laske Lorem ipsum mahdollisimman pian
Luuletko, että olisit voinut suunnitella Jesus Rodriguez Velascon verkkosivuilla ilman todellista tekstiä? Sivusto on voimakkaasti riippuvainen kirjoitetusta sanasta - ja hyvin täsmällisistä sanoista. Jopa runkoteksti sai erityistä huomiota pudotuskorvakkeella ja muutamalla muokkauksella, joka ei olisi ollut mahdollista Lorem ipsumin kanssa.
Ellei verkkosivustosi teksti oikeastaan ole Lorem ipsum, nuken teksti ei kelpaa yhtään samankaltaisuuteen kuin oikea . Tämä tarkoittaa, että kaikki tekstin tekemät muutokset - tai ympäröivä muotoilu - joutuvat odottamaan, kunnes saat todellisen asian. Pyydä (ja saada) tekstin asiakkaalta mahdollisimman varhaisessa vaiheessa antaa sinulle mahdollisuuden vastata yleiseen suunnitteluun ja typografiaan.
3. Näytä selkeä hierarkia
Kun saavut Rik Cat Industries , tiedät heti, mistä sinun pitäisi alkaa lukea. Vaikka sivun yläreunassa on muutamia linkkejä, Rikin tervetulotoivotus saa ensin silmäsi. Se on paljon suurempi, käyttäen typografiaa luomaan selkeä hierarkia .
Jokaiselle sivustolle tarvitaan hyvin kehittynyt hierarkia: indikaattorit, mistä aloittaa lukemisen ja miten edetä. Tyylikkisi voi tarjota tämän hierarkian - aivan kuten Rik: n - niin kauan kuin tiedät hierarkkisen tilauksenne etukäteen. Ajattelemalla kokoa ja kirjasimia voit korostaa tekstin otsikkoa tavalla, jota suunnittelun erilaiset sijoittelut eivät pysty tarjoamaan.
Suunnittelusi hierarkkisi menee pidemmälle kuin vain käyttämääni typografiaa, tietenkin, mutta koska käyttäjät lähes aina alkavat tekstistä, suunnittelijoille on järkevää tehdä samoin.
4. Kiinnitä huomiota sekä makro- että mikrotyyppiseen typografiaan
Tukeutuvat kokonaan etusivun typografiaan, Crowley Webb ja Associate's sivusto oli suunniteltu kahta tekijää ajatellen: sekä makro- että mikrotyypikirja .
Makro-typografia on tyyppisi yleinen rakenne, miten se näkyy suunnittelun ja sen esteettisen näkökulmasta, kun tarkastelet tekstiä itsenäisesti.
Mikro typografia on enemmän huolissaan välimatkan yksityiskohdista, ongelmista, jotka määräävät, onko sanoja helppo lukea. Mikro-typografia on ehdoton välttämättömyys, kun on kyse tekstin lohkosta: jos se ei ole luettavissa, ei ole mitään syytä edetä. Crowley Webb ja Associates käsittelivät tätä kysymystä sekä huolellisesti kirjoittamalla että jakamalla ne sanat, jotka sivustolla korostettaisiin.
Mutta makrotyyppa tarjoaa sinulle mahdollisuuden tehdä tekstiä enemmän kuin hyvin väljästi: se on mahdollisuus tehdä se näyttäväksi houkuttelevalta ja osa koko suunnittelua . Tämän sivuston kirjasintyyppien ja värien valinta luo toimivan kokonaisuuden. Jokin kummankin typografian puute on haitallista.
5. Huolehdi tyyppien väreistä
Tekstin taustalla olisi niin helppoa menettää teksti ArtofElan , etenkin kirkkaanpunainen tummanpunainen yhdistelmä, jota suunnittelija käyttää. Kun web-suunnittelija toimii värillisellä tavalla, hoito on ehdottoman välttämätöntä, ei ole takeita siitä, että punaisella punaisella yhdistelmällä tai jopa keltaisella punaisella yhdistelmällä näkyy . Loppujen lopuksi jokainen on vieraillut verkkosivustolla, jossa teksti näytti olevan vain yksi varjostin taustan väreistä ja saanut silmän rasituksen, kun he yrittivät lukea sitä.
Helpoin korjaus tähän tilanteeseen on varmistaa, että tyypin väri eroaa huomattavasti taustasi väristä . Mustavalkoiset työt niin hyvin, koska ne ovat yhtä drastisesti erilaiset kuin mahdollista, mutta on olemassa joitain väriyhdistelmiä, jotka toimivat hyvin: jokin vaaleanpunaisella tumman sinisellä linjalla saa työn. Taaksepäin tehty teksti on melko hankala ... kun haluat työskennellä vaaleanpunaisen tekstin kanssa tummansinisellä pohjalla, sinä todennäköisesti saa valituksen siitä.
6. Ole vakavissasi CSS: stä
Jos CSS on vankka, voit siirtyä verkkosivustosi sivujen välillä saumattomasti, aivan kuten eri versiot Hutchouse.com luottaa erilaisiin tyylitiheyksiin, joiden avulla voit luoda vaikuttavia vaikutuksia. Vaikka et ota asioita niin pitkälle kuin Hutchhouse, CSS voi auttaa poistamaan amatööri-typografian ongelmat, kuten tekstien ja koon muuttaminen sivujen välillä.
CSS voi tarjota helposti yhdenmukaisuuden typografian välillä koko sivuston kanssa . Jos olet johdonmukainen käyttämäsi tyypin kanssa, kuitenkin tämä rikkominen, vaikka pieni määrä voi tehdä mitä haluat korostaa todella erottua, aivan kuten perustaminen ja sen jälkeen rikki verkko voivat tehdä tehokkaan suunnittelun. Web-typografian avulla fonttisi johdonmukaisuus voi olla CSS: n yksinkertainen asia.
7. Ojennä keskitetty teksti
Vaihtoehtona keskitetyn tekstin valitsemiselle voi tehdä sivuston suunnittelun helppoa , aivan kuten DesignCanChange.org . Valitsemalla keskitetyn tekstin, varsinkin tämän kaltaisen sivun, aiheuttaisi ongelmallisen sivun: luodut reunat keskittävät luodut kummallakin puolella tekevät siitä paljon vaikeampaa lukea, ja runsaasti mahdollisuuksia täysin keskitettyyn tekstiin päättyy vääristää loput malleja eri näytöillä.
Joissakin piireissä keskitetty tyyppi on vain yksi askel käyttämällä Comic Sansia sivuston suunnittelussa. Saatat harkita sitä otsikossa, mutta yleensä tekstin vasemmalla puolella tekeminen tekee lukijastasi paljon mukavampaa, ellei he lue oikealta vasemmalle .
8. Suhtaudu älykkäisiin lainausmerkkeihin ja muihin symboleihin
Luigi Ottani sivuston esittelee, mitä huolellista huomiota lainausmerkkeihin ja muihin symboleihin saavat sinut: ongelmien täydellinen puute, kun sivusto näyttää kyseiset symbolit. Monet verkkosivustot ovat täynnä symboleja, joita selain ei voi näyttää. Se on perintö siitä, että suurin osa tekstistä, jonka web-suunnittelija työskentelee, luultavasti kirjoitettiin Microsoft Wordissa tai muussa tekstinkäsittelyohjelmistossa, joka tekee kaikenlaisia pieniä muutoksia tekstiin ilman, että kirjoittaja kiinnittää paljon huomiota.
Yksi huonoimmista muutoksista on älykkäitä lainauksia: kihara-lainausmerkit Word korvaa automaattisesti suorat lainausmerkit . Toinen ongelma-alue on, kun työskentelet toisella kielellä kirjoitetulla tekstillä: aksentit ja umlats voivat aiheuttaa yhtä paljon ongelmia kuin Wordin hyödyllisyys. Jos kopioit ja liidät tekstiä tällaisiin muutoksiin suunnitteluksi, sinun on todennäköisesti palattava ja korjattava ne myöhemmin, ainakin joissakin verkkoselaimissa.
Sen sijaan saat ne suunnitteluprosessin alussa, jotta voit keskittyä tekemään tekstisi sopivaksi suunnittelusi kanssa . Jos haluat, että nämä fancy-symbolit ja älykkäät lainaukset näkyvät lopullisessa suunnittelussa, rikkoa HTML-kokonaisuutesi.
9. Suunnittele tekstisi suuremmaksi
Kun lisäät tekstin kokoa Veerle Pieters ' verkkosivusto, se ei ole aivan niin kaunis kuin jos käytät kirjasinkokoa hän poimii. Voit silti lukea kaiken, löytää linkkejä ja niin edelleen, mikä on totta hyvin harvoista verkkosivustoista.
Tämä johtuu osittain siitä, että monet suunnittelijat varmistavat layout-tekstin 10 pisteen fontilla tai jopa pienemmillä. Useimmat ihmiset ovat mukavasti lukeneet tällaisia kirjasimia, mutta Baby Boomers muodostavat valtavan osan web-selauspopulaatiosta ja monet näistä ikääntyvistä web-surffaajista saavat selaimensa näyttämään tyypiltään suuremman kuin mahdollista . Tekstinne ja suunnittelusi on kyettävä sopeutumaan tähän.
On myös syytä ottaa huomioon se, että selaimen koko voi vaihdella dramaattisesti , siirtää tekstiä odottamattomiin paikkoihin, jos et ole varovainen. Jos koon kasvaessa kohta aiheuttaa ongelmia, vanhemmat väestöryhmät siirtyvät seuraavalle verkkosivustolle kiireen. Vierittämällä ikuisesti sivulle on samanlainen tulos.
10. Näytä sans serif -asetus
Jos katsot List Apartin verkkosivusto, melkein jokainen iso tekstialue on asetettu sans serif -tyyppisellä tekstillä, mikä on paljon helpompi lukea. Otsikot ja muut pienet tekstirivit on sijoitettu serifed-fontteihin, mikä luo tasapainon näiden kahden välillä.
Sans serif-kirjasimet ovat melkein aina paras bet , kun valitset tekstin ruudulle, varsinkin jos valitsit Verdanan fontin, joka on suunniteltu näyttämään tietokoneen näytöllä. Serifed-fontit ovat suuremmat mahdollisuudet näyttää huonosti, epäselväksi tai jopa kuvapisteiksi.
Tietenkin ei ole mahdollista välttää täysin sanoja. Mutta suuret tekstilohkot erityisesti fontti ilman serifs voi tarjota ylimääräisen tason takaamiseksi, että kävijät voivat helposti lukea sivuston tekstiä. Kun valitset projektin kirjasimia, katso ensin sans serif -vaihtoehtoja .
Lopullinen kommentti
Typografia on helppo unohtaa, ja vaikka suunnittelija ottaa sen huomioon, on helppo kirjoittaa pois aikaa tehostaen vähän palautusta. Mutta menojen jopa muutaman minuutin kuluttua tekstistä, joka on mallinne keskeinen osa, voi muuttaa sen mistä tahansa web-suunnittelija voi slapilla sivulle elementtiin, joka tukee muun muotoilua.
Kirjoitettu yksinomaan WDD: lle torstaina Bram.
Seuraatko näitä sääntöjä ja muita? Jaa näkemyksesi alla ...