Web-typografian parhaat käytännöt uudenaikaiselle verkkosivustolle

Opas reagoivaan verkkotypografiaan, joka kattaa kaikki parhaat käytännöt & kirjasintyylin kokoa koskevat säännöt sivustosi sisällön luettavuuden varmistamiseksi & ilo nähdä.

Typografian parhaat käytännöt

Maalareilla on siveltimensä. Kuvanveistäjillä on savi. Web-suunnittelijoilla on… fontit? Kuten Oliver Richenstein on nyt kuuluisasti kirjoitettu: “95% web-tiedoista on kirjoitettua kieltä.” Kun olet huolellisesti harkinnut sivustosi mukautettuja grafiikoita, kuvakkeita, kauniita valikoita ja puhtaita käyttöliittymiä, olisi synti huijata Web-typografian tärkeä osa.

Älä huolestu – sinun ei tarvitse olla pääsuunnittelija voidaksesi valmistaa tyylikkään ja tehokkaan tekstin. Noudattamalla joitain luotettavia ohjeita ja periaatteita Web-typografiasi välittää käyttäjän käyttäjien haluaman tiedon helposti luettavalla ja harkiten suunnitellulla tavalla.

Visuaalisen hierarkian luominen

Hyvän web-typografian tärkein tavoite on luoda hierarkia sisällöstä, joka virtaa visuaalisesti elementistä toiseen. Oikea otsikko-, alaotsikko- ja tekstitekstin erottelu, erilaiset kirjasinpainot ja tyylit ja riittävästi tilaa tekstilohkojen välillä ovat kaikki tekijöitä, jotka edistävät vaivatonta lukemista.

Typografinen visuaalinen hierarkiaesimerkki

Vahvan ruumiin rakentaminen

Ensimmäinen tilauksesi on naulata sivustosi päätasot ruumis tekstiä, koska vierailijat viettävät tämän suurimman osan ajastaan ​​lukemiseen. Tavoitteesi on luoda teksti, joka virtaa luonnollisesti suurten kappaleiden läpi, inspiroimalla terveellistä rytmiä pitkille lukemisille.

  • Runkotekstin yleisin kirjasinkoko on 16px– tai vielä parempaa, 1em (lisää tästä myöhemmin).
  • Vältä tekstin keskittämistä, koska kummankin puolen epätasaiset reunat tekevät näkymästä houkuttelevan. Aseta sen sijaan vasen ja oikea marginaali tekstin säilöstä auto halutumman vaikutuksen saavuttamiseksi.
  • Oikeutettu teksti toimii hyvin sanomalehdissä, ei verkkosivuilla. Nesteasettelujen luonne voi luoda odottamattomia aukkoja sanojen välille.
  • Valita vähäkontrastiset fontit yli korkeiden. Fontit kuten Didot toimivat hienosti jumbo-otsikoissa tai suurikokoisessa tulostuksessa, mutta sen suuri kontrasti paksujen ja ohuiden viivojen välillä vaikeuttaa pienten kokojen lukemista verkkosivuilla.
  • Ole tietoinen luettavuus. Monissa sans-serif-kirjasimissa isot ”I” ja pienet ”l” kirjaimet näyttävät täsmälleen samalta, mikä voi aiheuttaa tarpeetonta sekaannusta.
  • Optimaalinen viivankorkeus kappaleen teksti on välillä 1,25–1,5 × fonttikoko. Säädä vastaavasti valitsemasi kirjasintyypin mukaan.

Otsikot menestykseen

Paremmin tai huonommin, suurin osa lukijoista käy todennäköisesti läpi sivusi otsikot vaivauduttamatta edes päätekstiä. Siksi on kriittistä kiinnittää heidän huomionsa ja kehottaa jatkamaan lukemista varmistamalla, että otsikoidesi typografia on merkittävä.

  • Otsikkotekstin keskimääräinen fonttikoko on noin 36px– tai, vielä parempaa, ympärillä 2.25em (aiomme päästä tähän).
  • Huomiota tulisi aina suunnata kehon edessä olevaan otsikkoon. Varmista, että otsikon tekstiä ei syötetä liian paksulla fontin painolla rungossa.
  • Varmista, että otsikot vastaavat lukijoiden odotuksia. Huomattavasti suurempi teksti, jolla on runsaasti etäisyyttä alalauseensa välillä, tarkoittaa aiheen muutosta, kun taas pienemmät otsikot paljon lähempänä otsikoita viittaavat siihen, että sisältö liittyy toisiinsa.
  • Jos otsikkosi pitäisi kääriä seuraavalle riville, ota huomioon, että optimaalinen viivankorkeus otsikoille on Vähemmän kuin mitä se on kehotekstissä.

Välinen tila

Sivusi elementtejä erotteleva tila kertoo paljon niiden suhteista toisiinsa, ja se on suunnittelupäätös, jota ei voida sivuuttaa. Valkoisen valtameren ympäröimät hallitsevat otsikot tarjoavat paljon erilaisen kontekstin kuin pienemmät otsikot, jotka on kiinnitetty tiiviisti kappaleisiin (muistakaa, että rakennamme visuaalinen hierarkia).

Yleensä on parempi erehtyä sillä puolella, että sinulla on liikaa valkotilaa kuin ei tarpeeksi. Puhtaat asettelut, joissa on runsas välilyönti, ovat modernissa verkossa suosimimpia.

Lasku linjaan

Kuvittele tekstin lukemista korkean resoluution 27-tuumaisella näytöllä, joka ulottuu kokonaan näytön molemmille reunoille. Silmäsi väsyvät vain yhden kappaleen jälkeen!

On tärkeätä pitää jokainen päätekstin rivi rajoitettuna tiettyyn määrään merkkejä, jotta silmät pysyisivät keskittyneinä keskipisteeseen. Suosittu yksimielisyys on, että tämä maaginen toimenpide työasemat On 60–75 merkkiä pitkä. varten mobiili-näytöt, missä haluamme välttää silmien turhauttamista ja liian tiivistä tekstiä, tämä numero on ympärillä 35–40 merkkiä rivillä.

Asteikon kaataminen

Paljon on kirjoitettu aiheesta skaalaus rungon ja otsikon fonttikokojen välillä. Mikä on tuo täydellinen H2-koko, jos vartaloteksti on esimerkiksi 1em? Esteettisesti miellyttävimmän mittasuhteen määrittäminen tekstitekstin ja H1 – H6-otsikoiden välillä on onneksi jotain, jota monet typografit ovat jo dekoodaaneet. Näiden matemaattisten mittasuhteiden on lisäksi mukauduttava käyttäjän näytön koon perusteella.

Suunnittelija Jason Pamental tarjoaa hyödyllinen kaavio mitä hän uskoo olevan optimaalimpia fonttikokoja eri medialaitteissa – ja olen taipuvainen samaa mieltä hänen kanssaan. Pohjimmiltaan, vaikka työpöydän ihanteellinen H1-koko voi olla kolminkertainen rungon koon kanssa, mobiili-näytössä tämä näyttää liian liioitelulta – joten se on pienennettävä pienemmälle katselualueelle sopivaksi.

Kaavio optimaalisista fonttikooista eri medialaitteissa

Nopea huomautus: Kuinka voit kertoa, jos sinulla on hyvä visuaalinen hierarkia? Siirrä näytöllesi kunnes koko teksti hämärtyy. Jos asettelu näkyy amorfisena möhkönä ilman erottelua osioiden välillä, hierarkiasi saattaa epäonnistua. Jos kuitenkin pystyt erottamaan erot tekstilohkojen, otsikkojen välillä ja tiedät selvästi, mihin silmien tulisi kulkea, olet hyvässä kunnossa!

Tekstin pitäminen reagoivana

Reagoiva web-suunnittelu on nykyään välttämätön käytäntö – etenkin kun yhä useammat ihmiset käyttävät mobiililaitteita ensisijaisena keinonaan selata Internetiä. Vaikka suunnittelu prosentuaalisesti pikseleiden sijasta on mullistanut tapaa, jolla kuvat ja marginaalit mukautuvat nesteen leveyteen, reagoiva web-typografia on valitettavasti edelleen vaikeampi muna.

Fonttikokojen optimointi useiden laitteiden välillä voi tulla hukkua, koska sinun on selattava useita mediakyselyjä kohdistaaksesi kaikki verkkosivustosi teksti. Valitsemasi yksikön nopean säätämisen avulla löydät kuitenkin helpommin oikeat kirjasinkoko käytettäväksi minkä tahansa tyyppisissä näytöissä.

Ems yli pikseliä

Sivustosi typografian yksinkertaistamiseksi ojota pikseli ja aloita käyttö EMS. Ems mahdollistaa sivustosi fonttikokojen skaalauksen helpomman ymmärtämisen, ja niiden pienemmät yksiköt ovat hallittavissa kuin kaksinumeroiset pikselimäärät..

Vielä tärkeämpää on, että ems: n kanssa kaikki on suhteessa emosäiliöön. Jos asetat viivankorkeus säiliön arvoon 1,5em, silloinkin, jos vaihtaisit säilön kirjasinkokoa, rivikorkeus pysyy oikeassa suhteessa. Pikselien kanssa joudut jatkuvasti säätämään säilön rivikorkeusominaisuutta jokaisesta fonttikoon muutoksesta visuaalisen yhdenmukaisuuden ylläpitämiseksi.

Tämä periaate pätee marginaali, täyte, kirjainväli, ja useimmat muut tyylit, joita käytät sivustosi tekstissä. Et enää vaienna pikseliä sisällön pehmusteissa jokaiselle mediapyynnölle – aseta vain alkutila ems: ssä, ja se mukautuu automaattisesti alkuperäisiin mittasuhteisiin!

Emsin käyttäminen

Ensimmäinen tehtävä on asettaa sivustosi fonttikoon perusviite. Sinun tyylisivu, kirjoita tämä:

vartalo {
fonttikoko: 100%;
}

Tämä määrittää sivustosi sisällön suhteellisen fonttikoon 1em, jota useimmat selaimet tulkitsevat nimellä 16px. Nyt kaikki otsikkokoosi – 2.25em, 1.5em ja niin edelleen – ovat suorat kerrannaiset perustasoon 1em.

TÄRKEÄ MUISTIINPANO: Ems ovat CSS—Tarkoittaa niiden koon suhteessa vanhemman vahvistettuun arvoon. Esimerkiksi: Jos asetat kehon fonttikokoksi 1,25 em ja sitten lasten säilön fonttikoko 1,25em, nämä kaksi kirjasinta eivät ole samankokoisia! Sen sijaan lapsisäiliön teksti on 1,25 × alkuperäinen 1,25 em vanhempi.

Lisää vinkkejä loistavaan Web-typografiaan

Tässä on vielä muutamia vinkkejä loistavaan verkkotypografiaan:

Älä liioittele sitä

Sinun tulisi rajoittaa verkkosivustosi typografia 2–3 kirjasinta enintään. Tyypillisesti tämä olisi otsikoiden kirjasin, pääteksti kirjasin ja tarvittaessa alaotsikon kirjasin. Liian monien kirjasinten käyttö voi luoda sotkun ja kohdistamattoman asettelun. Seuraava kohta selittää myös sivustosi latausajan.

Upota vain mitä tarvitset

Mieti vain sitä, mikä sivustollesi on välttämätöntä, ja jätä loput ulkopuolelle. Jos tiedät tarvitsemasi säännöllinen, lihavoitu ja kursivoitu muotoile annettu fontti, upota sitten vain nämä valinnat ja sulje pois ohut, valo ja musta tyylejä. Enemmän kuin tarpeellisten tyylien lataaminen voi viedä suuren osuman sivustosi resursseihin, koska jokainen yksilöllinen tyyli on erillinen palvelinpyyntö.

Jos et halua rajoittaa luovuuttasi suunnitteluvaiheessa, mene eteenpäin ja upota kaikki; muista poistaa ylimääräiset tyylit ennen kuin sivustosi ilmestyy.

Jos et voi lukea sitä, älä käytä sitä

Tämä on iso söpö. Vaikka kukkainen käsin kirjoitettu fontti voi olla houkuttelevaa käyttää, jos on jopa pienintäkään epäselvyyttä siitä, onko kyseessä g tai y, niin älä käytä sitä! Mikään ei ole turhauttavampaa lukijalle kuin lukemattoman fontin purkaminen.

Suosittele oikea teksti ‘Lorem Ipsum’in yläpuolella

Jokainen suunnittelija luottaa lorem ipsum tyhjä teksti tyhjien sisältöalueiden täyttämiseksi projektin asettelua suunnitellessasi. Saatat kuitenkin olla yllättynyt siitä, kuinka suuri vaikutus varsinaisen sisällön käyttämiseen voi vaikuttaa typografian ulkoasuun. ‘Lorem ipsum’ on täysin tunteeton ja älyllisesti ontto; se ei anna mitään aavistustakaan, kuinka sanasi ja persoonallisuuttasi ilmaistaan ​​kirjasintyypin avulla. Siksi kytke todellinen sisältö sivustoosi mahdollisimman pian ennen sivustosi suunnittelun viimeistelemistä.

Kontrasti taustat

Tumma fontti tavallista valkoista taustaa vasten tarjoaa aina parhaan luettavuuden. Valkoinen teksti tummaa tai epäselvää kuvaa vastaan ​​on myös tulossa suosituksi nykyään. Huomaa vain, että taustaasi ei ole liian monimutkainen tai yksityiskohtainen, mikä turhaa etualan tekstin.

Huono typografinen esimerkki tekstistä tekstin taustallaEsimerkki huonosta typografiakäytännöstä, jossa käytetään tekstiä yli tekstin.

Fonttien yhdistäminen – kuten houkuttelee

Fonttien yhdistäminen täysin erilaisten persoonallisuuksien kanssa aiheuttaa hämmentäviä signaaleja. Nämä kaksi voivat olla tyyliltään vastakkaisia, mutta emotionaalisesti niiden tulisi palvella samaa viestiä.

Yhdistä fontit – Pidä se perheessä

Yksinkertaisin ratkaisu on usein paras. Joskus parhaat parit saadaan käyttämällä variaatioita (serif, vaihtoehtoinen paino, laatta) samassa kirjasinperheessä.

Hyperlinkit

Yleinen ja odotettu käytäntö on korostaa linkittää ja poistaa alleviivauksen leijautapahtumista. Kun siirryt tälle reitille, varmista, että korostettu teksti on kursivoitu tai tummennettu sekaannusten välttämiseksi pikemminkin kuin alleviivattu.

Nykyään ankkuroitu teksti on kuitenkin yleensä värillinen sen sijaan, kun siirtämisvaikutus otetaan käyttöön, kun kiinnitetään. Suunnittelun kannalta tämä on kiistatta parempi vaihtoehto – muista kuitenkin pitää se johdonmukaisena!

Jotkut CSS: n tiedosta

Tämä vaikuttaa kirjainten väliseen etäisyyteen. Hyödyllinen otsikoiden korostamisessa.

kirjeväli: x.xxem;

Tämä vaikuttaa sanojen väliseen etäisyyteen:

sanaväli: x.xxem;

Tämä tarjoaa vaihtoehdon kaikille korkoille korostusta varten. Hyödyllinen myös lyhenteille.

font-variantti: pienet kirjaimet;

Tämä Kapitalisoi kaiken tekstin.

tekstimuunnos: iso kirjain;

Tämä merkitsee ensimmäisen kirjaimen isoilla kirjaimilla.

tekstimuunnos: isolla kirjaimella;

Tämä johtaa tekstin yliviivaukseen.

tekstin koristelu: suoraviivainen;

Tämä parantaa kirjasinten näyttöä nykyaikaisissa selaimissa:

tekstin renderointi: optimiseLegibility

Fonttitiedostotyyppien ymmärtäminen

On hyvä idea upottaa useita tiedostotyyppejä, jotta voidaan varmistaa, että fontit latautuvat oikein monilla selaimilla. Näihin tulee kiinnittää eniten huomiota:

TrueType

TTF on yleisin muoto Macille ja Windowsille, ja sitä tuetaan kaikissa tärkeimmissä selaimissa.

OpenType

OTF: ää tuetaan myös laajasti, ja se mahdollistaa lisäosien, kuten pienten kirjaimien ja vaihtoehtoisten merkkien, tarvitsematta upottaa erillistä fonttia.

Upotettu avoin tyyppi

Vain Internet Explorer tukee EOT: ta – ja ellet ole huolissasi käyttäjistä, jotka käyttävät vanhoja IE-versioita, on todennäköisesti parasta vain jättää tämä pois.

Verkon avoimen fontin muoto

WOFF – ja sen seuraaja WOFF2 – ovat kaupungin uusia kuninkaita. Niiden tuki suurimmissa selaimissa ja pakattu kyky tekevät niistä nykyaikaisen valitun tiedostotyypin.

Tarve muuntaa tiedostotyyppi?

Todennäköisesti joudut tilanteeseen, jossa sinulla on vain yhden tyyppinen fonttitiedosto ja sinun on muutettava se jotenkin toiseksi. FontSquirrel ja Font2Web tarjota online-työkaluja, jotka tekevät juuri sen.

johtopäätös

Tiesit jo sen sisältö on verkkosivustosi tärkein näkökohta. Hyvin muotoiltu sisältö ansaitsee hyvin muotoilun typografian; älä petä sivuston kävijöitä vaikeasti luettavalla tai rakenteen kannalta hämmentävällä tekstillä. Hyvin suunnitellulla visuaalisella hierarkialla, joka noudattaa typografisia parhaita käytäntöjä, luovat ajatuksesi voidaan myös esitellä luovasti. Hyvää kirjoittamista!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me