Tekstomloop op het web in Photoshop

Bij het ontwerp van nieuwspagina’s of blogpagina’s op websites zie je vaak een foto links of rechts bovenaan het artikel. De tekst loopt dan mooi rondom de foto. Hieronder een voorbeeldje van wat ik bedoel, zoals te zien op www.typography.com:

Het is een vormgeving die natuurlijk ook heel vaak in offline media te zien is zoals kranten en magazines. In opmaakprogramma’s als InDesign is het daarom makkelijk gemaakt om een tekstomloop rond een afbeelding te creëren. Er is zelfs een volledig paletje aan gewijd met bijkomende tekstomloopopties.

Ook met HTML en CSS is zoiets heel eenvoudig te realiseren. In Photoshop daarentegen is het allemaal wat moeilijker. Logisch: Photoshop is er in de eerste plaats om foto’s te bewerken. En niet om teksten te zetten. Maar omdat zoveel ontwerpers opgegroeid zijn met Photoshop, is het toch voor velen onder ons het favoriete programma om websites in te ontwerpen.

Vandaar deze eenvoudige tip om het effect van een tekstomloop te bekomen in Photoshop:

• Teken met de pen de vorm van een tekstkader rondom je foto. Door te shift-klikken kan je trouwens perfect horizontale of verticale lijnen tekenen.
• Beweeg met het tekstgereedschap binnenin je padvorm. Als alles goed is zie je een bolle cursor.
• Klik in de padvorm om het pad om te zetten naar een tekstkader.
• Typ of plak je tekst in het tekstkader.

Je tekst zal nu mooi rond de foto lopen. Als je het tekstkader wil aanpassen dan kan je daarvoor de padgereedschappen gebruiken. Met de witte pijl kan je bijvoorbeeld de ankerpuntjes nog individueel verplaatsen.

Het is een beetje behelpen, maar het werkt wel.

Categorieën: Ontwerp, Typografie, Photoshop, Webomgeving,

1 reacties

De Helvetica’s van het internet

Arial, Verdana en Georgia: het zijn de Helvetica’s van het internet. Overgebruikt, onopvallend en leeggezogen van elke connotatie. Waarom vallen webdesigners altijd terug op deze 3 klassieke lettertypes? Het antwoord is helemaal niet spannend: het zijn de enige fonts die op nagenoeg elke computer geïnstalleerd zijn. En dus is de kans enorm groot dat jij ook deze tekst in Arial ziet, en de titels in Georgia.

Maar als we de aankondiging op de nieuwe Typekit website mogen geloven, dan staan we aan de vooravond van een typografische webrevolutie. Typekit, een online fontbibliotheek, zal het technisch en legaal mogelijk maken om als ontwerper webteksten in een arsenaal aan kwaliteitslettertypes te zetten. De bezoeker krijgt dan steevast het juiste lettertype te zien. Hoe het allemaal in zijn werk zal gaan, kan je lezen op de Typekit blog.

Hoera! Eindelijk zullen ook websites net als boeken, tijdschriften en affiches in prachtige letters verschijnen. Niet via onhandige javascript- of flashtrucjes, maar dankzij het eenvoudige @font-face css-principe. Ik kijk uit naar zoveel moois. Lettervormen die iets vertellen over de inhoud van de website, die een gevoel kunnen versterken en die bijdragen tot een betere ervaring van het internet.

Alleen vrees ik ook de keerzijde van de medaille. Hoelang zal de experimentale fase duren waarin blogs en websites van hobbyisten in de meest onleesbare lettertypes gezet zullen worden? Een Impact voor leestekst en een goedgekozen Comic Sans – dat is toch schoon meneer – voor de invulvelden?

Hoewel Arial, Verdana en Georgia al lang niet meer tot de verbeelding spreken, één ding moeten we ze wel toegeven: ze zijn verdomd goed leesbaar op schermen. Ze leggen de nadruk op de tekst en de inhoud en daar gaat het in de meeste gevallen om.

Het wordt een uitdaging voor iedereen om op een goede manier met de nieuwe mogelijkheden om te gaan. Komt er ooit een dag waarop we met weemoed terugblikken op het oude driefontsinternet?

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

4 reacties

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,

2 reacties

Een handvol uitstekende concertposters

Aesthetic Apparatus is al jarenlang een van mijn favorieten wanneer het op vormgeving, typografie en zeefdrukwerk aankomt. Vooral tussen hun concertposters zitten enkele pareltjes.

Nu hebben ze blijkbaar ook een reeks gigantisch grote affiches ontworpen voor het Belgische Stella Artois. De affiches werden opgehangen in de Londense metro. Hier is een voorsmaakje.

Tientallen meer voorbeelden van affiches en ander grafisch werk vind je op de website van het Amerikaanse Aesthetic Apparatus. Ongetwijfeld een grote inspiratiebron voor velen.

Categorieën: Ontwerp, Typografie,

1 reacties

Zwarte tekst op een witte achtergrond

Als je even snel honderden jaren boekdrukkunst en typografie overloopt, dan merk je gauw dat het gros van de gedrukte boeken bestaat uit zwarte tekst op wit papier. Dat duidelijke contrast tussen de letterkleur en de achtergrondkleur zorgt er natuurlijk voor dat we aangenaam kunnen lezen.

Ook de letterkleur van tekst die op schermen gelezen wordt, contrasteert best sterk met de achtergrondkleur om makkelijk leesbaar te zijn. Maar is zwarte tekst op een witte achtergrond ook hier de heilige graal? Mogen we met andere woorden deze typografische waarheid van honderden jaren boekdrukkunst zomaar overnemen op het web? Als we de websites van het gros van de Belgische kranten bekijken, dan lijkt dat zo te zijn.

DE PROEF OP DE SOM

Maar laat ons toch maar even op onderzoek uitgaan. Hier vind je een webpagina waarop tweemaal dezelfde tekst te lezen is. Aan de linkerkant zie je zwarte tekst (#000 voor de techneuten onder ons) op een witte achtergrond, aan de rechterkant donkergrijze tekst (#444) op een witte achtergrond. Welke vind jij het aangenaamst lezen?

Mijn gevoel neigt alvast naar de rechterkant. In het linker stuk lijkt het contrast tussen letter en achtergrond té drastisch. De rechter tekst staat zachter en leest naar mijn mening een stuk comfortabeler.

WAAR ZIT DAN HET VERSCHIL?

Wat in de wereld van drukwerk een bewezen waarheid is, lijkt op het web niet te werken. Een wit blad papier kan je nu eenmaal niet vergelijken met een wit vlak op een computerscherm. Als je even de gordijnen dicht doet en het licht uitlaat dan snap je wel wat ik bedoel: een scherm straalt licht uit; opdringerig licht.

Dat licht zorgt er voor dat het contrast tussen schermwit en schermzwart groter is dan dat tussen papierwit en drukzwart. En téveel contrast blijkt de leesbaarheid niet te bevorderen.

Conclusie

Webteksten laten we best niet té fel laten contrasteren met de achtergrond. We kiezen dus beter voor grijs-wit ten nadele van zwart-wit. Uiteraard werkt om het even welke andere kleurcombinatie die een aanvaardbaar contrast oplevert even goed. Hier zijn enkele goede online voorbeelden in verschillende kleurcombinaties. Ook eervolle vermeldingen voor onder andere deze Belgische dagbladen: De TIjd, Het Belang Van Limburg en Le Soir.

Niet geheel terzijde: alles hangt natuurlijk in grote mate af van de lichtomstandigheden van zowel het scherm (de meeste schermen kan je dimmen) als de omgeving. Als de zon op je scherm invalt, dan lijkt een zwart-wit scenario altijd beter leesbaar dan wanneer je in het donker op je computerscherm staart.

Wat vertelt jouw gevoel en je persoonlijke leeservaring op het web over deze typografische kwestie? Ik hoor graag je mening.

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

2 reacties