5 yksinkertaista tapaa parantaa Web-typografiaa
Tyyppi on yksi verkon käytetyistä elementeistä. Ajattele sitä. Ellet ole YouTubesta tai Flickristä, on todennäköistä, että sivustosi kävijät tulevat tekstisisältöösi - ei ympäröivään fancy-pakkaukseen. Joten miksi web-suunnittelijat käsittelevät edelleen tekstiä toissijaisena elementtinä?
Hyvä typografia tuo sivun järjestyksen ja lisää luettavuutta . Sen avulla ihmiset voivat käsitellä tietoja nopeammin.
Selkeämpi, luettavissa oleva sivusto tarkoittaa onnellisia kävijöitä. Hyvät vierailijat palaavat usein, ostavat tuotteita, jättävät kommentteja ja jakavat sivuston ystävien kanssa. Katso miksi kannattaa ajatella?
Voisin puhua ikuisesti siitä, kuinka pitkälle typografia on tullut verkolle, ja kuinka pitkälle se on vielä menossa. Olen usein lyönyt verkon ja tulostusmallin välillä. Kun olet menossa InDesignista TextMateen, verkkotyypin rajoitukset ovat kristallinkirkas .
Mutta paljon on sanottu siitä, mitä verkkotyyppiä ei voi tehdä. Tämä ei tule olemaan toinen rantti. Sen sijaan keskitymme 5 helppoa korjausta typografisiin silmälaseihin, jotka ovat runsaasti verkossa.
1. Käytä Nollaa tyylitaulukkoa
Tyhmä, mutta totta: kahdella selaimella ei ole samat esitysasetukset. Erot pehmusteissa, marginaaleissa, otsikoissa ja sisennyksissä ovat rajuja. Jos haluat, että sivun asettelu on yhdenmukaisempaa selaimissa, kannattaa aloittaa CSS-nollaustyylilista.
Kaksi suosittelen:
Yahoo CSS nollaa tyylitaulukko
Eric Meyerin CSS nollaa tyylitaulukko
2. Katso mittaasi
Toimenpide viittaa yhden ainoan linjan pituuteen. Pitempi viiva = pidempi mitta. Tutkimukset ovat osoittaneet, että optimaalisen luettavuuden kannalta tekstikenttien, kuten pääkappaleesi, pitäisi olla välillä 45 - 75 merkkiä (30 - 50 ems), mukaan lukien välilyönnit . Tämä on yksi syy siihen, että nestemallit (ne, joissa sarakkeet laajenevat ja sopivat sopiviksi selaimen leveyteen) ovat vaikeampia silmissä.
Lisäksi johtajan tulee lisätä mittauksen pituutta . Johtava määrä on tekstin rivien välisen valkoisen tilan määrä, ja sitä ohjataan CSS-rivin korkeusominaisuuden kautta. Jos haluat käyttää ylimääräistä mittausta, varmista, että avautesi avautuu.
Samoin, jos sinulla on pieni sarake, kuten sivupalkki, jossa on lyhyt mitta, johtajan tulisi olla tiukempi. Minusta suurin oletusarvo useimmille selaimille on hieman liian tiukka. Linjan korkeus noin 1.4em toimii hyvin useimpiin kehon sisältöön.
3. Suorita välilyönti
Se ei ole vain tekstistäsi - sen ympäristä ympäröivästä tilasta. Liian vähän tilaa tekee tekstistä vaikea lukea, mutta niin ei liikaa. Avain on löytää yksinkertainen tasapaino, joka ohjaa silmää yhdestä elementistä toiseen.
Yksi yleisimmistä virheistä, joita uudet suunnittelijat tekevät, on täyttää joka tuuman tilaa. Valkoinen tila tarkoittaa sisällön ympärillä olevaa tyhjää tai "negatiivista" tilaa, ja se on ratkaisevan tärkeää. Katsokaa hyvin suunniteltua aikakauslehteä kuten Dwell tai Good ja näet, että vaikka kustantajat julkaisevat rahaa tulostamaan jokaisen sivun, he jättävät runsaasti valkoista tilaa tekstin ympärille. Sivu on tasapainossa ja silmäsi liikkuu tilaa ja tilaa tehokkaasti.
Sen lisäksi, että säädetään rivin korkeutta (kuten on mainittu kohdassa # 1), yritä lisätä pehmusteita ja marginaaleja . Ellet yritä vetää hullua visuaalista temppua, tekstin ympärillä on aina oltava hyvä valkoinen tila. Älä anna sen päihittää muita elementtejä, varsinkin kuvia. Anna sisältösi palaset (otsikot, kohdat, sivupalkit jne.) Hengittämään.
Mark Boulton kirjoitti hyvin informatiivisen artikkelin aiheesta Valkoinen tila A List Apart, tarkista se.
4. Älä mene fontin hulluksi
Hyvä peukalosääntö kaikille suunnittelijoille on: käytä enintään kaksi fonttia kasvot suunnittelussa. Kaksi fonttia voi näyttää tyylikkäältä. List Apart käyttää Georgian ja Verdanan muunnelmia tyylikkään ja kiillotetun ulkoasun luomiseen. Mutta lisäämällä fontin käyttöliittymää lisää tarpeetonta sekaannusta. Samoin vältä liian monta kirjasinkokoa, väriä tai käsittelyä sivulta tai kappaleesta tai he kilpailevat keskenään sen sijaan, että painotus olisi lisättävää.
Siitä huolimatta fonttipinoja ja tekniikoita sIFR ja Typeface.js voit määrittää juuri haluamasi fontin oletusarvona, vastustaa kiusausta päästä eroon kehon kopiosta. Koristeelliset fontit pidetään parhaiten otsikoissa, koska ne vaikuttavat luettavuuteen. Ajattele sitä - milloin viimeksi olet kerännyt paperisidonnaisen romaanin kokonaan Comic Sansissa?
Kun luot kirjasarjoja, kiinnitä huomiota parien kokoon. Jotkin fontit, jotka näyttävät samanlaisilta, ovat hyvin erilaisia kokoja. Verdana ja Arial ovat erinomainen esimerkki tästä. Typetester on erinomainen työkalu ydinverkkojen fonttien vertailuun ja onnistuneen pinon luomiseen. Toinen hyödyllinen työkalu nimeltä Font Stack Builder näyttää, kuinka suuri prosenttiosuus käyttäjistä näkee jokaisen muunnelman.
Riippumatta siitä, mitä fontteja käytät, varmista, että ne eivät ole teeny pieniä. Tiedän sen kova ... pieni teksti näyttää hyvältä. Mutta ajattele köyhiä, squinting käyttäjiä! Pidä kehon teksti yli 10 tai 12 pikseliä. Jos vaadit teeny pieniä, käytä vähintään suhteellista mitoitusta kaikille niille IE 6.0 käyttäjille, jotka muuten eivät voineet tehdä sitä suuremmiksi. Lukea Wilson Minerin artikkeli kirjasinkokoista, jotta keskustelu voitaisiin ottaa hyvin vastaan.
5) Älä hukkaa yksityiskohtia
Asiakas toimitti sisällön. Sen lisääminen sivustoon on vain kopiointi ja liittäminen, eikö? Väärä, väärin, väärin. Tämä on ansa web-suunnittelijat kuuluvat kaiken liian usein.
Jopa ne, jotka antavat tarkasti otsikkotunnisteita, muotoilevat jokaisen kappaleen ja järjestävät luetteloituja luetteloita huolellisesti, unohtavat tärkeät typografiset yksityiskohdat. Monet (myös minä) jättivät muodollisen typografian koulutuksesta, joten et voi syyttää meitä kokonaan. Mutta paholainen on yksityiskohtia. Sen ajankohta, johon nämä perusasiat ovat:
Käytä älykkäitä lainauksia
Mikä on ero älykkäiden lainausten ja tyhmien lainausten välillä? Älykäs lainausmerkki (kutsutaan myös nimellä kirja tai kihara ) on kaareva ja sillä on sekä avaus- että päättymistyyli. Dumb ( suora ) lainausmerkit ovat yleensä suoraan ylös ja alas. Apostroti on typografisesti vain yksi lainaus, joten sama ongelma koskee. Tyhmä tarjous (kutsutaan myös prime ) olisi käytettävä vain mittausten välillä. Esimerkiksi 6'4 "käyttää kaksinkertaisia ja yhden prime-lainauksia.
Valitettavasti näppäimistömme ovat oletuksena prime-lainausmerkkejä. Microsoft Word ja muut tekstieditorit vain korjaa ne meille, kun kirjoitamme. Älykkäiden hintatarjouksien lisääminen HTML-sivuille vaatii lisää työtä web-kehittäjältä, koska sinun on käytettävä merkintätaulua avaamaan ja sulkemaan lainaussymboleja. Näen saman ongelman em- ja en-dashes, ellipsis, tavaramerkki ja tekijänoikeusmerkit. Kooderit ottavat helposti ulos korvaamalla ne yhdysmerkeillä, useilla jaksoilla, suurella TM: llä ja surullisella (C). Oikeiden symbolien käyttäminen tekee eroa visuaalisesti. Tee se oikein ja tekevät toimittajista kaikkialla hymyillen.
Kuinka tehdä älykkäitä lainauksia:
#8216; = avaa yhden tarjouksen
’ = sulkeminen yhden tarjouksen
“ = avaamalla kaksinkertainen tarjous
” = sulkeminen kaksinkertainen tarjous
Tiedän - kukaan ei halua viettää koko päivän metsästää lainauksia. Onneksi työkaluja kuten Smartypants ja Textism voi tehdä suurimman osan sidoksesta sinulle automaattisesti muotoilemalla tekstiä, joka sisältää älykkäitä lainauksia ja vastaavia.
Lukea "Trouble with EM ja EN" A List Apartista aiheesta ja UTF-8-merkkikoodauksesta yleisimpiä erikoismerkkejä varten.
Yksi huomautus - monet CMS-tekstieditorit (kuten tällä sivustolla) eivät salli älykkäiden lainausmerkintöjen käyttämistä ilman ylimääräisiä laajennuksia. Surullista mutta totta.
Lopeta kahden tilan asettaminen jakson jälkeen. Ole kiltti! Se ei ole välttämätöntä ja sen varsin ärsyttävää.
Käytä linkkisi raja-alareunassa: 1px kiinteä tekstin koristelun sijasta: alleviivaus . Alleviivat voivat kulkea descender-merkkien (g, j, p, q, y) läpi, mikä tekee niistä vaikeita lukea, varsinkin kun käytetään pienempiä kirjasinkokoja.
Ja vaikka sillä ei ole mitään tekemistä typografian kanssa, nopean oikoluvun suorittaminen ei koskaan tapanut ketään . Vaikka kaikki kopioit ja liitäisitkin, oikeinkirjoitusvirhe, joka läpäisee elävän sivuston, heijastaa huonosti kaikkia mukana olevia.
Kiinnitä huomiota näihin 5 korjaukseen ja sivustosi mallit varmasti paranevat. Muista, että nämä ovat vain lähtökohtana. Hyvä typografia on oppinut taito aivan kuten mikä tahansa muu, ja se vaatii opiskelua ja käytäntöä . Pidä aina silmällä sivustoja, jotka saavat sen oikein ja huomaavat, mitä he tekevät. Tarvitsetko inspiraatiota? Katso alla olevista sivustoista esimerkkejä hyvistä web-typografioista ja postimerkkeistä, joiden mielestä on inspiroiva.
Inspiroiva tyyppi:
Mindy Wagner kirjoitti yksinomaan WDD: lle.
Mitä mieltä olet näistä yksinkertaisista tavoista parantaa typografiaasi? Käytätkö niitä verkkosivustoillesi? Haluamme kuulla sinusta!