Razumevanje tipografije Pisanje za splet
V spletnem oblikovanju je tema tipografije pomembna pri obravnavanju vseh področij uporabniške izkušnje. Vsaka spletna stran potrebuje besedilo in obstajajo smernice, ki jih lahko uporabite za izdelavo izjemno osupljivih postavitev. Upoštevati je treba mrežne črte, črke, višino pisave, razmik besedil, barvne sheme in druge podobne lastnosti.
V tem članku bi se rad poglobil v spletno tipografijo. Preučili bomo idej za oblikovanje verodostojnih besedil spletnih strani. Na poti bom predstavil nekaj uporabne lastnosti CSS3 ki jih oblikovalci pogosto pozabijo.
Poskušal sem se bolj osredotočiti na teorijo in ideologije za splet. To daje širšo osredotočenost na digitalno besedilo na splošno in vi, spletni oblikovalec lahko nato izberete, kateri slogi se bodo uporabljali za kateri namen. Kontekst je vedno ključ in to morate ustrezno določiti za vsak projekt, na katerem delate. Upoštevajte, da je to vodilo referenčnega paketa, polnega sodobnih spletnih trendov od tipografskih inovatorjev po vsem planetu.
Izmerite svoje odstavke
Za to vrsto meritev ne boste morali zapuščati palice. Dejansko se ukrep v zvezi s tipografijo nanaša na širino (vodoravno) vsakega odstavka na vaši strani. To ni tema, o kateri se vedno razpravlja, vendar vpliva na berljivost vsebine. Kot splošno pravilo pik želite omejiti katero koli vrstico dolžine 75-85 znakov (ni nujno, da vključuje presledke).
Zdaj se lahko zdi, da je to za nekaj širših postavitev malo. Še posebej, če je vaša zasnova tekoča in je namenjena prilagoditvi, ko uporabnik spremeni velikost svojega okna brskalnika. Vedno lahko nastavite CSS max-width lastnost na vaši glavni vsebini div. Oblike kodiranja in velikosti pisav v razširljivih enotah (odstotki, ems) namesto slikovnih pik omogočajo takšno prilagodljivost v vseh postavitvah.
Največja merska enota ni potrebna. Kako pišete vsebino in besedne oblike v stavke, je veliko pomembnejša od širine vsake vrstice. Vendar ne pozabite, da so daljše stavke težje prebrati v primerjavi s krajšimi, jedrnatimi izjavami.
Glavno pojasnjeno
Pri oblikovanju, skupaj z vašim odstavkom ukrep, morate upoštevati tudi idejo vodilni. Beseda je izgovorjena “led”, kot svinec, ki se uporablja v svinčnikih. To ime izvira iz starejših dni mehanske stavbe, kjer so bili trakovi svinca med vrsticami besedila.
Vodenje je še vedno zelo pomemben koncept v spletnem oblikovanju in gre z roko v roki z odstavkovnimi ukrepi. Ko se širina odstavka poveča, morate enako povečati količino vodilnega ali razmik med vrsticami besedila. Ta dodatni prostor naredi vaše branje veliko lažje.
Če bi se prebijali skozi zelo tesno ranjeno besedilo, se boste morda težko osredotočili na eno samo linijo. Če je temu tako, poskusite povečati količino vodenja s CSS višina vrstice nepremičnine. Vedno želite več prostora med vrsticami besedila kot med besedami. V nasprotnem primeru se lahko vaši besedilni bloki prikažejo kot časopisni tisk in ne bodo zelo prijazni do uporabnika.
Trdna tehnika je uporabiti več prostora, kot je bilo prvotno potrebno, in ga po potrebi zmanjšati. Ni vse besedilo ustvarjeno enako in zagotovo boste potrebovali odstavke z različnim notranjim oblikovanjem, kot so krepke besede, sidrne povezave, podčrtani elementi itd..
Uporabite velikosti naravnih pisav
Še vedno je peščica spletnih strani, ki se odločijo za uporabo velikosti pisave manjše od povprečja. Zdi se, da je 11px-12px veliko več “standard” za poslovne načrte. Vendar te velikosti ne pomagajo večini obiskovalcev, ki iščejo specifične informacije.
Običajno spletni brskalniki privzeto nastavijo 16 px, če ne uporabite pravil CSS. Tudi to se lahko šteje za malo majhno, če imate dodatno sobo v vaši postavitvi za večje besedilo. Večje velikosti pisav so videti lepše in jih je veliko lažje prebrati za relativne ključne besede. Serifne pisave niso pogosto izbrane kot gradivo za odstavek, vendar se z njimi še vedno lahko izognete. Predlagam uporabo veliko večjih velikosti besedila za pisave, ki temeljijo na serifu, da bi izboljšali berljivost in pritegnili pozornost.
Odgovorite na uporabniško okolje
Ko preizkusite različne družine pisav in velikosti, se bo ustrezno prilagodilo vaše področje vsebine. Standardna enota, s katero se držim, je ems saj se lahko zlahka spremenijo glede na razpoložljivi prostor in ločljivost zaslona. To optimizira učinkovitost na koncu uporabnika, kar je najpomembnejše.
Toda, ko imate tako fleksibilno vsebino, je vaša postavitev nagnjena k nepopolnemu rezultatu. Vsebina v področju noge ali stranske vrstice lahko v nekaterih brskalnikih postane nesimetrična ali izvenbilančna. Lahko pa imate težave pri postavljanju slik ali drugih oblik medijev v glavnem besedilu. Obstajajo še nekatere druge možnosti za uporabo ems, če potrebujete postavitev v fiksnem slogu, vendar poskusite z obema rešitvama in si oglejte, katera je najbolj všeč..
Ne pozabite, da bodo določene velikosti in velikosti odstavkov zaklenile veliko nastavitev v vašem načrtu. Odličen je za vsebino, ki vključuje veliko stacionarnih estetskih učinkov - pomisli ozadja ozadja ali veliko vgrajenih pripomočkov za stransko vrstico. Prav tako je preprost postopek za izgradnjo območja z vsebino tekočine v levem stolpcu s fiksnimi stranskimi vrsticami na desni.
Slog na podlagi konteksta
Nekateri drugi resnično čisti CSS triki so bili skriti od mainstream oblikovanja. Natančneje obstajajo trendi, ki se kopirajo iz tiskanega dela, ki se lahko uporabi v ustreznem kontekstu.
Mnogi oblikovalci spletnih strani še nikoli niso uporabili lastnost CSS z besedilom. Vnesete vrednost za zamik prve vrstice katerega koli odstavka, na katerega se nanaša to pravilo. Enote sledijo standardnim besedilnim možnostim, kot so piksli, točke, ems, odstotki… To zagotovo ni trend, ki ga boste našli v večini spletnih dnevnikov. Ampak to zagotavlja lepo ritem strani, medtem ko branje skozi velike bloke besedila.
Obstaja še ena vrsta CSS selektorja, znana kot a psevdo element. To lahko cilja na določen del izbirnika vsebine. CSS3: psevdo selektor prve črke je kot nalašč za ustvarjanje modnih stilov na pomembnih odstavkih. Lahko odprete uvodni dopis vsakega odstavka - podobno kot pravljica - s krepko, ležečo pisavo ali celo spremenite pisavo. Oglejte si ta lep primer kapsul, ki vsebuje nekaj dodatnega CSS koda, ki ga lahko uporabite.
Igranje z razmikom med črkami
Prepričan sem, da so mnogi od nas že slišali izraz sledenje, vendar še nikoli spoznali, da je to ista zamisel kot lastnost CSS letter-spacing. Ta dva pojma sta enaka, povezana med tiskano in digitalno tipografijo. Enota se nanaša na razmik med črkami znotraj posamezne vrstice besedila. To je resnično lep učinek, ki ga lahko uporabite na glavah in celo na manjših blokih vsebin na vašem spletnem mestu.
Pomembno je, da ne zamenjamo izrazov razmik med črkami in odsevanjem. Oba sta povezana s tipografijo in razdaljo med črkami. Kerning pa se posebej nanaša na razdaljo med dvema posameznima črkama v besedi. Lastnost razmika med črkami bo veljala za celoten element besedila, bodisi besede ali odstavka ali povezave glave ali sidra. Imejte to v mislih, ko se igrate z novimi idejami za stile.
Pogosto uporabljam nekaj točk / razmikov med črkami v glavah z vsemi velikimi črkami. To ločuje posamezne znake z dodatnim prostorom in se pojavi kot zelo definiran “naslov” poglej. Negativni razmik med črkami prav tako dobro deluje v pravem kontekstu. Na splošno se držim manjših enot, morda največ -0.03em ali -0.1em.
Združevanje in ujemanje pisav
Koncepti oblikovanja spletne tipografije so zagotovo oblika umetnosti, ne toliko znanosti. Obstajajo smernice, ki jih lahko upoštevate, vendar ni nobenih trdnih pravil, s katerimi ste omejeni. To pomeni, da imate ogromno svobode pri preizkušanju mešanja in ujemanju različnih pisav, do katerih imate dostop.
Daleč najbolj priljubljena kombinacija tipografij vključuje razdelitev serif / sans-serif za vsebino glave in odstavka. Všeč mi je, da preklopim oboje, vendar pogosteje uporabljam serifne pisave v razdelkih glave. Dodatne oznake in kapi na vsaki črki povzročijo, da so bolj laskavi kot prevladujoče besedilo strani.
Poleg tega so pisave sans-serif čistejše in lažje sestavljene v stavke. To ne pomeni, da serifne pisave ne bodo delovale v odstavkih. Pravzaprav je veliko odličnih primerov! A malo znani koncept, imenovan x-height, je ključnega pomena za razlikovanje kompleksnosti pisave. Od pogleda na izhodišče nekaj besed, ki jih boste prebrali, kako bodo te pisave “vključiti se” drug z drugim.
Prav tako je treba omeniti pomen prostora med temi različnimi elementi. Verjetno boste uporabljali 2 ali 3 različne sloge glave, tako da bo vsak od njih izpadel z različnim videzom. Svoje elemente h2 / h3 skušam malo približati naslednjemu odstavku, ker to pomeni, da obstaja povezava med vsebino.
Ta povezava je še posebej uporabna, če uporabljate dve popolnoma različni pisavi tik ob drugem. Priporočam ne več kot 3 različne družine pisav na nabor vsebin. Po preveč prilagoditvah se vaše besede pojavijo skupaj, celotna stran pa se prikaže kot čudovita napačna pisava..
Zaključek
Upam, da bodo ti koncepti osvetlili zapleteno temo digitalne tipografije. Lahko je težko resnično priti v delo kot oblikovalec, še posebej, če vam je celotna tema tuja. Toda nadaljujte s študijem in se prepričajte, da vadite cel kup!
Naslednji teden: Ostanite z nami, ko bomo pogledali nekaj koristna orodja in vire za boljšo spletno tipografijo.
Več…
Tu je še nekaj objav, povezanih s tipografijo:
- Predstavitev spletnih modelov s čudovito tipografijo
- Boljša tipografija za sodobne spletne strani
- Kratka navodila za tipografijo: Naučite se in bodite navdihnjeni
