Typografian ymmärtäminen Webissä
Web Designissa typografian aihe on tärkeä, kun tarkastellaan kaikkia käyttäjäkokemuksen osa-alueita. Jokaisella sivustolla on tekstiä, ja on olemassa ohjeita, joita voit seurata poikkeuksellisen upeiden ulkoasujen rakentamiseen. Ristilinjat, kirjaimet, kirjasinkorkeus, tekstiväli, värijärjestelmät ja muut vastaavat ominaisuudet on otettava huomioon.
Tässä artikkelissa haluan kaivaa web-typografian valtakuntaan. Katsomme suosittuja ideoita uskottavien verkkosivujen tekstien suunnittelusta. Matkan varrella esittelen muutamia hyödyllisiä CSS3-ominaisuuksia jotka suunnittelijat usein unohtavat.
Olen yrittänyt keskittyä enemmän teoriaan ja ideologioihin Webissä. Tämä antaa laajemman painopisteen digitaaliseen tekstiin yleensä, ja te, web-suunnittelija, voivat sitten valita, mihin tyyleihin sovelletaan. Konteksti on aina avain, ja sinun on määritettävä tämä asianmukaisesti jokaiselle projektille, jota työskentelet. Harkitse tätä ohjetta referenssipaketista, joka on täynnä moderneja web-trendejä typografisista innovaattoreista koko planeetalla.
Mittaa kappaleesi
Sinun ei tarvitse katkaista pihapiiriä tällaiseen mittaukseen. Todellisuudessa typografiaan liittyvä toimenpide viittaa minkä tahansa sivusi leveyden (vaakasuoraan) leveydelle. Se ei ole aina aihe, josta keskustellaan, mutta se vaikuttaa sisällön luettavuuteen. Yleisenä nyrkkisääntönä haluat rajoittaa yhden rivin noin 75-85 merkin pituiseksi (ei välttämättä sisällä välilyöntejä).
Nyt tämä saattaa tuntua hieman venytykseltä joillekin laajemmille asetteluille. Erityisesti jos suunnittelusi on nestemäinen ja sen on tarkoitus mukautua käyttäjän koon mukaan selaimen ikkunassa. Voit aina asettaa CSS: n max-width omaisuutesi pääsisältösi div. Marginaalien ja kirjasinkokojen koodaus skaalautuvissa yksiköissä (prosentteina, ems) pikemminkin kuin pikseleillä mahdollistaa tällaisen joustavuuden missä tahansa asettelussa.
Ei ole suurinta mittayksikköä varovainen. Kuinka kirjoitat sisältöä ja muotoilla sanoja lauseisiin on paljon tärkeämpää kuin kunkin rivin leveys. Mutta pidä mielessä, että pidempiä lauseita on paljon vaikeampi lukea verrattuna lyhyempiin, lyhyisiin lausuntoihin.
Johtava selitys
Suunnittelussa sinun tulee myös harkita kohdan mittaustuloksen kanssa ajatusta johtava. Sana sanotaan “ledd-ing”, kuten lyijykynä, jota käytetään lyijykynissä. Tämä nimi on peräisin vanhemmista mekaanisen käsittelyn päivistä, joissa lyijynauhat asetettiin tekstirivien väliin.
Johtaminen on edelleen erittäin tärkeä käsite web-suunnittelussa ja kulkee käsi kädessä kappaleiden toimenpiteiden kanssa. Kun kappaleesi leveys kasvaa, sinun on sovellettava yhtä suurta määrää kuin johtava, tai tekstirivien välistä tilaa. Tämä ylimääräinen tila helpottaa lukemista silmissäsi.
Jos haluat kuolla hyvin tiukasti haavan tekstin läpi, saatat joutua keskittymään yhteen riviin. Jos näin on, yritä lisätä CSS: n kanssa johtamisen määrää viivankorkeus omaisuutta. Haluat aina enemmän tilaa tekstirivien välillä kuin sanojen välillä. Muuten tekstilohkot saattavat näkyä sanomalehtipainona ja ne eivät ole kovin käyttäjäystävällisiä.
Kiinteä tekniikka on soveltaa enemmän tilaa kuin alunperin tarvitaan ja vähentää sitä tarvittaessa. Kaikkea tekstiä ei ole luotu tasa-arvoiseksi, ja tarvitset varmasti kappaleita, joissa on erilainen sisäinen muotoilu, kuten rohkeat sanat, ankkurilinkit, korostukset jne. Joidenkin ylimääräisten johtajien vuoksi nämä muutokset eivät tunne niin tasapainoisia kuin muu teksti.
Käytä luonnollisia fonttikokoja
On vielä kourallinen sivustoja, jotka valitsevat keskimääräisiä fonttikokoja. 11px-12px voi näyttää olevan paljon enemmän “vakio-ammattilainen” liiketoimintamalleja varten. Nämä koot eivät kuitenkaan auta enemmistöä kävijöistä, jotka etsivät tiettyjä tietoja.
Yleensä web-selaimet ovat oletusarvoisesti 16px, jos et käytä mitään CSS-sääntöjä. Jopa tätä voidaan pitää hieman pienenä, jos sinulla on ylimääräinen huone, joka sopii suurempaan tekstiin. Suuremmat kirjasinkoot näyttävät hienostuneemmilta ja suhteellisen avainsanoja on helpompi ohittaa. Serif-fontteja ei valita usein kappalemateriaaliksi, mutta voit silti päästä pois heidän kanssaan. Ehdotan paljon suurempien tekstikokojen käyttämistä serif-pohjaisiin fontteihin luettavuuden parantamiseksi ja kiinnittämiseksi.
Vastaa käyttäjän ympäristöön
Kun kokeilet erilaisia kirjasintyyppejä ja -kokoja, sisältöalueesi on mukautettava vastaavasti. Vakioyksikkö, johon olen kiinni, on EMS koska ne voivat helposti muuttaa kokoa käytettävissä olevan tilan ja näytön tarkkuuden perusteella. Tämä optimoi suorituskyvyn käyttäjän päähän, mikä on tärkeintä.
Mutta kun sinulla on niin joustavaa sisältöä, ulkoasu on taipuvainen virheelliseen lopputulokseen. Alatunnisteen tai sivupalkin alueen sisältö saattaa joissakin selaimissa päätyä vinoon tai epätasapainoon. Tai sinulla voi olla vaikeuksia kuvien tai muiden mediamuotojen rajaamisessa päätekstisi sisällä. On olemassa muita vaihtoehtoja ems: n käyttöön, jos tarvitset kiinteän tyylin - mutta kokeile molempia ratkaisuja nähdäksesi, mikä pidät parhaiten.
Muista, että kiinteät leveydet ja kappaleiden koot lukittavat paljon suunnittelun asetuksia. Se on hienoa sisällölle, joka sisältää paljon paikallaan pysyviä esteettisiä vaikutuksia - ajattele taustakuvia tai paljon asennettuja sivupalkin widgetejä. Se on myös yksinkertainen prosessi, jossa vasemmalle sarakkeelle rakennetaan nestemäisen sisällön alue, jossa on kiinteät sivupalkit oikealle.
Tyyli perustuu kontekstiin
Muutkin todella siistit CSS-temput on piilotettu valtavirran suunnittelusta. Erityisesti on olemassa suuntauksia, jotka kopioidaan tulostustyöstä, jota voidaan soveltaa asianmukaisessa yhteydessä.
Monet web-suunnittelijat eivät ole koskaan edes käyttäneet teksti-luetelmakohdan CSS-ominaisuutta. Annat arvon, jolla voit lisätä minkä tahansa tämän säännön kohteena olevan kohdan ensimmäisen rivin. Yksiköt noudattavat tavallisia tekstiasetuksia, kuten pikseleitä, pisteitä, ems-arvoja, prosentteina… Se ei todellakaan ole trendi, jota löydät useimmissa blogeissa. Mutta se tarjoaa mukavan sivun rytmin lukiessasi suuria tekstilohkoja.
CSS-valitsinta on toinen tyyppi, joka tunnetaan nimellä a pseudoelementti. Tämä voi kohdistua mihin tahansa sisältövalitsimen tiettyyn osaan. CSS3: ensimmäisen kirjaimen pseudo-valitsin sopii mainiosti tyylejä tärkeisiin kappaleisiin. Voit jazziä kunkin kappaleen avauskirjeen, joka on samanlainen kuin melko tarinankirja - käyttämällä lihavoitua, kursivoitua tai jopa muuttamalla kirjasinta. Tutustu tähän kauniiseen esimerkkiin pudotuskorkeista, joihin sisältyy joitakin ylimääräisiä CSS-koodeja, joita voit käyttää.
Pelaaminen kirjainvälillä
Olen varma, että monet meistä ovat kuulleet termi seuranta ennen kuin koskaan ymmärtänyt, että se on sama ajatus kuin CSS-kirjain-välimatka. Nämä kaksi käsitettä ovat samat, jotka liittyvät tulostukseen ja digitaaliseen typografiaan. Yksikkö liittyy kirjainten väliseen tilaan missä tahansa tekstirivissä. Tämä on todella siisti vaikutus, jota sovelletaan sivustojen otsikoihin ja jopa pienempiin sisällön lohkoihin.
On tärkeää, ettet sekoita termejä kirjaimet-etäisyys kerningiin. Molemmat liittyvät typografiaan ja kirjainten väliseen etäisyyteen. Kerning viittaa kuitenkin nimenomaan kahden yksittäisen kirjaimen väliseen etäisyyteen. Kirjaimen väliominaisuus koskee koko elementti tekstiä, olipa kyseessä sana tai kappale tai otsikko tai ankkurilinkki. Pidä tämä mielessä, kun pelaat uusia ideoita ideoille.
Käytän usein muutamia pikseleitä / pisteitä kirjainten välissä otsikoissa kaikkien pääkaupunkien kanssa. Tämä hajottaa yksittäiset merkit ylimääräisellä tilalla ja näyttää myös hyvin määriteltynä “otsikko” Katso. Negatiiviset kirjaintulot toimivat myös oikein oikeassa yhteydessä. Olen yleensä kiinni pienempiin yksiköihin, ehkä -0.03em tai -0.1em.
Kirjasinten yhdistäminen ja sovittaminen
Web-typografian taustalla olevat suunnittelukonseptit ovat varmasti taiteen muoto, ei niin paljon tiedettä. On olemassa ohjeita, joita voit seurata, mutta ei ole vakaita sääntöjä, joihin teillä on rajoituksia. Tämä tarkoittaa, että sinulla on valtavasti vapautta kokeilla sekoittamista ja eri fonttien yhteensopivuutta.
Suosituin kirjasinten yhdistelmä sisältää otsikon ja kappaleen sisällön serif / sans-serif -jakauman. Haluan vaihtaa molemmat, mutta useammin käytän serif-fontteja otsikon osissa. Jokaisen kirjaimen ylimääräiset merkinnät ja aivohalvaukset tekevät niistä näyttävämpiä kuin hallitseva sivuteksti.
Lisäksi sans-serif-kirjasimet ovat puhtaampia ja helpommin raaputtavia lauseissa. Tämä ei tarkoita sitä, että serif-fontit eivät toimi kappaleissa. Itse asiassa on paljon hyviä esimerkkejä! Mutta vähän tunnettu konsepti nimeltä x-korkeus on ratkaisevan tärkeää kirjasimen monimutkaisuuden erottamiseksi. Voit tarkastella parin sanan perusviivaa siitä, miten tällaiset fontit tulevat “sopia” toistensa kanssa.
On myös syytä huomata avaruuden merkitys näiden eri elementtien välillä. Käytätte todennäköisesti kahta tai kolmea eri otsikkotyyliä, joten jokainen näistä tulee eroon. Pidän h2 / h3-elementtejäni hieman lähempänä seuraavaa kappalelohkoa, koska tämä viittaa siihen, että sisällön välillä on korrelaatio.
Tämä korrelaatio on erityisen hyödyllinen, kun käytät kahta täysin eri kirjasinta vierekkäin. Suosittelen enintään kolmea eri fonttiperhettä per sisältö. Liian monien muokkausten jälkeen sanat näkyvät jumbled yhdessä ja koko sivu tulee ulos katsomalla väärin tulkittuja fontteja.
johtopäätös
Toivon, että nämä käsitteet valaisevat jonkin verran digitaalisen typografian monimutkaista aihetta. Työn tekeminen suunnittelijana voi olla vaikeaa, varsinkin jos koko aihe on sinulle vieras. Mutta jatka opiskelua ja harjoita koko joukkoa!
Ensi viikko: Pysy kuulolla, kun tarkastelemme joitakin hyödyllisiä työkaluja ja resursseja parempaan web-typografiaan.
Lisää…
Tässä on enemmän typografiaan liittyviä viestejä:
- Esittelyssä kauniita typografioita sisältäviä Web-malleja
- Parempi typografia nykyaikaisille verkkosivustoille
- Pikaopas typografiaan: Opi ja inspiroi
