Hvordan gjøre typografien din responsiv

Forfatter: John Stephens

Opprettelsesdato: 24 Januar 2021

Oppdater Dato: 12 Kan 2024

Hvordan gjøre typografien din responsiv - Kreativ

Innhold

01. Å få typografi til å skalere
02. Eksempelsiden vår
03. Sjekker den minste skjermen først
04. Går videre
05. Opp og opp!
06. For å oppsummere det hele
07. Videre lesing
Likte dette? Les disse!

Kunnskap som trengs: Grunnleggende CSS og HTML kunnskap. Kjennskap til typografi
Krever: Din favoritt teksteditor og en nettleser
Prosjekt tid: Cirka 30 minutter

Støttefil 1

Vi er vant til å tenke på størrelsestype relativt til en grunn skriftstørrelse ved å bruke ems eller prosenter. Med responsiv webdesign skriver vi mange regler og velger brytepunkter for å sikre at oppsettet vårt passer til mange skjermstørrelser. Type er fantastisk flytende, men det er ikke en størrelse som passer alle. Vi ser på noen raske tips for å få typografien til å passe perfekt til oppsettet ditt, uansett hva enheten eller skjermbredden skjer.

Selvfølgelig er det mye mer med dette enn det som kan dekkes i en opplæring. Så det er mange nyttige ressurser som er oppført nedenfor også.

01. Å få typografi til å skalere

Ah, responsiv webdesign! Fantastisk flytende rutenett og mediespørsmål som gjør at designene våre passer til skjermer i alle størrelser. Heldig for oss, skriv vekter nesten uendelig og strømmer inn i en hvilken som helst størrelse container vi gir den. Trenger knapt å tenke på den responsive utformingen vår ... eller gjør vi det? Ideelt sett, når vår generelle utforming skaleres, bør vår type også være, og her er en måte å gjøre det på.

02. Eksempelsiden vår

I forbindelse med dette eksemplet har jeg utarbeidet en veldig enkel side som skal brukes til demonstrasjon med de første par avsnittene i Alice's Adventures in Wonderland som innhold. Nettstedet ditt vil forhåpentligvis ha litt mer til det, men enkelheten passer perfekt til våre behov for denne demoen, og den samme teknikken kan brukes på mer komplekse sider.

La oss ta en titt på kilden vår for å se hva vi har under panseret. En H1 for tittelen vår og noen avsnitt innpakket i en inneholder div, beleilig tildelt klassen av wrap. Vi bruker denne beholderen for å administrere linjelengdene våre i dette eksemplet. For ditt eget arbeid vil bredden på denne beholderen bli bestemt av rutenettet ditt og dets responsive oppførsel, men de samme ideene gjelder.

En rask dukkert i CSS viser at vi har satt kroppsstørrelsen på kroppen til 100% (ca. 16 piksler som referanse). Og hvert tekstelement er dimensjonert i ems. Hyggelig og relativt! Vi har en god start:

kropp {
skriftstørrelse: 100%;
linjehøyde: 1,6875;
font-familie: Georgia;
}

Vi har satt opp den grunnleggende typografiskalaen vår, så la oss se hvordan dette holder i forskjellige skjermstørrelser.

03. Sjekker den minste skjermen først

La oss begynne å se på oppsettet vårt med en veldig liten skjermbredde, si noe rundt 320 piksler bredt. Sannsynligvis det du ser på de populære tingene på mobilenheter.

Opprinnelig ved denne smale bredden er linjelengdene våre litt kortere enn den generelt aksepterte optimale lengden på 45 og 75 tegn. Eller hvis du ikke er fan av å telle tegn, kan du merke at linjene føles korte og gjøre det vanskeligere å følge teksten. Personlig pleier jeg å gå med lesefølelse flere ganger enn ikke.

For å få litt mer plass til en behagelig linjelengde, kan vi redusere den generelle størrelsen på typen, eller vi kan gjøre containeren vår litt større. Siden dette er en veiledning om størrelsestype, kommer jeg til å gå med førstnevnte, men sistnevnte vil også være et helt akseptabelt alternativ.

For å ta vare på dette, la oss skrive et mediespørsmål med en maksimal bredde på 400 piksler. Ja, det er ikke akkurat 320 piksler, men jeg foretrekker å sette brytepunkter basert på hvor designet viser et behov for dem, ikke på bestemte enhetsmålinger.

Den enkleste måten å endre størrelsen på alle typer er å endre størrelsen som er tildelt vår kropp>Sin fontstørrelsesegenskap:

@media only screen and (max-width: 400px) {
kropp {skriftstørrelse: 90%;}
}

Takket være at vi i første omgang har dimensjonert alle typer med ems, kan vi gjøre denne endringen over hele linjen med bare en linje. Yay, for relativ størrelse!

04. Går videre

Hvis vi gjør som webdesignere gjør og fortsetter å endre størrelsen på nettleservinduet vårt stort, blir vår relativt store beholder stadig større og teksten vår flyter mens vi går. Akkurat det du forventer. Men hold øye med linjelengden. Når begynner det å se og føle seg for lenge?

Med en bredde på rundt 800 piksler (av den samlede nettleservinduet) begynner linjelengdene å se ubehagelig lange ut. Ser ut som en god tid å legge til et nytt brytpunkt for vår type.

@media only screen and (max-width: 800px) {
kropp {skriftstørrelse: 100%;}
}

@media only screen and (max-width: 1100px) {
kropp {skriftstørrelse: 120%;}
}

Slik ser siden vår ut nå i en hvilken som helst vindusbredde mellom 800 og 1100 piksler. Vi har litt mer plass til å jobbe med, og nå fyller vår type det litt finere:

Denne gangen skriver vi to mediespørsmål. En med en maksimal bredde på 800 piksler med skriftstørrelsen på kroppen satt til 100%, som dekker alt mellom en vinduebredde på 500 piksler og en vindubredde på 800 piksler. Deretter et sekund når vinduets bredde er over 800 piksler, slik at vi kan øke vår grunnleggende skriftstørrelse.

Jeg har økt skriftstørrelsen til 120% når vi går forbi 800 piksler i bredden for å få linjelengden litt mer der jeg liker den. Dette er selvfølgelig litt subjektivt, og også avhengig av selve innholdet og innholdet rundt. Velg brytepunkter og størrelsesendringer som gir mening for deg og ditt design. Komfortabel lesing og balanserte oppsett er målet her. Å teste layoutene dine på mer enn bare en størrelse på nettleseren vil hjelpe deg å komme til de beste stedene for disse også.

05. Opp og opp!

Du kan gjette hva som kommer neste gang. Jeg fortsetter å gjøre nettleservinduet bredere og se hva som skjer. Ikke overraskende ettersom linjelengdene blir lengre og de begynner å nærme seg uutholdelige lengder igjen rundt 1100 piksler. På tide med et nytt pausepunkt? Vi kunne bare fortsette og fortsette slik på ubestemt tid, men det virker ikke så smart, dette begynner å virke uendelig!

Teknisk sett kan typen din fortsette å skaleres uendelig. Imidlertid er sjansen stor for at oppsettet ditt og bildene dine ikke kan. På et tidspunkt må vi ta pausene. Og for denne enkle demoen har jeg bestemt at poenget er 1100 piksler.

En siste type-relatert mediespørring gjenstår å bli skrevet. Jeg vil ha noe som vil hindre at linjelengdene våre vokser, slik at vi kan fryse ting på dette punktet der vi har akseptable linjelengder. Den enkleste måten å få det til å skje, er å sette maksimal bredde på diven som inneholder teksten vår.

Først må vi bestemme den omtrentlige bredden på vår inneholder div i piksler. Hvis nettleservinduet vårt er 1100 piksler bredt og wrap-div har en bredde på 70%, forteller en liten bit matematikk oss at div er ca 770 piksler bredt. (1100 *. 7x).

Bevæpnet med det, vil vi redigere vårt siste mediespørsmål slik:

@media only screen and (min-width: 1100px) {
kropp {skriftstørrelse: 120%;}
.wrap {maks bredde: 770px;}
}

Demo-typen vår er like stor som vi har bestemt at den skal få:

Der har vi det. En enkel teknikk for å holde typen fin og behagelig å lese over en rekke skjermstørrelser.

06. For å oppsummere det hele

Selv fra dette enkle eksemplet begynner du sannsynligvis å se at du kan være mye mer detaljert om hvor du legger til punkter for din type for å kontrollere linjelengden. Hva med ledelse og hierarki? Disse påvirkes også når størrelsen på container og type endres. Det er så mye å vurdere!

Hold øye med typen din og foreta justeringer der det er fornuftig for layout og prosjekt. Det handler ikke om hvor mange mediespørsmål eller brytepunkter du legger til. Det handler om å gjøre designet solid for deg og alle som bruker det.

07. Videre lesing

Denne enkle demoen er bare toppen av isfjellet. Hvis typografi for responsiv webdesign er noe du vil lese mer om, er det noen anbefalt lesing:

Tim Brown gjør en fantastisk jobb med å samle opp teknikker og ting å tenke på på en fin webtype.
Det er mer enn bare prosentandeler og ems når det gjelder alternativene våre for størrelsestype på nettet. Ethan Marcotte forklarer det hele på Typekit-bloggen.
Det er vanskelig å snakke uten å snakke om å etablere en vertikal rytme. Denne klassiske artikkelen på 24 måter er ideell til ideen.

Val Head er en designer og konsulent som liker å se internett forbli så fantastisk som mulig. Hun driver Web Design Day, skriver for CreativeJS og blogger på valhead.com.