Tipografia este un câmp care tratează cuvântul scris și modul în care sunt prezentate literele și caracterele.
Aceleași litere pot fi stilizate în moduri diferite pentru a transmite emoții diferite. Și există tot felul de compromisuri în jurul stilului versus lizibilitate.
În acest articol, vom analiza unele dintre detaliile mai mici – dar totuși importante – legate de tipografie, cum ar fi dimensiunea punctelor, literele majuscule vs.
Dimensiunea punctului
Dimensiunea punctului este o modalitate de a introduce standardizarea tipografiei. Dimensiunea punctului este cea mai mică unitate de măsură.
În tipul metalic, dimensiunea punctului se referă la înălțimea corpului metalic pe care este turnat caracterul unui tip de caractere. În tipurile digitale, corpul metalic este înlocuit de o cutie invizibilă cunoscută sub numele de em pătrat. Fiecare personaj se potrivește în interiorul acelei casete sau pătrate. dimensiunea unui font este egală cu dimensiunea punctului său.
html{
font-size:16px;
}
body{
font-size:1em; // 1em is equal to 16px
}Dimensiunea punctului este, de asemenea, utilizată pentru a măsura linia (înălțimea liniei), lungimea liniei și alte elemente, în afară de dimensiunea fontului.
În caractere digitale, un punct este egal cu 1/72 de inch. Douăsprezece puncte fac un pic. Șase pice fac un centimetru. Un mod obișnuit de a reprezenta picas și puncte este după cum urmează:
- 1 pica = 1p
- 1 punct = 1 puncte sau p1
- 6 picas și 3 puncte = 6p3
- 7 puncte Open Sans cu 9 puncte de conducere = 7/9 Open Sans
Dimensiunea optimă a punctului pentru tipărire este de obicei între 10-12 puncte, în timp ce cea pentru web, dimensiunea optimă a punctului este între 15-25 de puncte.
În CSS, ar trebui să setați dimensiunea fontului în ems sau rems decât pixeli, deoarece primii sunt scalabili în natură. Recent, s-a vorbit mult despre tipografia fluidă folosind unitățile nou introduse vw și vh.
Aflați mai multe despre asta aici: Tipografia fluidelor
Amintiți-vă, fonturi diferite setate la aceeași dimensiune a punctului nu vor părea de aceeași dimensiune datorită caracteristicilor lor individuale, și anume – înălțimea x, modulația sau contrastul și lățimea caracterului.
Majuscule și minuscule
Majusculele (UC) sunt denumite alternativ majuscule și majuscule. Este un tip de caractere mai mari. Minuscule (LC) este un tip de caractere mici. Atâta timp cât tasta Shift nu este apăsată și blocarea majusculelor nu este activă, tot ce este tastat este cu litere mici. Majusculele și minusculele sunt adesea sinonime cu majuscule și minuscule.
Multe limbi au două reprezentări scrise diferite ale literelor lor, majuscule și minuscule, cunoscută și sub numele de forme majuscule și minuscule.
Literele majuscule și minuscule sunt adesea amestecate în aceeași bucată de text. Utilizarea cazurilor este decisă de gramatică, dar o varietate de stiluri de carcase există, de asemenea. Anumite stiluri de cazuri sunt comune în programarea computerelor, denumite convențiile de denumire, precum CamelCase și snake_case.
Majuscule:
ABCDEFGHIJKLMNOPQRSTU VWXYZ
Minuscule:
abcdefghijklmnopqrstu vwxyz
Scrierea cu majuscule este importantă din următoarele motive:
- Parole: parolele sunt sensibile la majuscule și minuscule, astfel încât majusculele adaugă un nivel suplimentar de securitate.
- Măsurători: atunci când este vorba despre măsurarea computerizată și alte măsurători, valorificarea este importantă pentru identificarea tipului exact de măsurare. De exemplu, „Mb” (prescurtare pentru Megabit) și „MB” (prescurtare pentru Megabyte) sunt două tipuri diferite de măsurători cu valori diferite.
- Comenzi
- Nume fișiere, directoare și căi.
Ems și Ens
Ems și Ens sunt o formă a semnului de punctuație numit „liniuță”. Deși sunt similare ca aspect cu o cratimă, ele au scopuri diferite.
Em Dash
Folosiți o liniuță Em pentru a indica o pauză în propoziție. Înlocuiți-o cu virgulă sau pentru a indica o pauză într-o propoziție. De asemenea, sunt folosite pentru a atribui un citat unui vorbitor. O liniuță Em are o lățime de un em – lățimea unei dimensiuni a punctelor unui tipar. Nu puneți spații înainte și după o liniuță.
De exemplu: Zgomotul din casa vecinului – mă ucide.
- Comandă pentru o liniuță Em pe un Mac: Shift-Option-Hyphen
- Comandă pentru o liniuță Em pe Microsoft Word: Alt + Ctrl + (minus)
- Intră în linie HTML:
—sau—
En Dash
Folosiți o liniuță En ca înlocuitor al cuvântului „către” sau pentru a indica o gamă de numere. O liniuță En este jumătate din lățimea unei linii Em. Nu puneți spații înainte și după o liniuță.
De exemplu: Primul război mondial a durat în perioada 1914–1918.
- Comandă pentru o liniuță En pe un Mac: Opțiune-Cratimă
- Comandă pentru o liniuță En pe Microsoft Word: Ctrl + (minus)
- În liniuță în HTML:
–sau–
Kerning și urmărire
Kerning se referă la spațiul dintre două caractere individuale într-un cuvânt.
Urmărirea se referă la spațiul dintre cuvinte.
Unele tipuri de caractere nu sunt concepute pentru a fi înnodate sau urmărite prea slab și invers. Dacă cineva se află sau urmărește prea strâns sau prea slab, riscă să sacrifice lizibilitatea și lizibilitatea.
Atunci când decideți cât de strâns sau de slăbit este să încercați sau să urmăriți textul, este recomandabil să luați în considerare mai întâi scara cu care va interacționa textul. Dacă urmează să fie tipărit, cât de departe va fi vizualizatorul? Vor conduce cu mașina? Va fi citit pe un ecran retroiluminat?
De asemenea, ar trebui să se ia în considerare terenul pozitiv și negativ atunci când se urmărește și se creează. Urmărirea prea strânsă sau prea slabă poate duce la relații ciudate de figură / teren care vor distrage atenția utilizatorului.
Legibilitate și lizibilitate
Lizibilitate
Lizibilitate înseamnă a putea diferenția diferite caractere dintr-un text. Textul lizibil implică faptul că poate fi interpretat cu ușurință. Uitați-vă la caracteristicile unice ale unui tip de caractere atunci când luați în considerare lizibilitatea. Unele dintre considerații sunt următoarele:
- Ar trebui să utilizați fiecare tip de text în funcție de acesta contextul și utilizarea intenționată. Căutați în istoria sa și în cele mai bune scenarii de caz de utilizare. De exemplu: Garamond este cel mai bine folosit pentru corpuri mari de text tipărit, în timp ce Georgia pentru ecran.
- Rețineți dacă fontul este pentru afișați text sau text corp.
- Înălțimea x a unei caractere este dimensiunea minusculului „x” dintr-o literă. Un tip de caractere cu înălțime medie spre mare are ca rezultat un text lizibil chiar și la dimensiuni mici.
- Convenţional, serif tipurile de caractere sunt mai lizibile pentru textul corpului decât omologii lor sans-serif.
Citibilitate
Citibilitate înseamnă aranjarea unui grup de cuvinte sau a unor blocuri de text în așa fel încât textul să fie mai accesibil. Ideea este de a reduce cantitatea de efort necesară pentru a citi un corp de text.
Stephen Coles remarcă faptul că lizibilitatea nu numai că pune întrebarea „Poți să o citești?” dar dacă „Vrei să-l citești?”.
Jason Santa Maria subliniază în cartea sa Pe tipografie web că lectura nu este o activitate liniară. Citim într-o mișcare înainte și înapoi numită sacade, care este ochii noștri sărind de la un punct la altul. De asemenea, textul cu cuvinte familiare ne face mai ușor de citit. Câteva puncte de bază de reținut atunci când se ia în considerare lizibilitatea sunt următoarele:
- Contrast se referă la modificarea grosimii cursei în diferite părți ale literei. Cu cât contrastul este mai mare, cu atât este mai mare schimbarea în cursă. Utilizați tipuri de caractere cu contrast mediu spre scăzut pentru corpuri lungi de text.
- Inaltimea liniei se referă la distanța dintre două rânduri de text. Nu doriți să faceți blocul de text nici prea strâns, nici prea slab. Puteți controla înălțimea liniei în CSS prin proprietatea „linia-înălțime”. Pentru majoritatea textelor, îl puteți seta între 1,2 și 1,5 (fără nicio unitate).
- Lungimea liniei (măsură) se referă la numărul mediu de caractere dintr-o linie de text. O lungime de linie mare împiedică lizibilitatea, făcând dificilă scanarea textului de către ochii noștri. De obicei, aproximativ 45-75 de caractere pe rând este optim pentru un corp de text. Dacă intenționați să măriți lungimea liniei dincolo de aceasta, atunci aveți grijă să măriți înălțimea liniei, astfel încât să existe suficient spațiu între două rânduri de text. În CSS, puteți seta lățimea containerului și, utilizând unitatea em, puteți ajunge la un număr setat de caractere, în funcție de raportul lățime-înălțime al fontului. Exemplu: lățime: 35em;
- Urmărirea se referă la reglarea spațiului dintre caractere dintr-un text. Adăugarea urmăririi înseamnă adăugarea de spațiu alb între caractere și invers. La dimensiuni mici de font, adică mai puțin de 10 puncte, adăugarea urmăririi ajută la îmbunătățirea lizibilității. În mod similar, pentru titlurile mari, utilizați urmărirea negativă pentru a apropia literele. Puteți controla urmărirea în CSS prin proprietatea „spațierea literelor”. De exemplu: spațierea literelor: 0,05em;
- Marimea fontului se referă la dimensiunea fontului utilizat într-un text. Pentru afișajul mobil, utilizați dimensiuni de cel puțin 12 px. Puteți controla dimensiunea fontului în CSS prin proprietatea „font-size”. Exemplu: font-size: 48px;
După cum puteți vedea, trebuie să luați în considerare o mulțime de factori pentru a asigura lizibilitatea și lizibilitatea optime. Amintiți-vă, nu există reguli dure și rapide pentru niciunul dintre factorii descriși mai sus. Acestea sunt simple linii directoare care vă pot ajuta să vă instruiți mai bine ochiul tipografic.
Culoare și valoare tonală
În teoria culorilor, o valoare tonală este produsă prin adăugarea de alb, gri sau negru la o culoare selectată. Acest lucru nu schimbă nuanța, dar modifică intensitatea culorii, cunoscută și sub numele de saturație. Când discutați despre valoarea tonală, există trei termeni principali care trebuie discutați: Nuanță, Ton și Umbră.
Tenta este adăugarea de alb la o culoare. Tenta poate fi utilizată pentru a evidenția o zonă, precum și pentru a începe să creeze iluzia de adâncime asupra unui obiect.
Tonul este adăugarea de gri la o culoare. Culoarea tonală creează o culoare mai dezactivată și mai puțin saturată.
Umbra este adăugarea de negru la o culoare. Umbra poate fi utilizată pentru întunecarea și zona pentru a crea iluzia de adâncime asupra unui obiect.
Modificând valoarea tonului culorilor, puteți crea iluzia de adâncime în imagini, precum și nivelul de saturație pentru a aplica mai bine culoarea pentru o emoție sau o stare de spirit dorite.
Mai multe despre tipografie:
- Tipografie: anatomia formelor de litere
- Grilă în 8 puncte: tipografie pe web
- De ce tipografia vă poate face sau rupe designul
