Share
Tipografia pe web este ceva simplu, dar pentru mulți este un mister îngrijorător. Astăzi, vom revizui șase moduri în care designerii web și dezvoltatorii pot îmbunătăți tipografia site-urilor pe care le creează.
Tipografia este arta de a crea litere, cuvinte, paragrafe și modul în care interacționează între ele. Mulți designeri și dezvoltatori adesea echivalează tipografia cu alegerea unui font sau a unei litere, în timp ce alții uită că 95% din designul web este tipografie și tind să uite de ea. În mod clar, dacă tipografia este într-adevăr 95% din designul web, ar trebui să fie în fruntea minții fiecărui designer și dezvoltator. Aici sunt Șase moduri de a vă îmbunătăți tipografia web.
Bazele tipografiei sunt importante pentru toți designerii, indiferent dacă sunt sau nu proiectați pentru web.
Definiții tipografice
Mai jos sunt câteva definiții tipografice de bază pe care fiecare designer / dezvoltator ar trebui să le înțeleagă atunci când se ocupă de tipografie. Această listă nu este deloc cuprinzătoare. Consultați lista de lectură recomandată la sfârșitul acestui articol pentru glosare mai cuprinzătoare.
Pentru a crea o scală tipografică eficientă, cea mai bună metodă pe care am găsit-o este să folosesc unitatea de măsurare a dimensiunii "em", deoarece stabilește dimensiunea relativă la baza unui document dat. În exemplul de mai jos, dimensiunea fontului de bază este de 12 pixeli, care ar stabili dimensiunea standard a fontului pentru paragrafe de 15 pixeli.
corp font-size: 12px; h1 font-size: 5.0; h2 font-size: 4.0; h3 font-size: 3.0; h4 font-size: 2.0; blocare font-size: 1.5em; p font-size: 1.25em; intrare font-size: 1.0em; mici font-size: 0.75em;
Ritmul vertical al distanței dintre linii care asigură distanța optimă pentru ochi. Pentru a crea acest ritm, este mai bine să urmați o rețea de referință. Din experiența mea, ritmul vertical online este cel mai bine setat la sau de aproape 1.5. NETTUTS +, de exemplu, utilizează un ritm vertical de 1.6m, ceea ce echivalează cu aproximativ la o înălțime de linie de 17.6px (bazată pe o dimensiune font de 11px).
Mai jos este un ritm vertical vertical pe care îl folosesc pe multe dintre site-urile mele construite pe sistemul de rețea 960. Pentru a atinge un ritm vertical în mod corespunzător, fiecare paragraf trebuie să aibă o margine sau o căptușeală sub echivalentul liniei standard de bază.
corp font-size: 12px; linia-înălțime: 15px; p marginea-jos: 15px;
Așa cum știu majoritatea designerilor și dezvoltatorilor, site-urile web diferă diferit în diferite browsere. Acest lucru este valabil mai ales în cazul redării fonturilor. Mai jos este o comparație a modului în care cinci browsere populare fac același text diferit:
Sursa de imagine: FontTech.Info Atunci când construiți o structură tipografică sau un site bogat în conținut (cum ar fi o revistă sau un site de blog), a fi capabil să vedeți diferențele dintre tipografia din fiecare dintre diferitele browsere și sisteme de operare este un avantaj important. Proiectarea în browser nu este nimic nou (nici măcar în 1997 când am creat primul meu site web, l-am proiectat în întregime în browser). Deși nu fiecare site este un candidat pentru proiectarea într-un browser, cei mai interesați de tipografie sunt perfecți pentru proiectarea într-un browser.
Sursa de imagini: pentru un web frumos Andy Clarke, designer / autor popular, a vorbit recent la Eveniment Apart Boston cu o prezentare numită Walls Come Tumbling Down în care a pledat pentru proiectarea în browser din mai multe motive. Imaginea de mai sus, luată din prezentarea sa, arată utilizarea unei rețele standardizate atât pentru coloane, cât și pentru ritmul vertical.
Cea mai bună modalitate de a crea într-un browser este să utilizați o rețea ca aceasta. În pachetul sursă am inclus două grile de coloane diferite, fiecare cu trei variante de ritm vertical. CSS de mai jos prezintă cea mai ușoară metodă de implementare a uneia dintre aceste grile de testare prin înlocuirea imaginii de fundal sau a imaginilor în corpul paginii HTML utilizând o clasă specifică rețelei pe care o alegeți. Pur și simplu adăugați clasa specificată pe eticheta corporală sau pe eticheta DIV a containerului de conținut și sunteți gata să proiectați în browserul dvs..
.grid960base15 lățime: 960px; linia-înălțime: 15px; fundal: url (imagini / grid960base15.png) repeat-y; .grid960base18 width: 960px; linia-înălțime: 18px; fundal: url (imagini / grid960base18.png) repeat-y; .grid960base30 lățime: 960px; linia-înălțime: 30px; fundal: url (imagini / grid960base30.png) repeat-y; .grid600base12 width: 600px; linia-înălțime: 12px; fundal: url (imagini / grid600base12.png) repeat-y; .grid600base16 width: 600px; linia-înălțime: 16px; fundal: url (imagini / grid600base16.png) repeat-y; .grid600base18 width: 600px; linia-înălțime: 18px; fundal: url (imagini / grid600base18.png) repeat-y;
Trebuie remarcat faptul că, pentru un ritm verticat bun, este necesar să existe un control granular asupra înălțimii liniei pentru a ajunge la ritmul vertical adecvat. În plus, puteți utiliza acest Booklet pentru a suprapune orice site web cu o rețea personalizată. Consider că acest lucru este util atunci când nu puteți înlocui imaginea de fundal cu unul dintre grile.
Înlocuirea textului cu imagini a reprezentat o practică standard în designul web încă din anii '90. Odată cu adoptarea CSS în browserele majore, au început să apară tehnici de înlocuire a imaginii care nu constau doar în a face o imagine și ao plasa în locul textului. Primul dintre acestea acceptat a fost Fahrner Image Replacement (FIR), dar pe măsură ce oamenii au jucat cu CSS Image Replacement, au realizat că această tehnică nu era accesibilă. Tehnica de înlocuire a imaginii Phark a fost inițial concepută ca înlocuitor accesibil pentru tehnica clasică FIR. În primul rând, propus de Mike Rundle de 9rule în 2003, înlocuirea imaginii Phark se bazează pe utilizarea proprietăților CSS de text-liniuță și imagine de fundal pentru a ascunde textul de la utilizator, dar rămâne accesibil pentru cititorii de ecran și motoarele de căutare.
Pentru a utiliza înlocuirea imaginii Phark, setați elementul container (în acest caz, DIV-urile) cu o înălțime și o lățime definite. Apoi setați o imagine de fundal. În cele din urmă, setați proprietatea text-indent la -9999px. Proprietatea text-liniuță împinge în esență începutul textului la 9999 de pixeli, dar acest lucru nu crește suprafața scrollabilă, determinând în mod efectiv textul să dispară.
În timp ce Phark este în prezent cea mai obișnuită tehnică CSS pentru înlocuirea imaginilor, există multe altele cu avantaje și dezavantaje diferite. De exemplu, Phark nu reușește să arate nimic utilizatorului dacă imaginile sunt dezactivate, dar CSS este activat, un dezavantaj relativ mic. În plus, înlocuirea imaginilor CSS nu este destinată tipografiilor pe scară largă (adică articole), dar este cea mai bună pentru butoane, titluri și alte cantități mici de text. Pentru a afla mai multe despre alte tehnici de înlocuire a imaginilor bazate pe CSS, CSS-Tricks a scris un rezumat bun al tuturor tehnicilor de înlocuire a imaginilor bazate pe CSS numite Nine Techniques for CSS Image Replacement.
Înlocuirea standard a imaginilor este ideală pentru situații extrem de decorative și pentru cantități mai mici de text. Ce faceți când doriți să înlocuiți textul pentru un întreg articol dintr-un articol? Dar înlocuirea titlurilor și menținerea textului selectabil? Răspunsul este unul dintre tehnicile avansate de înlocuire a imaginilor. Pentru toate scopurile intensive, există trei înlocuiri diferite de imagini avansate disponibile în acest moment (dacă știți despre oricare alții, vă rugăm să le lăsați în comentarii): bazate pe Flash, bazate pe Javascript și bazate pe PHP.
Primul dintre tehnicile avansate de înlocuire a imaginii care a sosit pe scena era înlocuirea scalabilă Inman Flash (sIFR), proiectată inițial de Shaun Inman ca IFR și ulterior avansată la desemnarea sIFR de către Mike Davidson și Mark Wubben, care susțin în prezent proiectul.
Pro-uri:
- Cea mai bună redare a fontului datorită alinierii
- Păstrează textul semantic original și accesibil
- Degradează grațios în textul original
- Textul este selectabil (parțial)
- Scenă neobișnuită
CONS:
- Nu este potrivit pentru corpuri mari de text
- Configurarea poate fi complicată și dificilă
- Necesită Flash și Javascript
- Timpii de încărcare pot fi lenți
- Imprimarea este problematică
Dacă doriți să învățați cum să implementați și să vedeți exemple de sIFR, NETTUTS + are un tutorial excelent despre cum să utilizați sIFR sau să vizitați Site-ul oficial pentru sIFR2 sau Site-ul oficial pentru sIFR3, cea mai recentă versiune.
Cea mai recentă tehnică populară de înlocuire a imaginilor avansate se numește cufón, presupus un cuvânt portmanteau "personalizat" și "font", conform unor. Ea "își propune să devină o alternativă demnă la sIFR, care, în ciuda meritelor sale, rămâne încă dificil de configurat și folosit" în conformitate cu wiki cufon.
Pro-uri:
- Tehnica de înlocuire rapidă cea mai rapidă
- Păstrează conținutul original de text semantic
- Degradează grațios în textul original
- Nu necesită pluginuri (cum ar fi Flash)
- Scenă neobișnuită
- Configurare ușoară
CONS:
- Textul nu poate fi copiat și lipit (textul nu poate fi selectat)
- Licențierea de fonturi este neclară în ceea ce privește cufonul
- Justificarea textului și efectele nu funcționează
- : starea de tip hover are multe ciudățenii
- Necesită Javascript
Dacă doriți să învățați cum să implementați și să vedeți exemple de cufon, NETTUTS + are un scenariu excelent și un tutorial despre cum să utilizați cufon sau să vizitați Site-ul oficial al lui cufón.
Tehnologia de înlocuire a imaginilor Facelift (FLIR) este diferită de cele două anterior menționate, deoarece utilizează scripting de la server cu PHP și GD Image Library. Acesta a fost dezvoltat de Cory Mawhorter pentru a oferi o tehnică automată de înlocuire a fonturilor de pe server.
Pro-uri:
- Păstrează conținutul original de text semantic
- Nu necesită pluginuri (cum ar fi Flash)
- Problemele legate de licențierea literelor sunt puțin probabile, dacă vreodată
CONS:
- Textul nu poate fi copiat și lipit (textul nu poate fi selectat)
- Redarea fonturilor este în comparație cu alte alternative
- Necesită un server web cu PHP și GD
- Necesită mai multe resurse server
- Poate fi dificil de configurat
Dacă doriți să învățați cum să implementați și să vedeți exemple de FLIR, Divito Design are un tutorial bun despre cum să utilizați FLIR sau să vizitați site-ul oficial al FLIR
CSS3 este relativ nou în peisajul web și nu a obținut încă o utilizare pe scară largă. Una dintre cele mai interesante caracteristici ale CSS3 este regula @ font-face. Există două obstacole mari pentru utilizarea @ font-face chiar acum. În primul rând, nu multe fonturi de fonturi și fonturi suportă @ embedding de tip font-face. Unele licențe sunt vagi și nu se referă la încorporarea web, în timp ce unele interzic în mod explicit de încorporare @ font-face. Pentru o listă de fonturi care acceptă @ embedding font-face, puteți webfonts.info are o listă excelentă. Al doilea obstacol este că nu toate browserele acceptă regula @ font-face, așa cum se arată în tabelul de suport al browserului de mai jos.
Sursa de imagine: Wikipedia De acum, ruleta @ font-face permite încorporarea fonturilor în IE6, IE7, IE8, FireFox 3.5+ (PC & Mac) și Safari (PC & Mac) Acest lucru înseamnă că, într-o formă sau modă, webfonturile vor fi disponibile pentru aproximativ 90% utilizatori.
În mod ideal, această primă declarație de tip @ font-face ar fi parte a unui fișier CSS difuzat prin comentarii condiționate numai la IE cu versiunea EOT a fontului. A doua declarație @ font-face ar trebui să fie un fișier de fonturi OTF sau TTF. De asemenea, din cauza restricțiilor de securitate ale browserului, adresa URL sursă pentru declarații ar trebui să fie relativă (deși unele browsere nu acceptă adrese URL absolute).
Accentsconagua
@ font-face font-family: "Anivers"; src: url ("Anivers.eot"); @ font-face font-family: "Anivers"; src: url ("Anivers.otf"); Da. Cam despre asta e.
corp font-family: Aniverse, "Helvetica Neue", Helvetica, Arial, sans-serif;
Odată ce au fost făcute declarații, familia font-ului care a fost declarată poate fi folosită ca orice alt font care ar fi disponibil în sistemul unui utilizator. Acesta este un nou teritoriu interesant pentru web designeri și dezvoltatori care va fi important de urmat în cursul lunilor următoare.
Programele de livrare @ font-face, cum ar fi Typekit și Typotheque, doresc să ofere un ajutor semnificativ în ceea ce privește negocierea licențelor de încorporare web cu turnătoriile mari de fonturi. În plus, cu toate întrebările legate de închirierea fonturilor pentru încorporarea web-ului, s-ar putea să fie dificil să obțineți câteva (sau toate) fonturi pe care le veți utiliza într-un design web pentru utilizarea în software-ul dvs. de editare a imaginilor. Există două soluții pentru aceasta: 1) proiectarea în browser așa cum se recomandă mai sus, sau 2) utilizarea de tipărire similare pentru a proiecta paginile statice ale paginilor.
Tipografia pe web este în fază incipientă în comparație cu tipografia în imprimare, difuzare și film. Urmăriți alte forme de media pentru folosirea tipografică inventivă. Data viitoare când vă aflați la cinematograf, examinați toate posterele de film și acordați o atenție deosebită tipografiei folosite în previzualizări și remorci. Aruncați o privire la tipografia atât în interiorul, cât și pe coperta cărților de la librăria dvs. locală. Examinați-vă colecția DVD sau revistele preferate pentru inspirație.
Online, urmați experți online de tipografie cum ar fi Pentru un web frumos, îmi place Tipografia, TipInspire sau webfonts.info. Mai jos, veți găsi o listă de link-uri recomandate pentru citire pentru mai multe informații despre tipografia web pe lângă NETTUTS + și cele menționate mai sus.
Sperăm că aceste șase sfaturi vă vor ajuta data viitoare când lucrați la tipografia pentru web. Este un moment interesant să fii un tipofil care lucrează pe web.
