Share
Typografie is een fundamenteel element in elk ontwerp waar je aan werkt. De belangrijkste reden waarom we websites hebben, is om informatie weer te geven en om die informatie te laten consumeren door gebruikers die het tegenkomen. Hoewel er veel andere elementen op een website kunnen staan, is de kern inhoudelijk. Die inhoud moet gemakkelijk kunnen worden gelezen, verteerd, begrepen en een solide typografische basis hebben, helpt daar alleen maar mee.
Aan de slag met typografie is mogelijk een van de meer toegankelijke delen van het leerontwerp, simpelweg omdat het gemakkelijk is om te veranderen en met de tekst te spelen om onmiddellijke resultaten te krijgen. Het is echter een grotere uitdaging om je typografische vaardigheden te verfijnen, zodat je iets kunt ontwerpen dat goed werkt en effectief is, leesbaar en nuttig voor je gebruikers is..
Ten eerste zullen we enkele van de basis technische voorwaarden uit de weg ruimen. Dit is slechts een klein overzicht van enkele van de meest voorkomende termen die je tegenkomt bij het werken met typografie, en dat zijn er ook veel uitgebreidere gidsen op het internet of in boeken als u meer wilt lezen.
Deze eerste termijn is er een die de meeste mensen uitbreidt. Typeface beschrijft de ontworpen lettervormen. EEN doopvont is het voertuig dat het lettertype bevat. U downloadt en installeert een lettertypepakket om een lettertype in uw ontwerp te gebruiken.
Je kunt veilig denken dat er twee hoofdtypeclassificaties zijn: serif en schreefloos. serif lettertypen zien er over het algemeen iets klassieker uit, vaak met kleine tikjes of verfraaiingen (schreefjes) waar lettervormen eindigen.
Voorbeelden van serif-lettertypen zijn Times New Roman, Baskerville en Georgia. Sans serif lettertypen missen serifversieringen, maar zien er wat moderner uit. Voorbeelden van schreefloze lettertypen zijn Helvetica, Arial en Futura.
Laten we kort de anatomie van een lettervorm bekijken.
De opgaande persoon is een deel van een kleine letter dat zich uitstrekt boven de x-hoogte van de letter. U zult bekend zijn met letters die opklimmingen hebben zoals b, d, f, h, k, l.
Een daler is een deel van een kleine letter dat zich uitstrekt onder de x-hoogte van de letter. Bijvoorbeeld g, j, p, q, y.
In een brief is een teller de gekromde gesloten (of gedeeltelijk gesloten) negatieve ruimte binnen een letter. Veel voorkomende letters met tellers zijn b, d, e, o, s.
Zoals we al zeiden, serifs zijn de extra flicks en versieringen die je kunt zien als je onderscheid maakt tussen schreefloze en schreefloze stijlen.
De basislijn is een onzichtbare lijn waarop alle personages zitten. Deze baseline kan enorm variëren tussen verschillende lettertypen, maar is meestal altijd consistent binnen een individueel lettertype.
De dophoogte is de afstand van de basislijn tot de top van de hoofdletters.
De x-hoogte is de hoogte van het grootste deel van de kleine letters (of tenminste de hoogte van de kleine letter x, vandaar de naam). Deze hoogte omvat niet de hoogte van extra opklimmers of afstammelingen.
Een glyph is een afzonderlijk teken in een lettertype. Deze omvatten elk symbool of letter, tot extra glyphs die voor u beschikbaar zijn en die niet overeenkomen met een van de meer algemeen bekende of gebruikte symbolen of letters.
... je moet denken aan:
Wanneer je met typografie werkt (en dit klinkt misschien vanzelfsprekend), zou je moeten kijken naar de grootte van de tekst waarmee je gaat werken.
Bij elke ontwerptrend die voorbijgaat, zijn er ook trends over hoe klein of groot de tekst moet zijn. Denk bijvoorbeeld aan het beoogde publiek; is uw publiek een jonger of ouder publiek, hebben zij een grotere tekstgrootte nodig??
Denk ook eens na over de invloed van de tekstgrootte op het ontwerp van uw site. Wil je dat het op typografie is gericht, of heb je andere verfraaiingen en ontwerpelementen die je wilt opnemen en die de manier kunnen beïnvloeden waarop de typografie in het ontwerp zit??
Contrast beïnvloedt de leesbaarheid van een tekstblok enorm. Wanneer we het hebben over contrast zijn er twee belangrijke dingen om in gedachten te houden.
Ten eerste wilt u ervoor zorgen dat het contrast tussen de tekst en de achtergrond sterk genoeg is om merkbaar te zijn. Denk aan toegankelijkheid hier - teruggaan tot praten over kleurtoegankelijkheid in ontwerp, hetzelfde geldt voor uw tekst. Als u niet zeker weet of uw tekst voldoende contrast heeft, gebruik dan een hulpmiddel zoals Lea Verou's Contrast Ratio-hulpmiddel om u te helpen.
Je moet ook rekening houden met de lettertype-keuzes die je maakt. Veel lettertypen met zeer dunne gewichten worden mogelijk niet goed weergegeven in bepaalde formaten en zijn wellicht handiger voor grotere lettertypen of voor het weergeven van koppen. Probeer ook ervoor te zorgen dat de lettertypen of lettertypen die u kiest goede ondersteuning bieden voor browsers en besturingssystemen. Sommige lettertypen en lettertypen werken mogelijk goed op één platform, maar zien er vreselijk uit en presteren op een ander platform.
Wanneer je met typografie werkt, zoals met elk ander deel van je ontwerp, wil je ervoor zorgen dat je het genoeg ruimte geeft om te ademen en dat de inhoud voor zichzelf spreekt..
De inhoud van uw website is de kernervaring die uw gebruikers moeten worden geboden. Afgezien van alle andere ontwerpelementen, al uw gebruikers werkelijk moet zien is de inhoud. Daarom, wees niet bang om meer inhoud te geven aan de inhoud en uw inhoud meer te laten praten.
Negatieve ruimte is de ruimte of gaten die overblijven rond elementen van een ontwerp; wees niet bang om deze negatieve ruimte rond uw inhoud te laten.
Vergeet ook niet de ruimte rond elk deel van uw tekst. Zorg voor een genereuze regelhoogte die uw tekst niet krap en moeilijk leesbaar maakt. Als algemene regel (hoewel je hier gerust mee kunt spelen) zou een regelhoogte van ten minste 140% tot 160% van de tekstgrootte goed moeten werken en een goede balans bieden voor je tekst.
Een typografische hiërarchie heeft betrekking op hoe de inhoud in uw ontwerp is neergelegd.
Het opzetten van een goede inhoudshiërarchie begint aan het begin, wanneer u eraan werkt om een goede structuur te creëren binnen uw inhoud. Typografische hiërarchie werkt dan met uw inhoud - van koppen tot normale paragrafen en alle delen van uw inhoud die u wilt benadrukken - om een structuur te maken die gebruikers gemakkelijk kunnen navigeren.
De impact die een hiërarchie heeft op uw ontwerp kan enorm zijn. U moet de reis van uw gebruikers maken om de inhoud die ze zoeken zo eenvoudig mogelijk te vinden, en het tot stand brengen van een solide hiërarchie levert alleen positieve effecten op.
U kunt op verschillende manieren een goede, visuele, typografische hiërarchie bepalen, bijvoorbeeld door gebruik te maken van kleur of variërende tekstformaten om in uw inhoud nadruk en structuur te creëren. Alle vorige tips helpen je bij het vaststellen van een betere typografische hiërarchie, maar het is iets dat altijd met oefenen komt.
We zullen de weblettertypen verderop in deze serie in meer detail bespreken, maar het volgende zou een solide introductie moeten zijn in de mogelijkheden van weblettertypen.
Tegenwoordig hebben we het geluk dat we veel opties hebben voor het implementeren van weblettertypen op onze websites - en met het meer alledaagse gebruik van weblettertypen op het web (veroorzaakt door betere ondersteuning voor alle browsers), kunnen we inventiever zijn in de typografische stijlen en ontwerpen die we in onze ontwerpen kunnen opnemen.
Naast het kunnen hosten van uw eigen lettertypen met @ font-face, zijn er veel online services beschikbaar om u te helpen meer weblettertypen online te gebruiken, waaronder:
en nog veel, veel meer. Zelfs sites zoals FontShop of MyFonts (die vroeger beperkt was tot het verkopen van desktoplettertypen) betreden nu de markt van weblettertypen en bieden u downloadbare lettertypen die u kunt gebruiken met de @ font-face-techniek.
Na de basisbeginselen van de typografie te hebben behandeld, zullen we in het volgende artikel kijken naar het verticale ritme. Vergeet niet dat u ook een kijkje kunt nemen in onze doorlopende sessie De A-Z van Web Typography voor meer informatie over al deze punten.
Accentsconagua