Typografi er uten tvil den viktigste delen av et nettsteds design. En stor overskrift på en tom hvit side kan se ut som en minimalistisk drøm som går i oppfyllelse, men hva skjer når vi begynner å begynne å krympe vår side for mindre og mindre enheter?

Hnnggghh !!! Alt går og ser forferdelig ut.

Det er derfor vi trenger responsiv typografi. Vi trenger typografi som vil tilpasse seg til å krympe ved breakpoints. Men ingen i sitt rette sinn ønsker å gå gjennom alle problemer med å tilbakestille alle deres grunnlinjestiler for hvert typografisk element på siden deres.

Heldigvis kan vi endre størrelsen på html selector slik at alle sine etterkommere arver en relativt mindre størrelse.

For eksempel

La oss starte med noen prøve kjøkkenvask oppsummering:

Overskrift 1
 
Overskrift 2
 
Overskrift 3
 
Overskrift 4
 
Overskrift 5
 
Overskrift 6
 
 Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupti labore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid. 
 
 
Liste 1
 
Liste 2
 
Liste 3
 
 
 
Liste 1
 
Liste 2
 
Liste 3
 

Skyv den av veggene litt ved å fylle våre html velg, og vi tilbakestiller margin-toppå alle våre typografiske elementer fordi det er veldig irriterende når toppen av din h1 tag er omtrent en tomme under et bilde som det skal sitte ved siden av. Alt annet vil forbli i nettleserens standard for nå.

Vi bruker Stylus her fordi, som du sikkert vet, er jeg en stor fan av Stylus 'terse syntaks:

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

God start, men stor tekst for store tekst og lyskrifter er en veldig fin trend å gå rundt akkurat nå, så la oss legge til det. Vi vil også kaste inn noen linjehøyde for å sikre at våre avsnitt ser bra ut.

html polstring: 2rem fontstørrelse: 24px font-weight: 100 linjehøyde: 1,5 h1, h2, h3, h4, h5, h6, p, ul, ol margin-topp: 0

Linjehøydefiksering

Men nå har våre elementer et stort margin-bottom på dem og våre overskrifter har storlinjehøyde også. Heldigvis er dette en rask løsning:

html polstring: 2rem skriftstørrelse: 24px skriftstørrelse: 100 linjestørrelse: 1,5 h1, h2, h3, h4, h5, h6, p, ul, ol margin-topp: 0 marginbunn: 1rem h1, h2, h3, h4, h5, h6 marginbunn: .5rem linjehøyde: 1.1

Der! Vår latte typografi er fullført. Vi savnet ganske mange typografiske elementer (blokkkvoter, definisjonslister, etc.), men vær så snill å legge disse til kjelen når du møter dem.

Mindre Viewport Woes

Nå igjen, hva skjer når vi avtaler visningsporten vår? Vår typografi ser forferdelig ut. Det er vanskelig å lese og vil kreve at brukeren slår flere ganger bare for å lese et avsnitt.

Så la oss fikse det ved å legge til noen medieforespørsler og endre vår html velgeren er skriftstørrelse ved hvert bruddpunkt:

html polstring: 2rem skriftstørrelse: 24px skriftstørrelse: 100 linjehøyde: 1,5 @media (maks bredde: 900px) skriftstørrelse: 20px @media (maks bredde: 500px) skriftstørrelse: 14px h1, h2 , h3, h4, h5, h6, p, ul, ol margin-topp: 0 margin-bunn: 1rem h1, h2, h3, h4, h5, h6 margin-bunn: .5rem linjehøyde: 1,1

voila! 

Der har du det, en responsiv typografi boilerplate på fem minutter. Alle typografiske elementene er dimensjonerte i forhold til html element, så ved å ha en mindre html Skriftstørrelse på mindre skjermer reduserer vi alt proporsjonalt.

Fullskjerm-demo på CodePen.

Videre lesning

Hvis du er spesielt interessert i egentlig grundig responsiv typografi, og ønsker å skreddersy denne kjelen i mer detalj Jeg anbefaler på det sterkeste en mer moderne skala for webtypografi av Jason Pamental.