Vormgeving van titels en subtitels

Het lijkt soms zo mooi, je hebt een website ontworpen. Een mooie header met een bijpassend logo. Een strak lettertype. Je navigatie is duidelijk en je hebt dit allemaal in een goed werkend systeem gegoten. De volgende stap is dat je de eerste pagina van je nieuwe website gaat vullen. Wanneer de pagina gevuld is merk je pas dat je eigenlijk iets mist. Vaak kan het goed vormgeven van je titels en subtitels een saaie tekst veranderen tot iets wat uitnodigt om te lezen.

Lettertypes

De eerste keuze die je moet maken is welk lettertype er gebruikt gaat worden. De meest simpele oplossing is om hetzelfde lettertype voor de titel als voor de tekst te gebruiken. Het is wat creatiever om een ander lettertype te kiezen. Technische gezien is de makkelijkste keuze om een standaard font te kiezen dat ondersteund wordt door de meeste browsers. Maar het is zeker niet onmogelijk om hier van af te wijken. Bijvoorbeeld door het gebruik van sIFR kun je alle lettertypes gebruiken. Ook voor sommige grafische effecten en kleuren zijn hele mooie oplossingen te vinden maar met standaard HTML en CSS kom je ook een heel eind. De vraag blijft natuurlijk welke lettertypes kun je goed met elkaar combineren. Hierop is geen eenduidig antwoord te vinden. Zoek twee of meer lettertypes die goed bij elkaar passen, experimenteer wat en volg je gevoel. Het enige wat ik je mee kan geven is dat bepaalde lettertypes zich goed lenen voor het plaatsen van grote stukken tekst op een beeldscherm. Andere lettertypes zijn beter voor het plaatsen van titels en subtitels.

Kleur

De kleur van je tekst moet altijd makkelijk te lezen zijn. Vooral bij de grote lappen is dit belangrijk. Bij de titels kun je wat gemakkelijker afwijken. Juist doordat titels vaak groter en/of vet worden geplaatst is het minder belangrijk dat het kleurgebruik duidelijk is. Ze zijn namelijk toch wel goed te lezen. Kies voor een titel dus een andere kleur. De keuze van de kleur zelf is afhankelijk van de vormgeving van de rest van de website. Probeer een kleur te gebruiken die ergens anders op de website ook voorkomt. Probeer daarnaast nooit te veel opvallende kleuren te plaatsen. Twee of drie kleuren (met verschillende variaties daarop) is voor een website meestal meer dan voldoende.

Door met kleuren te spelen zijn ook een aantal leuke effecten te gebruiken. Door bijvoorbeeld alleen het eerste woord of de eerste letter steeds een afwijkende kleur te geven krijg je een erg speels uiterlijk.

HOOFDLETTERS

Ook door wel of geen CAPITALEN oftewel HOOFDLETTERS te gebruiken kun je een duidelijk verschil aangeven tussen je titels, subtitels en tekst.

Uitlijning

Door een titel of juist de tekst in te laten springen kun je een leuk effect bereiken. Ook kun je een titel juist aan de andere kant uitlijnen dan de tekst.

Witruimte

Door tussen woorden witruimte groter of juist kleiner te maken krijgt een titel en een hele tekst een compleet andere uitstraling. Persoonlijk vindt ik in veel gevallen een grotere witruimte dan standaard door een browser wordt meegegeven erg goed staan.

Grafische elementen

Door een balkje, een cirkeltje, een pijltje of juist iets heel anders voor, achter, boven of onder een titel te plaatsen kun je extra aandacht naar de titel trekken. Je hebt ook een extra mogelijkheid om kleur te gebruiken.

Het is ook mogelijk om een onderdeel van je logo te gebruiken. Zodoende komt je huisstijl over je hele pagina weer terug.

Plaatsing subtitel

Het creatief plaatsen van een subtitel kan ook een wereld van verschil betekenen voor het uiterlijk van je pagina. Meestal wordt een subtitel recht onder de titel geplaatst. Maar op het moment dat je een goed onderscheid maakt tussen titel en subtitel kunnen ze ook op een andere manier bij elkaar geplaatst worden.

Mouse-over effecten

Bij een weblog zie je vaak dat titels tevens links zijn. Door een Mouse-over effect hier op toe te passen lijkt de titel meer op een link en heb je tevens een extra mogelijkheid om de titel van de rest van de tekst te onderscheiden. Het is een leuk idee om één van eerder genoemde elementen toe te voegen of weg te laten tijdens het Mouse over effect.

De conclusie die je kunt trekken uit dit verhaal is dat het gebruik van titels en subtitels je website een heel andere uitstraling kunnen geven. Titels zijn meer dan tekst, het is een onderdeel van je vormgeving en je huisstijl.

Alle gebruikte voorbeelden komen uit de templates van Templatemonster.

• Tweet