Share
Bine ați venit la noua lecție a seriei noastre Web Design for Kids, totul despre tipografie.
În acest tutorial ne vom uita la ce tipografie este vorba și de ce este atât de importantă în design. Am vorbit mult despre experiența utilizatorului și acest tutorial nu va face excepție; vom lucra din greu pentru a vă asigura că textul nostru este frumos și ușor de citit!
Nu uitați să puneți întrebări în secțiunea de comentarii din partea de jos a acestei pagini!
Tipografia este pretutindeni. Este modul în care vedem cuvintele scrise, astfel că oriunde întâlnim cuvinte, vedem tipografia. Aceste cuvinte pot fi găsite pe ecrane, pe hârtie și pe semne în jurul nostru.
Cu ajutorul tipografiei putem schimba "aspectul și simțul" acestor cuvinte, schimbând modul în care acestea influențează cititorii. proiecta de cuvinte vor afecta adesea utilizatorii noștri înainte de a avea chiar șansa de a citi conținutul nostru, deci este important ca designul și simțul general al tipografiei noastre să corespundă simțului conținutului în sine.
În lecția anterioară am vorbit despre cât de important este conținutul. La urma urmei, nu contează cât de bun arată site-ul nostru dacă nu conține informații pe care cineva dorește să le citească! Modul în care prezentăm aceste cuvinte utilizatorului, totuși, devine la fel de mult parte din mesaj ca și cuvintele.
Tipografia implică o mulțime de terminologie destul de similară.
A tip de caractere este designul general al unei colecții de caractere (cuvinte și simboluri), în timp ce a font este o dimensiune specifică, greutatea (cât de gros sunt literele), stilul și utilizarea unei litere.
Designul nostru Tuts + Town folosește a tip de caractere numita "Open Sans". Folosim diferite mărimi și greutăți ale acestui tip de text, care ne spun care fonturi pentru a încărca în pagină.
Deci, în timp ce folosim fonturi pe site-ul nostru, aceste fonturi se bazează pe fonturi pe care cineva le-a petrecut mult timp în proiectare.
O amprentă poate fi serif sau sans-serif. A serif este cel mai bine descris ca cozile sau extensiile de la capetele unor litere.
Un tip de serif are aceste extensii:
Open Sans este un font de tip sans serif; sens fără Serif. O fâșie de tip sans-serif nu are extensii precum litera de mai sus:
Nu există nici un răspuns corect sau greșit cu privire la care să se utilizeze pe site - ul nostru, dar vom dori ca acesta să se potrivească cu designul general și simți pe care încercăm să o realizăm, precum și opțiunea cea mai lizibilă, având în vedere aspectul și cantitatea textului.
Un tip de serif este în general mai ușor de citit pe hârtie sau atunci când există o mulțime de text, în timp ce un sans-serif poate fi mai bun pe ecran sau cu o cantitate mai mică de text în ansamblu.
Pentru a obține cea mai bună tipografie pentru site-urile noastre, trebuie să ne gândim la ceea ce face fiecare tip de text diferit de celălalt. Există multe părți diferite ale fiecărui tip de text pe care cineva la proiectat și la gândit în detaliu.
Acestea sunt detaliile care alcătuiesc unicitatea fiecăruia și depinde de noi să alegem care dintre ele funcționează cel mai bine pentru diferite modele și situații.
Să aruncăm o scurtă privire asupra unor detalii ale tipurilor de fonturi pentru a înțelege mai bine cum pot îmbunătăți (sau agrava) desenele noastre:
Nu este nevoie să memorați aceste părți chiar acum, ci doar să știți că variațiile lor contribuie la faptul că fiecare tip de text este special.
Ca și în cele mai multe lucruri legate de tipografie, spațierea este foarte importantă atunci când construim cea mai bună experiență pentru utilizatorii noștri. Cantitatea de spațiere dintre fiecare literă, între cuvinte și între linii de cuvinte poate aduce o mare diferență lizibilitate.
Distanțele insuficiente nu ne dau scrisori și cuvinte care sunt prea agitate pentru a citi bine, în timp ce distanțele prea mari vor sparge totul și vor fi la fel de dificil de citit și de urmat.
Fonturile vin cu distanțe proprii, care este, în general, destul de frumos de citit, dar să aruncăm o privire la ceea ce se numesc toate distanțele diferite și cum se fac modificări în CSS-ul nostru în cazul în care avem nevoie vreodată de proiectul nostru.
Urmărirea este distanța generală între toate caracterele (literele) dintr-o bucată de text.
Putem schimba acest lucru în CSS, dacă vrem, prin utilizarea spațiul dintre litere proprietate:
h1 spațierea literelor: 5px;
Accentsconagua
cuvânt-spațiere proprietate:h1 spațierea cuvântului: 15px;
kerning este spațiul dintre două caractere.
Kerning-ul dintre fiecare pereche de caractere este modificat de designerul de tipografie, deoarece unele litere arata mai bine împreună și unele mai îndepărtate. Acest lucru este complet în jos pentru a face lucrurile să pară echilibrate și este dificil de a face doar cu CSS singur.
Conducere se referă la distanța dintre liniile de propoziții.
Putem face ajustări la acest spațiu, dând o valoare care schimbă setul inițial prestabilit de fontul în uz prin intermediul inaltimea liniei proprietate.
p linie-înălțime: 2;
O valoare de 2 aici se va asigura că liderul nostru este de două ori mai mult decât valoarea implicită pentru acel font.
Dacă un singur cuvânt este lăsat pe o linie de la sine (aaaah) la sfârșitul unui bloc de text se numește a Văduvă.
Să presupunem că blocurile din imaginea următoare reprezintă cuvinte din coloane. Vaduva este blocul albastru, așezat singur la capătul coloanei, pentru că acolo se termină propoziția:
Un Orfan este un singur cuvânt existent pe o linie de la sine la începutul unei coloane, care de obicei trăiește lângă coloana în care se află cea mai mare parte a textului asociat.
Văduvele și orfanii sunt considerați tipologi rău, datorită distragerii lor, ceea ce face ca experiența de lectură globală să fie mai gravă.
Există mai multe abordări diferite pe care le putem lua pentru a corecta una dintre aceste probleme dacă se întâmplă pe site-urile noastre, cum ar fi:
Putem alege să alinia textul nostru spre stânga (implicit pe web pentru limbile scrise de la stânga la dreapta, cum ar fi limba engleză), în centru sau în dreapta.
Textul de pe web trebuie, în general, să fie aliniat la stânga (din nou, pentru limbile scrise de la stânga la dreapta), deoarece vorbitorii și cititorii acestor limbi sunt citiți.
Alinierea centrului este adesea folosită pe titluri și titluri care îi ajută să se remarce mai mult de la textul principal de pe o pagină. Putem face acest lucru în CSS cu aliniere text proprietate, de exemplu:
h1 text-aliniere: centru;
Textul care este aliniat în acest fel poate fi găsit, de obicei, pe semne și fluturași care încearcă să atragă atenția cuiva, dar nu ar trebui să centrăm alinierea unui text mare pe web deoarece va fi mult mai dificil pentru cititorii noștri. Textul aliniat la centru creează lățimi foarte diferite de la linie la linie, ceea ce face mai dificil pentru ochi să urmeze.
Unele limbi (cum ar fi ebraică) sunt scrise de la dreapta la stânga, făcând alinierea la dreapta alinierea implicită.
Ca designeri putem de asemenea să alegem să avem niște mici bucăți de text aliniate corect, astfel încât să se poată remarca un pic mai mult, cum ar fi legendele imaginilor. Aceste subtitrări sunt titluri sau descrieri pentru imagini cu propriul element HTML, figcaption.
Alinierea de mai sus se face prin declararea dreapta pe elementul dintr-un document CSS:
figcaption text-align: right;
O mare parte din tipografia pe care o realizăm va fi din cauza citirii conținutului de noi înșine și a face ajustări după cum este necesar. Există, totuși, câteva sfaturi generale care ne pot ajuta să ne confortabil cu abilitățile noastre tipografice.
A marimea fontului mai puțin decât 16px pe textul care formează cea mai mare parte a conținutului nostru este de obicei considerat prea mic și greu de citit pe ecrane.
Am vorbit despre asta ierarhie vizuală în tutorialul precedent privind elementele de bază ale designului. Stabilirea ierarhiei textului pe parcursul designului nostru va asigura că site-ul este mai ușor de navigat separând conținutul înrudit și evidențiind ceea ce este cel mai important.
Textul de pe site-ul nostru Tuts + Town are mai multe nivele de ierarhizare diferite, cu titlul cel mai important, urmat de categoriile de afaceri și magazinele specifice, și se încheie cu secțiunea "create de" în partea de jos.
Ierarhia de aici este stabilită prin diferite dimensiuni, culori și locații pe pagină.
Vom vorbi mult mai mult despre culoare și contracte în tutorialul următor, așa că știi doar să fii conștient de culoarea textului tău și de faptul dacă contravine sau nu culorii de fundal, ceea ce face dificilă citirea.
Iată un exemplu de contrast rău în stânga și un contrast mai bun pe dreapta:
Textul roz deschis pe un fundal turcoaz întunecat din stânga arată impactul contrastului slab. Textul este greu de citit, arată puțin neclare și ne doare ochii!
Ca regulă generală, este mai bine să nu folosiți mai mult de două până la trei fonturi diferite pe proiect. Fonturile asociate ar trebui să se potrivească reciproc și ambele să susțină simțul general și ideile din spatele designului.
Nu toate fonturile funcționează bine pe web și sunt cele mai bune pentru imprimare. Din fericire, Google Fonts, pe care am folosit-o pentru a importa Open Sans în site-ul nostru Tuts + Town, ne oferă o listă uimitoare de fonturi potrivite pentru web.
În acest tutorial am atins ce tipografie este exactă, am analizat modul în care diferite părți ale unei litere pot să o diferențieze de ceilalți și sa încheiat cu câteva sfaturi generale pe care să le țineți cont atunci când lucrați cu text și fonturi pe web. Toate pentru a atinge un obiectiv final: pentru a face conținutul nostru mai ușor de citit.
Înainte vom examina câteva reguli generale privind utilizarea culorilor pe web și mesajul pe care îl comunicăm utilizatorilor noștri, pe baza selecției noastre globale de culori.
Ne vedem în jurul orașului!
