En simpel vejledning til responsiv typografi
Størstedelen af artiklerne taler om lydhørt design fokuserer på to hovedområder: et flydende, fleksibelt net og flydende, fleksible billeder. Hvad mange af dem ikke taler om, er typografi.
Og for de fleste websteder er teksten, indholdet, det vigtigste element.
Tildelt for steder, hvor billeder eller video er det primære indhold, er responsiv type lidt mindre vigtig, men det bør stadig ikke overses.
Den gode nyhed er, at responsiv typografi ikke er særlig svært at opnå. Vi skal bare tage lidt tid til at tænke igennem, hvordan vores type skal reagere på ændringer i skærmstørrelse, og derefter implementere disse ændringer.
Principper for lydhør type
Der er to hovedprincipper for at skabe effektiv responsiv typografi. Den første er resizable type. Det betyder, at typen, som ikke kun ændres, afhænger af skærmens størrelse, men det kan også ændres af brugeren.
Den anden er optimerede linjelængder, som sikrer læsbarhed. Det betyder for nogle skærme, at indholdsområdet bliver mindre og linjelængderne kortere giver mening, selv om indholdet teoretisk kan strække sig bredere.
Resizable type ved hjælp af rems
De fleste designere bruger enten pixels eller ems til dimensionering af deres type. Ems er en bedre mulighed, da de giver brugerne mulighed for at ændre størrelsen på typen i deres browser. Men ems er i forhold til moderelementet, hvilket betyder, at de er mere komplicerede at bruge end pixel, som kun er sammensat i lydhørige design, hvor der er flere størrelser og relationer, der holder øje med.
Rems tilbyder et bedre alternativ til ems. De arbejder på næsten samme måde, bortset fra en nøgleforskel: remenheder er i forhold til html element snarere end individuelle forældreelementer. Dette gør opretholdelse af korrekt størrelse af din type meget mere ligetil.
Rem enheder understøttes nu i alle de store moderne browsere, herunder Opera fra version 11.6 og IE9. Mens du måske vil inkludere fallbacks til tidligere browsere, er der bred nok støtte til rems til at bruge dem nu.
Da du bruger rem enheder til størrelsestype, skal du sørge for at anvende nulstillingen til din html element og ikke din body element. Så det skal se sådan ud:
html { font-size:100%; }
Nu vil dine rem enheder blive anvendt til standard skrifttypestørrelse for enheden.
Næste skal du angive skrifttypestørrelsen for hver skærmstørrelse. Jeg anbefaler at eksperimentere med faktiske skriftstørrelser på forskellige enheder for at se, hvad der ser bedst ud. Det afhænger i vid udstrækning af de skrifttyper, du har valgt, såvel som dit overordnede design.
Du vil sandsynligvis gerne angive flere skriftstørrelser baseret på forskellige skærmstørrelser, hvilket er en ret ligefrem ting at gøre. Som et eksempel kan din CSS se sådan ud:
@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;} }
Indrømmet, dette er en forenklet kode for denne artikel, men giver dig et udgangspunkt. Du kan bemærke, at der for de mindste skærme er angivet en lidt større skriftstørrelse. Dette skyldes, at større skriftstørrelser generelt er lettere at læse på små skærme.
Selvfølgelig vil du gerne lave yderligere specifikationer for ting som din h1 elementer og lignende. Jeg anbefaler stærkt at bruge et værktøj som Web skrifttypeprøve for at se, hvordan din type rent faktisk vil se ud.
Vedligeholdelse af optimale linjelængder
Mens resizable type er et ret simpelt koncept, bliver der en smule tricker ved at opretholde rigtige linjelængder på tværs af flere enheder. Der har været en del debat om, hvad den optimale linjelængde er til læsbarhed, men ifølge Baymard Institute , synes konsensus at være et sted mellem 50 og 75 tegn pr. linje.
De anbefaler også at bruge en fast breddebeholder til dit indhold, men det besejrer formålet med et lydhørt design, så vi har brug for at nærme sig ting lidt anderledes, hvis vi ønsker at opretholde lydhørhed med optimerede linjelængder.
Først skal du se på de forskellige skærmstørrelser, du skal designe for og finde ud af, hvilken skrifttype du skal bruge til at få ca. 50 tegn på en linje. For meget små skærmbilleder skal du muligvis gå under 50 tegn pr. Linje for at opretholde en læsbar skriftstørrelse, men 50 skal være målet. Dette giver os et godt udgangspunkt for vores skriftstørrelse.
Vi bør også indstille maksimale bredder (eller brudpunkter) for tekstindholdsområder. Se på størrelsen af den type, du bruger til en given skærmstørrelse, og bestemm derefter bredden af indholdsbeholderen, når du har ca. 75 tegn pr. Linje. Dette kommer ikke til at være nøjagtigt, medmindre du bruger en monospace skrifttype, men du skal kunne komme op med et gennemsnit ret nemt. Det bliver vores maksimale containerbredde.
Lad os sige, at standard skrifttypestørrelse for en given enhed er 16px, og du vil have din skriftstørrelse til 20px (lad os sige, at vi bruger et serif skrifttype som Droid Serif til dette eksempel). Det betyder, at du angiver typen til 1.25rem. I den størrelse vil du have en containerbredde på omkring 675px bred. Dette giver os et karaktertælling i gennemsnit på 60'erne, hvilket er lige i vores målbredde.
For at angive beholderbredden skal du blot bruge denne kode:
@media (min-width: 950px) { .container {width:675px;} }
Du kan indstille de maksimale linjebredder for hver visningsstørrelse, eller bare for bestemte. Med mindre skærme vil du måske forlade beholderens bredde og lade typen spredes over hele bredden af skærmen.
Nu, med meget større skærme, kan du måske se på at opdele dit indhold i flere kolonner. Lad os f.eks. Sige, at du arbejder med en iPad i landskabsvisning. Din skærmbredde er 2048 pixels. Hvis du strækker dine linjer for at fylde skærmen, er det svært at læse, men centrering af dit indhold og at holde dine linjelængder kortere formår at slå ned formålet med visning af indhold i liggende tilstand.
I stedet skal du angive din type i to kolonner (eller endda tre, alt efter din skriftstørrelse). CSS3s multikolonne specifikation gør det meget nemt at opdele din tekst i flere kolonner uden at skulle ændre hele dit layout. Kombiner det med medieforespørgsler, og du har nu et indholdslayout, der opdeles i to eller tre kolonner til større skærme, idet du opretholder både en meget læselig type og en meget læsbar linjelængde.
Igen er koden for at gøre dette ret simpelt:
@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; } }
Nu, på skærme større end 1140 pixels bred, får du dit indhold opdelt i to kolonner, hvilket gør dine linjelængder langt mere læsbare.
Brug af alternative skrifttyper
En ting, der ofte overses, når man taler om lydhør typografi, er ideen om, at forskellige skrifttyper måske ikke fungerer godt i forskellige størrelser. Dette gælder især for skærmfonte.
Betyder det at du bør undgå at bruge disse skrifttyper i dine lydhøre design? Selvfølgelig ikke. I stedet skal du bare angive forskellige skrifttyper for forskellige elementer i dine større eller mindre layouter.
For eksempel kan du med et design til stationære computere bruge en skrifttype som League Script til dine headers. Men på et mindre display, som en iPhone, skal du enten gøre det så stort, at det dominerer indholdet, eller det vil være meget svært at læse.
Hvad vi kan gøre her, er at bruge Liga Script til de større skærme (iPad, skrivebord osv.), Mens du skifter til en større version af legems skrifttypen til mindre skærme (som iPhone eller andre smartphones).
For at gøre dette vil du blot angive noget som dette:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Selvfølgelig kan dette gøres for mere end blot dine overskrifter.
Konklusion
Mens lydhør design stort set har fokus på billeder og overordnede layout, er typografi lige så vigtig som begge disse ting. Det bedste er, at det ikke er særligt vanskeligt at tilpasse og optimere din typografi til et responsivt design.
Det er afgørende, at du sætter samme tid og kræfter ind i det, at du sætter ind i andre elementer i dit design. Opretholdelse af læsbarheden af dit tekstindhold er et vigtigt element for at skabe en optimal brugeroplevelse for dine besøgende.
Sætter du så meget vægt på responsiv typografi i dine designs som du gør modtagelige net og billeder? Hvorfor eller hvorfor ikke?