Katso parempaa typografiaa nykyaikaisille verkkosivustoille

Digitaalinen teksti voidaan muotoilla niin monilla makuilla. Web-fonttien ja selaimen komentosarjojen etenemisen myötä olemme nähneet uudet projektikoodit kehittäjille hyödynnettäviksi. Myös web-suunnittelijat etsivät parasta strategiaa verkkosivustojensa koodittamiseksi ja yhtenäisen typografisen tyylin luomiseksi kaikkien niiden sivujen välille.

Runsaasti ammatillisia web-suunnittelijoita on kirjoittanut aiheesta, mukaan lukien päivitetyt ominaisuudet ja palvelut. Jokaisen verkkosivun on otettava huomioon erillisenä asiakirjana, joka katkaisee root-ulkoasun. Tässä näkymässä on helppo nähdä, miten typografia voi virrata sivulta sivulle ja tarjota ainutlaatuisen ulostulon luovuudelle. Ja tämä tulee erityisen ilmeiseksi rakentamaan ainutlaatuisia luokkia kappaleille ja otsikoille.

Seuraavassa aion mennä upeisiin ideoihin, jotka koskevat pyrkiviä typografia-suunnittelijoita, jotka ovat kiinnostuneita webin rakentamisesta. Blogit, sosiaaliset verkostot ja yritykset haluavat päivittää nykyisen verkkosivustonsa. Ja web-typografian CSS-tyylit tarjoavat erinomaisen lähteen sivujen päivittämiseen.

Erot nykypäivän Internetissä

Nykyaikainen verkko on edennyt dramaattisesti vuoden 2000 alusta lähtien. Web-suunnittelijoille on tarjolla runsaasti uusia ominaisuuksia, jotka luovat loistavia graafisen suunnittelun, logojen, bannerien ja käytännöllisesti katsoen kaiken. HTML5- ja CSS3-spesifikaatioiden vapauttaminen on myös ottanut käyttöön vanhan tapaan rakentaa web-fontteja.

Nyt on täysin mahdollista sisällyttää omia fontteja CSS: ään @ Font-face omaisuutta. Voit käyttää mitä tahansa TrueType(.ttf) tai OpenType(.otf) tiedosto ja tallenna kopio paikallisesti palvelimellesi. Sitten joitakin CSS3-taika sisältää perheen kaikkialla verkkosivullesi!

Pelkästään tämän tekniikan avulla on mahdollista nähdä, miten nykyaikainen Internet on kehittynyt.

Ja jQueryn suosion kasvaessa joka päivä, ei ole yllätys, että voimme rakentaa uskomattomia animaatiovaikutuksia ja mukautettuja fontteja. Vaihtoehtona TTQGen-pluginille jQuerylle voit sisällyttää minkä tahansa TrueType-fontin Web-sivullesi yllä olevalle menetelmälle..

Tämä menetelmä on hieman luotettavampi, koska sinun ei tarvitse modernia selainta, joka tukee CSS3-standardeja toimiakseen. Mutta tietysti vanhat selaimet, kuten Internet Explorer 6, kamppailevat vaikeuksissa.

Mutta kiitos hyvyydestä useimmat käyttäjät ovat siirtyneet uudempaan selailuohjelmaan, joka tukee näitä standardeja! Ja kun olet kehittänyt verkkoa, kannattaa harkita tarkalleen, kenelle markkinat ovat. Et voi haluta kaikkia koko ajan, mutta voit varmasti yrittää saada tarpeeksi lähelle.

Digitaalisen typografian tarkoitus

Eräänlainen outo ajatus harkita, mutta mikä on digitaalisen tekstin todellinen tarkoitus? Voit välittää tietoa, jakaa lähteitä ja tarjota mielipiteesi Internetin käyttäjille. Teksti on ajatusten ja ideoiden jakamiseen tarkoitetun median yksinkertaisin muoto. Mutta se on myös hyvin monimutkainen ja sisältää suuria yksityiskohtia, joita valokuvat / videot eivät voi käyttää.

Vierailijat löytävät todennäköisesti verkkosivustosi tekstin tai otsikoiden avainsanojen perusteella - vain yksi syy kiinnittää tarkasti huomiota Web-kopioon. Ja kun olet saanut jonkin verran huomiota sivustoosi, sinun on pidettävä kiinni niiden keskittymisestä. Tämä on helpointa tehdä lihavoiduilla otsikoilla ja sivutekstillä.

Jos kirjoitat artikkelia tai opetusohjelmaa, sinun on käytettävä selkeää kieltä. Sen yhtä tärkeää kuin sivusi tekstin näyttäminen ja sisällön laatu. Mitä suurempi teksti näyttää, sitä helpompi on lukea ja tarkistaa avainsanoja. Ja koska kappaleet sisältävät enemmistön sisällöstäsi, sinun pitäisi viettää paljon aikaa prototyyppejä oikean istuvuuden varmistamiseksi. Kappaleita käytetään välittämään viestisi bittikokoisissa paloina lauseiden mukaan. Ymmärrä, miten kirjoitat ja suunnittelet eteenpäin, jotta saat sopivan sivun asettelun.

Sivun tekstin lisäksi tulee media ja toissijainen sisältö. Jos kohdissa on ensisijaisia ​​tietoja, saatat kuvata tai kuvioita, jotka lisäävät sivua. Nämä aksentit ovat vain oikea kosketus, jotta käyttäjät voivat liikkua sivustosi kautta.

Videot ja kuvat voivat hajottaa sisällön ja näyttää siltä, ​​että lukijat liikkuvat nopeammin artikkelin läpi. Mutta käytä näitä kohteita säästeliäästi ja älä anna mitään hukuttaa ydinviestiäsi. Käyttäjät ovat (lähinnä) tulossa sivustoosi ja eivät halua liikaa häiriötekijöitä.

Kaikkia muita muotoiluvaihtoehtoja käytetään määrittämään toiminnallisuutta tai tarkoitusta. Esimerkiksi hyperlinkin teksti on usein erilainen kuin muilta, jotta se erottuisi “klikattava”. Voit työskennellä rohkeilla tai kursivoiduilla sanoilla, jotka korostavat lauseita. Ja lohkokaavojen tai esivalmistetun tekstin käyttö voi auttaa kuvaamaan perustavanlaatuisia lausuntoja tai web-koodia.

Verkkosivun otsikot

Yksi tärkeimmistä web-typografian kohteista on otsikkotunnisteita. Jos et tunne HTML-otsikoiden vaihtelua

että

entisillä on vähiten merkitystä ja jälkimmäinen. Tämä merkintä on hyödyllistä ymmärtää, koska Google sijoittaa verkkotunnuksesi ja verkkosivusi sisällön rakenteen mukaan. Näin voit lopulta hallita, mitä avainsanoja käytät ja mitä otsikkokohtia tarvitset.

Vaikka vakio HTML5-spesifikaatio sisältää jopa 6 eri otsikkotyyliä, suosittelisin käyttämään välillä 3-4. Niitä ei tarvitse sisällyttää sivuillesi. Ja se on myös erittäin epätodennäköistä, että käytät 6 eri otsikkoa. Kun istut alkuun rakentaaksesi tyylisi, yritä laatia muutamia esimerkkejä otsikoista nähdäksesi, mitä haluat.

Photoshop on erinomainen tässä tilanteessa. Voit myös yrittää koodata HTML-koodin eri otsikoista, miten he näyttävät selaimessa. Tärkeää on työskennellä sivuvirtauksen ja muotoilun otsikoiden mukaan niiden luokituksen mukaan.

Esimerkiksi

tunnisteiden tulisi erottua eniten kaikista sivusi otsikoista.

ja

ovat Googlen suosituimmat tunnisteet sivun sisällön indeksoimiseksi. Suunnittelutehosteiden, kuten lihavoidun fontin, alleviivojen, katkoviivojen tai eri värien käyttäminen auttaa nimikkeitäsi siirtymään sivulta.

Etäisyys on myös tärkeä kun kyse on otsikoista tai sisällöstäsi. Varmista, että lisäät ylimääräisiä marginaaleja otsikoiden ja pääsisältöalueen välillä. Jos olet tehnyt fonttisi riittävän suureksi, jokaisen otsikon tulisi erottua omasta ydinlohkosta. Tämä ulkonäkö on ihanteellinen, jos haluat tarttua lukijoiden huomion selkeään viestiin.

Ainutlaatuisten hyperlinkkien rakentaminen

Sivun linkkien aiheista on paljon sanottavaa. Yhtä tai toisella sinun on käytettävä koodisi hyperlinkkejä. Ne ovat erittäin tärkeitä sivustosi eri sivujen välisenä pääavustusliittymänä. Saatat myös linkittää muihin blogeihin tai jopa arkistoituihin blogiviesteihinsi myöhempää käyttöä varten.

Sinun pitäisi valita linkkisi pitävä teksti hyvin huolellisesti. Tämä on erityinen sisältö, joka korostuu linkityylillä. Esimerkiksi "klikkaa tästä" on erittäin suosittu ja sitä käytetään suorana latauksena suurimman osan ajasta. Yritä välttää tätä järjestelmällistä lähestymistapaa ja hanki sen sijaan hieman luovaa hyperlinkin tekstistäsi. Vierailijat napsauttavat linkkiä, jos he voivat myös tunnistaa kontekstin ja ehkä selvittää, mitä uusi sivu sisältää.

Kun suunnittelet linkkejäsi, kannattaa harkita seuraavia - miten muutokset näyttävät sivusi asetuksissa, millainen taustaväri työskentelet, ja mikä väri on kontrastin teksti?

Linkkien pitäisi näkyä räikeästi sivulta napsautettavina kohteina - loppujen lopuksi, tämä on niiden tehtävä. Siksi vanha sininen, jossa on alleviivattu tekstitehoste, toimii niin hyvin. Mutta jos huomaat, että vaihtoehtoinen väri toimii paremmin, kannattaa kokeilla sitä. Linkkien suunnittelussa ei ole yhden kokoista ratkaisua. Selaa vain vähän Webissä ja saat varmasti yhteen jotain erinomaista.

Yksi kiinnostava kohta on muutamia ominaisuuksia, joita kannattaa kokeilla välttää. Esimerkiksi tekstin fontin perheen tai fonttikoon muuttaminen voi olla erittäin ärsyttävää. Tämä aiheuttaa tekstin vääristymisen ja siirtämisen, mikä saattaa asettaa hiiren kohdistimen vain linkkialueelta. Samalla tavalla sinun pitäisi välttää lisämarginaalien lisäämistä linkkien tai hover-tehosteiden osalta. Nämä toimivat paljon paremmin, kun pysyt yksinkertaisina. Värimuutos tai lisätty alleviivaus kulkee pitkälle käyttäjän kokemuksessa.

Tyylitettyjen luetteloiden rakentaminen

Mahdollisuudet ovat hyvät sinun täytyy myös työskennellä luetteloiden kanssa jossain vaiheessa. Mukana on sekä tilatut että järjestämättömät luettelot HTML-muodossa. Ne sopivat erinomaisesti pieneen kokoelmaan ideoita, tuotteita, ihmisiä tai linkkejä verkossa hyvin pienessä määrin tilaa. Styling ei myöskään ole erilainen kuin kappaleet tai otsikot.

Vierailijoiden on ymmärrettävä heti, että he katsovat luetteloa kohteista. Säilytä jokainen luetteloyksikkö erillään ja sijaitsee uudella rivillä sivulla. Lisää mahdollinen ylimääräinen tila niiden välillä. Tämä antaa jonkin verran hengityshuonetta ja näyttää mukavana purkauksena artikkelin tekstille. Jos haluat, voit jopa kirjasin fontin tai luetelmakohdan luetella hieman, jotta se pysyy poissa vakioasettelun marginaaleista.

Lisäominaisuuksien lisääminen luettelon erottamiseksi ei ole vaatimus. Mutta jos pidät lohkoasettelusta, se todella keskittyy listoihin. Voit yrittää lisätä vaalean taustan tai kuvakkeita. List Apart -luettelossa on loistava kirjoitus, jossa on mielestäni joitakin erittäin voimakkaita tietämyssarjoja. Mutta jos pidät sivun sisältöä lineaarisena ja käytät luettelolohkoja vain silloin, kun niitä tarvitaan, sinun ei pitäisi törmätä mihinkään suunnittelupoikkeamiin.

Miten luodaan sivunoteerauksia

Tarjousten ja viittausten esiintyminen on hyvin rajallinen näinä päivinä. Varhaisessa verkossa et näe kovin paljon näitä elementtejä käytössä. Ehkä toimituksellisissa, esseissä tai oppimateriaaleissa. Mutta HTML5 on ehdottomasti päivittänyt säännöt hieman, mikä tekee lohkojen mainitsemisen paljon helpommaksi.

HTML5-lääkärin verkkosivuilla on kiehtova resurssi keskustelemaan tästä tarkasta aiheesta. He keskustelevat sisällön käytöstä lohkokaavoissa sisältäen asiakirjan rakenteen sisäisiä. Voit siis sisällyttää myös otsikot, kappaleet ja jopa luettelot ja alatunnisteet. A: n pääasiallinen käyttö