Typen schrijven voor het web begrijpen

In Web Design is het onderwerp typografie belangrijk als je kijkt naar alle aspecten van gebruikerservaring. Elke website heeft behoefte aan tekst en er zijn richtlijnen die u kunt volgen om uitzonderlijk verbluffende lay-outs te maken. Rasterlijnen, belettering, hoogte van het lettertype, tekstafstand, kleurenschema's en andere soortgelijke eigenschappen moeten allemaal in overweging worden genomen.

In dit artikel wil ik ingaan op het rijk van webtypografie. We zullen kijken populaire ideeën achter het ontwerpen van geloofwaardige webpagina-teksten. Onderweg zal ik er een paar introduceren nuttige CSS3-eigenschappen welke ontwerpers vaak vergeten.

Ik heb geprobeerd meer aandacht te schenken aan theorieën en ideologieën voor het web. Dit geeft een bredere focus op digitale tekst in het algemeen en u, de webontwerper, kan vervolgens kiezen welke stijlen voor welk doel moeten worden toegepast. Context is altijd de sleutel en je moet dit op de juiste manier bepalen voor elk project waaraan je werkt. Beschouw deze gids als een referentiepakket vol moderne webtrends van typografische innovators over de hele wereld.

Meet uw Paragrafen

Voor dit soort metingen hoeft u de yard-stick niet te verwijderen. Eigenlijk verwijst de maat met betrekking tot typografie naar de breedte (horizontaal) van een gegeven alinea op uw pagina. Het is niet een onderwerp dat altijd wordt besproken, maar het heeft wel invloed op de leesbaarheid van uw inhoud. Als algemene vuistregel wil je dat elke regel rond de 75-85 tekens lang is (niet noodzakelijkerwijs inclusief spaties).

Dit lijkt misschien een beetje een stretch voor een aantal bredere lay-outs. Vooral als je ontwerp vloeiend is en bedoeld om aan te passen als de gebruiker zijn browservenster aanpast. U kunt altijd een CSS instellen Maximale wijdte eigenschap op uw hoofdinhoud div. Coderingsmarges en lettergroottes in schaalbare eenheden (percentages, ems) in plaats van pixels maken een dergelijke flexibiliteit binnen elke lay-out mogelijk.

Er is geen maximale maateenheid om op te passen. Hoe je inhoud schrijft en woorden formuleert in zinnen is veel belangrijker dan de breedte van elke regel. Maar onthoud dat langere zinnen veel moeilijker te lezen zijn vergeleken met kortere, beknopte uitspraken.

Leidt uitgelegd

Houd bij het ontwerpen, samen met de alinea-maat, ook rekening met het idee van leidend. Het woord is uitgesproken “LEDD-ing”, zoals de lood gebruikt in potloden. Deze naam is afkomstig van de oudere dagen van mechanisch typen waarbij stroken van lood tussen tekstregels werden geplaatst.

Toonaangevende is nog steeds een zeer belangrijk concept in webdesign en gaat hand in hand met paragraaf maatregelen. Naarmate uw alineabreedte toeneemt, moet u een gelijke toename toepassen op de hoeveelheid voorloop, of ruimte tussen tekstregels. Deze extra ruimte maakt het lezen een stuk eenvoudiger voor uw ogen.

Als u heel strak gekronkelde tekst wilt doorlopen, is het misschien moeilijk om op één regel te focussen. Als dit het geval is, probeer dan de hoeveelheid leads te verhogen met de CSS lijnhoogte eigendom. U wilt altijd meer ruimte tussen tekstregels dan tussen woorden. Anders kunnen uw tekstblokken als krantenuitdrukking worden weergegeven en zullen ze niet erg gebruiksvriendelijk zijn om door te bladeren.

Een solide techniek is om meer ruimte toe te passen dan oorspronkelijk nodig was en om het te verkleinen indien nodig. Niet alle tekst is gelijk gemaakt en u zult zeker paragrafen met verschillende interne opmaak nodig hebben, zoals vetgedrukte woorden, ankerkoppelingen, onderstrepingen, enz. Met een extra voorsprong zullen deze veranderingen niet zo uit balans zijn in vergelijking met de andere tekst.

Gebruik natuurlijke lettergrootten

Er zijn nog steeds een handvol websites die kiezen voor een kleiner dan gemiddelde lettergrootte. 11px-12px kan veel meer lijken op de “standaard professional” voor zakelijke lay-outs. Maar deze groottes helpen de meerderheid van de bezoekers die op zoek zijn naar specifieke informatie niet.

Over het algemeen worden standaardbrowserinstellingen ingesteld op 16px als u geen CSS-regels toepast. Zelfs dit kan als een beetje klein worden beschouwd als u de extra ruimte in uw lay-out hebt voor grotere tekst. Grotere lettergroottes zien er gewoon leuker uit en zijn veel gemakkelijker te doorzoeken voor relatieve zoekwoorden. Serif-lettertypen worden niet vaak gekozen als alinea-materiaal, maar u kunt er nog steeds mee wegkomen. Ik stel voor om veel grotere tekstformaten te gebruiken voor serif-gebaseerde lettertypen om de leesbaarheid te verbeteren en de aandacht te trekken.

Reageren op de omgeving van de gebruiker

Terwijl u verschillende lettertypefamilies en -groottes uitprobeert, zal uw inhoudsgebied zich dienovereenkomstig moeten aanpassen. De standaardeenheid die ik vasthoud is ems omdat ze gemakkelijk opnieuw kunnen worden aangepast op basis van de beschikbare ruimte en schermresolutie. Dit optimaliseert de prestaties aan het einde van de gebruiker, wat het belangrijkst is.

Maar als je inhoud zo flexibel hebt, is je lay-out vatbaar voor fouten. Inhoud in uw voettekst- of zijbalkgebied kan in sommige browsers scheef of uit balans raken. Of u kunt moeite hebben om afbeeldingen of andere media in uw hoofdtekst samen te voegen. Er zijn nog andere alternatieven om ems te gebruiken als je een lay-out met een vaste stijl nodig hebt - maar probeer beide oplossingen om te zien welke je het leukst vindt.

Houd er rekening mee dat vaste breedtes en alineaformaten veel van de instellingen in uw ontwerp vergrendelen. Het is geweldig voor inhoud met veel stationaire esthetische effecten - denk aan achtergrondafbeeldingen of veel gemonteerde zijbalk-widgets. Het is ook een eenvoudig proces om een ​​gedeelte met vloeiende inhoud te maken in de linkerkolom met vaste zijbalken aan de rechterkant.

Stijl op basis van context

Sommige andere echt nette CSS-trucs zijn verborgen voor het reguliere ontwerp. Specifiek zijn er trends overgenomen van printwerk die in de juiste context kunnen worden toegepast.

Veel webontwerpers hebben zelfs de CSS-eigenschap text-indent niet gebruikt. U geeft een waarde op om de eerste regel van een alinea waarop deze regel is gericht, te laten inspringen. Eenheden volgen de standaard tekstopties zoals pixels, punten, ems, percentages ... Het is zeker geen trend die je zult vinden in de meeste blogs. Maar het biedt een mooi pagina-ritme tijdens het lezen van grote blokken tekst.

Er is een ander type CSS-selector bekend als a pseudo element. Dit kan gericht zijn op een specifiek onderdeel van elke inhoudselector. De CSS3: eerste letters pseudo-selector is perfect voor het maken van fancy stijlen op belangrijke paragrafen. Je kunt de beginletter van elke alinea modelleren - vergelijkbaar met een verhalenboek met een redelijk verhaal - met vet, cursief of zelfs met het veranderen van het lettertype. Bekijk dit mooie voorbeeld van drop-caps, inclusief extra CSS-code die u kunt gebruiken.

Spelen met Letter Spacing

Ik ben er zeker van dat velen van ons de term tracking eerder hebben gehoord, maar nooit beseften dat dit hetzelfde idee is als de CSS-eigenschap letter-spacing. Deze twee concepten zijn één op dezelfde, gerelateerd aan print en digitale typografie. De eenheid heeft betrekking op de ruimte tussen letters binnen elke regel tekst. Dit is een heel leuk effect om toe te passen op kopteksten en zelfs enkele kleinere inhoudsblokken binnen uw site.

Het is belangrijk om de termen letter-spacing niet te verwarren met kerning. Beide hebben te maken met typografie en de afstand tussen letters. Spatiëring verwijst echter specifiek naar de afstand tussen twee afzonderlijke letters in een woord. De eigenschap letterspatiëring is van toepassing op een heel element van tekst, of het nu gaat om een ​​woord of paragraaf of een kop- of ankerlink. Houd dit in gedachten wanneer je speelt met nieuwe ideeën voor stijlen.

Ik gebruik vaak een paar pixels / punten letterafstand in kopteksten met alle hoofdletters. Dit verdeelt de individuele karakters met wat extra ruimte en verschijnt ook als zeer gedefinieerd “titel” kijken. Negatieve spatiëring werkt ook goed in de juiste context. Ik blijf over het algemeen bij kleinere eenheden, misschien hoogstens -0.03em of -0.1em.

Combineren en matchen van letterbeelden

De ontwerpconcepten achter webtypografie zijn zeker een vorm van kunst, niet zo zeer van de wetenschap. Er zijn richtlijnen die je kunt volgen, maar er zijn geen standvastige regels waar je mee beperkt bent. Dit betekent dat je een enorme hoeveelheid vrijheid hebt om te experimenteren met mixen en matchen van de verschillende lettertypen waartoe je toegang hebt.

Verreweg de meest populaire combinatie van lettertypen is een serif / sans-serif-splitsing voor de header- en alinea-inhoud. Ik schakel beide graag uit, maar vaker gebruik ik serif-lettertypen in de kopgedeelten. De extra markeringen en streken op elke letter maken ze meer flatterend dan de dominante paginatekst.

Bovendien zijn schreefloze lettertypen schoner en gemakkelijker samen te scrunchen in zinnen. Dat wil niet zeggen dat serif-lettertypen in alinea's niet werken. In feite zijn er tal van geweldige voorbeelden! Maar een weinig bekend concept met de naam x-hoogte is van cruciaal belang voor het onderscheiden van de complexiteit van een lettertype. Als u naar de basislijn van een paar woorden kijkt, zult u zien hoe dergelijke lettertypen zullen werken “passen in” met elkaar.

Het is ook het vermelden waard het belang van ruimte tussen deze verschillende elementen. U zult waarschijnlijk 2 of 3 verschillende kopstijlen gebruiken, dus elk ervan zal er met een verschil uiterlijk uitzien. Ik heb de neiging om mijn h2 / h3-elementen een beetje dichter bij het volgende alineablok te houden, omdat dit impliceert dat er een verband is tussen de inhoud.

Deze correlatie is vooral handig wanneer u twee volledig verschillende lettertypen naast elkaar gebruikt. Ik raad niet meer dan 3 verschillende lettertypefamilies per set inhoud aan. Na te veel aanpassingen lijken je woorden door elkaar gegooid en de hele pagina komt eruit als een mengelmoes van verkeerd geïnterpreteerde lettertypen.

Conclusie

Ik hoop dat deze concepten enig licht werpen op het gecompliceerde onderwerp van digitale typografie. Het kan moeilijk zijn om als ontwerper echt aan het werk te gaan, vooral als het hele onderwerp voor jou vreemd is. Maar blijf studeren en zorg dat je een hele hoop oefent!

Volgende week: Houd ons in de gaten, want we zullen in sommige kijken nuttige hulpmiddelen en bronnen voor betere webtypografie.

Meer…

Hier zijn meer typografisch gerelateerde berichten:

• Showcase van webontwerpen met mooie typografie
• Betere typografie voor moderne websites
• Korte handleiding voor typografie: leer en laat je inspireren