Tipografia este, fără îndoială, cea mai importantă parte a designului fiecărui site. Un antet uriaș pe o pagină albă neagră ar putea să pară un vis al minimalistului, dar ce se întâmplă atunci când începem să ne strângem pagina pentru dispozitive mai mici și mai mici?

Hnnggghh !!! Totul pauză și pare teribil.

De aceea avem nevoie de tipografie receptivă. Avem nevoie de tipografie care se va ajusta să se micsoreze la puncte de întrerupere. Dar nimeni în mintea lor nu vrea să treacă prin toate problemele de resetare a tuturor stilurilor lor de bază pentru fiecare element tipografic pe pagina lor.

Din fericire putem schimba dimensiunea html selector, astfel încât toți descendenții săi să moștenească o dimensiune relativ mai mică.

De exemplu

Să începem cu un marcaj pentru chiuveta de probă:

Antet 1
 
Antet 2
 
Antet 3
 
Header 4
 
Antet 5
 
Header 6
 
 Lorem ipsum dolor stați amet, consectetur adipisicing elit. Reproșați-vă căldura adipică, cupiditate animi, care este cea mai mare corupție minimă de muncă, excepții ab, fuga rem dolores. Rațiae au autem iusto aliquid. 
 
 
Listează articolul 1
 
Listează articolul 2
 
Listează articolul 3
 
 
 
Listează articolul 1
 
Listează articolul 2
 
Listează articolul 3
 

Împingeți-l de pe ziduri puțin prin umflarea noastră html selector, iar noi vom reinițializa margin-toppe toate elementele tipografice, pentru că este foarte enervant atunci când este partea de sus a site-ului tău h1 eticheta este la aproximativ un centimetru sub imaginea pe care ar trebui să o așeze lângă. Totul va rămâne în prezent în browserul implicit.

Folosim aici Stylus deoarece, după cum probabil știți, sunt un mare fan al sintaxei Stylor:

html de umplere: 2rem h1, h2, h3, h4, h5, h6, p, ul, ol margin-top: 0

Un început bun, dar un text uriaș pentru fonturi uriașe de text și lumină reprezintă o tendință foarte frumoasă care se întâmplă chiar acum, deci să adăugăm asta. Vom arunca, de asemenea, în unele inaltimea liniei pentru a vă asigura că paragrafele noastre arată bine.

html de umplere: 2rem font-size: 24px font-weight: 100 linie-înălțime: 1.5 h1, h2, h3, h4, h5, h6, p, ul, ol margin-top: 0

Fixarea înălțimii liniei

Dar acum elementele noastre au un imens margin-bottom pe ele și anteturile noastre au un imensinaltimea liniei de asemenea. Din fericire, aceasta este o reparație rapidă:

h4, h3, h4, h5, h6, p, ul, ol marginea-sus: 0 marginea-jos: 1rem h1, h2, h3, h4, h5, h6 marginea inferioară: .5rem înălțimea liniei: 1.1

Acolo! Tipografia noastră leneșă este completă. Am pierdut destul de multe elemente tipografice (blocuri, liste de definire, etc.), dar nu ezitați să le adăugați la placa de bază pe măsură ce le întâlniți.

Vederi mai mici la vedere

Acum, din nou, ce se întâmplă când contractăm ferestrele noastre de vizualizare? Tipografia noastră pare teribilă. Este greu de citit și va trebui ca utilizatorul să alunece de câteva ori doar pentru a citi un paragraf.

Deci, să rezolvăm acest lucru prin adăugarea unor interogări media și schimbarea noastră html selector lui marimea fontului la fiecare punct de întrerupere:

html de umplere: 2rem font-size: 24px font-weight: 100 line-height: 1.5 @media (max-width: 900px) font-size: 20px @media (max-width: 500px) font-size: 14px h1, h2 , h3, h4, h5, h6, p, ul, ol marginea-sus: 0 marginea inferioară: 1rem h1, h2, h3, h4, h5,

Voila! 

Acolo îl aveți, o plăcuță de tipografie receptivă în cinci minute. Toate elementele tipografice sunt dimensionate în funcție de html element, deci având un număr mai mic html font-size pe ecrane mai mici reducem totul proporțional.

Demonstrație pe ecran complet pe CodePen.

Citirea în continuare

Dacă sunteți interesat în mod special într-adevăr o tipografie bine recepționată și doriți să personalizați mai detaliat această placă de bord Am recomandat o scală mai modernă pentru tipografia web de Jason Pamental.