Share
Tipografia este unul dintre cele mai importante aspecte ale designului web, dacă nu chiar cele mai importante. Unii ar argumenta că este nevoie de până la 95% din designul web, de ce ne neglijăm adesea importanța acesteia? Cititorii care vin la site-ul dvs. vor decide adesea dacă să rămână sau nu în funcție de alegerile tipografice. La urma urmei, au venit aici citit in primul loc. Gândiți-vă pentru o secundă: dacă conținutul este într-adevăr rege, tipografia logică ar trebui tratată ca regină.
De fapt, chiar și unele nume de fonturi sugerează că clasificarea; Futura, Optima, Times New Roman (OK, probabil un tip), Verdana, Lucida, Georgia, Helvetica ... Nu există nici o îndoială, Tipografia este regina. Prin urmare, ea trebuie să fie îmbrăcată în mod corespunzător înainte de a ieși: ar trebui să-și pună niște kerning și urmărire, poate o altă variantă de tip font și deja arată ca o adevărată doamnă.
Nu sunteți sigur despre ce vorbesc? Ei bine, citiți mai departe.
Înainte de a trece la acest articol și mai ales dacă nu aveți prea mult contact cu tipografia, vă sugerăm să completați lacunele tipografice de la Typedia, luând notă de clasificările Typeface și anatomia unei tipografii care vă va servi bine atunci când faceți propriile dvs. stive de fonturi și împerecheați fonturile.
După ce ați terminat de citit cele două articole despre Typedia, reveniți aici pentru a vă strânge cunoștințele tipografice nou-înființate și ao pregăti pentru următoarele capitole din acest articol.
Tipurile de text au relații dinamice și pot arăta bine sau rău împreună, în funcție de cine sunt amestecate și de diferențele dintre ele. Dacă ne-ar plăcea să obținem tehnică, există, de fapt, trei moduri în care se pot referi fonturi:
O relație concordantă este cea care nu are emoții, unde două tipuri de caractere sunt foarte asemănătoare. Acesta poate fi, de asemenea, un singur font în mai multe stiluri și / sau dimensiuni.
Când fonturile sunt destul de diferite unul față de celălalt, apare contrastul. De obicei, este bine să căutați un contrast, de exemplu, între serif și serigraf.
Două (sau mai multe) fonturi care au caracteristici diferite care sunt încă destul de asemănătoare pentru a crea suferință pe o pagină sunt în conflict. Ar trebui să eviți, de obicei, acest tip de relație.
Tipurile de plicuri pot varia. Fie că este vorba despre greutate, înălțime, lățime, sau orice altceva, fiecare tip de text are o anumită caracteristică care o face să iasă în evidență. Ar trebui să înveți să observi aceste subtilități și să le adaptezi influenței. Și nu credeți că nu contează, deoarece chiar și diferite iterații ale aceleași tipuri de fonturi pot fi uneori uneori inegale.
Acest lucru se referă în mod specific la Web, unde arta de a crea și aplica stiluri de fonturi este foarte importantă. Nu trebuie să alegeți exact aceleași caractere pentru o schimbare, dar este corect să spunem că un font vechi precum Garamond ar trebui să fie susținut de un alt tip de stil vechi cu caracteristici asemănătoare (Caslon, Baskerville, Times, de exemplu).
Deși sunt serifi, Georgia, Garamond și Adobe Garamond Pro (dimensiunea de 200 de puncte în exemplul de mai sus) arată foarte diferit.
Un font modern, cum ar fi Bodoni Condensed sau Bodoni Bold, este o alegere excelentă pentru titlurile de titluri, în timp ce probabil că ar fi un text necorespunzător pentru linii extinse de copie a corpului, unde ar distrage atenția cititorului din conținut. O vechime ca Garamond (I ♥ Garamond) este o alegere mult mai bună pentru aceste situații.
Non-designerii fac adesea decizii proaste atunci când aleg fonturi pentru diferite ocazii și, deși voi trece peste prelegerea Comic Sans, trebuie să fiți conștienți de faptul că nu este întotdeauna potrivit să utilizați, de exemplu, Georgia pentru copie corporală. De asemenea, nu este întotdeauna rău să utilizați Arial ca tip de text preferat; dar luați în considerare mesajul pe care încercați să-l transmiteți, prin intermediul tipografiei.
Acest articol nu este în primul rând o vitrină, totuși este întotdeauna interesant să observăm ce au făcut ceilalți designeri talentați pentru a face ca site-urile lor (clienți) să fie încântați să le priviți. Vom vedea ce se poate face cu o atenție deosebită pentru decorarea fonturilor, precum și cu stiluri de fonturi solide și alegeri tipografice inteligente.
(P.S. Dacă doriți să vedeți alte exemple de tipografie frumoasă pe linie, navigați prin arhivele Tipesites. Nu există prea mult conținut acolo, dar acestea au acoperit câteva site-uri foarte bune.)
Verdana este cea mai plictisitoare tip de text pe care o poți folosi? Nu dacă îl întrebi pe Jason Santa Maria. Era inteligent să folosească puterea lui Verdana (înălțimea X) pentru a face o copie corporală destul de mică ca dimensiune pentru un aspect elegant și elegant A List Apart merită. Dimensiunile mici fac, de asemenea, plăcută citirea pe termen lung.
Georgia este folosită în cea mai mare parte pentru accentul pus pe anumite elemente de pagină și ca tip de afișaj. De la alte decizii de proiectare vizibile, literele majuscule sunt de dimensiuni reduse și litere pozitive pentru o lizibilitate și un aspect mai bun.
Jon Tan, cum ar fi Khoi Vin și Daniel Mall, urmează, de asemenea, cultul designului minimalist alb-negru, cu stropi de portocaliu atent plasați. Deși există o lipsă de entuziasm în alegerea culorii, ați putea spune că Jon se comportă pentru asta, luându-și mai multă grijă de alegerile sale tipografice. Fișierul CSS al Jontangerine.com conține peste 250 de declarații diferite pentru toate microtipografiile!
Copia principală a corpului este stabilită în Georgia minunată, în timp ce titlurile centrate apar într-un teanc de fonturi bazat pe Times cu Baskerville și Palatino:
font-family: baskerville, 'palatino linotype', 'ori roman nou', serif;
În alte domenii, "colorarea" tipografică este realizată folosind variante diferite de fonturi, diferite nuanțe de negru și stil de font excelent. Categoric unul dintre cele mai bune site-uri centrate pe tipografie!
Ați auzit probabil multe despre încorporarea @ font-face cu CSS în ultimele câteva luni. Deși Internet Explorer a avut o tehnică similară încă de la a patra iterație (ne este rușine să recunoaștem acest lucru), numai în 2009 - când toate cele cinci browsere mari au implementat @ font-face (calea cea bună) - am început să vorbim intens despre utilizarea webfonts non-core online.
Există, după cum puteți ști, câteva dezavantaje considerabile ale acestei tehnici (în primul rând probleme de copyright), dar dacă găsiți un font potrivit pentru nevoile dvs., aveți toate șansele de a îmbunătăți modul în care cititorii văd experiența site-ului dvs. D. Bennon Tennant (Information Highwayman) a decis să folosească Justus pentru copie corporală, care contrastează destul de bine cu elementul de fundal sans serif ("magnum convingător") și ajută la realizarea efectului "uzat" asupra site-ului.
Elliot îi place să folosească fonturile Slab-Serif, exemplificate în ambele sale excelente 8 fețe revista pe Tipografie (foarte recomandata), cu FF Unit Slab si propriul site Web, unde FF Tisa Web Pro este incorporata folosind serviciul de tip embedding fonturii Typekit.
Nu există atâta tipografie tipografică pe site, ca de exemplu Jon Tan; totuși, el a făcut o treabă excelentă cu aliniere și culoare, care niciodată nu ar trebui să fie trecute cu vederea și sunt ingrediente importante în tipografie bună.
Deși devin rapid tehnici de înlocuire vechi, textul Flash și textul înlocuit de imagine (atât imaginile Cufón cât și imaginile introduse manual), în loc de textul obișnuit, sunt importante pentru compatibilitatea cu browserul încrucișat în site-urile ale căror vizitatori nu utilizează în mod predominant browsere moderne, precum și în cazul în care fontul special nu este disponibil din cauza unuia sau a celuilalt motiv (de exemplu, probleme de copyright).
Squared Eye pune accentul pe diferite nivele ale titlurilor cu sIFR, precum și cu imagini inserate manual. El folosește un archer frumos din seră, în armonie cu o stivă de fonturi bazată pe Lucida, pentru un aspect modern, dar totuși elegant.
Deși voi oferi câteva stiluri de fonturi pe care le puteți utiliza în desenele dvs., considerați următoarele mai mult ca o "antrenament" pentru a vă crea stive de fonturi proprii. Există deja o mulțime de alte site-uri acolo care oferă o mulțime de soluții readymade atât pentru afișare, cât și pentru textul textului.
După cum se spune, "Dă-i un om un pește și-l hrănești pentru o zi. Învățați un om să pescuiască și îl hrăniți pentru o viață."
Înainte de a începe să construiți stive de fonturi, ar trebui să cunoașteți publicul principal și să determinați ce software și sistemele de operare le utilizează. În acest fel, puteți să prezicați fonturile pe care le-ar fi instalat și cât de multă flexibilitate tipografică vă oferă.
De exemplu; Matthew Smith probabil (pe bună dreptate) a prezis că majoritatea publicului său nu va avea un font ca Archer instalat pe calculatoarele lor și a hotărât să îl încorporeze folosind înlocuirea fontului Flash (comparativ cu Archer, 97% dintre utilizatori au instalat Flash).
Design-ul întotdeauna cu Webfonts de bază mai întâi și apoi îmbunătățirea treptată cu stive de fonturi)
Pentru mai multe informații despre fonturile livrate cu diferite programe, navigați prin Matricea fontului 24 Ways, Fluid Web Type și Apaddedcell. De asemenea, puteți găsi documentația extensivă a Microsoft privind fonturile care vin împreună cu produsele lor, precum și o scurtă prezentare a departamentului tipografic, o citire utilă.
Când vine vorba de construirea de stive de fonturi, va trebui să luați în considerare câteva variabile, atunci când stabiliți ce face fonturile să difere de celelalte (amintiți-vă comparația Georgia-Garamond-Garamond de mai sus?). Aceasta, din nou, coboară la experiența și familiaritatea dvs. cu diferite categorii de fonturi. Va trebui să înveți să observați nu numai modul în care sunt prezentate serifele (sunt inclinate sau drepte sau nu există?), Dar și diferențele mici (er) între două tipuri de fonturi similare.
Luați în considerare modul în care acestea comunică unul cu celălalt, înălțimea lor și lizibilitatea pe dimensiuni mici, precum și forma și direcția acestora. Chiar dacă sună, probabil, intimidând acum, amintiți-vă cum practica este perfectă.
Exemplu: Ibis Display and Archer, deși ambele serifi de tip slab în funcție de categorie, probabil că nu ar face o pereche bună, datorită diferenței semnificative în modul în care sunt prezentate serifii și tranzițiile vizibile groase / subțiri pe Ibis versus un monoweight Archer.
Am menționat deja că îmi place Garamond. Așadar, o să stau la baza unui set de fonturi de pe Times New Roman, care este cel mai apropiat font securizat pe Web față de stilul vechi de stil vechi.
Aș dori să menționez că Garamond, datorită înălțimii sale scăzute X, probabil nu este cea mai bună alegere atunci când se proiectează pentru o lizibilitate excelentă pe ecran (la urma urmei, nu a fost făcută în primul rând pentru prezentarea pe ecran), dar este bine dacă utilizat în dimensiuni suficient de mari pentru fonturi (în opinia mea, 16-17 pixeli / garnitură 1EM este optimă).
În cazul scalării optice, așa cum se numește, dimensiunile de text mai mici au de obicei înălțimi mai mari x, lărgimi mai largi ale tulpinilor și un contrast mai mic de tip tipografic și dimensiuni mai mari ale afișajului au înălțimi x mai mici, cu mai multe variații ale lățimii tijei.
- MSDN Blogs
Potrivit Matricei fontului 24 Ways, Garamond este livrat cu Office Word 2007 pentru Windows și Word 2004 for Mac, ceea ce înseamnă că este disponibil pentru un procent mare de vizitatori. Pentru cei care nu au instalat-o, am oferit o copie de rezervă sub formă de caractere Adobe Caslon, Garamond și Minion Pro, care sunt livrate împreună cu Creative Suite (cu toate acestea, toate aceste fonturi sunt, de asemenea, disponibile pentru individual descărcați; menționez programele pe care le livrează, deoarece cred că mulți dintre ei le-ați cumpărat cu software-ul Adobe).
De asemenea, am decis să folosesc textul crimson din depozitul Webfont al Google pentru a oferi o schimbare decentă înaintea Times. Stivă finală de fonturi arată astfel:
font-family: Garamond, Adobe Garamond Pro, Minion Pro, Adobe Caslon Pro, Crimson Text, Times, serif;
Acest stiva de fonturi ar trebui să fie utilizată exclusiv pe dimensiuni de fonturi mai mari, mai ales datorită faptului că Windows este notoriu pentru redarea redusă a fonturilor.
Chrome cu setările implicite (stânga) și Safari cu netezirea fontului setat la Mediu (dreapta). Poate arata subtil la inceput, dar are un impact mare asupra lizibilitatii in dimensiuni mai mici.
Dacă ați căutat o lizibilitate extrem de bună pe ecran, Georgia și Verdana (ambele fonturi sunt din anii nouăzeci, făcute special pentru redarea ecranelor) vor oferi rezultate mai plăcute în stilurile de fonturi.
De exemplu, am putea profita de asemănarea dintre serifele Lucida (Fax și Bright, care vin și cu MS Word) și seriful Droid din depozitul Google Webfont pentru a crea o stivă de fonturi cu o înălțime mare x:
font-family: Lucida Bright, Lucida Fax, serif Droid, Georgia, Serif;
Încă o dată, webfonturile Google vin la acțiune în fața unei soluții generice, mai ales pentru că Seriful Droid este mult mai apropiat de Lucida decât Georgia și Times.
Un stiva foarte asemănătoare cu Verdana ar conține și cele trei șase serif-uri Lucida sigure (Grande - ships with Mac, Sans, Sans Unicode):
font-family: Lucida Sans, Lucida Sans Unicode, Lucida Grande, Verdana, Sans-serif;
Observați modul în care fonturile de înlocuire au caracteristici similare, în special modul în care g litera este practic la fel în toate tipurile de fonturi, și cum o seamănă mai degrabă cu un cerc decât cu o elipsă. Ca și cele mai multe sans serif-uri, acestea sunt monoweight și nu au nici o tranziție gros / subțire (Optima, de exemplu, nu este monoweight - ceea ce face mai greu de pereche cu alte fonturi).
În timp ce creați stive de fonturi sensibile este importantă, pentru a oferi o tipografie excelentă, va trebui să faceți "extra zece procente" și să furnizați contrast tipografic folosind diferite variante de fonturi, greutăți, direcție și îngrijire îngrijitoare pentru toate metodele microtipografice.
Jon Tan abordează microtipografia cu o atenție deosebită.
Jon Tan, de exemplu, folosește niște selectori CSS3 pentru a crea un impact vizual deosebit.
.intrare-conținut p: prima linie, .entry-content img + p: prima linie font-variant: small-caps; greutatea fontului: 900; text-indent: 0px;
Folosește titluri centrate și italice în cadrul unui post de blog într-un teanc de fonturi bazat pe Times. Acest lucru, atunci când este combinat cu un text justificat și cu designul său minimalist, oferă o experiență de lectură foarte plăcută. Amintiți-vă: lucrurile mici contează.
Amestecarea lucrurilor cu caractere aldine, titlurile majuscule și spațiile pozitive pentru litere mai mici vor oferi de multe ori o experiență mult mai bună și un contrast mult mai clar, precum și o separare mai clară față de copia corporală decât o altă caractere. Samantha Warren a acoperit foarte bine ierarhia tipografică și vă sugerez să citiți articolul ei pentru o mai bună înțelegere a subiectului.
Un Garamond de șaptesprezece pixeli pentru copie corporală și 15 pixeli Lucida Sans pentru subcapitolul 4 (h4) arată foarte diferit în cele două situații superioare, numai datorită câtorva mici modificări în CSS:
corp font: 17px / 1.4 Garamond, Adobe Garamond Pro, / * ... (a se vedea stack-ul bazat pe Garamond de mai sus) * / serif; culoare: # 333; text-align: justify; h4 # majuscule text-transform: majuscule; font: bold 14px / 1 Lucida Grande, Lucida Sans, Verdana, sans-serif; margin-top: 15px; spațierea literelor: 1px; h4 # normalcase text-transform: nici unul; font-weight: normal; literă Spațiere: 0;
Ampersandurile italice sunt o altă tehnică care demonstrează cum contează "lucrurile mici" (observați totuși că nu toate fonturile au ampersanduri "speciale"):
.amp font-family: Adobe Caslon Pro, Garamond, Linotype Palatino, Bell MT, Minion Pro, Garamond, Constantia, stilul vechi Goudy, textul High Tower, serif; / * Stiva de font de mai sus conține câteva familii de fonturi care au ampersanduri frumoase. Ar trebui să alegeți un cuplu care să se potrivească nevoilor dvs. pe un anumit site web, mai degrabă decât să utilizați toate. De exemplu, Caslon, Palatino și Baskerville fac o treabă frumoasă de cele mai multe ori. * / font-style: italic; linia-înălțime: 0;
Dacă doriți să automatizați folosirea ampersandelor fanteziste (care le includ în clasele potrivite, precum și un ajutor tipografic avansat), vă sugerăm să căutați pluginul WP-Typography pentru Wordpress.
Am putea îmbunătăți experiența utilizatorilor prin îmbunătățirea site-ului cu un simplu JavaScript pentru a testa dacă are un anumit font instalat pe sistemul său. Apoi, pur și simplu alegeți un font adecvat, dacă fontul nu este disponibil (adică, măriți dimensiunea fontului pentru a face alt font mai ușor de citit, utilizați înlocuirea imaginii, încărcați fonturi suplimentare etc.).
Rețineți că ar trebui să luați în considerare faptul că un procent mic de utilizatori navighează pe web cu JavaScript dezactivat.
Ar putea, probabil, să adăugați o clasă noscript corpului dacă JavaScript este dezactivat și să pregătească o tipografie sensibilă pentru acesta, în consecință.
Acestea fiind spuse, există câteva tehnici esențiale pentru a descoperi dacă un anumit font este instalat în sistemul utilizatorului. Voi folosi o versiune ușor modificată a codului lui Lucas Smith:
Accentsconagua
funcția testFont (nume) name = name.replace (/ ['"<>] / g,"); var corp = document.body, test = document.createElement ('div'), instalat = false, template = 'mmmmmwwwww"+"mmmmmwwwww", ab; dacă (nume) test.innerHTML = template.replace (/ X / g, nume); test.style.cssText = 'poziție: absolută; vizibilitate: ascuns; afișare: bloc important! '; body.insertBefore (test, body.firstChild); ab = test.getElementsByTagName ("b"); instalat = ab [0] .offsetWidth === ab [1] .offsetWidth; body.removeChild (test); retur instalat; După adăugarea codului în fișierul JavaScript, puteți să testați dacă un anumit font este instalat pe computerul utilizatorilor utilizând declarații condiționate:
dacă (testFont ("FontName")) // Faceți chestii dacă fontul este instalat altceva // Efectuați lucruri dacă fontul nu este instalat, adică încărcați înlocuirea Cufón Una dintre cele mai interesante utilizări ale acestei tehnici ar putea fi legată de un fișier de încărcare a fontului (@ font-face, Google Webfonts ...), în cazul în care fonturile preferate nu sunt disponibile în sistemul utilizatorului. În acest fel, îmbunătățim performanța și nu forțăm utilizatorul să descarce extra ~ 30kb fără nici un motiv:
dacă testFont ("Lucida Fax") &&! testFont ("Lucida Bright") &&! testFont ("Droid serif")) var head = document.getElementsByTagName ("cap") [0]; var webfontLink = document.createElement ("link"); webfontLink.rel = 'stylesheet'; webfontLink.href = 'http://fonts.googleapis.com/css?family=Droid+serif'; // acum avem head.appendChild (webfontLink); ♣ ♠ ♣ ♠ ♣ ♣ ♠ ♣
Sper că acum aveți o mai bună înțelegere a tipografiei pe web. Cu siguranță e mai mult la această chestiune și mă bucur să aud ce ai de spus în comentariile tale!
