En enkel guide til responsiv typografi
De aller fleste artikler snakker om responsivt designfokus på to hovedområder: et flytende, fleksibelt rutenett og flytende, fleksible bilder. Hva mange av dem ikke snakker om, er typografi.
Og likevel, for de fleste nettsteder er teksten, innholdet, det viktigste elementet.
Gitt, for nettsteder hvor bilder eller video er det primære innholdet, er responsiv type litt mindre viktig, men det bør fortsatt ikke overses.
Den gode nyheten er at responsiv typografi ikke er spesielt vanskelig å oppnå. Vi trenger bare å ta litt tid til å tenke gjennom hvordan vår type skal svare på endringer i skjermstørrelsen, og deretter implementere disse endringene.
Prinsipper for responsiv type
Det er to hovedprinsipper for å skape effektiv responsiv typografi. Den første er resizable type. Det betyr at typen som ikke bare endres på grunnlag av skjermstørrelsen, men som også kan resizable av brukeren.
Den andre er optimaliserte linjelengder, som opprettholder lesbarhet. Det betyr for noen skjermer, å holde innholdsområdet mindre og linjelengder kortere, gir mer mening, selv om innholdet teoretisk kan strekke seg bredere.
Resizable type ved hjelp av rems
De fleste designere bruker enten piksler eller ems for størrelsen deres type. Ems er et bedre alternativ, da de tillater brukere å endre størrelsen på typen i nettleseren sin. Men ems er i forhold til foreldreelementet, noe som betyr at de er mer kompliserte å bruke enn piksler, som bare er sammensatt i responsive design der det er flere størrelser og relasjoner for å holde styr på.
Rems tilbyr et bedre alternativ til ems. De jobber på en nesten identisk måte, bortsett fra en nøkkelforskjell: remenheter er i forhold til html element, i stedet for individuelle foreldreelementer. Dette gjør opprettholde riktig dimensjonering av din type mye enklere.
Rem-enheter støttes nå i alle de store moderne nettleserne, inkludert Opera fra versjon 11.6 og IE9. Mens du kanskje vil inkludere fallbacks for tidligere nettlesere, er det bred nok støtte for rems for å bruke dem nå.
Siden du bruker remenheter for størrelsestype, må du sørge for at du tilbakestiller til din html element og ikke din body element. Så det burde se slik ut:
html { font-size:100%; }
Nå vil remenhetene dine bli brukt til standard skriftstørrelse for enheten.
Deretter må du spesifisere skriftstørrelsen for hver visningsstørrelse. Jeg anbefaler å eksperimentere med faktiske skriftstørrelser på ulike enheter for å se hva som ser best ut. Det er i stor grad avhengig av skrifttypene du har valgt, samt din overordnede design.
Du vil sannsynligvis ønske å spesifisere flere skriftstørrelser basert på forskjellige skjermstørrelser, noe som er en ganske rett frem ting å gjøre. Som et eksempel kan CSS kanskje se slik ut:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Gitt, dette er en forenklet kode for denne artikkelen, men gir deg et utgangspunkt. Det kan hende du merker at for de minste skjermbildene er det angitt en litt større skriftstørrelse. Dette skyldes at større skriftstørrelser generelt er lettere å lese på små skjermer.
Selvfølgelig vil du gjøre ytterligere spesifikasjoner for ting som din h1 elementer og slikt. Jeg anbefaler på det sterkeste å bruke et verktøy som Web skriftprøve for å se hvordan din type faktisk vil se ut.
Opprettholde optimale linjelengder
Mens resizable-typen er et ganske greit konsept, blir det opprettholdt riktige linjelengder på tvers av flere enheter. Det har vært ganske mye debatt om hva den optimale linjelengden er for lesbarhet, men ifølge Baymard Institute , konsensus synes å være et sted mellom 50 og 75 tegn per linje.
De anbefaler også å bruke en fast breddebeholder for innholdet ditt, men det slår formålet med en responsiv design, så vi må nærme ting litt annerledes hvis vi ønsker å opprettholde respons med optimerte linjelengder.
Først, se på de forskjellige skjermstørrelsene du skal designe for og finne ut hvilken størrelse skrift du burde bruke for å få omtrent 50 tegn på en linje. For svært små skjermer må du kanskje gå under 50 tegn per linje for å opprettholde en lesbar skriftstørrelse, men 50 skal være målet. Dette gir oss et godt utgangspunkt for fontstørrelsen.
Vi bør også angi maksimale bredder (eller bruddpunkter) for tekstinnholdsområder. Se på størrelsen på typen du bruker for en gitt skjermstørrelse, og velg deretter bredden på innholdsbeholderen når du har omtrent 75 tegn per linje. Dette kommer ikke til å være nøyaktig, med mindre du bruker en monospace-skrifttype, men du bør kunne komme opp med et gjennomsnitt ganske enkelt. Det blir vår maksimale containerbredde.
La oss si at standard skriftstørrelsen for en gitt enhet er 16px, og du vil at skriftstørrelsen skal være 20px (la oss si at vi bruker et serif-skrift som Droid Serif for dette eksempelet). Det betyr at du spesifiserer typen som skal være 1.25rem. I den størrelsen vil du ha en beholderbredde på rundt 675px bred. Dette gir oss et karaktertall på 60-tallet, som ligger rett i målbredden.
For å spesifisere beholderbredden, bruk bare denne koden:
@media (min-width: 950px) { .container {width:675px;} }
Du kan angi de maksimale linjebredder for hver visningsstørrelse, eller bare for bestemte. Med mindre skjermer kan det være lurt å forlate beholderbredden og la typen spre seg over hele bredden på skjermen.
Nå, med mye større skjermbilder, vil du kanskje se på å dele innholdet i flere kolonner. La oss for eksempel si at du jobber med en iPad i liggende visning. Skjermbredden din er 2048 piksler. Å strekke linjene dine for å fylle skjermen, gjør det vanskelig å lese, men sentrere innholdet ditt og holde linjelengder kortere, slags nederlag for å vise innhold i liggende modus.
Så sett inn typen i to kolonner (eller til og med tre, avhengig av skriftstørrelsen din). CSS3s multikolonnespesifikasjon gjør det veldig enkelt å dele teksten i flere kolonner uten å måtte endre hele oppsettet. Kombiner det med medieforespørsler, og du har nå et innholdsoppsett som splittes i to eller tre kolonner for større skjermer, og opprettholder både en meget lesbar type størrelse og en høylestbar linjelengde.
Igjen, koden for å gjøre dette er ganske enkelt:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Nå, på skjermer som er større enn 1140 piksler bredt, får du innholdet ditt i to kolonner, slik at linjelengder blir mye mer lesbare.
Bruke alternative skrifttyper
En ting som ofte overses når man snakker om responsiv typografi, er ideen om at forskjellige skrifttyper kanskje ikke fungerer bra i forskjellige størrelser. Dette gjelder spesielt for skjermfonter.
Betyr det at du bør unngå å bruke disse skriftene i dine responsive design? Selvfølgelig ikke. I stedet oppgir du bare forskjellige fonter for ulike elementer i større eller mindre layouter.
For eksempel, med et design for stasjonære datamaskiner, vil du kanskje bruke en skrift som League Script for hodene dine. Men på en mindre skjerm, som en iPhone, må du enten gjøre den så stor at den dominerer innholdet, eller det vil være veldig vanskelig å lese.
Hva vi kan gjøre her, er å bruke Liga Script for større skjermer (iPad, skrivebord, etc.), mens du bytter til en større versjon av kroppsskriften for mindre skjermer (som iPhone eller andre smarttelefoner).
For å gjøre dette, vil du bare angi noe slikt:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Selvfølgelig kan dette gjøres for mer enn bare dine overskrifter, også.
Konklusjon
Mens responsiv design har stort sett fokusert på bilder og overordnet layout, er typografi like viktig som begge disse tingene. Den beste delen er at det ikke er spesielt vanskelig å tilpasse og optimalisere typografien din for en responsiv design.
Det er viktig at du legger samme tid og krefter inn i det som du legger inn i andre elementer i designet. Opprettholde lesbarheten av tekstinnholdet ditt er en viktig komponent for å skape en optimal brukeropplevelse for de besøkende.
Legger du så mye vekt på responsiv typografi i designene dine som du gjør responsive grids og bilder? Hvorfor eller hvorfor ikke?