Je lopende lettertype is het lettertype dat in documenten, nieuwsberichten en andere standaardteksten terugkomt.
Vroeger was een lopend lettertype van 10, 12 px heel normaal. Alleen is dit de laatste jaren flink veranderd. Dat komt zeker niet door de vergrijzing. Beeldschermen worden groter, maar ook vooral de schermresolutie wordt groter. De afstand van de persoon tot het scherm is dan niet meer in een goede verhouding bij een klein lettertype. Deze trend zal zich alleen nog maar voortzetten.
Scrollen is daarentegen geen probleem meer. Door de opkomst van smartphones of tablets is men dit in zekere zin gewend. Sterker nog, al je informatie op één klein stukje zetten is juist heel vervelend. Is de grootte van je lettertype nog kleiner dan 13px? Dan moet je toch eens sterk overwegen er wat aan te doen.
Er spelen altijd meerdere factoren mee. Doe je dit bijvoorbeeld voor InSite of OutSite? Maar vooral, welke tekst maak je groter? Er zit natuurlijk een groot verschil tussen koppen en je lopende lettertype. Het lopende lettertype is het grootste deel van je website, dus deze wil je ook niet overdrijven. Toch durven wij wel te stellen dat 15px het minimale is om te gebruiken. Diverse blogsites gaan tegenwoordig zelfs voor een lopend lettertype van 20px of meer.
Ook heb je met InSite te maken met weergaven. Je moet gewoon meer informatie kwijt. Op een OutSite is dit beperkt. Hier kan je dus makkelijker met een groter lettertype werken!
Ik beloof je, de eerste keer is het heel eng om je lettertype te vergroten. Gelukkig kan je dit in je thema testen zonder dat iemand er last van heeft. En het mooiste is nog: het kost je nog geen 5 minuten.
Maak een screenshot van hoe je site er na de aanpassing uitziet en houd deze naast je huidige site. Laat het ook vooral even aan anderen zien. Ik weet zeker dat je voor een groter lettertype zult kiezen!
Ga je de grootte van het lettertype aanpassen? Dan mag je de regelhoogte absoluut niet vergeten om ook aan te passen. Er moet een goede balans zitten tussen de grootte van je lettertype en de regelhoogte daartussen.
Je regelhoogte is minimaal 1,5 keer je lettergrootte. Dat is makkelijk te onthouden. Kom je op een kommagetal uit? Rond vooral naar boven af. Als je echt naar grotere lettergroottes voor je kopteksten gaat kijken (boven de 30px), dan kan je deze verhouding loslaten. Nogmaals: test het en oordeel zelf!
Als je dan toch bezig bent met je teksten beter leesbaar maken, dan kan je ook nadenken over het lettertype dat je nu gebruikt. Bij veel organisaties is deze in de huisstijl vastgelegd. Hanteer je deze? Dan kan je alvast naar de volgende tip gaan.
Stel: je werkt bij een museum. Het museum gaat over het oude Egypte. Het museum is helemaal in deze sferen ingericht. Zelfs het lettertype wat je nu gebruikt is gebaseerd op die tijd. Dan hoop ik dat je deze niet als lopend lettertype ingesteld hebt. In de koppen kan je deze prima gebruiken. Een grote kans dat dit ook niet het geval is bij jou, anders is er werk aan de winkel.
Het lopende lettertype moet namelijk zo goed mogelijk leesbaar zijn. Anders heb je een grote kans dat mensen jouw teksten niet (goed) lezen. En op het internet geldt: kost iets teveel moeite, dan zoeken we het wel ergens anders.
Er zijn heel wat lettertypes standaard beschikbaar in InSite & OutSite. Wij zouden één van onderstaande lettertypes aanraden:
Hoe kijk jij zelf naar een website? Ik betwijfel of je elke letter leest. Grote kans dat je in deze blog ook al wat teksten hebt overgeslagen. Dat is ook helemaal niet erg, want de meeste websitebouwers haken daar slim op in. Kopteksten, kleurverschillen en plaatjes pakken de aandacht. Dat is dus precies wat jij ook kan doen.
Neem onderstaand voorbeeld van AFAS SB+, het boekhoudpakket voor ondernemers en zzp'ers van AFAS. Als je scannend leest, zul je de koppen lezen, de afbeelding bekijken en de vinkjes onderaan bestuderen. Spreekt het je aan? Dan zul je ook de rest lezen. Spreekt het je niet aan? Dan scroll je snel verder.
In deel 1 vertelde ik je al hoe je kan werken met volledige breedte. Maar je kunt achtergronden natuurlijk ook toepassen op de pagina die je aan het bouwen bent.
Let op: je moet in de eigenschappen eerst het vinkje ‘volledige breedte toepassen’ aanvinken voordat je onderstaand voorbeeld kunt naspelen.
De achtergrond die op het eerste blok staat in je sectierij gaat over de hele breedte. Alle achtergronden die je daarna toevoegt blijven binnen de ruimte die jouw inhoudsblok ter beschikking heeft. Dit klinkt misschien nog wat vaag, maar kijk daarom goed naar onderstaande animatie.
Je ziet één sectierij met daarin drie secties. In de middelste sectie zijn 3 inhoudsblokken toegevoegd. Het bovenste inhoudsblok heeft een vaste hoogte van 75px en bevat de achtergrondfoto die over de hele breedte gaat. Het tweede inhoudsblok heeft een achtergrondafbeelding van een wit blokje met een doorzichtigheid van 10%. Deze afbeelding blijft binnen het inhoudsblok, omdat alleen de eerste achtergrondafbeelding over de hele breedte gaat. De opbouw van dit blok is in onderstaande afbeelding nader toegelicht.
Of bekijk onderstaande video.
Tot zover deel 3 van de reeks ‘Hoe je een goede portalpagina bouwt voor je InSite of OutSite’. Kijk ook zeker naar deel 1, deel 2, deel 4 en deel 5 van deze blogreeks!
Tijdens de Dag van de AFAS beheerder 2022 presenteerde Jacco Faaij van onze marketingafdeling een groot aantal van deze tips. Zijn de tips dus nog niet helemaal duidelijk? Kijk dan zeker onderstaande video even terug!