Înțelegerea tipografiei pentru web
În Web Design subiectul tipografiei este important când se iau în considerare toate domeniile de experiență ale utilizatorilor. Fiecare site are nevoie de text și există linii directoare pe care să le poți urma pentru a crea machete excepțional de uimitoare. Grinzile, literele, înălțimea fontului, spațierea textului, scheme de culori și alte proprietăți similare trebuie să fie luate în considerare.
În acest articol aș vrea să mă duc în domeniul tipografiei web. Vom analiza idei populare în spatele elaborării textelor credibile ale paginilor web. Pe parcurs voi introduce câteva proprietăți CSS3 utile pe care designerii le uită adesea.
Am încercat să pun mai mult accent pe teorie și ideologii pentru Web. Acest lucru oferă un accent mai larg asupra textului digital în general, iar dvs., designerul web, puteți alege ce stiluri să aplicați pentru ce scop. Contextul este întotdeauna important și trebuie să determinați acest lucru în mod corespunzător pentru fiecare proiect la care lucrați. Luați în considerare acest ghid un pachet de referință plin de tendințe web moderne de la inginerii tipografici din toată lumea.
Măsurați paragrafele
Nu va trebui să scoateți bara de curte pentru acest tip de măsurare. De fapt, măsura în funcție de tipografie se referă la lățimea (orizontală) a oricărui punct dat pe pagină. Nu este un subiect întotdeauna discutat, dar influențează lizibilitatea conținutului dvs. Ca regulă generală de degetul mare, doriți să limitați orice linie unică în jurul a 75-85 de caractere în lungime (nu neapărat inclusiv spații).
Acum, acest lucru poate părea un pic de întindere pentru unele machete mai largi. Mai ales dacă designul tău este fluid și trebuie să se adapteze, deoarece utilizatorul își modifică fereastra browserului. Puteți seta întotdeauna un CSS lățimea maximă proprietate pe conținutul principal div. Marginile de codificare și dimensiunile de fonturi în unități scalabile (procente, ems) în loc de pixeli vor permite o astfel de flexibilitate în orice aspect.
Nu există o unitate de măsură maximă care să fie precaută. Modul în care scrieți conținut și formați cuvinte în propoziții este mult mai important decât lățimea fiecărei linii. Dar rețineți că frazele mai lungi sunt mult mai greu de citit comparativ cu declarațiile mai scurte și concise.
Leading Explained
În proiectarea, împreună cu măsura paragrafului dvs., trebuie să luați în considerare și ideea conducere. Cuvântul este pronunțat “ledd-ing”, cum ar fi plumbul folosit în creioane. Această denumire provine din zilele mai vechi de tipărire mecanică, în care au fost plasate benzi de plumb între liniile de text.
Conducerea este încă un concept foarte important în designul web și merge mână în mână cu măsurile paragrafelor. Pe măsură ce lățimea paragrafului crește, trebuie să aplicați o creștere egală cu suma de conducere, sau spațiu între rânduri de text. Acest spațiu suplimentar face citirea mult mai ușoară pe ochi.
Dacă ar fi trebuit să scapi prin text foarte rănit, poate ți-ar fi greu să te concentrezi pe o singură linie. În acest caz, încercați să măriți cu CSS numărul de lideri inaltimea liniei proprietate. Întotdeauna doriți mai mult spațiu între linii de text decât între cuvinte. În caz contrar, blocurile dvs. de text pot apărea sub formă de ziar și nu vor fi foarte ușor de utilizat pentru a trece rapid.
O tehnică solidă este aceea de a aplica mai mult spațiu decât era necesar și de ao reduce, dacă este necesar. Nu tot textul este creat egal și cu siguranță veți avea nevoie de paragrafe cu formate interne diferite, cum ar fi cuvintele îndrăznețe, legăturile de ancorare, subliniază etc. Cu unele conduceri suplimentare aceste modificări nu se vor simți atât de neechilibrate în comparație cu celălalt text.
Utilizați dimensiunile de fonturi naturale
Există încă o mână de site-uri web care aleg să rămână cu dimensiuni de dimensiuni mai mici decât media. 11px-12px poate părea a fi mult mai mult din “standard profesional” pentru structuri de afaceri. Dar aceste dimensiuni nu ajută majoritatea vizitatorilor care caută informații specifice.
În general, browserele web sunt implicite la 16 pixeli dacă nu aplicați reguli CSS. Chiar și acest lucru poate fi considerat un pic mic, dacă aveți spațiul suplimentar în aspectul dvs. pentru a se potrivi pentru text mai mare. Dimensiunile mai mari ale fonturilor arata mai bine si sunt mult mai usor de descoperit pentru cuvinte cheie relative. Fonturile Serif nu sunt adesea alese ca material al paragrafelor, dar puteți încă să scăpați de ele. Vă sugerăm să utilizați dimensiuni de text mult mai mari pentru fonturile serif pentru a îmbunătăți lizibilitatea și a atrage atenția.
Răspundeți la mediul utilizatorului
Pe măsură ce încercați diferite familii și dimensiuni de fonturi, zona dvs. de conținut va trebui să se adapteze în consecință. Unitatea standard cu care am de-a face este ems deoarece acestea pot re-dimensiona cu ușurință pe baza spațiului disponibil și a rezoluției ecranului. Acest lucru optimizează performanța la sfârșitul utilizatorului, care este cea mai importantă.
Dar, atunci când aveți conținut atât de flexibil, face aspectul dvs. predispus la un rezultat buggy. Conținutul din subsolul dvs. sau din bara laterală poate să se termine în unele browsere în mod oblic sau în afara balanței. Sau puteți întâmpina dificultăți în aranjarea imaginilor sau a altor forme de suport în textul principal. Există și alte alternative la utilizarea ems dacă aveți nevoie de un layout în stil fix - dar încercați ambele soluții pentru a vedea care dintre ele vă place cel mai bine.
Rețineți că lățimile fixe și dimensiunile de paragrafe se vor bloca în multe dintre setările din design. Este minunat pentru conținut care include o mulțime de efecte estetice statice - imaginile de fundal sau multe widget-uri ale bara laterală. Este, de asemenea, un proces simplu de a construi o zonă cu conținut fluid în coloana din stânga cu bare laterale fixe la dreapta.
Stil bazat pe context
Unele alte trucuri CSS cu adevărat îngrijite au fost ascunse de designul mainstream. În mod specific, există tendințe copiate din activitatea de tipărire care pot fi aplicate în contextul adecvat.
Mulți designeri web nu au folosit nici măcar proprietatea CSS text-indent. Oferiți o valoare pentru linia de la prima linie a oricărui paragraf vizat de această regulă. Unitățile urmează opțiunile de text standard, cum ar fi pixeli, puncte, ems, procente ... Cu siguranță nu este o tendință pe care o veți găsi în cele mai multe bloguri. Dar oferă un ritm frumos în timp ce citește prin blocuri mari de text.
Există un alt tip de selector CSS cunoscut sub numele de a pseudo element. Aceasta poate viza o anumită parte a oricărui selector de conținut. Pseudo selectorul CSS3: primul pseudo selector este perfect pentru crearea de stiluri fanteziste în paragrafe importante. Puteți să transpirați scrisoarea de deschidere a fiecărui paragraf - asemănătoare cu o poveste de povestiri - folosind caractere aldine, italice sau chiar schimbarea tipului de text. Verificați acest exemplu frumos de capace de picături care include un număr suplimentar de cod CSS pe care îl puteți utiliza.
Se joacă cu spațiul de litere
Sunt sigur că mulți dintre noi am auzit următorul termen înainte, dar niciodată nu și-a dat seama că este aceeași idee ca și proprietatea de distribuire a literelor CSS. Aceste două concepte sunt una și aceeași, legate între tipografia tipografică și cea digitală. Unitatea se referă la spațiul dintre litere într-un singur rând de text. Acesta este un efect foarte curat care se aplică pe anteturi și chiar pe unele blocuri de conținut mai mici din site-ul dvs..
Este important să nu confundați termenii cu spațierea literelor cu kerning. Ambele sunt legate de tipografie și distanța dintre litere. Cu toate acestea, kerning-ul se referă în mod specific la distanța dintre două litere individuale într-un cuvânt. Proprietatea de spațiere a literelor se va aplica un întreg element de text, fie un cuvânt sau un paragraf sau un antet sau un link ancoră. Țineți cont de acest lucru atunci când jucați cu idei noi pentru stiluri.
Eu folosesc adesea câțiva pixeli / puncte de spațiere de litere în anteturi cu toate capitalele. Aceasta distruge caracterele individuale cu un spațiu suplimentar și, de asemenea, apare ca fiind foarte definită “rubrică” uite. Spațierea negativă a literelor funcționează și în contextul potrivit. În general, stau la unități mai mici, poate cel mult -0,03 sau -0,1.
Combinarea și potrivirea tipurilor de text
Conceptele de design din spatele tipografiei web sunt cu siguranță o formă de artă, nu atât de multă știință. Există linii directoare pe care le puteți urma, dar nu există reguli statornice la care să vă limitați. Aceasta înseamnă că aveți o cantitate enormă de libertate de a experimenta amestecarea și potrivirea diferitelor fonturi la care aveți acces.
De departe, cea mai populară combinație de fonturi include o separare serif / sans-serif pentru antetul și conținutul paragrafului. Îmi place să trec pe ambele, dar mai des voi utiliza fonturile serif în secțiunile antetului. Semnele suplimentare și loviturile de pe fiecare literă le fac să pară mai plini de bucurie ca textul dominant al paginii.
În plus, fonturile sans-serif sunt mai curate și mai ușor de înșurubat împreună în propoziții. Aceasta nu înseamnă că fonturile serif nu vor funcționa în paragrafe. De fapt, există o mulțime de exemple minunate! Dar un concept puțin cunoscut, numit x-height, este extrem de important pentru a distinge complexitatea unui font. De la privirile la linia de bază a unui cuplu de cuvinte, veți afla despre modul în care vor fi aceste fonturi “se potrivesc” unul cu altul.
De remarcat, de asemenea, importanța spațiului dintre aceste elemente diferite. Probabil că veți folosi 2 sau 3 stiluri diferite de antet, astfel încât fiecare dintre acestea va ieși cu un aspect diferit. Tind să-mi păstrez elementele h2 / h3 un pic mai aproape de blocul de paragraf următor, deoarece aceasta implică o corelație între conținut.
Această corelare este utilă în special atunci când utilizați două tipuri de fonturi complet diferite unul lângă celălalt. Recomand nu mai mult de 3 familii de fonturi diferite pentru fiecare set de conținut. După prea multe personalizări, cuvintele dvs. apar jumătate și întreaga pagină iese în evidență, arătând ca un amestec de fonturi greșite.
Concluzie
Sper că aceste concepte vor arunca o lumină asupra subiectului complicat al tipografiei digitale. Poate fi dificil să intri într-adevăr ca designer, mai ales dacă întreaga temă este străină pentru tine. Dar continuați să studiați și asigurați-vă că practicați o grămadă întregă!
Saptamana viitoare: Rămâi bine în timp ce ne uităm la niște instrumente utile și resurse pentru o mai bună tipografie web.
Mai Mult…
Iată mai multe postări legate de tipografie:
- Showcase de modele Web cu tipografie frumoasă
- O mai bună tipografie pentru site-urile moderne
- Ghid rapid pentru tipografie: Învață și fii inspirat
