5 eenvoudige manieren om webtypografie te verbeteren
Type is een van de meest gebruikte elementen van het web. Denk er over na. Tenzij je YouTube of Flickr bent, is de kans groot dat de bezoekers van je site komen voor je tekstinhoud - niet voor de mooie verpakking eromheen. Waarom gebruiken webontwerpers nog steeds tekst als een secundair element?
Goede typografie brengt orde op de pagina en vergroot de leesbaarheid . Het stelt mensen in staat om informatie sneller te verwerken.
Een meer scanbare, leesbare site betekent gelukkige bezoekers. Gelukkige bezoekers komen vaak terug, kopen producten, geven commentaar en delen de site met vrienden. Zie waarom het misschien de moeite waard is om aan te denken?
Ik kan voor altijd doorgronden hoe ver typografie op het web is gekomen en hoe ver het nog moet gaan. Ik ben vaak gestuiterd tussen web- en printontwerp. Wanneer u van InDesign naar TextMate gaat, zijn de beperkingen van het webtype glashelder .
Maar er is veel gezegd over welk webtype niet kan . Dit zal geen andere rant worden. Laten we in plaats daarvan focussen op 5 gemakkelijke oplossingen voor de typografische ogen die overal op het web voorkomen.
1. Gebruik A Reset Stylesheet
Stom, maar waar: geen twee browsers gebruiken dezelfde standaardwaarden voor de presentatie. Verschillen in opvulling, marges, koppen en inkepingen zijn groot. Als u wilt dat uw paginalay-out consistenter is in alle browsers, loont het om te beginnen met een CSS Reset-stylesheet.
Twee adviseer ik:
Yahoo's CSS Reset stylesheet
Eric Meyer's CSS Reset Stylesheet
2. Let op uw maatregel
Maat verwijst naar de lengte van een enkele regel van het type. Een langere regel = een langere maat. Studies hebben aangetoond dat voor optimale leesbaarheid het uitvoeren van tekstkolommen, zoals uw hoofdtekst, ergens tussen 45 - 75 tekens (30 - 50 ems) inclusief spaties moet zijn . Dit is een van de redenen waarom vloeiende ontwerpen (waarbij de kolommen uitvouwen en inkrimpen om in de breedte van de browser te passen) moeilijker zijn voor de ogen.
Bovendien moet je voorsprong toenemen met de lengte van je maat . Toonaangevende is de hoeveelheid witruimte tussen tekstregels en wordt bestuurd via de CSS-lijnhoogte-eigenschap. Als u een extra lange meetlat moet gebruiken, zorg er dan voor dat uw voordeur opengaat.
Evenzo, als je een kleine kolom hebt, zoals een zijbalk met een korte maat, moet je voorsprong strenger zijn. Ik vind de standaardwaarde die de meeste browsers toewijzen een beetje te krap. Een lijnhoogte van ongeveer 1,4 m werkt goed voor de meeste lichaamscontent.
3. Neig naar de ruimte ertussen
Het gaat niet alleen om je tekst, maar ook om de ruimte eromheen. Te weinig ruimte maakt tekst moeilijk te lezen, maar dat is te veel. De sleutel is om een eenvoudige balans te vinden die het oog van het ene element naar het volgende leidt.
Een van de veelgemaakte fouten die nieuwe ontwerpers maken, is elke centimeter ruimte vullen. Witte ruimte verwijst naar de lege of "negatieve" ruimte rond je inhoud, en het is cruciaal. Kijk eens naar een goed ontworpen tijdschrift zoals Dwell of Good en je zult zien dat hoewel het de uitgever geld kost om elke pagina te printen, ze overvloedige hoeveelheden witte ruimte rond de tekst achterlaten. De pagina is in balans en je oog beweegt effectief van ruimte naar ruimte.
Behalve het aanpassen van je lijnhoogte (zoals vermeld in # 1), kun je ook je vulling en marges vergroten . Tenzij je probeert een gekke visuele truc uit te halen, moet er altijd een goede hoeveelheid witruimte rondom je tekst zijn. Laat het niet tegen andere elementen op, vooral afbeeldingen. Laat je inhoud chunks (koppen, alinea's, zijbalken, etc.) ademen.
Mark Boulton schreef een zeer informatief artikel over Witte ruimte voor A List Apart, check it out.
4. Do not Go Font Crazy
Een goede vuistregel voor elke ontwerper is: gebruik niet meer dan twee lettertypen gezichten in je ontwerp. Twee lettertypen kunnen er erg stijlvol uitzien. Een lijst uit elkaar maakt gebruik van variaties van Georgia en Verdana om een elegante en gepolijste look te creëren. Maar het blijven toevoegen van lettertypen aan uw interface creëert onnodige verwarring. Gebruik op dezelfde manier niet te veel lettergrootten, kleuren of behandelingen op een pagina of in een alinea, anders concureren ze met elkaar in plaats van de nadruk te leggen zoals bedoeld.
Hoewel lettertypestapels en technologieën zoals sIFR en Typeface.js kunt u zo ongeveer elk gewenst lettertype als standaard opgeven, en de verleiding weerstaan om wild te gaan met de body-kopie. Decoratieve lettertypen worden het best bij de krantenkoppen bewaard, omdat ze van invloed zijn op de leesbaarheid. Denk er eens over na - wanneer heb je voor het laatst een paperback-roman gekocht die helemaal in Comic Sans is geschreven?
Houd bij het maken van lettertypestapels rekening met de grootte van uw combinaties. Sommige lettertypen die er hetzelfde uitzien, worden in zeer verschillende formaten weergegeven. Verdana en Arial zijn hiervan een goed voorbeeld. Typetester is een geweldig hulpmiddel om kernweblettertypen te vergelijken en een succesvolle stapel te maken. Een andere handige tool genaamd Font Stack Builder laat u zien welk percentage gebruikers elke variatie zal zien.
Ongeacht welke lettertypen u besluit te gebruiken, zorg ervoor dat ze niet erg klein zijn. Ik weet het moeilijk ... kleine tekst ziet er cool uit. Maar denk eens aan de arme, loensende gebruikers! Houd lichaamstekst boven 10 of 12 pixels. Als je erop staat klein te blijven, gebruik dan in ieder geval relatieve maatvoering voor al die IE 6.0-gebruikers die anders niet groter zouden kunnen worden. Lezen Het artikel van Wilson Miner over lettergrootten voor een geweldige kijk op het debat.
5) Verwaarloos de details niet
De klant heeft de inhoud geleverd. Toevoegen aan de site is gewoon een kwestie van kopiëren en plakken, toch? Verkeerd, fout, fout. Dit is een val waar webontwerpers maar al te vaak in terechtkomen.
Zelfs degenen onder ons die ijverig heading-tags toevoegen, elke paragraaf opmaken en opsommingstekens met zorg ordenen, vergeten een aantal belangrijke typografische details. Velen (waaronder ikzelf) misten formele typografische trainingen, dus je kunt ons niet de schuld geven. Maar de duivel zit in de details. Het is tijd dat we deze basics omarmen:
Gebruik slimme citaten
Wat is het verschil tussen slimme citaten en domme citaten? Slimme aanhalingstekens (ook bekend als boek of gekruld ) zijn gebogen en hebben zowel een openings- als een sluitingsstijl. Domme ( rechte ) citaten zijn meestal recht op en neer. Een apostrof is typografisch slechts een enkel aanhalingsteken, dus hetzelfde probleem is van toepassing. Een domme quote (ook wel prime genoemd ) mag alleen tussen metingen worden gebruikt. 6'4 "gebruikt bijvoorbeeld dubbele en enkele prime-aanhalingstekens.
Helaas zetten onze toetsenborden standaard citaten in. Microsoft Word en andere teksteditors corrigeren ze gewoon voor ons terwijl we schrijven. Het toevoegen van slimme aanhalingstekens aan HTML-pagina's vereist meer werk van de webontwikkelaar, omdat u markeringen moet gebruiken om openings- en afsluitende offertesymbolen te produceren. Ik zie hetzelfde probleem met em en en-streepjes, ellips, handelsmerk en copyright-symbolen. Coders nemen de gemakkelijke uitweg door ze te vervangen door koppeltekens, meerdere perioden, een grote TM en de beruchte (C). Het gebruik van de juiste symbolen maakt visueel een verschil. Doe het goed en laat redacteuren overal glimlachen.
Hoe slimme koersen te maken:
#8216; = enkele quote openen
’ = enkele quote sluiten
“ = dubbele aanhalingsteken openen
” = dubbele aanhalingsteken sluiten
Ik weet het - niemand wil de hele dag op zoek gaan naar offertes. Gelukkig, tools zoals SmartyPants en Textism kan veel van het legwerk voor u doen door tekst automatisch op te maken met slimme aanhalingstekens en dergelijke.
Lezen "Het probleem met EM en EN" van A List Apart voor meer informatie over het onderwerp en de UTF-8-tekencodering voor de meest voorkomende speciale tekens.
Een waarschuwing: veel CMS-teksteditors (zoals die op deze site worden gebruikt), laten u geen slimme aanhalingstekens implementeren zonder extra plug-ins. Triest, maar waar.
Stop met het plaatsen van twee spaties na een punt. Please! Het is niet nodig en het is eigenlijk nogal irritant.
Gebruik op je links border-bottom: 1px solid in plaats van text-decoration: onderstreep . Onderlijnen kunnen door de afroltekens lopen (g, j, p, q, y), waardoor ze moeilijk te lezen zijn, vooral als je kleinere lettergrootten gebruikt.
En hoewel het niets met typografie te maken heeft, heeft een snelle spellingcontrole nooit iemand gedood . Zelfs als alles wat je deed was kopiëren en plakken, weerspiegelt een spelfout die doorschuift naar een live site slecht voor alle betrokkenen.
Besteed aandacht aan die 5 fixes en uw site-ontwerpen zullen zeker verbeteren. Vergeet niet dat dit slechts een beginpunt is. Goede typografie is een geleerde vaardigheid, net als al het andere, en het vereist studie en oefening . Houd sites die het goed doen altijd in de gaten en noteer wat ze doen. Inspiratie nodig? Bekijk de onderstaande sites voor voorbeelden van geweldige webtypografie en plaats voorbeelden die u inspirerend vindt.
Inspiratietype:
Exclusief geschreven voor WDD door Mindy Wagner.
Wat denk je van deze eenvoudige manieren om je typografie te verbeteren? Implementeer je ze op jouw websites? We horen graag van je!