Kuinka tehdä tyypiltasi enemmän houkuttelevaa Webissä
Nykypäivän suunnittelijan ei ole harvinaista kiinnittää vähäistä huomiota siihen, miten tyyppikokoonpano on asetettu, varsinkin jos etätunnisteet ja web-turvalliset kirjasimet ovat aina niin sopivia oletusasetuksia, jotka löytyvät maailmanlaajuisesti verkossa.
Jos vuorovaikutteisina suunnittelijoina pystymme viemään hieman enemmän aikaa typografiassa, tulokset osoittaisivat ainutlaatuisen, hyvin suunniteltua muotoilua, joka vastustaa "tehtaan juoksua" luomista.
On hyvä mahdollisuus, että suurin osa suunnittelijoista ja kuvista, joita ihailet, näyttävät hyviä esimerkkejä typografiasta.
Näytän muutaman askeleen, kun otan piirtämisen asetustyypin houkuttelevampaa kuin 24px H1: n oletusskenaariot ja Times New Romanin 13px.
Älä aseta oletusasetuksia, kaikki tekevät sen.
Täällä meillä on yhä yleisempi otsikoiden otsikko sekä runko-kappale jäljessä. Tämä ei juuri vie sinut sisään tai aseta itsensä pois kaikista muista näytteistä, kuten se, eikö? Jotta tekstinäyte olisi visuaalisesti houkuttelevampi, aiomme tehdä muutamia muutoksia kirjasimen valintaan.
Valitse fontti, jolla on enemmän näkyvää painoa otsikkosi kanssa
Vaikka fonttien valinta ei ole täsmälleen "typografia", se on itse asiassa olennainen osa avustamaan sivun tyyppistä eroa muista elementeistä. Kun @ font-face on alkanut, suunnittelijoille on tarjolla massiivisia valintoja.
Täällä olen käyttänyt Extra Condensed Gothic Style fonttia, joka löytyy helposti fonttisivustolta, kuten FontSquirrel.com. Jos pysähdymme ja ajattelemme sitä, nimi "tiivistetty" tarkoittaa jotain, koska se on itse asiassa tiheämpää kuin tavallinen kirjan tyyli perheenjäsen, joka on juuri se, mitä haluamme pois otsikosta :, jotain, joka vetää käyttäjän sisään ja todella erottaa itsensä kehon kopiosta. Se varmasti onnistuu tarttumaan huomiosi paremmin kuin alkuperäinen, mutta muutamia asioita voisimme tehdä tekstin parantamiseksi edelleen.
Tee se houkuttelevammaksi kahdella rivillä CSS
Välitön muutos on kirjaimissa; ne kaikki aktivoidaan nyt, mutta niillä on myös negatiivinen leikkaus jokaisen kirjaimen välillä (tekniikka, joka on siirretty sanomalehtisuunnittelusta).
Molemmat näistä ominaisuuksista voidaan helposti toteuttaa CSS: n avulla, { tekstimuunnos: isoilla kirjaimilla; ja kirjainväli: -Xpx; }. Tekemällä nämä kaksi riviä arvoa koodaavat muutokset, se johtaa huomattavaan parannukseen visuaalisen painon, varsinkin yli alkuperäisen.
Tee viimeiset pienet tweaksit
Seuraavassa vaiheessa kappaleessa käytetty kirjasin on itse asiassa muuttunut puhtaammaksi sans-serifiksi, mikä täydentää otsikkotekstiä. Lähestymme paljon visuaalisesti houkuttelevampaan muotoiluun, mutta muutamia muutoksia voimme tehdä puhdistamiseen vieläkin enemmän.
Kuten vihreät osoittimet osoittavat, on epätasaisia marginaaleja ja mitä typografit haluavat kutsua "orvoiksi". Mikä on yksittäinen sana, joka kuuluu kappaleen viimeiseen riviin. Se luo erittäin epätasaisen painon visuaalisesti verrattuna muuhun tekstiin, ja tämä asia voidaan ratkaista helposti tekstin uudelleen muotoilemisella hieman.
Mitä tulee marginaaleihin, ei ole mitään sääntöä, jonka kaikkien on oltava yhtä suuria. Jos kuitenkin aloitat nuoren webdesignin uran, on hyvä käytäntö olla yhtä lailla marginaaleja, kunnes kokeilet ja opit tekniikoita, joiden avulla voit laajentaa ohjeistusta ja täyttää tavoiteesi visuaalisesti.
Kun olet luonut tasapainoisemman visuaalisen kankaan poistamalla orvo ja säätämällä marginaaleja, näet lopputuloksen, hyvin määritetyn tyypin näytteen, joka sopii mukavaan paikkaan.
Mitkä ovat parhaita vinkkejä verkkotyypille? Kerro meille kommentit!