Een eenvoudige handleiding voor responsieve typografie
De overgrote meerderheid van artikelen die spreken over responsief ontwerp, richt zich op twee hoofdgebieden: een vloeiend, flexibel raster en vloeiende, flexibele afbeeldingen. Waar veel mensen niet over praten, is typografie.
En toch is voor de meeste websites de tekst, de inhoud, het belangrijkste element.
Toegegeven, voor sites waar afbeeldingen of video de primaire inhoud zijn, is responsief type iets minder belangrijk, maar het moet nog steeds niet over het hoofd worden gezien.
Het goede nieuws is dat responsieve typografie niet bijzonder moeilijk te bereiken is. We moeten even de tijd nemen om na te denken over hoe ons type moet reageren op wijzigingen in schermgrootte en die wijzigingen vervolgens door te voeren.
Principes van responsief type
Er zijn twee hoofdprincipes voor het creëren van effectieve responsieve typografie. Het eerste is van het veranderbare type. Dat betekent een type dat niet alleen wordt aangepast aan de grootte van het scherm, maar dat ook door de gebruiker kan worden aangepast.
De tweede is geoptimaliseerde lijnlengtes, die de leesbaarheid behouden. Dat betekent voor sommige schermen dat het inhoudsgebied kleiner wordt en de lengte van de regels korter wordt, hoewel de inhoud in theorie breder zou kunnen uitrekken.
Resizable type met behulp van rems
De meeste ontwerpers gebruiken pixels of ems voor het dimensioneren van hun type. Ems zijn een betere optie, omdat ze gebruikers toestaan het formaat van het type in hun browser te wijzigen. Maar ems zijn relatief ten opzichte van het bovenliggende element, wat betekent dat ze gecompliceerder in gebruik zijn dan pixels, wat alleen wordt verergerd in responsieve ontwerpen waar er meer formaten en relaties zijn om bij te houden.
Rems bieden een beter alternatief voor ems. Ze werken op een vrijwel identieke manier, behalve één belangrijk verschil: remeenheden zijn relatief ten opzichte van de html element, in plaats van individuele bovenliggende elementen. Dit maakt het handhaven van de juiste dimensionering van uw type veel eenvoudiger.
Rem-eenheden worden nu ondersteund in alle grote moderne browsers, waaronder Opera vanaf versie 11.6 en IE9. Hoewel u misschien fallbacks wilt toevoegen aan eerdere browsers, is er nu voldoende ondersteuning voor rems om ze nu te gebruiken.
Aangezien u remeenheden voor het formaattype gebruikt, moet u de reset toepassen op uw html element en niet jouw body element. Dus het zou er zo uit moeten zien:
html { font-size:100%; }
Nu worden uw remeenheden toegepast op de standaardlettergrootte voor het apparaat.
Vervolgens moet u de lettergrootte opgeven voor elke schermgrootte. Ik raad aan te experimenteren met werkelijke lettergroottes op verschillende apparaten om te zien wat er het beste uitziet. Het is grotendeels afhankelijk van de lettertypen die u hebt geselecteerd, evenals uw algehele ontwerp.
U zult waarschijnlijk meerdere lettergroottes willen opgeven op basis van verschillende schermformaten, wat vrij eenvoudig is om te doen. Uw CSS ziet er bijvoorbeeld als volgt uit:
@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;} }
Toegegeven, dit is een vereenvoudigde code voor dit artikel, maar geeft u een startpunt. U merkt misschien dat voor de kleinste schermen een iets grotere lettergrootte wordt opgegeven. Dit komt omdat grotere lettertypen over het algemeen op kleinere schermen gemakkelijker te lezen zijn.
Natuurlijk wilt u extra specificaties maken voor zaken als uw h1 elementen en dergelijke. Ik raad het gebruik van een tool zoals Web Font Specimen om te zien hoe jouw type eruit zal zien.
Optimale lijnlengtes behouden
Hoewel het formaat van het formaat redelijk eenvoudig is, krijgt het bijhouden van de juiste lijnlengten op meerdere apparaten een beetje een tricker. Er is nogal wat discussie geweest over wat de optimale lijnlengte is voor leesbaarheid, maar volgens de Baymard Institute , de consensus lijkt ergens tussen de 50 en 75 karakters per regel te zijn.
Ze raden ook aan een container met vaste breedte te gebruiken voor uw inhoud, maar dat verslaat het doel van een responsief ontwerp, dus we moeten de dingen een beetje anders benaderen als we de responsiviteit willen handhaven met geoptimaliseerde lijnlengten.
Kijk eerst naar de verschillende schermgroottes waarvoor je gaat ontwerpen en zoek uit welk lettertype je moet gebruiken om ongeveer 50 tekens op een regel te krijgen. Voor zeer kleine schermen moet u mogelijk minder dan 50 tekens per regel gebruiken om een leesbare lettergrootte te behouden, maar 50 moet het doel zijn. Dit geeft ons een goed startpunt voor onze lettergrootte.
We moeten ook maximale breedten (of breekpunten) instellen voor tekstinhoudsgebieden. Kijk naar de grootte van het type dat u gebruikt voor een bepaald schermformaat en bepaal vervolgens de breedte van de inhoudcontainer als u ongeveer 75 tekens per regel hebt. Dit gaat niet exact zijn, tenzij je een monospace-lettertype gebruikt, maar je zou vrij gemakkelijk een gemiddelde kunnen verzinnen. Dat wordt onze maximale containerbreedte.
Laten we zeggen dat de standaardlettergrootte voor een bepaald apparaat 16px is en u wilt dat uw lettergrootte 20px is (laten we zeggen dat we in dit voorbeeld een serif-lettertype zoals Droid Serif gebruiken). Dat betekent dat je het type opgeeft dat 1.25rem is. Op dat formaat wilt u een containerdikte van ongeveer 675 px breed. Dit geeft ons gemiddeld een aantal tekens in de jaren 60, wat goed is in onze doelbreedte.
Gebruik deze code om de containerdikte op te geven:
@media (min-width: 950px) { .container {width:675px;} }
U kunt die maximale lijndiktes instellen voor elke weergavegrootte, of alleen voor specifieke weergaven. Bij kleinere schermen wilt u mogelijk de containerbreedte weglaten en het type over de gehele breedte van het scherm spreiden.
Nu, met veel grotere schermen, wilt u misschien kijken naar het splitsen van uw inhoud in meerdere kolommen. Laten we bijvoorbeeld zeggen dat u met een iPad werkt in liggende weergave. Je schermbreedte is 2048 pixels. Door je lijnen uit te lijnen om het scherm te vullen, is het lezen moeilijk, maar door je inhoud te centreren en je lijnlengtes korter te houden, wordt het doel van het bekijken van inhoud in liggende modus verslaan.
Stel in plaats daarvan uw type in twee kolommen in (of zelfs drie, afhankelijk van uw lettergrootte). CSS3's specificatie met meerdere kolommen maakt het heel eenvoudig om uw tekst op te splitsen in meerdere kolommen zonder uw volledige lay-out te hoeven wijzigen. Combineer dat met mediaquery's en je hebt nu een contentlay-out die zich splitst in twee of drie kolommen voor grotere schermen, waarbij zowel een zeer leesbare lettergrootte als een zeer leesbare regellengte worden behouden.
Nogmaals, de code om dit te doen is vrij eenvoudig:
@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, op schermen die groter zijn dan 1140 pixels breed, krijgt u uw inhoud opgesplitst in twee kolommen, waardoor de lengte van uw lijn leesbaarder wordt.
Alternatieve letterbeelden gebruiken
Een ding dat vaak over het hoofd wordt gezien als het gaat om responsieve typografie, is het idee dat verschillende letterbeelden mogelijk niet goed werken in verschillende formaten. Dit geldt met name voor display-lettertypen.
Betekent dit dat u deze lettertypen niet in uw responsieve ontwerpen moet gebruiken? Natuurlijk niet. In plaats daarvan specificeert u eenvoudig verschillende lettertypen voor verschillende elementen in uw grotere of kleinere lay-outs.
Met een ontwerp voor desktopcomputers wilt u bijvoorbeeld een lettertype gebruiken League Script voor uw headers. Maar op een kleiner scherm, zoals een iPhone, moet je het zo groot maken dat het de inhoud domineert, anders zal het erg moeilijk te lezen zijn.
Wat we hier kunnen doen, is League Script gebruiken voor de grotere schermen (iPad, desktop, enz.), Terwijl we overschakelen naar een grotere versie van het hoofdlettertype voor kleinere schermen (zoals de iPhone of andere smartphones).
Om dit te doen, zou je gewoon iets als dit specificeren:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Natuurlijk kan dit ook voor meer dan alleen uw koppen worden gedaan.
Conclusie
Hoewel responsief ontwerp zich grotendeels heeft gericht op afbeeldingen en de algemene lay-out, is typografie net zo belangrijk als beide dingen. Het beste deel is dat het niet bijzonder moeilijk is om je typografie aan te passen en te optimaliseren voor een responsief ontwerp.
Het is van vitaal belang dat je er dezelfde tijd en moeite in steekt die je in andere elementen van je ontwerp steekt. Het behoud van de leesbaarheid van uw tekstcontent is een essentieel onderdeel voor het creëren van een optimale gebruikerservaring voor uw bezoekers.
Zet u evenveel nadruk op responsieve typografie in uw ontwerpen als op responsieve rasters en afbeeldingen? Waarom of waarom niet?