Over titels en witruimte

Op het web is het vaak wat behelpen wanneer het op typografie aankomt. Letters en teksten worden door de verschillende browsers en platformen anders weergegeven. En zowat elke tekst is dan nog eens vrij updatebaar door de webmaster. Als ontwerper is het dan ook moeilijk om webtekst voor elke eindgebruiker met zekerheid mooi vorm te geven.

Neem nu even de titel van dit heel eenvoudig ontwerp voor een nieuwspagina:

De titel ziet er goed uit. Maar wat als een klant via het contentmanagementsysteem van zijn site een langere titel ingeeft? Dan kan er wel eens een typografisch probleempje optreden:

Zoals je ziet verschuift het laatste woord van de titel naar een nieuwe regel. Omdat dat laatste woord heel kort is, bestaat die regel uit teveel witruimte. De titel staat daardoor helemaal niet meer mooi en is minder makkelijk te lezen.

Een oplossing

Shaun Inman schreef al in 2006 een makkelijk te implementeren php-functie die het probleem gedeeltelijk oplost door een harde spatie (non-breaking space) tussen de laatste twee woorden van de titel te plaatsen. Die zorgt er voor dat die twee altijd op dezelfde regel blijven. Het resultaat zie je hieronder:

Ongetwijfeld veel beter. Alleen kan het in bepaalde gevallen ook minder goede resultaten opleveren. Als het laatste woord lang genoeg is zoals in het voorbeeld hieronder, dan is het soms niet nodig om de harde spatie te gebruiken die je in het voorbeeld ziet toegepast:

Uiteraard is die laatste titel niet per sé slecht gezet, maar ik hou niet zo van de vele witruimte op beide regels. Ook de volgende situaties komen wel eens voor:

In dit laatste voorbeeld is de tweede regel langer dan de eerste regel en dat is natuurlijk best helemaal te vermijden: het lijken twee titels te zijn, of een titel en een onderschrift.

Een aanpassing

Eén van mijn laatste projecten was het ontwerpen en ontwikkelen van een nieuwswebsite waar dagelijks meerdere artikels gepost worden. Omdat ik vrij veel met een van de bovenstaande titelproblemen te kampen had, heb ik een kleine en eenvoudige aanpassing aan Inmans php-functie toegevoegd.

Ze laat me toe om een parameter op te geven: bestaat het laatste woord uit minder dan x-aantal tekens dan wordt er automatisch een harde spatie tussen het laatste en het voorlaatste woord geplaatst. Is het laatste woord een lang woord dan kan het dus eventueel alleen op de laatste regel staan.

Ik heb het gevoel dat dit in de meeste gevallen een mooier gezette titel oplevert. Het aantal tekens kan ik hoger instellen wanneer de kop veel ruimte in de breedte inneemt en lager wanneer de titel in een smalle ruimte gezet is.

Wil je het zelf eens proberen op je website? Download gerust de php-functie of de ExpressionEngine plugin. Extra suggesties of aanpassingen zijn trouwens meer dan welkom.

Categorieën: ExpressionEngine, Ontwerp, Typografie, Opinies,