Vestea bună este că tipografia adaptivă nu este atât de dificil de realizat. Doar au nevoie de un pic de timp pentru a decide modul în care textul va răspunde la schimbările de dimensiunea ecranului, și apoi efectuați modificările.
Principiile fontului adaptiv
Există două principii de bază pentru a crea un tipografie adaptiv eficient. În primul rând - schimba dimensiunea fontului. Acest lucru înseamnă că fontul se va schimba în funcție de dimensiunea ecranului. Al doilea - optimizarea lungimii rând, prin care se menține lizibilitatea. Acest lucru înseamnă că pentru unele ecrane vor fi mai eficiente pentru a menține șirul de caractere lungime scurtă, chiar dacă textul ar putea fi, teoretic, întins în lățime.
Modificarea dimensiunii fontului de REMS
Cei mai mulți designeri pentru a determina fontul dimensiuni, utilizați sau pixeli, sau SMM. Ems sunt opțiune mai potrivită, deoarece acestea permit utilizatorilor să schimbe dimensiunea fontului în browser. Dar ems se referă la elementul de bază, ceea ce înseamnă că acestea sunt mai complexe decât de a utiliza pixelii care este complicat și mai mult într-un design adaptiv, în cazul în care există o mai mare nevoie de a monitoriza dimensiunea și raportul.
Rems oferă o alternativă mai bună ems. Ei lucrează aproape identic, cu excepția unei diferențe cheie: unitatea de rem se referă la elementul HTML, mai degrabă decât părintele. Acest lucru face ca menținerea dimensiunea fontului corespunzătoare mai ușor.
Unitatea de rem este acum acceptată în toate browserele moderne majore, inclusiv Opera, începând cu versiunea 11.6, precum și IE9.
Din moment ce va fi folosind unitatea de real, vă asigurați-vă că le aplicați elemente în html, și nu la corp. Ar trebui să arate astfel:
Acum unități real va fi utilizat în mod implicit.
Apoi, trebuie să specificați dimensiunea fontului pentru fiecare dimensiune a ecranului. Avem nevoie de a experimenta cu dimensiunile de fonturi de pe dispozitive diferite, și să vedem ce e cel mai bine. Acest lucru depinde în mare măsură fonturile selectate și designul în ansamblu. De exemplu, CSS-cod ar putea arata ceva de genul:
Desigur, doriți să adăugați instrucțiuni suplimentare pentru elementele tale, cum ar fi, de exemplu, H1. Pentru a vedea cum arată într-adevăr fontul, puteți utiliza Web Font specimen.
Menținerea lungimii optime liniei
La acea vreme, ca schimbarea dimensiunea fontului este un pas destul de simplu un pic mai greu va fi pentru a menține lungimea corectă linie la mai multe dispozitive.
La un moment dat au existat o mulțime de discuții despre ceea ce este lungimea optimă a șirului, și mai ușor de citit. Dar, conform Institutului Baymard consens a fost atins - 50 - 75 de caractere pe linie.
Ei recomanda, de asemenea, utilizarea unei lățime fixă a containerului pentru conținutul. Dar acest lucru este contrar obiectivelor design adaptiv. Prin urmare, dacă dorim să ne menținem capacitatea de adaptare optimă la un șir lung, aceste recomandări vor fi abordate un pic diferit.
În primul rând, trebuie să se uite la dimensiuni diferite de ecran pentru care va fi creat designul, și să decidă ce font dimensiune pentru a alege, pentru a obține aproximativ 50 de caractere pe linie. Pentru ecrane foarte mici pentru a menține lizibilitatea, va trebui să se oprească pe opțiunea cu mai puține caractere. Dar încă mai trebuie să se concentreze pe numărul 50.
De asemenea, trebuie să se stabilească o lățime maximă (sau pauza puncte) pentru zonele de conținut de text. Uită-te la mărimea fontului pe care îl utilizați pentru o anumită dimensiune a ecranului, și apoi să definească lățimea conținutului containerului, atunci când în linia de aproximativ 75 de caractere. Este această lungime devine lățimea maximă a containerului.
De exemplu, pe dispozitivul pe care îl utilizați dimensiunea fontului implicit de 16px, si doriti dimensiunea fontului a devenit 20px (de exemplu, pentru acest exemplu, vom folosi un font serif Droid Serif). Acest lucru înseamnă că va fi pentru a cere 1.25rem dimensiunea fontului. În acest caz, dimensiunea fontului, lățimea containerului trebuie să fie 675px. Noi primim un număr mediu de 60 de caractere.
Pentru a seta lățimea containerului, trebuie doar să utilizați acest cod:
Puteți seta lățimea maximă a cusaturii pentru fiecare dimensiune a ecranului, sau doar pentru unele specifice. Pentru ecrane mai mici, puteți lăsa lățimea containerului, astfel încât textul este plasat pe lățime.
Astfel, este posibil să se stabilească două coloane sau trei - în funcție de dimensiunea fontului. Plasarea conținutului în coloanele face textul ușor de citit, precum și necesitatea de a schimba aspectul dispare.
Codul este destul de simplu.
Acum, pe ecranele de lățime mai mare de 1140 pixeli, textul este împărțit în două coloane, care ajută să facă lungimea liniilor mai ușor de citit.
Utilizarea de fonturi alternative
De multe ori, atunci când vine vorba de tipografie adaptiv, vedere trecut cu vederea faptul că fonturi diferite nu pot fi afișate la fel de bine pe diferite dimensiuni de ecran. Mai ales în cazul în care aktsidentnye fonturi.
Dar aceasta nu înseamnă că ei nu doresc să utilizeze web design receptiv. În schimb, puteți indica pur și simplu la diferitele elemente de pe ecrane mici și mari, fonturi diferite.
De exemplu, în proiectarea de desktop pentru antet, puteți utiliza fontul Script League. Dar mai multe display-uri melenkih, cum ar fi iPhone, trebuie să-l atât de mare, încât lectura va fi aproape imposibil.
Pentru a face acest lucru, trebuie doar să specificați codul:
Desigur, acest lucru se poate face nu numai pentru antet.
concluzie
Design-ul receptiv, o atenție este acordată în principal imaginile și aspectul general, tipografie, dar este, de asemenea, destul de un element important. Cel mai plăcut este faptul că nu tipgrafiku optimiza dificil pentru proiectarea de adaptare.
Dacă ați petrecut deja timp și efort pe alte elemente de design, este foarte important pentru ei și să-și petreacă o tipografie, pentru a menține lizibilitatea conținutului textului - o componentă importantă pentru crearea unor condiții optime de utilizare a site-ului.
Traducerea - Dezhurko