Share
Dacă învățați designul web de la zero și doriți să vă îmbunătățiți în mod semnificativ copiile de tipografie, atunci acest articol este scris pentru dvs. Vom acoperi fonturile, fonturile, anatomia tipografică, ierarhia și modul de alegere a fonturilor. Veți învăța suficient pentru a deveni periculos în cel mai scurt timp.
Așa cum este de obicei pentru aceste ghiduri cuprinzătoare, vom acoperi o sumă semnificativă, inclusiv:
Web designul este tipografic de 95%! Nu există nici un design web fără tip. Deci, de ce nu vă îmbunătățiți abilitățile de design web prin aplicarea unei tipografii solide? Există o lume bogată plină de scrisori de explorat, o lume care a fost înmânată de generații de oameni creativi care lucrează cu design grafic și de tip. O altă gaură de iepure uimitoare de a se arunca cu capul.
În primele zile ale designului web, a încercat să urmeze idei de design grafic, mai ales cum au fost elaborate și proiectate cărți, reviste și ziare. Aceste zile, proiectarea pentru web a ajuns la maturitate și nu urmează aceste concepte atât de îndeaproape cum a făcut-o odată. Responsabilitatea design-ului web este un exemplu în care designul sa maturizat clar dincolo de lumea tipografică în multe, multe feluri. Partea clară este că acest lucru a condus, de asemenea, la o mai mare complexitate - ceva care pare a fi mereu în creștere. Departe de a fi amenințător, acest lucru este foarte interesant și posibilitățile nu sunt doar în creștere, dar opțiunile de astăzi sunt deja vaste și reci. Web-ul a crescut - destul de puțin - și viitorul pare luminos!
Tipul este mai eficient decât orice altceva când transmite mesajul dvs. pe web. Desigur, grafica poate să o susțină și să o îmbunătățească, iar icoanele vor fi comunicate utilizatorilor dvs., în special prin intermediul cuvântului scris - spre deosebire de lumea publicității, unde imaginile și graficele pot transmite mai multe povestiri mult mai ușor, chiar fără a utiliza prea multe limbi scrise la toate.
Pe internet vorbim pagini, site-uri web, și mai presus de toate interfețe. Confruntarea cu cele mai multe elemente grafice pentru acestea sa dovedit a fi dificilă, adesea ineficientă, ambiguă și inadecvată pentru piața masivă.
fără
dropbox cuAcest exemplu din Dropbox arată că numai grafica nu atinge același nivel de comunicare și atunci când singurul este cel puțin ambiguu.
"Tipurile de text" sunt colecții de litere, numere și semne de punctuație care formează seturi de stiluri pentru un alfabet. Gândiți-vă la fonturi ca fiind o familie de tip ale cărei membri împărtășesc alegeri comune de design, dar pot varia în greutate și stiluri. Bodoni sau Gotham, de exemplu, sunt fonturi.
Tu proiecta o inscripție.
Caslon
Gotham"Fonturile" sunt considerate a fi un subset al unei litere. Acestea sunt seturile de caractere fizice (sau digitale) ale unei anumite litere într-o anumită greutate și stil. Open Sans Light este un font; un fișier pe care îl utilizați în sistemul dvs..
Tu face un font.
Open SansSubiectul de clasificare pentru fonturi este mult mai mare decât ne-am gândit la început - în special subclasificările. Elementele esențiale pentru a începe cu acestea sunt rapide pentru a obține o prindere, totuși, să ne uităm la câteva clasificări pe care trebuie să știți absolut.
Serifele de tip Serif sunt numite după puțin extensii, detalii decorative, la sfârșitul unor curse: serifi.
De la 10 indicatori de remediere pentru dezvoltatoriSerifele din serif sunt cele mai vechi pe care le vom discuta în acest articol. Aceasta nu este o știință exactă, dar pot fi făcute argumente pentru a se întoarce cât mai devreme când romani sculptură scrisori în pietre, folosind alfabetul latin. Există, de asemenea, o teorie interesantă care spune că acestea sunt rezultatul folosirii dălților atunci când sculptează pietre și au fost o alegere artistică datorită instrumentelor folosite pentru a crea un rezultat final mai bun.
MailChimp
Latinotype
PanăSerifii sunt adesea utilizați pentru bucăți mai lungi de text, cum ar fi copia corporală. Dovezile despre faptul că sunt "mai ușor de citit" sunt neconcludente, totuși acest argument vine de multe ori. Ele funcționează bine într-o școală veche și într-un mediu clasic, dar pot funcționa la fel de bine într-un cadru modern, dacă sunt utilizate corespunzător.
The New York TimesSerifii sunt, totuși, o alegere excelentă pentru anteturi, de asemenea. Anteturile folosite de The Washington Post reprezintă un exemplu perfect de a folosi un serif pentru a transmite un anumit stil de tradiție și calitate, în timp ce copia de corp sans serif face să pară modernă, rămânând în același timp extrem de ușor de citit.
Washington PostTipologia "Sans-serif" nu are extensiile serifului.
Proiectul SoliSans serif-uri a crescut la popularitate în anii 1920. Acestea au fost concepute pentru a arăta moderne, industriale și fabricate de mașini; ideal pentru industria de publicitate și mișcarea Art Deco a timpului.
Vânătoarea răcoritoare Omakase
Mediu
Webflow"Semi serifs" încorporează atât caracteristicile serifelor, cât și cele ale serifurilor serif.
Latinotype"Șerifurile de sârmă" sunt similare cu serifurile, dar sunt mult mai groase și au mai multă atenție în natură.
VitesseÎn trecut, au fost adesea folosite pentru mașini de scris pentru a se asigura că a fost creat un contrast suficient pe pagină. În primele zile, mașinile de scris au avut mai greu să afișeze scrisori de imprimare consecvent pe o pagină; acest lucru depinde de presiunea și prospețimea de cerneală și altele asemenea. O serifă mai subțire era mai puțin eficientă pentru tipărirea mașinilor. Industria de publicitate timpurie avea nevoie, de asemenea, de ceva nou și de atragerea atenției, făcând astfel o utilizare intensă a plăcilor.
everywhere.is
Proday
FlowhubScările "Script" adesea simulează aspectul textului scris manual, imită grosimea și fluiditatea variate. Aspectul lor este mai casual și informal, adesea dând senzația de ceva artizanal și personal. Scripturile sunt de obicei foarte decorative și rareori folosite pentru paragrafe mai lungi de text (sperăm).
Paravel
Tipul Foster
FemmebotDupă cum sugerează și numele, fiecare literă și caracter de punctuație de tip "monospace" ocupă aceeași lățime orizontală. Celelalte tipuri de fonturi pe care le-am acoperit până acum toate au caractere cu lățimi variabile; acestea sunt cunoscute sub numele de dimensiunile proporționale.
Masini de scris, computere timpurii si terminale puternic folosite de tip monospace. Hardware de timp nu a satisface nevoile pentru lățimi variabile ale altor familii de tip. Editorii de text de astăzi pentru scrierea codului oferă încă fonturi monospațiate în mod implicit. Nimic nu vorbește "hacker" mai clar decât codul scris în monospațiu. În ultimii ani, a devenit, de asemenea, mult mai popular printre designeri.
Secolul următor
CSSDAAcum, să trecem peste unele dintre cele mai importante caracteristici anatomice de tip.
Nu ne vom face griji prea mult despre detaliile de aici, munca ta ca designer este aceea de a crea creativ cu inscripțiile în sine, nu să recite fiecare detaliu minuscul despre modul în care sunt compuse. Totul despre ceea ce faci, ceea ce atingi atunci când puneți fonturile la "lucru". Deci, sfatul meu este simplu, înțelegeți și memorați elementele de bază, distrați-vă, jucați-vă cu fonturile și înmuiați-le în timp. Nu este nimic greșit să nu știi fiecare detaliu despre anatomia de tip! Pe de altă parte, poate că sunt prea pragmatic în privința asta. Tu decizi!
Wikipediade bază este linia pe care sunt plasate majoritatea caracterelor.
Wikipediamedian pe de altă parte este plafonul pentru cele mai multe litere minuscule.
Spațiul dintre linia de bază și media este ceea ce noi numim x înălțime. Acest lucru poate fi văzut ca fiind egal cu înălțimea literei mici "x", de unde și numele său. Cu cât este mai mare înălțimea pe care o tipărește o tipă, cu atât va fi mai ușor de citit la dimensiuni mai mici. Majoritatea textelor pe care le citim în lumea occidentală sunt compuse din litere minuscule și, deoarece majoritatea caracteristicilor distinctive care ne permit să recunoaștem litere și, prin urmare, cuvinte, pot fi găsite în această regiune, înălțimea x influențează puternic lizibilitatea.
Acest spațiu suplimentar oferă unui font o posibilitate mai mare de a lăsa caracterul să strălucească. Tindem să citim în salturi și să consumăm scrisori rapid și subconștient. Deci, mai mult x înălțime este bun pentru copie corporală deoarece paragrafele lungi de text pot deveni obositoare dacă ochii trebuie să lucreze mai mult pentru a descifra alfabetul. Secțiuni precum titluri în care veți folosi, în general, dimensiuni mai mari ale fontului și cantități mai scurte de text oricum, pot scăpa cu o înălțime de x mai mică decât cea optimă. Aveți mai mult spațiu pentru alegeri artistice care implică o anumită stare de spirit sau caracter, fără a afecta prea tare experiența de citire a utilizatorilor dvs..
ascender este acea parte care se întinde deasupra medianului, în timp ce coborator este partea unui caracter care se extinde sub linia de bază:
Din Anatomia tipografiei webContoare sunt zone care sunt parțial sau complet închise. Gândiți-vă la un "o" sau la "a". Exemplul "a" are, de exemplu, două contoare: unul care este parțial și unul complet închis. Tipurile de text cu contoare mai mari sunt, de obicei, de asemenea bune pentru lizibilitate, deoarece detaliile au mai mult spațiu pentru a fi afișate în mod explicit. Așadar, căutați tipărite cu înălțimi mari x și contoare mai mari dacă sunteți interesat să oferiți utilizatorilor o experiență bună de citire.
Să examinăm acum câteva tipuri de spațiere atunci când se ocupă de tipografie.
Inaltimea liniei este spațiul dintre două linii de bază consecutive. În tipărire, este foarte important să creați un ritm vertical constant - rețeaua de bază - un sistem mini-grid care să fie tip pe o pagină. Pe web, acest tip de precizie este dificil de realizat.
Din numele meu este MikeMediile responsabile fac ca aplicarea rețelelor de referință să fie chiar mai puțin atrăgătoare, deci este posibil ca timpul dvs. să fie mai bine investit în probleme mai pragmatice.
O înălțime bună a liniilor pentru paragrafe de pe web se situează de obicei între 1,3-1,6 (care este proporțională cu dimensiunea fontului). Titlurile pot și ar trebui să fie un pic mai stricte. Un bun punct de reper pentru a ține cont este că cititorii ar trebui să poată să sară ușor la începutul liniei următoare. Nu doriți să împovărați utilizatorii cu un fel de cheltuieli mintale, necesitând să vă concentrați asupra locului în care ar trebui să continue să citească atunci când ajung la sfârșitul unei linii de text.
Diferențele de înălțime a liniei pot, de asemenea, să influențeze (bizar) culoarea textului. Mai înalte linii de linie par mai întunecate, deoarece micile spații între liniile de text sunt reduse - și vice versa, desigur. Găsirea unui echilibru, astfel încât textul care arată coerent, ușor și ușor de citit este scopul tău în timp ce se ajustează acest spațiu. Citiți textul, utilizați textul real nu ipsum și vedeți cum se simte. Este o experiență bună de citire? Aceasta ar trebui să fie în prim-planul minții tale - mereu!
Ambii termeni înseamnă același lucru: numărul de caractere pe o singură linie de text. O bună măsură pentru desenele de pe web se află între 60-85 de caractere. Lungimea liniei și înălțimea liniei sunt oarecum simbiotice și depind una de cealaltă. Cea mai mare lungime a liniei necesită un paragraf, cu atât mai multă înălțime a liniei trebuie încorporată.
Dacă pare prea înghesuită sau prea întinsă, ajustați-o până când este lizibilă și "se simte" dreptate.
kerning se referă la ajustarea spațiilor mici variabile între literele individuale. Aceasta este concepută în mod diferit de fiecare tip de design, care corespunde nevoilor fiecărei litere. Un "o" cu litere mici poate ocupa mai puțin spațiu decât un "t", de exemplu, cu litere mici. Pe web, este greu să se ajusteze în timp ce practica kerning-ului este foarte răspândită în industria tipografică.
WikipediaPe web este este posibil să se aplice kerning bazându-se pe datele copiate în fonturi în sine. Aceasta este o caracteristică care poate fi declanșată de CSS text-redare sau font-feature-setări proprietăți. Rețineți că sprijinul este departe de a fi larg răspândit în acest moment.
Aceasta se referă la distanța între toate literele dintr-un grup. Nu vizează literele individuale cum ar fi kerning-ul, ci este o ajustare uniformă care se întinde pe întregul pasaj text afectat, rezultând în mai mult sau mai puțin densitate și textură.
Când utilizați bucăți mai mari de text, pentru titluri, de exemplu, un pic de spațiere cu litere negative poate merge mult. Nu doriți să creați impresia că textul se îndepărtează. Ca și în cazul kerning-ului, atunci când fonturile sunt proiectate pentru a fi consumate la dimensiuni mai mici, distanța dintre litere ar putea avea nevoie de aceste nudgii mici de când kerningul inițial a fost considerat diferit.
Utilizați cotații reale. Perioadă!
Celelalte "citate" care sunt adesea folosite sunt de fapt citate straight - care ar trebui să fie folosite pentru centimetri și picioare. Apostrofele și citatele singulare au de asemenea și contrapartidele lor reale. Da, trebuie să faceți un kung-fu cu degetul pe tastatură pentru a le obține, dar rezultatul final merită efortul. Citeste mai mult:
Un elipsă se referă la cele trei puncte care pot fi ușor de înșelat ca trei perioade unice. Diferența este că au mai mult spațiu între fiecare perioadă. Puteți folosi spațiul suplimentar la stânga și la dreapta, depinde de dvs. să decideți.
Utilizați această opțiune atunci când doriți să omiteți conținut-cuvinte, fraze, linii, paragrafe sau părți de ghilimele. Este un înlocuitor care indică faptul că ați lăsat un text.
Nu este nevoie de spații suplimentare în jurul cratițelor. Scopul lor principal este de a lega cuvintele împreună, cum ar fi fine arta, 8 ani și altele.
Ele sunt singura voastra alegere pentru prefixe si sufixe. De asemenea, ar trebui să le folosiți dacă aveți nevoie de un cuvânt: T-U-T-S-P-L-U-S. Spanning time și distance este, de asemenea, parte a depozitului lor:
Pentru aceste intervale puteți utiliza și ro liniuță.
en dash își ia numele din lungimea literei mici "n". Este un pic mai lung decât o cratimă și este folosit pentru valori de valori, precum și pentru implicarea relațiilor ca master-student. Sau pentru accentuare.
dash este din nou un pic mai mare, dimensiunea literei majuscule "m". Acestea ar trebui folosite pentru a sublinia o pauză de gândire și pentru a indica faptul că o propoziție este neterminată. Ambele liniuțe pot apărea puțin mai subțiri decât o cratimă, de obicei. Vă rugăm să nu folosiți două cratime în cazurile în care liniuțele sunt mai potrivite. Nici o versiune de liniuțe nu necesită un spațiu suplimentar în jurul acesteia.
Știu, aceste detalii de punctuație nu sună prea drăguț, însă această cunoaștere de bază a modului în care trebuie să le folosești în mod corespunzător ar trebui să fie importantă pentru tine, dacă îți dorești să faci o idee bună în ceea ce privește tipografia. De asemenea, s-ar părea trivial să ai trei tipuri de liniuțe pe care le poți alege pentru că arată foarte asemănătoare, dar pe de altă parte, în decursul anilor s-au revărsat multe grijă și atenție și ar trebui să respectăm munca designerilor care au venit cu mult înaintea noastră. Este munca lor grea și pionierat, care face atât de ușor să se bazeze pe astăzi. Atenția acestor detalii este un preț mic care trebuie plătit pentru a sta pe umerii giganților.
Este important să transmiteți o ierarhie puternică în tipografia dvs. De ce? Deoarece, așa cum am stabilit la începutul acestei piese, tipul de pe pagină face ca aproximativ 95% din designul tău. Dacă aveți o ierarhie slabă în textul dvs., nu veți avea o șansă de bulgăre de zăpadă în iad pentru a crea o ierarhie puternică în designul dvs. global.
Trent Walton
tipologicTipografia vă oferă mai multe moduri de a vă oferi utilizatorilor ancore vizuale pentru navigarea pe site-ul dvs. așa cum doriți. Prin accentul pe care îl puteți lăsa să știe ce este cel mai important și la ce ar trebui să acorde atenție mai întâi. Iată câteva modalități de a vă consolida activitatea în departamentul respectiv:
Dacă nu aveți o culoare prea mare pe o pagină, elementele care nu au culoare se disting cu adevărat. Ca întotdeauna, mai puțin este mai mult. Pe măsură ce exemplele de mai jos utilizează doar culoarea cu ușurință, efectul este foarte puternic - chiar fără a mări dimensiunea sau spațiul alb suplimentar.
Paravel
dropboxCreșterea dimensiunii relative a fontului va atrage întotdeauna atenția asupra anumitor elemente. Lucrul pe care-mi place despre diferite dimensiuni ale fontului este că puteți crea cu ușurință "ancore" vizuale pe care cititorul le poate folosi pentru a sari pe o pagină. Singurul avertisment este că într-adevăr trebuie să fii în concordanță cu utilizarea dimensiunilor de fonturi pentru anumite elemente. Nu poți să-l schimbi la voință peste tot. Acest lucru va slabi cel mai probabil desenele tale mult mai mult decat sa ai un text uniformizat.
Typeterrance
dropboxOferiți camerelor tipografice importante camerei de respirație. Dacă sunt înconjurați de spațiu gol, ele se subliniază pur și simplu prin aceasta. Cei nou-veniți par să se teamă să nu utilizeze mult spațiu între elemente. În tipărire, acest lucru poate fi costisitor, dar pe web veți obține gratuit aceste lucruri. Jucați-vă pe la spate, urmăriți-i ce alte designeri vin și fură ocazional. Nici o știință magică și nici o știință despre rachete. Doar o mică experiență este tot ce aveți nevoie - în cele din urmă veți dezvolta o măsură bună a intestinului.
CSS Zen Garden
Trent WaltonO familie extinsă de tip de text vă va oferi o mulțime de greutăți pentru a alege. În multe dintre exemplele de mai sus puteți vedea diferite greutăți pentru diferite scopuri la locul de muncă. Pentru mine, nu este un lucru pe care să-l sari imediat și, de obicei, încercați celelalte instrumente pentru a crea prima ierarhie. Dar aceasta este o chestiune de gust, indiferent ce este mai bine pentru tine și pentru desenele tale.
Latinotype
dropboxÎn captura de ecran din pagina "Dropbox" despre "puteți vedea că numele au o greutate diferită de titlurile lor. O tehnică foarte importantă pentru crearea accentului.
Cursiv sunt excelente pentru informarea secundară sau terțiară în textul rulat (sau accentul, bineînțeles). Exemplul de mai jos le folosește bine pentru afișarea unei adrese.
Clubul directorilor de tipCând alegeți mai mult de un tip de text pentru munca dvs. (cel mai bine pentru a evita alegerea a mai mult de două) devine critică faptul că aceste fonturi ele însele creează un anumit tip de ierarhie prin contrastul lor. Pe de o parte, ele ar trebui să fie ușor de distins între ele și, pe de altă parte, nu prea independente. Există câteva linii directoare pentru selectarea tipurilor de fonturi; următorul capitol te va aduce la viteză pe acel.
Trent Walton
Stuntbox
Jason Santa Maria
Jason Santa MariaRețineți că toate regulile de mai sus stralucesc doar dacă le folosiți în mod consecvent. Dacă schimbați lucrurile prea mult, ierarhia dvs. va fi slăbită în mod semnificativ. Dacă toate acestea sunt complet noi pentru tine, du-te la articolul meu despre principiile de design vizual pentru a te ridica la viteză. Toate cele de mai sus vor avea un sens mult mai târziu.
Avem tonuri de fonturi pe care să le alegem din aceste zile. Și nu numai asta, avem multe servicii care vor să ne ajute cu asta. Poate dura ceva timp pentru a obține un sentiment care este acolo de fapt. Dar pentru mine este un lucru bun. Tipografia web a parcurs un drum lung, nu numai în ceea ce privește ecosistemul, ci și în ceea ce privește ce browsere vă permit să faceți aceste zile.
Atunci când decideți ce tipuri de text doriți să utilizați, aș recomanda să vă concentrați în primul rând pe lizibilitatea și stilul pe care doriți să le transmiteți în desenele dumneavoastră. Tonul și mesajul sunt de asemenea importante, deoarece tipul are o influență enormă asupra acestuia prin diferitele sale caracteristici. Dacă reușești să faci toate acestea, te vei distinge destul de mult de restul efectivului.
Asigurați-vă că creați un contrast bun între opțiunile asociate. Tipurile de text care arată prea asemănătoare pot sfârși prin a căuta confuzii și vă pot afecta negativ ierarhia vizuală. Familiile mai mari de tipografii au, de asemenea, avantajul de a avea tone de opțiuni pentru a varia singurul exemplu. În acest fel puteți utiliza doar o singură pictogramă fără a vă uita plictisitor.
Bucătărie chiuveta de bucătărieDacă doriți să mergeți mai departe, asocierea unei sans serif cu o serifă este cel mai bun loc pentru a începe - cel mai rezonabil de fapt. Acest lucru poate duce la un contrast mai puternic și mai interesant pe care îl puteți folosi în avantajul dvs. - stilistic.
Hanson WuUtilizați alegerile în mod consecvent. Evitați să schimbați fonturile pentru copiile corporale și anteturile peste tot. Decideți care este cel mai bun pentru lizibilitate și care este cel mai bun pentru transmiterea unui stil, luând în considerare atenția cititorilor și ținând seama de asta.
Ben GoodyearUnii designeri de tip au creat versiuni serif și sans serif de același tip. Acestea ar trebui să funcționeze împreună. Când textul tău are un frasin de potrivire, poți să găsești de la bun început un contrast adecvat.
adayinbigdata.comDacă împerecheați două tipografii, urmăriți diferențe vizuale puternice între cele două. Păstrați-l subtil dacă doriți, dar ar trebui să fie cel puțin vizibil - chiar și la ochiul rapid. În această privință, împerecherea a două serifi sau a două serifi poate fi dificilă.
ExpunereÎn timp ce căutați distincții vizuale, doriți, de asemenea, să aveți grijă de o trăsătură comună. Ceva care poate lega împreună două tipuri de fonturi. Structura lor vizuală, modul în care sunt proiectate scrisorile, ar putea împărtăși idei comune. Contoare similare și schelete similare ale literelor lor globale, de exemplu. Asta le unește și mai abil. O structura similara sau un design geometric va ajuta cu siguranta.
Cu ocazia, fura! Când găsiți combinații care vă plac, încercați-le și vedeți ce puteți face cu ei. Învățarea prin imitarea muncii altora este bine.
Tipografia nu are legi grele pentru a vă ghida deciziile. Pentru mine este un lucru bun. În multe privințe, tipografia este subiectivă, dar lizibilitatea ar putea fi o constantă pe care trebuie să o concentrați întotdeauna în primul rând. Luați toate ideile și conceptele pe care le-am acoperit cu un bob de sare și le vedeți ca puncte de plecare pentru explorările dvs. creative.
Există o mulțime de spațiu pentru infuzarea web-ului cu o mai bună tipografie. Este un instrument atât de bun pentru a spori comunicarea și simt că este o cunoaștere culturală prețioasă care ne-a fost predată de-a lungul multor generații de muncă grea și de explorare. Este fantastic cum poți influența tonul limbii scrise cu ea.
Accentsconagua