Tipografie frumoasă în designul web. Tipografie frumoasă în Web Design Tipografie frumoasă

Curatorul de resurse pe fonturile de tip Wiremy Schoaf a ales exemple de site-uri cu soluții de font interesante și a descris avantajele și dezavantajele acestora.

În combinație cu o textura subțire de hârtie, această tipografie creează un sentiment că citiți cartea.

Pur și simplu gumă.

Datorită fonturilor Web, ajutând la potrivirea tipografiei ambalajului produsului la locul de tipografie al producătorului. Acest lucru se întâmplă din ce în ce mai des. Site-ul pur și simplu gum a ales Gotham în desenarea mărcii sale, care păstrează identitatea constantă și pe on-line și pe canale offline.

Acest site este un bun exemplu despre modul în care o singură remiză este uneori singura necesară. Folosind saturația diferită a Gotham și de a fixa anteturile în majuscule, pur și simplu guma a instalat o ierarhie clară a tuturor cu o intensitate.

Logo-urile din antet și subsol în format PNG, astfel încât acestea pierd claritatea și scalabilitatea fontului web. Utilizarea unui font web pentru un logo nu este întotdeauna fezabilă, mai ales dacă aveți nevoie de un control bun asupra curlingului; Cu toate acestea, imaginea din SVG va fi potrivită în acest caz mai bună decât PNG, deoarece poate scădea și, în același timp, să-și mențină claritatea.

rezumat

Din fericire, exemplele au fost demonstrate mai sus, deoarece anumite soluții în tipografie pot afecta designul. Aici aveți niște gânduri-cheie:

Dacă doriți să utilizați câteva lovituri, dezvoltați un sistem constant într-o tipografie specifică și lipiți-o.
Pentru textul principal, alegeți un font cu o inscripție italică normală, grasă și o fitness în stil îndrăzneț.
Dacă veți alege un design popular, încercați să îl combinați cu un rezultat mai puțin pentru a face distincția.
Faceți un ghid de stil la începutul proiectului pentru a garanta utilizarea secvențială a fonturilor între membrii echipei dvs.
Utilizați contrastul și nu similar cu designul.
Nu utilizați fonturi pe ecran pentru textul principal. Utilizați designul în destinație.
Nu vă fie frică să utilizați doar un șapte de remiză. Puteți seta ierarhia cu ajutorul diferitelor saturații și stilul unei familii.
Dacă logo-ul dvs. vă permite să îl faceți în SVG pentru a oferi definiție și scalabilitate.

Un site excelent începe cu o tipografie frumoasă. Și, deși unele reguli pot fi rupte, uneori, va fi imediat înapoi la principiile de bază ale a ceea ce este o tipografie bună și cum să o creați.

Acest memento vă va ajuta cu o privire nouă la proiectele dvs., gândiți-vă la noi abordări sau reveniți la un design mai simplu.

Deci, astăzi, ignorăm tendințele modei, concentrați-vă pe teoria tipografică și despre modul în care "regulile" ne pot ajuta să creăm texte frumoase.

Dimensiune și ierarhie

Mărimea contează. Pentru a crea o tipografie cu citire-de-consumabilă, poate fi un factor decisiv. Textul mic este greu de luat în considerare, nu ceva de citit, dar prea mare, va depăși înălțimea liniei și va duce la confuzie.

O tipografie lizibilă are mai multe straturi de ierarhie. Aceste straturi sugerează utilizatorului care trebuie citit în primul, în cel de-al doilea și în al treilea rând. De asemenea, există o ierarhie evidentă în dimensiunile textului - o mărime a titlurilor, cealaltă, la textul principal și al treilea la subtitrări.

Urmărirea și kerningul

Urmărirea și kerningul sunt adesea confundate. Kerning este o schimbare selectivă în intervalul dintre litere, în funcție de forma lor. Urmărirea este o schimbare în intervalul dintre seturile de litere, adică paragrafe sau toate blocurile de text.

Kerningul este adesea aplicat elementelor specifice pentru a crea o claritate, îmbunătățirea lizibilității și, chiar, la fragmente elegante de text. Urmărirea este adesea folosită pentru a restrânge prea mult fontul textului principal.

Limitați numărul de stiluri de stil aplicate

Pentru majoritatea proiectelor, există două sau trei stiluri. Pentru a nu face o greșeală în alegerea, găsiți familia de font cu cantitate mare Variații de desen disponibile. Fonturile de cea mai înaltă calitate au o mare varietate de stiluri - grăsimi, obișnuite, italice, condensate, negre etc.

Amestecați și comparați stilurile

Vă recomandăm să alegeți două stiluri diferite. Cea mai obișnuită pereche este Serif și Sans Serif. Conectarea diferitelor stiluri și trasează, căutați litere cu aceeași înălțime și formă a castronului (spațiu în interiorul literelor închise, cum ar fi "O").

Aceste detalii mici vor afecta în mod semnificativ modul în care aceste fonturi vor privi împreună și despre confortul textului de citire.

Transfer și off.

În majoritatea cazurilor, transferurile de șir și nu au nevoie de ea. În cazul textului online, aceste tehnici complică doar asimilarea și înțelegerea rapidă. Transferurile interferează cu citirea, iar puterea completă nu duce adesea la formatarea necitită.

Nu schimbați fonturile

Nu modificați niciodată fontul. Nu încercați să o faceți mai groasă, mai subțire sau mai mare. Este mai bine să alegeți altul.

Designerii de dezvoltare a fontului petrec mult timp că acest font este consultat și satisface stilul de stil. Nu este nevoie să schimbați nimic. Nu veți putea să o îmbunătățiți și, în majoritatea cazurilor, va strica totul.

Dacă fontul nu vă potrivește, căutați altceva. Utilizați instrumentul de fonturi similare Identificon, instrument care definește fonturi similare.

Contrast

Utilizați tipografia pentru a crea contrastul. De asemenea, cum să creați o ierarhie pe care o utilizați diferite dimensiuni, să creați un interes vizual prin schimbarea greutății, culorii și stilului de font.

Culoarea este una dintre cele mai eficiente și mai eficiente și mai eficiente moduri simple Crearea de contrast. Contrast perfect - Textul întunecat pe un fundal luminos (sau invers). Aveți un set aproape nelimitat de culori care vă vor ajuta să atingeți acest obiectiv. Redarea cu culoarea și tipografia, rețineți că unele combinații de culori, de exemplu, roșu strălucitor pe albastru strălucitor, pot fi destul de dificultate.

Când vine vorba de contrast, pentru a crea un text ușor de citit cel mai bine un fundal simplu. Dar dacă conține astfel de elemente vizuale ca imagini sau modele, apoi creșteți dimensiunea literelor - aceasta va crea o separare între fundal și elementele de text ale prim-planului.

Formatul benzii de colectare

Formatul benzii de apelare este dimensiunea textului recipientului. Poate fi lățimea întregului cadru text sau singura coloană.

Formatul șirului este important deoarece numărul de caractere (inclusiv spațiile, caracterele speciale și semne de punctuație) pe ecran afectează lizibilitatea. Dacă rândurile sunt prea lungi sau prea scurte, aspectul utilizatorului va fi dificil de mutat.

Din elementele stilului tipografic: "Orice număr de caractere, variind de la 45 la 75, este considerat ca o lungime satisfăcătoare a șirului pentru un set unic de coloană. Șirul de caractere (inclusiv literele și spațiile) este considerat perfect. Pentru un set multicolon, media ideală va fi un șir, un simbol lung de 40-50. "

Chiar și în ciuda faptului că, la momentul publicării acestei cărți, nimeni nu sa gândit la tipografia mobilă, recomandarea referitoare la setul multicolon nu și-a pierdut relevanța. În cazurile cu ecrane mici, puteți utiliza chiar și 35 de caractere pe șir.

Traducerea articolului Carrie Cass

Această listă este compilată în funcție de rezultatele II. 2008. Anterior "Hit Parads" pot fi găsite și.

Fiecare exemplu este însoțit de un scurt comentariu și apăsând ecranul de ecran duce la site-ul original.

Conferința de semințe

Fără bliț, fără poze, fără zgomot; Doar fontul bine stilizat și textul bine scris: dovada reală că numai cu fontul poate fi obținut un rezultat excelent. Aș dori să văd câteva exemple de acest fel.

Proiectarea știrilor.

Marele contrast între titlu și conținutul principal, o mulțime de spațiu pur și o organizație bună.

Omniti.

Logo plăcut, text clar și o schemă foarte bună de culoare. Aflați mai multe despre dezvoltarea designului poate fi citită.

Designr.it.

Magnifică logo-ul (știe cineva ce fel de font?) Și multe părți rafinate.

Vedere de design.

Andy Ratddlezh - Un designer care în practică aplică aceleași principii care promovează. Îmi place cum schimbă dimensiunea arcului în funcție de data publicării articolului, astfel încât textul cel mai proaspăt corespunde celui mai mare Kehal.

Wordpress.org & wp 2.5.x admin

Deși platforma WordPress Blogger nu se bazează pe site-ul web, dar site-ul lor este afișat pe mii, dacă nu milioane, ecranele noastre în fiecare zi. Aș dori ca mai multe aplicații online și offline, precum și bine.

Ourtype.

Chiar nu am vrut să includem acest site în revizuire, deoarece blițul este folosit pe acesta. Cu toate acestea, unele fonturi excelente sunt prezentate (și unele dintre favoritele mele trebuie să adauge).

Puntea.

Un alt site care se bazează doar pe fonturi în tot. Exemplu excelent de ierarhie și marcare. Cine a spus că "fotografia spune mai mult de o mie de cuvinte"? Nu, fontul spune mai bine.