Anatomia tipografiei web

Fiecare caracteristică imaginabilă a tipografiei poate fi menționată prin numele său. Fie că vorbești despre textul însuși, fie despre aranjarea tipului într-un aspect, există un imens glosar de termeni care te pot ajuta să descrii lucrurile în mod corespunzător. Să aruncăm o privire asupra elementelor de tipografie care sunt importante pentru dvs., ca un designer web.


Există două aspecte esențiale ale tipografiei care se referă direct la designerii web:

  • cele care influențează alegerea tipului de text
  • și cele pe care le puteți manipula (adesea prin CSS).

Prin urmare, este foarte important să puteți articula (clienților sau membrilor echipei) opiniile și deciziile dvs. tipografice. Nu ne vom face griji cu minutiae ale terminalelor cu bile si tittle, dar in schimb sa discutam despre anatomia tipografiei pe care o conteaza web designerilor.


Puterea este în mâinile tale

Anumite proprietăți tipografice fundamentale pot fi manipulate cu CSS. De exemplu, poate cel mai important, familie de fonturi.

Veți auzi adesea discuții despre definirea font impotriva tip de caractere, așa că este important să știi diferența. Un font este colecția de pachete formate; în mod tradițional blocuri fizice utilizate în imprimare, în zilele noastre, inclusiv fișiere digitale. Este mecanismul de livrare.


(Tu te-ai abătut peste asta, nu-i așa?)

O copertă este ceea ce creează designerul; design-ul. Mereu mi-a plăcut comparația cu muzica; cumperi un CD (bine, ne întoarcem câțiva ani aici) ca mecanism de livrare pentru a asculta muzica. Nu ascultați CD-ul. Este o situație similară cu cea a fonturilor care utilizează fonturile pe care le livrează.

Prin CSS putem determina familiile noastre de fonturi preferate, în ordinea clasamentului. Aceasta este ceea ce noi numim font stiva.


Putem, de asemenea, manipulam grosimea fontului prin foi de stil. Greutatea este modul în care descriem grosimea relativă a accidentului unui personaj.

Multe fonturi sunt produse cu o varietate de greutăți, cele mai simple descrise ca fiind ușoară, regulat, carte, extra-bold, cu o serie de variante în plus. Mai precis, putem determina greutatea unei tipografii utilizând scara TrueType, care rulează de la 100 la 900 (400 fiind ceea ce în mod obișnuit se numește regulat).

Fonturile ar trebui, în mod ideal, să fie produse cu variante de greutate reale, numerice sau numite, pentru a fi controlate prin CSS: font-weight: 300;, font-weight: bold;. Atunci când o variantă de fonturi nu este disponibilă, browserele vor avea adesea un avantaj la redarea greutății, dar rezultatele pot fi mai puțin optimale.


Majuscule și litere mici se referă la literele majuscule și minuscule. Termenul caz provine din sertarele folosite în tipărirea prin tipărituri (majusculele conținând literele majuscule, caracterele de mărime mică ... obțineți imaginea).

Putem suprascrie cazul (dacă vrem să) prin utilizarea CSS text-transform: majuscule; de exemplu.


În timp ce suntem pe tema caracterelor, atunci când folosim majuscule, uneori (mai ales la dimensiuni mai mici) este recomandabil să sporiți spațiul dintre caractere pentru a îmbunătăți lizibilitatea. În ceea ce privește CSS, facem referire la aceasta ca spațiul dintre litere și poate fi exprimată ca o valoare pozitivă sau negativă, de obicei măsurată în sutimi em.

În termeni tradiționali, ne referim la spațierea literelor ca urmărire. Urmărirea afectează densitatea caracteristică a unei anumite linii sau blocuri de text. Termenul provine (ca și în cazul multor termeni tipografici) în epoca trecută a tipăririi, în mod specific fototipie, în care personajele au fost proiectate pe film printr-o lentilă. Spațiul din jurul fiecărui personaj ar fi modificat prin mutarea unei prisme de-a lungul unei piste, prin urmare urmărire.

Proprietatea CSS cuvânt-spațiere vă poate ajuta și aici. În mod previzibil, modificarea valorii spațiere a cuvintelor va face ca spațiul dintre cuvinte să crească și să se micșoreze, având, de asemenea, un impact semnificativ asupra lizibilității.

Redați cu valorile de literă și de spațiere a cuvintelor aplicate în următorul bloc de text și vedeți pe cont propriu modul în care este influențată lizibilitatea.


Adesea confundat cu urmărirea este kerning. Kerning se referă la ajustarea spațiului dintre formularele de litere specifice (nu întregul grup de caractere), din nou, pentru a îmbunătăți lizibilitatea.

A proporţional font (spre deosebire de a monospațiat font, a cărui spațiere de caractere este uniformă) va face diferențe pentru anumite perechi de caractere care au nevoie de ajutor suplimentar pentru a sta vizual unul lângă celălalt.

De exemplu, majuscule V și A, atunci când sunt așezate împreună, va avea nevoie, de obicei, reducerea lor pentru a combate spațiul suplimentar vizual între ele.

Încă o dată, avem seturi de școală veche pentru a mulțumi pentru termen, înapoi când tipul a fost turnat ca blocuri de metal. Kern se referă la notchul realizat într-un bloc de caractere, care îi va permite să se introducă într-un bloc corespunzător. Poziționarea acestor crestături masculine / feminine ar împiedica plasarea de caractere necorespunzătoare una lângă alta.

Acestea fiind spuse, kerning-ul este un proces asociat cu tipărirea pentru imprimare și nu este ușor de îmbrățișat de tipografia web. Există instrumente JavaScript, cum ar fi kerning.js, care pot ajuta designerii să manipuleze tipul lor pe bază de caractere, dar CSS nu a reușit încă.

În ceea ce privește CSS, există o propunere pentru proprietate font-kerning în lucrări, dar chiar și acest lucru este limitat în ceea ce poate face pentru un designer tipografic.

Setarea proprietății (non-standard) redarea textului: optimizabilitatea; va îmbunătăți lucrurile în unele browsere moderne, prin îmbunătățirea kerning-ului pe perechi de caractere recunoscute. Ca și în cazul font-kerning, acest lucru nu oferă atât de mult control ca o mână de ajutor. De asemenea, va declanșa utilizarea ligaturi acolo unde este disponibil într-un font, care mă conduce frumos să ...


Ligatura absoarbe la nivelul următor, oferind glife de înlocuire pentru anumite perechi de caractere. În unele cazuri, personajele nu se vor potrivi foarte bine, indiferent de cât de delicate sunt aranjate, caz în care poate fi proiectată o ligatură. Un exemplu clasic este cea mai mică f și eu.

Iată una cu care veți fi familiarizați; recunoaște acest lucru?

Ampersandul este de fapt o ligatura originara, pe care am obisnuit sa o folosim in loc de et (adică "și" în latină / franceză).

În alte cazuri, ligaturi pot fi necesare pentru anumite rarități lingvistice (fiind posibil ca cel german să fie cel mai familiar dintre acestea) și, uneori, pur și simplu pentru decorare. Acestea din urmă se referă la Ligaturi libere, cum ar fi unde a c și a T se unesc.

În cazul în care aveți un control mai mare asupra conținutului unei pagini web, este posibil să utilizați unicode sau entități HTML pentru a afișa ligaturi. De exemplu Fi te va sorta cu "fi" despre care am vorbit. Dacă doriți să aveți JavaScript, vă puteți ajuta la ligature.js ar putea face acest truc, deși nu este bombei.

Când utilizați CSS pentru a vă ajuta, puteți să vă sprijiniți redarea textului: optimizabilitatea pe care am menționat-o, sau ați putea folosi planul propus font-variant-ligaturi care are un număr de valori, cum ar fi common-ligaturi, asigurându-vă că ligturile sunt afișate ori de câte ori este posibil. Suportul pentru browser este incomplet în acest moment, dar este cu siguranță în valoare de păstrarea ochilor.


Decizii privind aspectul

Așa cum vom discuta într-un minut, proporțiile unei litere pot influența cantitatea de spațiu vertical dintre fiecare linie. Prin urmare, este recomandabil să se ia în considerare inaltimea liniei specifice fonturilor utilizate și ajustate corespunzător. Prea puțin spațiu vertical face ca un corp text să fie înghesuit și face dificil pentru ochi să urmărească înapoi la începutul liniei următoare.

Prea mult spațiu și lectură devin la fel de ciudate.

Utilizarea măsurătorilor relative este întotdeauna recomandabilă în designul web, în ​​special în ceea ce privește tipografia. Înălțimea liniei ar trebui să fie întotdeauna o funcție a dimensiunii fontului! Utilizarea ems pentru a defini înălțimea liniei va însemna că este întotdeauna relativ la dimensiunea fontului. Aruncati o privire la acest exemplu si vedeti cat de lizibilitatea este influentata de valorile in schimbare:

În termeni tradiționali se face trimitere la distanța dintre linii (nu trebuie confundată cu înălțimea liniei în sine) ca conducere, așa-numitele din cauza benzi fizice de metal de plumb, care au fost utilizate în prese de imprimare pentru a crește și a scădea spațierea verticale.

În zilele noastre, când se calculează înălțimea liniei, -O jumătate de conducere se adaugă atât partea superioară cât și cea de jos a caracterelor. De exemplu, o mărimea fontului de 36px, cu o înălțime de linie de 54px (1.5cm), ar avea ca rezultat spațiu de 9px adăugat sub caractere și 9px de mai sus. În realitate, acest lucru centrează vertical pe linia sa.


Mergând împreună cu anatomia tipografică controlată de CSS, ajungem la justificare; alinierea textului. În diagrama noastră, textul este aliniat la stânga, dar ar putea fi aliniat la dreapta, centrat sau (atunci când se ocupă cu blocuri de text mai mari decât o linie) justificat. Stylingul prin CSS se face cu proprietatea text-align, de exemplu text-aliniere: centru;.

Textul complet justificat elimină ceea ce este cunoscut sub numele de marginea zdruncinata...

... dar poate provoca un gust urât sub forma de râuri sau canale care apar în corpul textului tău.

În lumea structurilor fluide, unde lățimea unui corp de text poate fi dificil de punctat, textul justificat ar trebui utilizat cu prudență.


Selectarea unei tipografii

Selectarea tipurilor de fonturi poate fi dificilă. Indiferent dacă căutați în mod special la titluri, texte corporale, citate de bloc etc. există mulți factori la joc. Să aruncăm o privire asupra câtorva aspecte fundamentale ale anatomiei tipografice cărora merită atenție.

În primul rând, avem de-a face cu a serif , sau a sans-serif? Serifii sunt acele curse suplimentare care termină un accident vascular cerebral principal. Fonturile, cum ar fi Arial, nu au aceste lovituri, sunt sans-serif (o altă lecție franceză pentru tine acolo ...)

Șerifii spun că ajută fluxul formelor de scris, leagă cuvintele coezive împreună, ajută ochiul peste text și facilitează citirea. Uneori, cu toate acestea, ele pot complica un tip de text, provocând oboseala cititorului și, prin urmare, împiedică, de fapt, lizibilitatea. Argumentul a fost actual de zeci de ani și nici o dovadă concretă nu a fost vreodată prezentată cu succes pentru ca oricare dintre cele două să fie mai ușor de citit.

În orice caz, fonturile apar uneori în serif și sans serif (cum ar fi ParaType PT, astfel încât să aveți luxul de a alege pe care îl considerați preferabil.


După ce am menționat lizibilitate, este corect doar să o deosebesc rapid de ea lizibilitate. Folosim lizibilitate atunci când vorbim despre detaliile mai fine ale tipografiei; abilitatea de a recunoaște scrisori și cuvinte individuale. Citibilitatea are un rol mai funcțional, legat de caracterul practic al unui cititor care poate absorbi un corp de text.

Lizibilitatea este, evident, foarte importantă. Din acest motiv, este înțelept să le luăm x înălțime în considerare. Înălțimea de tip x descrie înălțimea (aruncați o privire la x a unei fețe particulare), de la de bază în partea de sus a caracterelor minuscule. Tipurile de text cu o înălțime x relativ mare tind să fie mai ușor de citit, mai ales la dimensiuni mai mici.

Înălțimea mai mare x se realizează pe cheltuiala coboratoare și ascenders, care devin logic mai scurte în relație. Acest lucru poate duce la un spațiu vizual mai mic între linii, despre care am vorbit acum o clipă.


Nu sunt sigur cum am ajuns atât de departe fără a defini în mod specific o formă de scrisoare accident vascular cerebral. Dacă există un termen care este util în descrierea personalității unei litere, este asta. Cursa oricărei forme de scris poate fi orizontală, verticală, diagonală, chiar curbată - și în funcție de accidentul în cauză poate avea și un nume mai specific.

Accidentul principal (de obicei vertical și greu) într-o formă de formă de scrisoare este denumit tijă, lăsând termenul accident vascular cerebral pentru a însemna apoi una de proeminență secundară. Cursa orizontală deasupra unei majuscule T este numită a braţ, ceea ce veți găsi prin punerea în mișcare a spațiului într-o majusculă A sau H este a bar, lista continuă ...

Strokes într-o singură formă de scrisoare, în special în serif, poate varia în stil și greutate prea; A linia parului fiind cel mai subțire prezent.

Apoi, unele lovituri, în special curbe, vor avea o greutate diferită de-a lungul lungimii lor. Acest lucru este denumit modulare. Această variație echilibrează greutatea totală a unui personaj și evită zonele deosebit de grele în care se alătură două lovituri.

Modularea modestă a loviturii va duce adesea la o formă de scrisoare greoaie și greoaie față de ceilalți din set. David Kadavy se referă la acest echilibru ca o uniformitate a texturii și este adesea o măsură a calității într-un text bine executat. Uitați-vă la un text de text, apoi blur ochii pentru a obține o impresie de textura suprapusă.


Asta este tot pentru acum

Sunt mii din termenii și adjectivele glossary pentru a obține o manevră dacă doriți să descrieți în mod corespunzător aspectele tipografice. Am acoperit câteva dintre elementele de bază și sper că cel puțin câteva dintre ele sunt adăugiri noi la vocabularul tău! Încercați să aruncați întâmplător unul în conversație data viitoare când veți fi introdus pe cineva nou - vor fi foarte impresionat ...