10 webtypografie regels die elke ontwerper moet weten
Wanneer iemand een website bezoekt die je hebt ontworpen, is de kans groot dat ze niet zoveel geven om de kleuren, afbeeldingen of geluiden, ze kijken meteen naar de tekst.
Ongeacht hoeveel toeters en bellen je hebt ingebouwd in een website, iedereen vertrouwt op tekst om te bereiken wat ze de site bezoeken om te doen .
Dat alleen al zou typografie, de kunst van het rangschikken van het type, een prioriteit moeten maken voor elke webontwerper.
In dit artikel bekijken we 10 eenvoudige regels om in gedachten te houden bij het ontwerpen van uw volgende webproject.
1. Lees de tekst zelf door
Met een ontwerp zoals JonesingFor een ontwerper zonder een goed begrip van de tekst zou moeite hebben gehad om de typografie samen te stellen waardoor deze site echt werkt. Terwijl je je eigen typografie aanpakt, hoef je je waarschijnlijk geen zorgen te maken over het schrijven van de tekst van een site - maar je moet het wel lezen!
Sommige webontwerpers denken dat het kopiëren en plakken uit een tekstbestand het totaal is van hun tekstuele taken. Maar het doorlezen van de tekst biedt op zijn minst een basisidee van hoe de tekst kan worden geïntegreerd in een website, waarbij de scheiding tussen het schrijven en het ontwerp van een website wordt vermeden.
Je kunt je typografie nog een stapje verder trappen, als je de tekst kunt lezen als deze eenmaal in je ontwerp zit. Let vooral op de ruimte rond de letters . Heb je ongebruikelijk grote ruimtes die er vreemd uitzien? Een beetje zorgvuldige typografie kan deze problemen oplossen. U kunt ook een idee krijgen van lijnen die mogelijk te lang zijn om gemakkelijk te lezen, lastige regeleinden en vergelijkbare problemen.
2. Dump Lorem ipsum zo snel mogelijk
Denk je dat je het had kunnen ontwerpen De website van Jesus Rodriguez Velasco zonder de echte tekst? De site is sterk afhankelijk van het geschreven woord - en ook zeer specifieke woorden. Zelfs de lichaamstekst kreeg speciale aandacht met een druppelstop en enkele andere aanpassingen, die met Lorem ipsum gewoon niet mogelijk waren geweest.
Tenzij de tekst van uw website eigenlijk Lorem ipsum is, zal dummy-tekst geen overeenkomst vertonen met het echte werk . Dat betekent dat elke aanpassing aan de tekst - of het ontwerp eromheen - zal moeten wachten tot je het echte werk hebt. Vragen om (en het krijgen van) tekst van uw klant zo vroeg mogelijk in het proces geeft u de mogelijkheid om uw algehele ontwerp en uw typografie te evenaren.
3. Laat een duidelijke hiërarchie zien
Wanneer je aankomt Rik Cat Industries , je weet meteen waar je moet beginnen met lezen. Hoewel er een paar links boven aan de pagina staan, valt Rik's welkom eerst op. Het is veel groter, met behulp van typografie om een duidelijke hiërarchie vast te stellen .
Elke site heeft een goed ontwikkelde hiërarchie nodig: indicatoren van waar te beginnen met lezen en hoe verder te gaan. Uw typografie kan die hiërarchie bieden - precies zoals Rik dat doet - zolang u uw hiërarchische volgorde van tevoren kent. Door na te denken over grootte en lettertypen, kunt u een stuk tekst markeren als een kop op een manier die een andere plaatsing in het ontwerp niet kan bieden.
De hiërarchie van je ontwerp gaat natuurlijk verder dan alleen de typografie die je gebruikt, maar aangezien gebruikers bijna altijd met de tekst beginnen, is het logisch dat ontwerpers hetzelfde doen.
4. Besteed aandacht aan zowel macro- als microtypografie
Zich volledig baserend op typografie voor hun voorpagina, de Crowley Webb en Associate's website is ontworpen met twee factoren in het achterhoofd: zowel macro- als micro-typografie .
Macrotypografie is de algemene structuur van uw type, hoe deze wordt weergegeven in de context van uw ontwerp en de esthetiek ervan wanneer u uw tekst als een blok op zichzelf beschouwt.
Micro typografie houdt zich meer bezig met de details van de spatiëring, de problemen die bepalen of woorden gemakkelijk te lezen zijn. Micro typografie is een absolute noodzaak als het gaat om het samenstellen van een tekstblok: als het niet leesbaar is, heeft het geen zin om verder te gaan. Crowley Webb en Associates hebben deze vraag aangepakt door zowel zorgvuldig te schrijven als door woorden uit te spitten die de site zou benadrukken.
Maar macro-typografie biedt je de mogelijkheid om je tekst meer dan goed verdeeld te maken: het is de kans om het er aantrekkelijk uit te laten zien en een deel van je hele ontwerp . De keuze van lettertypen en kleuren op deze website creëert een levensvatbaar geheel. Het negeren van beide facetten van typografie is nadelig.
5. Pas op met typekleuren
Het zou zo gemakkelijk zijn om tekst kwijt te raken op de achtergrond van ArtofElan , in het bijzonder de felrode op donkerrode combinatie gebruikt door de ontwerper. Wanneer een webontwerper met een gekleurd type werkt, is zorg absoluut noodzakelijk, is er geen garantie dat een rood op rood combinatie, of zelfs een geel op rood combinatie zichtbaar zal zijn . Immers, iedereen heeft een website bezocht waar de tekst slechts één schaduw leek te zijn van de achtergrondkleur en oogvermoeidheid kreeg wanneer ze probeerden het te lezen.
De gemakkelijkste oplossing voor deze situatie is om ervoor te zorgen dat de kleur van je type drastisch verschilt van die van je achtergrond . Zwart en wit werken zo goed omdat ze zo drastisch anders zijn als je kunt krijgen, maar er zijn enkele kleurencombo's die goed werken: iets in de vorm van een donkerblauw op een lichtroze kleur krijgt de klus geklaard. Omgedraaide tekst is behoorlijk lastig ... terwijl je kunt werken met lichtroze tekst op een donkerblauwe achtergrond, heb je meer kans om er een klacht over te krijgen.
6. Ga serieus om met je CSS
Als uw CSS degelijk is, kunt u naadloos tussen de pagina's van uw website schakelen, net als de verschillende versies van Hutchouse.com vertrouw op verschillende stylesheets om een aantal indrukwekkende effecten te creëren. Zelfs als je niet zo ver gaat als Hutchhouse, kan CSS helpen typografische problemen zoals het veranderen van lettertypen en formaten tussen pagina's te elimineren.
CSS kan zorgen voor eenvoudige consistentie tussen uw typografie op het geheel van een website . Als je consistent bent in hoe je het type gebruikt, kan het breken van die consistentie, zelfs een klein bedrag, maken wat je wilt benadrukken, echt opvallen, net zoals het maken en vervolgens breken van een raster kan zorgen voor een effectief ontwerp. In webtypografie kan het consistent houden van uw lettertypen een eenvoudige kwestie van CSS zijn.
7. Grijp de gecentreerde tekst
Door een alternatief voor gecentreerde tekst te kiezen, kan een website-ontwerp gemakkelijk te lezen zijn , net als DesignCanChange.org . Kiezen voor gecentreerde tekst, vooral op een pagina als deze, zou een problematische pagina opleveren: de gekartelde randen centreren creëert aan elke kant het veel moeilijker te lezen en er zijn genoeg mogelijkheden voor perfect gecentreerde tekst om de rest van de rest te verdraaien uw ontwerpen op verschillende schermen.
In sommige kringen is het gecentreerde type slechts één stap omhoog van het gebruik van Comic Sans in een websiteontwerp. Je zou het als een kop kunnen beschouwen, maar in het algemeen zal het uitlijnen van je tekst naar links je lezers veel comfortabeler maken, tenzij ze van rechts naar links lezen .
8. Behandel slimme citaten en andere symbolen
Luigi Ottani's website laat zien welke zorgvuldige aandacht aan aanhalingstekens en andere symbolen u krijgt: een volledig gebrek aan problemen wanneer de site die symbolen weergeeft. Veel websites zijn bezaaid met symbolen die een browser niet kan weergeven. Het is een erfenis van het feit dat het grootste deel van de tekst waarmee een webontwerper werkt, waarschijnlijk in Microsoft Word of een ander stuk tekstverwerkingssoftware is geschreven die allerlei kleine wijzigingen in de tekst aanbrengt zonder dat de schrijver veel aandacht besteedt.
Een van de slechtste wijzigingen zijn slimme aanhalingstekens: de gekrulde aanhalingstekens worden automatisch vervangen door rechte aanhalingstekens . Een ander probleemgebied komt wanneer u werkt met tekst geschreven in een andere taal: accenten en umlats kunnen net zoveel problemen veroorzaken als de hulpvaardigheid van Word. Als u tekst met dergelijke wijzigingen gewoon in uw ontwerp kopieert en plakt, moet u waarschijnlijk later teruggaan om ze te herstellen, in ieder geval voor sommige webbrowsers.
Haal ze in plaats daarvan vroeg in het ontwerpproces, zodat u zich kunt concentreren op het beter laten aansluiten van uw tekst op uw ontwerp . Als je wilt dat die mooie symbolen en slimme aanhalingstekens in het definitieve ontwerp verschijnen, doorbreek dan je HTML-entiteiten.
9. Plan voor uw tekst om groter te worden
Wanneer u de tekst groter maakt Veerle Pieters website, het is niet zo mooi als wanneer je de lettergrootte gebruikt die ze heeft uitgekozen. U kunt echter nog steeds alles lezen, koppelingen zoeken enzovoort, iets dat geldt voor heel weinig websites.
Dat komt omdat, ten dele, veel ontwerpers ervoor zorgen dat de tekst in 10-punts lettertype of zelfs kleiner wordt opgemaakt. De meeste mensen lezen deze lettertypen op comfortabele wijze, maar Baby Boomers vormen een groot deel van de pop-up populatie en veel van die verouderende websurfers zullen hun browsers zo groot mogelijk laten weergeven . Uw tekst, evenals uw ontwerp, moet zich aan dat feit kunnen aanpassen.
Het is ook de moeite waard om rekening te houden met het feit dat de browsergrootte enorm kan variëren , en tekst kan verplaatsen naar onverwachte locaties als je niet voorzichtig bent. Als het botsen van de grootte een punt problemen oplevert, gaat oudere demografische groep snel door naar de volgende website. Als u voor altijd naar de zijkant moet scrollen, krijgt u een vergelijkbaar resultaat.
10. Toon een voorkeur voor sans serif
Als je naar de Een lijst apart's website, vrijwel elk groot tekstblok is in een schreefloos lettertype geplaatst, waardoor het veel gemakkelijker te lezen is. Krantenkoppen en andere kleinere tekstblokken zijn in serifed lettertypen opgemaakt, waardoor een balans tussen de twee wordt gecreëerd.
Als het gaat om het neerzetten van tekst op een scherm, zijn sans serif-lettertypen bijna altijd de beste gok , vooral als je een lettertype als Verdana hebt gekozen dat is ontworpen voor weergave op een computerscherm. Serifed-lettertypen hebben een hogere kans om slecht te worden weergegeven, worden wazig of worden zelfs gepixeld.
Het is natuurlijk niet mogelijk om serifs volledig te vermijden. Maar met name voor grote blokken tekst kan het gebruik van een lettertype zonder schreef een extra garantie bieden dat bezoekers de tekst van een site gemakkelijk kunnen lezen. Als u lettertypen voor een project kiest, moet u eerst de schreefloze opties doornemen .
Een laatste opmerking
Typografie wordt gemakkelijk over het hoofd gezien, en zelfs als een ontwerper er rekening mee houdt, is het gemakkelijk om af te schrijven als een tijdrovende activiteit met weinig rendement. Maar zelfs een paar minuten besteden aan de tekst die het belangrijkste onderdeel van je ontwerp zal zijn, kan het transformeren van iets dat een webontwerper op een pagina naar een element kan tikken dat de rest van het ontwerp ondersteunt.
Exclusief voor WDD geschreven door donderdag Bram.
Volg je deze regels en anderen? Deel uw mening hieronder ...