Web tipografija najbolje prakse za modernu web stranicu

Vodič za brzu web tipografiju koji pokriva sve najbolje prakse & pravila za određivanje veličine fonta kako bi se osiguralo čitanje sadržaja vaše web lokacije & radost gledati.


Najbolje prakse tipografije

Slikari imaju svoje četke. Skulptori imaju svoju glinu. Web dizajneri imaju svoje … fontove? Kao što to sada čini Oliver Richenstein čuveno napisano: “95% informacija na webu je pisani jezik.” Nakon svih pažljivih razmatranja koje ste posvetili prilagođenim grafičkim prikazima, ikonama, lijepim izbornicima i čistim sučeljima na vašoj web lokaciji – bilo bi grijeh prolistati vitalnu komponentu web tipografije..

Ne brinite – ne morate biti glavni dizajner da biste stvorili elegantan i učinkovit tekst. Pridržavajući se pouzdanih smjernica i načela, vaša će web tipografija prenijeti informacije koje korisnici žude na način koji je lako čitljiv i zamišljen.

Uspostavljanje vizualne hijerarhije

Najvažniji cilj dobre tipografije web stranica je stvaranje hijerarhija sadržaja koji vizualno teče iz jednog u drugi element. Pravilna razlika između naslova, podnaslova i teksta teksta, različite težine i stilova fonta te dovoljno bijelog prostora između blokova teksta svi su faktori koji promiču iskustvo čitanja bez napora..

Primjer tipografske vizualne hijerarhije

Izgradnja snažnog tijela

Vaš prvi redoslijed poslovanja je da utvrdite glavni sadržaj vaše web lokacije Tijelo tekst, jer će to posjetitelji provesti većinu svog vremena čitajući. Vaš je cilj stvoriti tekst koji prirodno teče velikim odlomcima, nadahnjujući zdrav ritam za duge dijelove čitanja.

  • Najčešća je veličina teksta za Body text 16px– Ili još bolje, 1em (više o tome kasnije).
  • Izbjegavajte poravnavanje teksta u središtu, jer će neravni rubovi s obje strane stvoriti neprivlačan prizor. Umjesto toga, postavite lijevo i desno margina spremnika teksta u auto postići željeni učinak.
  • opravdan tekst izvrsno funkcionira za novine, a ne za web stranice. Priroda rasporeda tekućina može stvoriti nepredvidive razlike između riječi.
  • izabrati niskog kontrasta fontovi preko visokih. Fontovi poput kuća Didot djeluje lijepo za jumbo naslove ili za ispis velikog formata, ali njegov visoki kontrast između debelih i tankih crta poteza otežava čitanje u malim veličinama na web stranicama.
  • Pripazite čitljivost. U mnogim sans-serif fontovima velika slova “I” i mala slova “l” izgledaju potpuno isto, što može stvoriti nepotrebnu zbrku.
  • Optimalno linija visina teksta stavka je između 1,25–1,5 × veličine fonta. U skladu s tim prilagodite na temelju odabranog slova.

Naslovi za uspjeh

Za bolje ili loše, većina čitatelja će vjerojatno preletjeti kroz stranice vaše stranice naslovi a da se uopće ne mučim s glavnim tekstom. Stoga je izuzetno važno privući njihovu pažnju i zatražiti daljnje čitanje osiguravajući da je tipografija naslova izvanredna.

  • Prosječna veličina teksta za naslov teksta negdje je oko 36px– Ili, još bolje, okolo 2.25em (idemo do ovoga).
  • Pažnja bi uvijek trebala biti usmjerena na Naslove prije Tijela. Provjerite nije li tekst zaglavlja nadjačan prevelikom masom slova u tijelu.
  • Osigurajte da vaši naslovi ispunjavaju očekivanja čitatelja. Znatno veći tekst s dovoljno razmaka između podređenog stavka označava promjenu teme, dok manji naslovi mnogo bliži odlomcima podrazumijevaju da je sadržaj povezan.
  • U slučaju da vaš naslov treba prelaziti na sljedeći redak, budite svjesni da je optimalno linija visina za Naslove je manje nego što je to za Body text.

Prostor između

Količina prostora koja razdvaja elemente vaše stranice puno govori o njihovom međusobnom odnosu i to je princip dizajna koji se ne može zanemariti. Dominantna zaglavlja okružena bijelim oceanom pružaju znatno drugačiji kontekst od manjih zaglavlja usko vezanih za odlomke (ne zaboravite da gradimo vizualna hijerarhija).

Općenito je bolje pogriješiti što je previše bijelog prostora nego nedovoljno. Čisti izgled sa velikodušnim bijelim prostorom ono je što preferiraju moderni web.

Pada u liniju

Zamislite da čitate tekst na 27-inčnom monitoru visoke rezolucije koji se proteže sve do oba ruba zaslona. Oči bi se udebljale nakon samo jednog stavka!

Važno je da svaki redak vašeg glavnog teksta bude ograničen na određeni broj znakova kako bi oči ostale usredotočene na središnju točku. Popularni konsenzus je da je ta magična mjera za stolna računala je 60–75 znakova. Za zasloni mobilnih uređaja, tamo gdje želimo izbjeći škljocanje očiju i pretjerano zbijenog teksta, taj broj sjedi okolo 35–40 znakova po retku.

Prevrtanje Vage

Mnogo je toga napisano na temu skaliranja između veličine slova Body i Heading. Koja je to savršena veličina H2 ako je, recimo, vaš Body text 1em? Određivanje estetski najprirodnijih proporcija između teksta teksta i naslova H1-H6 srećom je nešto što su mnogi tipografi već dekodirali. Uz to, ove se matematičke proporcije moraju prilagoditi na temelju veličine zaslona korisnika.

Dizajner Jason Pamental pruža koristan grafikon za ono što on smatra da je najoptimalnija veličina fonta na raznim medijskim uređajima – i obično se slažem s njim. U osnovi, iako idealna veličina H1 na radnoj površini može biti 3 × veličina tijela, na zaslonu mobilnog telefona to će se činiti pretjeranim – pa ga treba smanjiti kako bi se prilagodio manjem prikaznom području..

Grafikon optimalnih veličina fonta na različitim medijskim uređajima

BRZO NAPOMENA: Kako možete znati imate li dobru vizualnu hijerarhiju? Zaškripaj zaslonom sve dok čitav tekst ne postane zamagljen. Ako se izgled čini kao amorfno mrlje bez razlike između odjeljaka, vaša hijerarhija možda neće uspjeti. Ako, međutim, možete lako uočiti razdvajanja između blokova teksta, naslova i jasno znati gdje oči trebaju putovati, onda ste u izvrsnom obliku!

Održavanje teksta odgovornim

Danas je temeljna praksa responzivan web dizajn – pogotovo zato što sve više i više ljudi koristi mobilne uređaje kao svoje glavno sredstvo za pregledavanje Interneta. Iako je dizajniranje s postocima, a ne pikselom, promijenilo način na koji se slike i margine prilagođavaju širini tekućine, web tipografija s odzivnim reakcijama nažalost ostaje tvrdo jaje za pucanje.

Optimiziranje veličine fonta na više uređaja može postati neodoljivo jer se morate kretati kroz nekoliko medijskih upita da biste ciljali sav tekst na vašoj web lokaciji. Međutim, brzo prilagođavanje jedinici po izboru lakše ćete otkriti prave veličine fonta koje se koriste za bilo koju vrstu zaslona.

Ems preko piksela

Da biste pojednostavili tipografiju vaše web lokacije, izvadite piksel i počnite upotrebljavati EMS. Emsovi omogućavaju lakše razumijevanje skaliranja između veličine fonta vaše web lokacije, a njihove manje jedinice upravljaju su od dvoznamenkastih brojeva piksela.

Još važnije, kod ems-a je sve u odnosu na nadređeni spremnik. Ako postavite linija visina kontejnera na 1.5em, čak i ako biste promijenili veličinu fonta tog spremnika, visina linije ostat će u ispravnom udjelu. Uz piksele, stalno biste trebali prilagođavati svojstvo visine linije spremnika za svaku promjenu veličine fonta, kako biste održali vizualnu konzistentnost.

To načelo vrijedi za margina, punjenje, pismo-razmak, i većinu ostalih stilova koje primjenjujete na tekst vaše web lokacije. Nema više sitnjenja piksela na oblozi vašeg sadržaja za svaki medijski upit – samo postavite početno stanje u emsima i automatski će se prilagoditi izvornim proporcijama!

Korištenje Ems-a

Prvo što trebate učiniti je postaviti osnovnu referencu veličine fonta vašeg web mjesta. U svom list sloga, unesite ovo:

tijelo {
veličina slova: 100%;
}

Ovime se uspostavlja relativna veličina sadržaja vašeg web mjesta za 1em, što većina preglednika tumači kao 16px. Sada su sve vaše veličine zaglavlja – 2,25em, 1,5em, i tako dalje – izravni višekratnici osnovne vrijednosti 1em.

VAŽNA NOTA: Ems su kaskadno—Znači da je njihova veličina u odnosu na utvrđenu vrijednost roditelja. Na primjer: Ako postavite veličinu fonta svojeg tijela na 1,25em, a zatim veličinu teksta dječjeg spremnika na 1,25em, dva slova neće biti iste veličine! Umjesto toga, tekst dječjeg spremnika bit će 1,25 × izvorne 1,25em veličine roditelja.

Više savjeta za sjajnu tipografiju na webu

Evo još nekoliko savjeta za sjajnu web tipografiju:

Nemojte pretjerivati

Trebali biste ograničiti tipografiju web lokacije na 2–3 slova najviše. To bi obično bio font za vaše naslove, font za vaš glavni tekst, a možda i font podnaslova, ako je potrebno. Upotreba previše fontova može stvoriti neuredan i nefokusiran izgled. Može utjecati i vrijeme učitavanja vaše web lokacije, kao što je objašnjeno u sljedećoj točki.

Ugradite samo ono što vam treba

Uzmite u obzir samo ono što je najpotrebnije za vaše web mjesto, a ostatak ostavite vani. Ako znate da će vam trebati redovan, odvažan i kurzivan dizajnirajte za određeni font, a zatim umetnite samo te odabire i isključite tanak, svjetlo i crno stilova. Učitavanje više stilova nego što je potrebno može dovesti do velikog utjecaja na resurse vaše web lokacije, jer je svaki pojedini stil zaseban zahtjev poslužitelja.

Ako ne želite ograničiti svoju kreativnost tijekom faze dizajniranja, idite naprijed i ugradite sve; samo zapamtite da uklonite suvišne stilove prije nego što web lokacija postane aktivna.

Ako ne možete čitati, ne upotrebljavajte

Ovo je velika stvar. Dok cvjeta rukopisni font možda će biti primamljivo za upotrebu, ako postoji i najmanja zbrka da li je to “g” ili “y”, nemojte je koristiti! Ništa više ne frustrira čitatelja nego što se bori da dešifrira nečitljiv font.

Favoriti stvarni tekst preko ‘Lorem Ipsum’

Svaki dizajner se oslanja lorem ipsum lažni tekst za popunjavanje praznih područja sadržaja prilikom planiranja izgleda projekta. Međutim, možda ćete se iznenaditi koliko utjecaj korištenja stvarnog sadržaja može utjecati na izgled vaše tipografije. „Lorem ipsum“ potpuno je bez emocija i intelektualno šuplje; ne pruža stvarne pojmove kako će se vaše riječi i vaša osobnost izraziti pisanim slovima. Stoga prije priključivanja dizajna web stranice što je prije moguće priključite stvarni sadržaj na svoju web lokaciju.

Kontrast s pozadinama

Tamni font na običnoj bijeloj pozadini uvijek će pružiti najbolju čitljivost. Bijeli tekst protiv tamne ili zamagljene slike također postaje popularan ovih dana. Imajte na umu da pozadina nije previše zamršena ili detaljna, što bi nadjačalo tekst prvog teksta.

Primjer loše tipografije teksta na pozadini tekstaPrimjer loše prakse tipografije pomoću pozadine „tekst preko teksta“.

Uparivanje fontova – kao što privlači Like

Uparivanje fontova s ​​potpuno različitim osobama izvlačiće zbrkane signale. Njih dvoje mogu biti stilski suprotstavljeni, ali emocionalno bi trebali poslužiti istoj poruci.

Uparivanje fontova – zadržite ga u obitelji

Najjednostavnije rješenje je često najbolje. Ponekad najbolji pari dolaze iz varijacija (serif, alternativna težina, ploča) unutar iste porodice fontova.

hiperveze

Uobičajena i očekivana praksa je naglasiti veze i uklonite podvlačenje na lebdećim događajima. Prolazeći ovom rutom, pazite da je vaš naglašeni tekst označen kurzivom ili podebljane radije nego podcrtano da se izbjegne zabuna.

Ovih dana, međutim, usidreni tekst je općenito obojen, s prijelaznim učinkom koji se primjenjuje kada lebdimo. Iz perspektive dizajna ovo je nesumnjivo bolja opcija – ali imajte na umu da je dosljedna!

Neki CSS-ovci koje treba znati

To utječe na udaljenost između slova. Korisno za naglašavanje naslova.

razmak slova: x.xxem;

To utječe na udaljenost između riječi:

razmak riječi: x.xxem;

To daje alternativu svim čepovima za naglasak. Korisno i za kratice.

varijanta slova: small-caps;

To će KAPITALIZIrati SVI VAŠ TEKST.

pretvaranje teksta: velika slova;

Ovo će upotrebljavati prvo slovo teksta.

pretvaranje teksta: velika i velika slova;

Ovo će precrtati tekst.

ukrašavanje teksta: kroz liniju;

Ovo poboljšava prikaz fontova u modernim preglednicima:

renderiranje teksta: optimizirati čitljivost

Razumijevanje vrsta datoteka fontova

Odlično je umetnuti više vrsta datoteka kako bi se osiguralo da se fontovi ispravno učitavaju u širokom rasponu preglednika. To su ti kojih bi se najviše trebali baviti:

TrueType

TTF je najčešći format za Mac i Windows, a podržava ga u svim većim preglednicima.

OpenType

OTF je široko podržana i omogućuje dodavanje dodataka poput malih slova i alternativnih znakova bez potrebe za umetanjem zasebnog fonta.

Ugrađeni otvoreni tip

EOT podržava samo Internet Explorer – a ukoliko niste zabrinuti zbog korisnika na starim verzijama IE-a, vjerojatno je najbolje samo ovo ostaviti van.

Web Open Format fonta

WOFF – i njegov nasljednik WOFF2 – novi su kraljevi u gradu. Njihova podrška u većim preglednicima i mogućnost komprimiranja čine ih modernom vrstom izbora datoteka.

Trebate pretvoriti vrstu datoteke?

Vjerojatno ćete naići na situaciju da imate samo jednu vrstu datoteke fonta i morate je nekako pretvoriti u drugu. FontSquirrel i Font2Web nude internetske alate koji će učiniti upravo to.

Zaključak

To ste već znali sadržaj je najvažniji aspekt vaše web stranice. Dobro izrađen sadržaj zaslužuje dobro izrađenu tipografiju; nemojte razočarati posjetitelje web stranice tekstom koji je teško pročitati ili zbuniti u strukturi. Uz pomno isplaniranu vizualnu hijerarhiju koja se pridržava najboljih tipografskih praksi, vaše kreativne misli također se mogu kreativno predstaviti. Sretno tipkati!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map