Typografie is misschien wel het belangrijkste onderdeel van het ontwerp van een website. Een enorme koptekst op een lege witte pagina lijkt misschien een droom van een minimalist, maar wat gebeurt er als we beginnen onze pagina te verkleinen voor kleinere en kleinere apparaten?

Hnnggghh !!! Alles breekt en ziet er vreselijk uit.

Dit is waarom we responsieve typografie nodig hebben. We hebben typografie nodig die zichzelf aanpast om te krimpen bij breekpunten. Maar niemand met de juiste gedachten wil alle moeite doen om al hun basislijnstijlen opnieuw in te stellen voor elk typografisch element op hun pagina.

Gelukkig kunnen we de grootte van de wijzigen html selector zodat alle nakomelingen een relatief kleinere afmeting erven.

Bijvoorbeeld

Laten we beginnen met een paar voorbeeldopvullingen in de keuken:

Header 1
 
Kop 2
 
Kop 3
 
Kop 4
 
Kop 5
 
Header 6
 
 Lorem ipsum dolor sit amet, consectetur adipiserende elit. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupi laborore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid. 
 
 
Lijst Item 1
 
Lijstitem 2
 
Lijstitem 3
 
 
 
Lijst Item 1
 
Lijstitem 2
 
Lijstitem 3
 

Duw het een beetje van de muur door ons op te vouwen html selector, en we zullen de margin-topop al onze typografische elementen, omdat het echt vervelend is als de bovenkant van uw h1 tag bevindt zich ongeveer een centimeter onder een afbeelding waar het naast moet zitten. Al het andere blijft voorlopig op de standaardinstelling van de browser staan.

We gebruiken Stylus hier omdat, zoals u waarschijnlijk weet, ik een grote fan ben van de korte syntax van Stylus:

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

Goed begin, maar enorme tekst voor enorme tekst en lichte lettertypen is een hele leuke trend die nu aan de gang is, dus laten we dat toevoegen. We zullen er ook wat in gooien lijnhoogte om ervoor te zorgen dat onze alinea's er goed uitzien.

html padding: 2rem lettertypegrootte: 24px font-gewicht: 100 line-height: 1.5 h1, h2, h3, h4, h5, h6, p, ul, ol margin-top: 0

Lijnhoogte fix

Maar nu hebben onze elementen een enorm margin-bottom op hen en onze headers hebben een enormelijnhoogte ook. Gelukkig is dit een snelle oplossing:

html padding: 2rem lettertypegrootte: 24px lettertype-gewicht: 100 lijnhoogte: 1.5 h1, h2, h3, h4, h5, h6, p, ul, ol margin-top: 0 margin-bottom: 1rem h1, h2, h3, h4, h5, h6 margin-bottom: .5rem line-height: 1.1

Er! Onze luie typografie is voltooid. We misten nogal wat typografische elementen (blockquotes, definitielijsten, enz.), Maar voel je vrij om deze aan de standaard toe te voegen als je ze tegenkomt.

Kleinere problemen met Viewport

Nu, nogmaals, wat gebeurt er wanneer we onze kijkvenster contracteren? Onze typografie ziet er vreselijk uit. Het is moeilijk te lezen en de gebruiker moet meerdere keren vegen om een ​​alinea te lezen.

Dus laten we dat oplossen door wat mediaquery's toe te voegen en onze te veranderen html selector lettertypegrootte bij elk breekpunt:

html padding: 2rem lettergrootte: 24px lettertype-gewicht: 100 regelhoogte: 1,5 @media (max-width: 900px) lettergrootte: 20 px @ media (max. breedte: 500 px) font-grootte: 14px h1, h2 , h3, h4, h5, h6, p, ul, ol margin-top: 0 margin-bottom: 1rem h1, h2, h3, h4, h5, h6 margin-bottom: .5rem line-height: 1.1

Voila! 

Daar heb je het, een responsieve typografie boilerplate in vijf minuten. Alle typografische elementen zijn gedimensioneerd in verhouding tot de html element, dus door een kleinere te hebben html font-size op kleinere schermen we verminderen alles proportioneel.

Volledig scherm demo op CodePen.

Verder lezen

Als u bijzonder geïnteresseerd bent in werkelijk grondig reagerende typografie, en wil deze boilerplate in meer detail aanpassen. Ik raad A More Modern Scale voor Web Typography van Jason Pamental ten zeerste aan.