Typografi är förmodligen den viktigaste delen av webbsidans design. En stor rubrik på en tom vit sida kan se ut som en minimalistisk dröm som går i uppfyllelse, men vad händer när vi börjar börja krympa vår sida för mindre och mindre enheter?

Hnnggghh !!! Allt bryter och ser hemskt ut.

Det är därför vi behöver responsiv typografi. Vi behöver typografi som anpassar sig för att krympa vid brytpunkter. Men ingen i sitt rätta sinne vill gå igenom alla problem att återställa alla sina baslinjestilar för varje typografiskt element på deras sida.

Lyckligtvis kan vi ändra storleken på html väljare så att alla sina efterkommare ärva en relativt mindre storlek.

Till exempel

Låt oss börja med några exempel på diskbänk:

Rubrik 1
 
Rubrik 2
 
Rubrik 3
 
Rubrik 4
 
Rubrik 5
 
Rubrik 6
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupti labore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid. 
 
 
Lista Artikel 1
 
Lista 2
 
Lista 3
 
 
 
Lista Artikel 1
 
Lista 2
 
Lista 3
 

Skjut det av väggarna lite genom att fylla på vårt html väljaren, och vi återställer margin-toppå alla våra typografiska element eftersom det är väldigt irriterande när toppen av din h1 taggen är ungefär en tum nedanför en bild som den ska sitta bredvid. Allt annat kommer att förbli i webbläsarens standard för nu.

Vi använder Stylus här eftersom, som du säkert vet, är jag en stor fan av Stylus 'terse syntax:

html padding: 2rem h1, h2, h3, h4, h5, h6, p, ul, ol marginal-topp: 0

Bra start, men stor text för stora text- och ljusfonter är en riktigt trevlig trend som går just nu, så låt oss lägga till det. Vi kastar också in några radavstånd för att se till att våra stycken ser bra ut.

html-kodning: 2rem teckensnittstorlek: 24px typsnittsvikt: 100 radiehöjd: 1,5 h1, h2, h3, h4, h5, h6, p, ul, ol marginal-topp: 0

Linjehöjd Fix

Men nu har våra element enorma margin-bottom på dem och våra rubriker har en enormradavstånd också. Lyckligtvis är det här en snabb fix:

html-kodning: 2rem teckensnittstorlek: 24px teckensnitt-vikt: 100 linjehöjd: 1,5 h1, h2, h3, h4, h5, h6, p, ul, ol marginal-topp: 0 marginalbotten: 1rem h1, h2, h3, h4, h5, h6 marginalbotten: .5rem linjehöjd: 1.1

Där! Vår lat typografi är klar. Vi missade en hel del typografiska element (blockquotes, definition listor etc.), men gärna lägga till dessa i pannan när du stöter på dem.

Mindre Viewport Woes

Nu, vad händer igen när vi avtalar vårt visningsort? Vår typografi ser hemskt ut. Det är svårt att läsa och kräver att användaren sveper flera gånger bara för att läsa en paragraf.

Så låt oss fixa det genom att lägga till några mediefrågor och ändra vår html väljarens textstorlek vid varje brytpunkt:

html-kodning: 2rem teckensnittstorlek: 24px typsnittsvikt: 100 radiehöjd: 1,5 @media (maxbredd: 900px) typsnittstorlek: 20px @media (maxbredd: 500px) typsnitt: 14px h1, h2 , h3, h4, h5, h6, p, ul, marg-topp: 0 marginalbotten: 1rem h1, h2, h3, h4, h5, h6 marginalbotten: .5rem linjehöjd: 1,1

voila! 

Där har du det, en responsiv typografi panna på fem minuter. Alla typografiska element är dimensionerade i förhållande till html element, så genom att ha en mindre html Skriftstorlek på mindre skärmar reducerar vi allt proportionellt.

Fullscreen-demo på CodePen.

Vidare läsning

Om du är särskilt intresserad av verkligen noggrann responsiv typografi och vill skräddarsy denna panna i mer detalj Jag rekommenderar starkt en mer modern skala för webtypografi av Jason Pamental.