De laatste tijd ben ik veel bezig met responsive websites en één ding blijft me opvallen. Ongeacht of je een website op een 27″ scherm of een 3″ telefoon bekijkt: uiteindelijk draait alles om de content. Daarom focus ik me de laatste tijd veel op de typografische elementen in webpagina’s. Daaruit heb ik vijf snelle tips ‘geabstraheerd’ die je, als het goed is, zelf rechtstreeks in je eigen project zou kunnen gebruiken.
1. Gebruik em’s voor schaalbare typografie
Voor het geval je nog nooit van em‘s hebt gehoord: W3 heeft info en voorbeelden. Door em‘s te gebruiken blijven font-sizes relatief. Een voorbeeld: Wanneer ik een <p> een font-size van 1em geef (standaard is dit in je browser 16px) en ik geef een child van deze paragraaf een font-size van .875em, dan is die child dus 14px groot. Heeft een gebruiker echter zijn standaard font-size aangepast in de browserinstellingen dan schaalt de child gewoon mee en hoef je nergens in je CSS de font-size aan te passen! Tip: vergeet niet je html font-size op 100% te zetten, zodat ook daadwerkelijk de gebruikersinstelling van font-size wordt meegenomen.
<p>Simpele content <span class="child">kleiner</span> en weer gewoon</p>html {
font-size: 100%; /* Neemt browserinstelling over, standaard 16px */
}
p {
font-size: 1em; /* 16px */
}
.child {
font-size: .875em; /* .875 x 16px = 14px */
}2. Vergroot line-height voor verbeterde leesbaarheid
Grote stukken tekst worden gauw onleesbaar. Een snelle tip om dit te verbeteren is om de line-height te verhogen. Dit verhoogt de regelafstand zodat regels minder opeengepakt staan. In het voorbeeld gebruik ik een waarde van 1.5. Je vraagt je misschien af of hier geen px of em achter hoeft te staan: dat is overbodig (maar het mag wel!), omdat line-height een relatieve waarde is. Dat wil zeggen dat een item met font-size: 1em en een line-height van 1.5 dus een line-height van 1.5em heeft.
body {
line-height: 1.5;
}3. Slimme margins
Ik heb het altijd lastig gevonden om met headings om te gaan, omdat ik soms geen vat op kreeg waar margins, paddings etcetera vandaan kwamen. Op een gegeven ogenblik las ik een artikel waarna ik een idee kreeg: voeg margins alleen aan de onderkant van elementen toe, met uitzondering van headings. Zonder uit te wijden over het artikel kwam ik op de volgende structuur voor mijn headings:
/**
* HEADINGS
* 1: Reset line-height naar 1 om positionering makkelijker te maken;
* 2: Maak de margin-top groter dan de margin-bottom zodat
* de heading loskomt van het element erboven en het element
* onder de heading er nog steeds visueel bij hoort
*/
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1; /* -1- */
margin: 1.5em auto .75em; /* -2- */
}4. Maximale paragraaflengte
Volgens verschillende onderzoeken wordt de leesbaarheid van een tekst vergroot door tussen de 45 en 75 karakters (inclusief spaties) per regel te tonen. In CSS is dit makkelijk te bereiken, aangezien blijkt dat een karakter gemiddeld ongeveer .5em inneemt:
p {
max-width: 34em; /* Dus ongeveer 68 karakters breed */
}5. Zorg voor contrast
Deze laatste is lastig, aangezien ik geen grafische achtergrond heb en me hier dus op glad ijs begeef. Vaak zie ik websites die een witte achtergrond en zwarte letters hebben. Op zich niets mis mee, maar naarmate je langer naar zo’n pagina gaat kijken gaan je ogen zeer doen. Dat komt deels door het grote contrast van zwart en wit. Een simpele oplossing die ik hiervoor gebruik is om geen echt ‘zwart’ te gebruiken, maar donkergrijs. En indien mogelijk geen wit maar heel lichtgrijs. Het omgekeerde komt overigens ook voor (te weinig contrast, bijvoorbeeld lichtgrijs op iets minder lichtgrijs ;)), maar het eerste stoort me meer. Een simpel voorbeeldje om dit te verhelpen:
body {
background-color: #f2f2f2; /* Net niet wit */
color: #333; /* Net niet zwart */
}Dit waren wat simpele technieken om je typografie wat te verbeteren. Ik hoop dat je er wat mee kunt en ik zou het tof vinden als je een voorbeeld hebt! Laat het me weten via Twitter!