Cum să faceți tipografia dvs. receptivă

  • Cunoștințe necesare: Cunoștințe de bază CSS și HTML. Familiarizarea cu tipografia
  • Necesită: Editorul dvs. de text preferat și un browser
  • Timpul proiectului: Aproximativ 30 de minute

Fișier de asistență 1

Ne-am obișnuit să ne gândim la tipul de dimensionare relativ la dimensiunea de bază a fontului, folosind ems sau procente. Cu design web receptiv , scriem o mulțime de reguli și selectăm puncte de întrerupere pentru a ne asigura că aspectul nostru se potrivește multor dimensiuni de ecran. Tipul este un fluid minunat, dar nu este o mărime potrivită tuturor. Ne vom uita la câteva sfaturi rapide pentru obținerea dvs. tipografie pentru a se potrivi frumos cu aspectul dvs., indiferent de lățimea dispozitivului sau a ecranului.

Desigur, există mai multe lucruri în acest sens decât poate fi acoperit într-un tutorial. Deci, există și o mulțime de resurse utile enumerate mai jos.

01. Obținerea tipografiei la scară

Ah, design web receptiv! Rețele minunate de fluid și interogări media care fac ca proiectele noastre să se potrivească cu ecrane de orice dimensiune. Din fericire pentru noi, tastați cântare aproape la nesfârșit și reveniți în orice container de dimensiuni pe care i-l oferim. Nu trebuie să ne gândim la aspectele noastre receptive ... sau nu? În mod ideal, atunci când aspectele noastre generale se întind, la fel ar trebui să fie și tipul nostru și iată o modalitate de a face acest lucru.



02. Pagina noastră de eșantion

În scopul acestui exemplu, am pregătit o pagină foarte simplă de utilizat pentru demonstrație folosind primele paragrafe din Aventurile lui Alice în Țara Minunilor ca conținut. Sperăm că site-ul dvs. va avea ceva mai mult, dar simplitatea se potrivește perfect nevoilor noastre pentru această demonstrație și aceeași tehnică poate fi aplicată paginilor mai complexe.

Să aruncăm o privire la sursa noastră pentru a vedea ce avem sub capotă. Un H1 pentru titlul nostru și câteva paragrafe înfășurate într-un div conținând, au atribuit în mod convenabil clasa wrap. Vom folosi acest container pentru a ne ajuta să gestionăm lungimile liniei în acest exemplu. Pentru propria dvs. muncă, lățimea acestui container va fi determinată de rețeaua dvs. și de comportamentele sale receptive, dar se aplică aceleași idei.

O scufundare rapidă în CSS arată că am stabilit dimensiunea fontului corpului la 100% (aproximativ 16 px pentru referință). Și fiecare element de text este dimensionat în ems. Drăguț și rudă! Suntem la un început bun:

corp {
dimensiunea fontului: 100%;
înălțimea liniei: 1,6875;
font-family: Georgia;
}

Avem configurată scala de tipografie de bază, așa că acum să vedem cum se menține aceasta la diferite dimensiuni de ecran.

03. Verificarea mai întâi a celui mai mic ecran

Să începem să ne uităm la aspectul nostru la o lățime foarte mică a ecranului, să spunem ceva în jur de 320 pixeli lățime. Probabil ce ați vedea pe acele lucruri populare ale dispozitivelor mobile.

Inițial la această lățime îngustă, lungimile noastre de linie sunt puțin mai scurte decât lungimea optimă general acceptată de 45 și 75 de caractere. Sau, dacă nu sunteți un fan al numărării personajelor, este posibil să observați că liniile se simt scurte și să îngreuneze urmărirea textului. Personal, am tendința de a merge cu simțul cititului de mai multe ori.

Pentru a obține puțin mai mult spațiu pentru o lungime confortabilă a liniei, am putea reduce dimensiunea totală a tipului sau am putea face containerul un pic mai mare. Deoarece acesta este un tutorial despre tipul de dimensionare, voi merge cu primul, dar acesta din urmă ar fi și o opțiune complet acceptabilă.

Pentru a avea grijă de asta, să scriem o interogare media pentru o lățime maximă de 400 pixeli. Da, nu este exact 320 de pixeli, dar prefer să stabilesc puncte de întrerupere în funcție de locul în care designul arată nevoia lor, nu pe măsurători speciale ale dispozitivului.

Cel mai simplu mod de a schimba dimensiunea tuturor tipurilor este de a schimba dimensiunea atribuită noastră proprietatea dimensiunii fontului:

@mediu doar ecran și (lățime maximă: 400 px) {
corp {font-size: 90%;}
}

Datorită faptului că am dimensionat inițial tot tipul nostru cu ems, putem face această schimbare peste tot cu o singură linie. Da, pentru dimensionarea tipului relativ!

cum se utilizează pensula în Photoshop

04. Mergând mai sus

Dacă facem așa cum fac designerii web și continuăm să redimensionăm fereastra browserului nostru mare, containerul nostru de dimensiuni relativ continuă să crească și textul nostru revine pe măsură ce mergem. Exact la ce te-ai aștepta. Dar fii cu ochii pe lungimea liniei. Când începe să arate și să se simtă prea mult?

La o lățime de aproximativ 800 de pixeli (din dimensiunea generală a ferestrei browserului), lungimile liniei încep să pară incomod de lungi. Se pare că este un moment bun pentru a adăuga un alt punct de întrerupere pentru tipul nostru.

@mediu numai ecran și (lățime maximă: 800 px) {
corp {font-size: 100%;}
}

@mediu doar ecran și (lățime maximă: 1100px) {
corp {font-size: 120%;}
}

Iată cum arată pagina noastră acum la orice lățime a ferestrei între 800 și 1100 pixeli lățime. Avem încă puțin spațiu pentru a lucra și acum tipul nostru îl umple puțin mai frumos:

De data aceasta scriem două interogări media. Unul cu o lățime maximă de 800 pixeli, cu dimensiunea fontului corpului setată la 100%, care acoperă totul între o lățime a ferestrei de 500 pixeli și o lățime a ferestrei de 800 pixeli. Apoi o secundă pentru când lățimea ferestrei noastre este peste 800 pixeli, astfel încât să putem crește dimensiunea de bază a fontului nostru.

Am mărit dimensiunea de bază a fontului la 120% odată ce am trecut de 800 de lățimi pentru a obține lungimea liniei un pic mai mult acolo unde îmi place. Desigur, acest lucru este un pic subiectiv și depinde și de conținutul în sine și de conținutul din jur. Alegeți puncte de întrerupere și modificări ale dimensiunilor care au sens pentru dvs. și designul dvs. Citirea confortabilă și aspectele echilibrate sunt obiectivul aici. Testarea aspectelor pe mai mult decât un browser desktop redimensionat vă va ajuta să ajungeți și în cele mai bune locuri pentru acestea.

05. Sus sus și departe!

Puteți ghici ce urmează, voi continua să fac fereastra browserului mai largă și să văd ce se întâmplă. Nu este surprinzător, deoarece lungimile liniei devin mai lungi și încep să se apropie din nou de lungimi insuportabile în jurul valorii de 1.100 pixeli. E timpul pentru un alt punct de întrerupere? Am putea continua să continuăm așa la nesfârșit, dar asta nu ar părea atât de inteligent, asta începe să pară nesfârșit!

Din punct de vedere tehnic, tipul dvs. poate continua să se scară la nesfârșit. Cu toate acestea, este posibil ca aspectul dvs. și imaginile dvs. să nu fie. La un moment dat trebuie să punem pauzele. Și pentru această demonstrație simplă, am decis că punctul este de 1.100 de pixeli.

Rămâne de scris o ultimă interogare de tip media. Vreau ceva care să oprească creșterea lungimilor noastre de linie, astfel încât să putem îngheța lucrurile în acest moment în care avem lungimi de linie acceptabile. Cel mai simplu mod de a face acest lucru este să puneți o lățime maximă pe div care conține textul nostru.

Mai întâi trebuie să determinăm lățimea aproximativă a divului conținut în pixeli. Dacă fereastra browserului nostru are o lățime de 1.100 pixeli, iar divul nostru de înfășurare are o lățime de 70%, un pic de matematică ne spune că divul nostru are o lățime de aproximativ 770 pixeli. (1.100 * .7x).

Înarmat cu asta, vom edita ultima noastră interogare media astfel:

@mediu doar ecran și (lățime minimă: 1100px) {
corp {font-size: 120%;}
.wrap {max-width: 770px;}
}

Demo-ul nostru este la fel de mare pe cât am decis că este permis să obținem:

Acolo îl avem. O tehnică simplă pentru a vă menține tipul frumos și confortabil de citit pe o varietate de dimensiuni de ecran.

06. Pentru a rezuma totul

Chiar și din acest exemplu simplu, probabil că începeți să vedeți că ați putea fi mult mai detaliat despre locul în care adăugați puncte de întrerupere pentru tipul dvs. pentru a controla lungimea liniei. Atunci ce zici de conducere și ierarhie? Acestea sunt, de asemenea, afectate atunci când dimensiunea containerului și a tipului se schimbă. Sunt atât de multe de luat în considerare!

Urmăriți tipul dvs. și apoi faceți ajustări acolo unde are sens pentru aspectul dvs. și proiectul dvs. Nu este vorba de câte interogări media sau puncte de întrerupere adăugați. Este vorba de a vă face designul solid pentru dvs. și pentru oricine îl folosește.

07. Lecturi suplimentare

Această demonstrație simplă este doar vârful aisbergului. Dacă tipografia pentru designul web receptiv este ceva despre care doriți să citiți mai multe, iată câteva lecturi recomandate:

Val Head este un designer și consultant căruia îi place să vadă că internetul rămâne cât mai minunat posibil. Ea conduce Web Design Day, scrie pentru CreativeJS și bloguri la valhead.com.

I-a plăcut asta? Citiți acestea!