O privire în o mai bună tipografie pentru site-urile moderne

Textul digital poate fi formatat în atâtea arome. Odată cu avansarea ulterioară a fonturilor web și a script-urilor de browser, am văzut noul cod al proiectului pentru dezvoltatori. De asemenea, designerii web caută cea mai bună strategie pentru a-și codifica site-urile și pentru a construi un stil tipografic uniform între toate paginile lor.

O mulțime de designeri web profesioniști au scris pe această temă, inclusiv caracteristici și servicii actualizate. Trebuie să țineți cont de fiecare pagină web ca un document unic care vă va rupe designul de aspect rădăcină. În acest punct de vedere, este ușor de văzut cum poate să curgă tipografia de la pagină la pagină și să ofere o deschidere unică pentru creativitate. Și acest lucru devine mai ales evident clădire clase unice pentru paragrafe și titluri.

Mai jos o să intru în idei fantastice pentru designerii aspiranți de tipografie interesați de construirea de web. Blogurile, rețelele sociale și companiile încearcă mereu să își actualizeze actualul site web. Și stilurile CSS pentru tipografia web oferă o sursă excelentă pentru a începe să revigorați paginile.

Diferențe în Internetul de azi

Web-ul modern a avansat dramatic de la începutul anului 2000. Există o mulțime de noi caracteristici pentru designerii de web pentru a crea lucrări fantastice de design grafic, logo-uri, bannere și practic orice altceva. De asemenea, lansarea specificațiilor HTML5 și CSS3 și-au luat amploarea pe vechiul mod de construire a fonturilor web.

În prezent, este posibil să includeți propriile fonturi în CSS @ Font-face proprietate. Puteți folosi orice Tip adevărat(.ttf) sau OpenType(.otf) și stocați o copie locală pe serverul dvs. Apoi, cu unele magie CSS3 includeți familia oriunde pe pagina dvs. Web!

Numai în această tehnică este posibil să vedem cât de dezvoltat a devenit Internetul nostru modern.

Și cu jQuery în creștere în popularitate în fiecare zi nu este o surpriză putem construi efecte uimitoare de animație cuplat cu fonturi personalizate. Ca o alternativă la metoda de mai sus pluginul TTFGen pentru jQuery vă permite să includeți orice font TrueType pe pagina dvs. Web.

Această metodă este un pic mai sigură, deoarece nu aveți nevoie de un browser modern care să suporte standardele CSS3 pentru ca acesta să funcționeze. Desigur, browserele moștenite, cum ar fi Internet Explorer 6, se vor strădui să facă corect.

Dar mulțumesc bunătate majoritatea utilizatorilor au trecut la software-ul de navigare mai nou, care suportă aceste standarde! Și când dezvoltați pentru web, ar trebui să vă gândiți exact la cine vă propune piața. Nu poți să-i mulțumi pe toată lumea, dar poți încerca să te apropii destul de mult.

Scopul tipografiei digitale

Un fel de idee ciudată de luat în considerare, dar care este scopul real al textului digital? Pentru a transmite informații, a împărtăși surse și a vă oferi opinia lumii utilizatorilor de internet. Textul este forma cea mai simplistă de media pentru a împărtăși gândurile și ideile. Dar este, de asemenea, foarte complex și conține detalii importante pe care fotografiile / videoclipurile nu le pot folosi.

Vizitatorii dvs. sunt probabil să găsească site-ul dvs. pe baza cuvintelor cheie din textul sau titlurile dvs. - doar un alt motiv pentru a acorda o atenție deosebită copiei dvs. web. Și odată ce ați câștigat o anumită atenție la site-ul dvs., trebuie să vă mențineți concentrarea. Acest lucru este foarte ușor de făcut cu titluri îndrăznețe și texte de pagină paralele.

Dacă scrieți un articol sau un tutorial, atunci trebuie să utilizați un limbaj clar. este tot atât de important este modul în care arată textul paginii dvs. și calitatea conținutului dvs.. Cu cât este mai mare textul dvs., cu atât va fi mai ușor să citiți și să căutați cuvinte cheie. Și din moment ce paragrafele vor conține majoritatea conținutului dvs., ar trebui să vă petreceți mult timp cu prototipuri pentru potrivirea corectă. Paragrafele sunt folosite pentru a vă transmite mesajul în bucăți de dimensiuni mici defalcate în propoziții. Înțelegeți modul în care scrieți și planificați înainte să obțineți un aspect adecvat al paginii.

În plus, cu textul paginii dvs. apar materiale media și conținut secundar. Dacă paragrafele conțin informații primare, poate aveți grafice sau imagini pentru a arăta paginile. Aceste accente sunt doar atingerea corectă menținând utilizatorii care se deplasează prin site-ul dvs..

Videoclipurile și imaginile sunt capabile să vă distrugă conținutul și să pară ca cititorii se mișcă mai repede prin articolul dvs. Folosiți aceste lucruri cu ușurință și nu permiteți nimic să vă copleșească mesajul de bază. Utilizatorii sunt (în cea mai mare parte) venind pe site-ul dvs. pentru informații și nu doresc prea multe distragere a atenției.

Toate celelalte opțiuni de formatare sunt folosite pentru a specifica funcționalitatea sau scopul. De exemplu, textul hiperlinkului este adesea o culoare diferită de restul pentru a ieși ca “clickable”. Puteți lucra cu cuvinte îndrăznețe sau cu litere înalte, adăugând accentul în propozițiile voastre. Și utilizarea bloccoturilor sau textului preformat poate ajuta la delimitarea respectivelor declarații fundamentale sau a codului web.

Anteturi de pagini web

Unul dintre cele mai importante elemente ale tipografiei dvs. web este titlul etichetelor. Dacă nu sunteți familiarizați cu rubricile HTML de la

la

cu cea mai mare importanță, iar cea din urmă cea mai mică. Acest marcaj este util pentru a înțelege, deoarece Google clasifică, de asemenea, domeniul dvs. și paginile web pe baza structurii de conținut. Astfel, aveți în cele din urmă controlul asupra cuvintelor cheie pe care le utilizați și a nivelului de titluri pe care le-ați solicita.

Chiar dacă specificația standard HTML5 include până la 6 stiluri diferite de titlu, aș recomanda utilizarea între 3-4. Nu este necesar să le includeți pe toate în paginile dvs. Și este, de asemenea, foarte puțin probabil că veți găsi o utilizare pentru 6 titluri diferite. Când vă așezați mai întâi pentru a vă construi stilurile, încercați să redactați câteva exemple de titluri pentru a vedea ce vă place.

Photoshop este excelent pentru acest scenariu. De asemenea, puteți încerca să codificați diferite titluri în HTML pentru a vedea cum arată în browser. Ceea ce este important este să lucrați cu fluxul de pagini și cu titlurile de proiectare în funcție de rangul lor.

De exemplu, dvs.

tag-urile ar trebui să fie cele mai multe dintre toate titlurile paginilor.

și

sunt cele mai populare etichete și recomandate de Google pentru accesarea cu crawlere a conținutului paginii. Utilizarea de efecte de design, cum ar fi font aldine, subliniază, margini întrerupte sau culori diferite, vă va ajuta să vă sari de pe titlu.

Spațierea este, de asemenea, importantă atunci când vine vorba de titluri, sau orice bucată din conținutul dvs. pentru ceea ce contează. Asigurați-vă că adăugați margini suplimentare între rubricile dvs. și zona principală de conținut. Dacă ați făcut fontul suficient de mare, fiecare poziție ar trebui să iasă în evidență deoarece este propriul bloc de bază. Acest aspect este ideal dacă doriți să atrageți atenția cititorilor cu un mesaj clar.

Construirea unor hyperlink-uri unice

Există o mulțime de spus pe tema legăturilor de pagină. Într-un fel sau altul, va trebui să utilizați hyperlink-uri în codul dvs. Acestea sunt extrem de importante ca interfața principală de navigare între diferite pagini de pe site-ul dvs. De asemenea, puteți să vă conectați la alte bloguri sau chiar la postările dvs. de blog arhivate pentru referință la o dată ulterioară.

Ar trebui să alegeți cu atenție textul de exploatație pentru link-ul dvs. Acesta este conținutul specific care va fi accentuat de un stil de legătură. De exemplu, "faceți clic aici" este foarte popular și este folosit pentru descărcări directe de cele mai multe ori. Încercați să evitați această abordare sistematică și, în schimb, obțineți un pic de creativitate cu textul dvs. de hyperlink. Vizitatorii dvs. sunt mult mai susceptibili să facă clic pe un link dacă pot recunoaște și contextul și poate să-și dea seama ce va conține noua pagină.

Atunci când mergi la stilul de link-uri ar trebui să ia în considerare următoarele - cum vor arăta modificările în configurarea paginii dvs., ce tip de culoare de fundal lucrați, și ce culoare este textul pentru contrast?

Link-urile ar trebui să apară în mod flagrant în afara paginii ca elemente cu clicuri - la urma urmei, aceasta este funcția lor. Acesta este motivul pentru care vechea albastră cu efect de text subliniat funcționează atât de bine. Dar dacă descoperiți că o culoare alternativă funcționează mai bine, ar trebui să o încercați. Nu există o soluție de tip one-size-fit-all pentru modelele de legături. Răsfoiți puțin în jurul webului și cu siguranță veți pune împreună ceva excepțional.

Un punct de interes este câteva caracteristici pe care ar trebui să le încercați evitând. Lucruri, cum ar fi schimbarea familiei de caractere text sau dimensiunea fontului, pot fi foarte enervante. Acest lucru va face ca textul să denatureze și să se miște, ceea ce poate plasa cursorul mouse-ului doar din zona de legătură. Într-o manieră similară ar trebui să evitați adăugarea de margini suplimentare / umplutură la link-uri sau efecte hover. Acestea funcționează mult mai bine atunci când rămâneți simplu. O schimbare a culorii sau o subliniere adăugată duce la o lungă experiență a utilizatorului.

Construirea de liste de stiluri

Șansele sunt bune, va trebui să lucrați și cu liste la un moment dat. Sunt incluse listele ordonate și neordonate în HTML. Acestea sunt perfecte pentru a oferi o mică colecție de idei, produse, persoane sau linkuri online într-o cantitate foarte mică de spațiu. Stilul nu este tot atât de diferit de paragrafe sau titluri.

Vizitatorii dvs. ar trebui să înțeleagă imediat că se uită la o listă de articole. Păstrați fiecare articol din listă separat și localizat pe o linie nouă în pagină. Adăugați un spațiu suplimentar între ele, dacă este posibil. Acest lucru va da o cameră de respirație și va apărea ca o despărțire plăcută pentru textul articolului. Dacă doriți să puteți chiar bold font sau liniuță listează un pic pentru a sta departe de margini standard de aspect.

Adăugarea de funcții suplimentare pentru a vă ajuta să ieșiți în evidență nu este o cerință. Dar dacă vă bucurați de stilul de layout-bloc, acesta se concentrează pe liste. Puteți încerca să adăugați un fundal ușor sau pictograme. A List Apart are o mare scriere pe listele de imbold care cred ca include si cateva tacturi de cunostinte foarte puternice. Dar dacă țineți conținutul paginii liniar și utilizați blocuri de listă numai atunci când este necesar, nu trebuie să întâlniți nicio problemă de proiectare.

Cum să creați cotații în pagină

Apariția citatelor și citărilor sunt foarte limitate în aceste zile. În prima pagină web, nu ați vedea foarte mult aceste elemente în uz. Poate în editoriale, eseuri sau documente educaționale. Dar HTML5 a actualizat cu siguranță regulile un pic ceea ce face citarea blocquotes mult mai ușor.

Site-ul HTML5 Doctor include o resursă fascinantă pentru discutarea acestui subiect exact. Acestea discută despre utilizarea conținutului în interiorul bloccotelor, care apar în interiorul structurii documentului. Deci, puteți include titluri, paragrafe și chiar liste și subsoluri. Utilizarea principală a