En enkel guide till responsiv typografi
De allra flesta artiklar som pratar om lyhörd design fokuserar på två huvudområden: ett flytande, flexibelt nät och flytande, flexibla bilder. Vad många av dem inte pratar om är typografi.
Och för de flesta webbplatser är texten, innehållet, det viktigaste.
Beviljas, för webbplatser där bilder eller video är det primära innehållet, är responsiv typ lite mindre viktigt, men det borde fortfarande inte förbises.
Den goda nyheten är att responsiv typografi inte är särskilt svår att uppnå. Vi behöver bara ta lite tid att tänka igenom hur vår typ ska svara på förändringar i skärmstorlek och sedan genomföra dessa ändringar.
Principer för responsiv typ
Det finns två huvudprinciper för att skapa effektiv responsiv typografi. Den första är resizable typ. Det betyder typ som inte bara ändras på grundval av skärmens storlek, men det kan också ändras av användaren.
Den andra är optimerade linjelängder, som upprätthåller läsbarheten. Det betyder att för vissa skärmar, håller innehållsområdet mindre och linjelängderna kortare, men det är teoretiskt möjligt att sträcka innehållet teoretiskt.
Resizable typ med rems
De flesta designers använder antingen pixlar eller ems för att dimensionera deras typ. Ems är ett bättre alternativ, eftersom de tillåter användare att ändra storlek på typ i webbläsaren. Men ems är i förhållande till moderelementet, vilket betyder att de är mer komplicerade att använda än pixlar, vilket bara är sammansatta i lyhörda mönster där det finns fler storlekar och relationer för att hålla reda på.
Rems erbjuder ett bättre alternativ till ems. De fungerar på ett nästan identiskt sätt, förutom en viktig skillnad: remenheter är i förhållande till html element, snarare än enskilda moderelement. Detta gör att du behåller rätt storlek på din typ mycket enklare.
Remenheter stöds nu i alla moderna webbläsare, inklusive Opera från version 11.6 och IE9. Medan du kanske vill inkludera fallbacks för tidigare webbläsare, finns det tillräckligt stort stöd för rems att använda dem nu.
Eftersom du använder remenheter för storlekstyp, se till att du använder återställningen till din html element och inte din body element. Så det borde se ut så här:
html { font-size:100%; }
Nu kommer dina remenheter att appliceras på standardstorleken för enheten.
Därefter måste du ange teckensnittstorleken för varje visningsstorlek. Jag rekommenderar att du experimenterar med faktiska typstorlekar på olika enheter för att se vad som är bäst. Det är i stor utsträckning beroende av de teckensnitt du har valt, liksom din övergripande design.
Du kommer sannolikt att ange flera typstorlekar baserat på olika skärmstorlekar, vilket är en ganska rakt framåtriktad sak att göra. Som ett exempel kan din CSS se något ut så här:
@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;} }
Beviljas, det här är en förenklad kod för den här artikeln, men ger dig en startpunkt. Du kanske märker att för de minsta skärmarna anges en något större teckenstorlek. Detta beror på att större teckensnittstorlekar är vanligtvis enklare att läsa på små skärmar.
Självklart vill du göra ytterligare specifikationer för saker som din h1 element och så vidare. Jag rekommenderar starkt att använda ett verktyg som Webtexemplar för att se hur din typ faktiskt ser ut.
Underhålla optimala linjelängder
Medan resizable-typen är ett ganska enkelt koncept, blir rätt linjelängd över flera enheter lite tricker. Det har varit en del debatt om hur den optimala linjelängden är för läsbarhet, men enligt Baymard Institute , konsensus verkar vara någonstans mellan 50 och 75 tecken per rad.
De rekommenderar också att du använder en fast breddbehållare för ditt innehåll, men det besvärar syftet med en lyhörd design, så vi behöver närma oss saker lite annorlunda om vi vill behålla responsen med optimerade linjelängder.
Först titta på de olika skärmstorlekarna som du ska designa för och ta reda på vilken typsnittstyp du ska använda för att få ungefär 50 tecken på en rad. För mycket små skärmar kan du behöva gå under 50 tecken per rad för att behålla en läsbar teckenstorlek, men 50 ska vara målet. Detta ger oss en bra utgångspunkt för vår typsnittstorlek.
Vi bör också ställa in maximala bredder (eller brytpunkter) för textinnehållsområden. Titta på storleken på den typ du använder för en viss skärmstorlek och bestäm sedan bredden på innehållsbehållaren när du har ungefär 75 tecken per rad. Detta kommer inte att vara exakt om du inte använder ett monospace-teckensnitt, men du borde kunna komma upp i genomsnitt ganska enkelt. Det blir vår maximala behållarbredd.
Låt oss säga att standard teckensnittstorlek för en viss enhet är 16px, och du vill att din teckensnittstorlek ska vara 20px (låt oss säga att vi använder en serif typsnitt som Droid Serif för det här exemplet). Det betyder att du anger vilken typ som ska vara 1.25rem. Vid den storleken behöver du en behållarbredd på cirka 675px bred. Detta ger oss ett antal tecken på 60-talet, vilket ligger rätt i vår målbredd.
För att ange behållarens bredd, använd bara den här koden:
@media (min-width: 950px) { .container {width:675px;} }
Du kan ställa in de maximala linjebredderna för varje visningsstorlek, eller bara för specifika. Med mindre skärmar kanske du vill lämna behållarens bredd och låta typen sprida sig över hela bredden på skärmen.
Nu, med mycket större skärmar, kanske du vill titta på att dela upp innehållet i flera kolumner. Låt oss exempelvis säga att du arbetar med en iPad i landskapsvisning. Din skärmbredd är 2048 pixlar. Att sträcka dina linjer för att fylla skärmen gör det svårt att läsa, men centrera ditt innehåll och hålla dina linjelängder kortare slags besegrar syftet med att visa innehåll i liggande läge.
Så ställ in din typ i två kolumner (eller till och med tre, beroende på typsnittstorlek). CSS3s multikolonnspecifikation gör det väldigt lätt att dela upp din text i flera kolumner utan att behöva ändra hela layouten. Kombinera det med mediefrågor och du har nu en innehållslayout som delar upp i två eller tre kolumner för större skärmar, vilket bibehåller både en läsbart typstorlek och en läsbar linjelängd.
Återigen är koden för att göra detta ganska 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; } }
Nu, på skärmar större än 1140 pixlar breda får du ditt innehåll delat i två kolumner, vilket gör dina linjelängder mycket mer läsbara.
Använda alternativa teckensnitt
En sak som ofta förbises när man talar om responsiv typografi, är tanken att olika teckensnitt kanske inte fungerar bra i olika storlekar. Detta gäller särskilt för teckensnitt.
Betyder det att du borde undvika att använda dessa teckensnitt i dina lyhörda mönster? Självklart inte. Ange bara olika teckensnitt för olika element i dina större eller mindre layouter.
Till exempel, med en design för stationära datorer, kanske du vill använda ett teckensnitt som League Script för dina rubriker. Men på en mindre skärm, som en iPhone, måste du antingen göra den så stor att den dominerar innehållet, eller det blir mycket svårt att läsa.
Vad vi kan göra här är att använda League Script för de större skärmarna (iPad, skrivbordet etc.), medan du byter till en större version av karossens teckensnitt för mindre skärmar (som iPhone eller andra smartphones).
För att göra detta skulle du bara ange något så här:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Naturligtvis kan detta göras för mer än bara dina rubriker också.
Slutsats
Medan lyhörd design i stor utsträckning har fokus på bilder och övergripande layout, är typografi lika viktig som båda dessa saker. Det bästa är att det inte är särskilt svårt att anpassa och optimera din typografi för en responsiv design.
Det är viktigt att du lägger samma tid och ansträngning i det som du lägger in i andra delar av din design. Att behålla läsbarheten av ditt textinnehåll är en viktig komponent för att skapa en optimal användarupplevelse för dina besökare.
Lägger du så mycket tonvikt på responsiv typografi i dina mönster som du gör svarande galler och bilder? Varför eller varför inte?