Share
Welkom bij de negende les van onze serie Web Design for Kids, alles over typografie.
In deze tutorial zullen we kijken naar wat typografie inhoudt en waarom het zo belangrijk is in design. We hebben tot nu toe veel gesproken over de gebruikerservaring en deze tutorial zal geen uitzondering zijn; we zullen hard werken om ervoor te zorgen dat onze tekst mooi is en makkelijk te lezen!
Vergeet niet om vragen te stellen in het opmerkingengedeelte onderaan deze pagina!
Typografie is overal. Het is de manier waarop we geschreven woorden zien, dus overal waar we woorden tegenkomen, zien we typografie. Deze woorden zijn te vinden op schermen, papier en borden om ons heen.
Met typografie kunnen we de 'look and feel' van deze woorden veranderen, en daarmee de impact op lezers veranderen. De ontwerp van woorden zal vaak onze gebruikers raken voordat ze zelfs maar de kans krijgen om onze inhoud te lezen, dus het is belangrijk dat het ontwerp en het algemene gevoel van onze typografie overeenkomt met het gevoel van de inhoud zelf.
In de vorige les hebben we het gehad over hoe belangrijk inhoud is. Het maakt immers niet uit hoe goed onze site eruit ziet als deze geen informatie bevat die iemand wil lezen! Hoe we deze woorden aan de gebruiker presenteren, maakt echter net zo veel deel uit van de boodschap als de woorden zelf.
Typografie omvat veel redelijk vergelijkbare terminologie.
EEN lettertype is het algemene ontwerp van een verzameling tekens (woorden en symbolen), terwijl een doopvont is een specifieke grootte, gewicht (hoe dik de letters zijn), stijl en gebruik van een lettertype.
Ons Tuts + Town-ontwerp gebruikt een lettertype genaamd "Open Sans". We gebruiken verschillende grootten en gewichten van dit lettertype, die ons vertellen welke fonts om in de pagina te laden.
Dus hoewel we lettertypen op onze site gebruiken, zijn deze lettertypen gebaseerd op lettertypen die iemand veel tijd heeft besteed aan het ontwerpen.
Een lettertype kan zijn serif of sans-serif. EEN serif kan het best worden beschreven als de staarten of extensies aan het uiteinde van sommige letters.
Een serif-lettertype heeft de volgende extensies:
Open Sans is een schreefloos lettertype; betekenis zonder serif. Een schreefloos lettertype heeft geen extensies zoals de bovenstaande letter:
Er is geen goed of fout antwoord over wat te gebruiken op onze site, maar we willen dat het overeenkomt met het algehele ontwerp en voelen we proberen zowel de lay-out als de hoeveelheid tekst te bereiken en de meest leesbare optie te zijn.
Een serif-letterbeeld is over het algemeen gemakkelijker te lezen op papier of wanneer er veel tekst is, terwijl een schreefloos woord beter kan zijn op een scherm of met een kleinere hoeveelheid tekst in het algemeen.
Om de beste typografie voor onze websites te krijgen, moeten we nadenken over wat elk lettertype van een ander maakt. Er zijn veel verschillende delen van elk lettertype die iemand heeft ontworpen en tot in detail heeft bedacht.
Het zijn deze details die het unieke karakter van elk van deze vormen en het is aan ons om te kiezen welke het beste werkt voor verschillende ontwerpen en situaties.
Laten we kort enkele details van lettertypen bekijken om beter te begrijpen hoe deze onze ontwerpen kunnen verbeteren (of verslechteren):
Het is niet nodig om deze onderdelen nu te onthouden, maar weet gewoon dat variaties van hen ertoe bijdragen dat elk lettertype speciaal is.
Zoals met de meeste dingen die te maken hebben met typografie, is spatiëren van groot belang bij het bouwen van de beste ervaring voor onze gebruikers. De hoeveelheid ruimte tussen elke letter, tussen woorden en tussen woordenrijen kan een groot verschil maken leesbaarheid.
Niet genoeg ruimte geeft ons letters en woorden die te gebundeld zijn om goed te lezen, terwijl te veel ruimte alles opbreekt en net zo moeilijk te lezen en te volgen is.
Lettertypen hebben een eigen spatiëring die over het algemeen best prettig is om te lezen, maar laten we eens kijken naar wat al deze verschillende spatiëring wordt genoemd en hoe we wijzigingen kunnen aanbrengen in onze CSS voor het geval we ooit in onze ontwerpen moeten werken.
Tracking is de algemene afstand tussen alle tekens (letters) in een stuk tekst.
We kunnen hierin wijzigingen aanbrengen in onze CSS als we dat willen, door de letterafstand eigendom:
h1 letter-spacing: 5px;
Accentsconagua
word-spacing eigendom:h1 woordspatiëring: 15px;
kerning is de afstand tussen twee tekens.
Kerning tussen elk tekenpaar wordt gewijzigd door de letterontwerper, omdat sommige letters beter bij elkaar en wat verder van elkaar lijken. Dit komt helemaal neer op het in balans brengen van dingen en het is moeilijk om alleen CSS te doen.
leidend verwijst naar de afstand tussen rijen zinnen.
We kunnen aanpassingen aanbrengen aan deze spatiëring door een waarde te geven die de standaard leidende set wijzigt van het lettertype dat wordt gebruikt door de lijnhoogte eigendom.
p line-height: 2;
Een waarde van 2 hier zal ervoor zorgen dat onze leiding twee keer zo groot is als het standaardbedrag voor dat lettertype.
Als een enkel woord achterblijft op een regel (aaaah) aan het einde van een tekstblok, wordt dit een a genoemd Weduwe.
Laten we zeggen dat de blokken in de volgende afbeelding woorden in kolommen vertegenwoordigen. De weduwe is het blauwe blok, zittend aan het einde van de kolom, want daar eindigt de zin:
Een Wees is een enkel woord dat alleen op een regel voorkomt aan het begin van een kolom, meestal naast de kolom waar de meeste gerelateerde tekst is.
Weduwen en wezen worden als slechte typografie beschouwd vanwege hoe afleidend ze kunnen zijn, waardoor de algehele leeservaring erger wordt.
Er zijn verschillende manieren om een van deze problemen te corrigeren als dit gebeurt op onze sites, zoals:
We kunnen ervoor kiezen richten onze tekst aan de linkerkant (standaard op het web voor talen die van links naar rechts zijn geschreven, zoals het Engels), in het midden of rechts.
Tekst op het web moet over het algemeen links worden uitgelijnd (nogmaals, voor talen die van links naar rechts zijn geschreven), omdat het is hoe sprekers en lezers van die talen gewend zijn te lezen.
Centrumuitlijning wordt vaak gebruikt op titels en koppen, waardoor ze meer opvallen in de hoofdtekst op een pagina. We kunnen dit doen in onze CSS met de text-align eigendom, bijvoorbeeld:
h1 text-align: center;
Tekst die op deze manier is uitgelijnd, is meestal te vinden op borden en flyers die iemands aandacht proberen te trekken, maar we moeten een grote hoeveelheid tekst niet op het web uitlijnen omdat het veel moeilijker voor onze gebruikers is om te lezen. Gecentreerde tekst creëert zeer verschillende breedten van regel tot lijn, waardoor het moeilijker wordt om het oog te volgen.
Sommige talen (zoals het Hebreeuws) worden van rechts naar links geschreven, waardoor de juiste uitlijning de standaarduitlijning is.
Als ontwerpers kunnen we er ook voor kiezen om bepaalde kleine stukjes tekst recht te laten uitlijnen zodat het een beetje meer opvalt, zoals bijschriften bij afbeeldingen. Deze bijschriften zijn titels of beschrijvingen voor afbeeldingen met hun eigen HTML-element, figcaption.
De bovenstaande uitlijning wordt gedaan door te verklaren rechts op het element in een CSS-document:
figcaption text-align: right;
Veel van de typografie die we ontwerpen, is dat we de inhoud zelf lezen en indien nodig bijsturen. Er zijn echter enkele algemene tips die ons kunnen helpen meer vertrouwd te raken met onze typografische vaardigheden.
EEN lettertypegrootte minder dan 16px op de tekst waaruit het grootste deel van onze inhoud bestaat, wordt meestal als te klein en moeilijk te lezen beschouwd op schermen.
We hebben veel gesproken over visuele hiërarchie in de vorige zelfstudie over basisprincipes van het ontwerp. Het instellen van de hiërarchie voor de tekst in ons hele ontwerp zorgt ervoor dat de site gemakkelijker te navigeren is door gerelateerde inhoud te scheiden en te benadrukken wat het belangrijkst is.
De tekst op onze site Tuts + Town heeft verschillende hiërarchische niveaus, waarbij de titel de belangrijkste is, gevolgd door de bedrijfscategorieën en specifieke winkels, en eindigend met de sectie "created by" helemaal onderaan.
De hierarchie wordt hier bepaald door verschillende grootten, kleuren en locaties op de pagina.
We zullen in de volgende tutorial uitvoeriger praten over kleur en contract, dus weet gewoon dat je je bewust bent van de kleur van je tekst en of deze al dan niet botst met de achtergrondkleur, waardoor het moeilijk leesbaar is.
Hier is een voorbeeld van slecht contrast aan de linkerkant en een beter contrast aan de rechterkant:
De felroze tekst op een donkerblauwe achtergrond aan de linkerkant toont de impact van een slecht contrast. De tekst is moeilijk te lezen, ziet er een beetje wazig uit en doet pijn aan onze ogen!
Over het algemeen is het het beste om niet meer dan twee tot drie verschillende lettertypen per project te gebruiken. Gepaarde lettertypen moeten bij elkaar passen en beide ondersteunen het algemene gevoel en de ideeën achter het ontwerp.
Niet alle lettertypen werken goed op internet en kunnen het beste worden afgedrukt. Gelukkig biedt Google Fonts, die we hebben gebruikt om Open Sans in onze site Tuts + Town in te voeren, ons een verbazingwekkende lijst met lettertypen die geschikt zijn voor internet.
In deze tutorial hebben we uitgelegd wat typografie precies is, bekeken hoe verschillende delen van een lettertype het kunnen onderscheiden van anderen, en afgesloten met enkele algemene tips om in gedachten te houden bij het werken met tekst en lettertypen op internet. Alles om een ultiem doel te bereiken: om onze inhoud leesbaarder te maken.
Vervolgens gaan we dieper in op enkele algemene regels voor het gebruik van kleuren op het web en welke boodschap we aan onze gebruiker communiceren op basis van onze algehele kleurselectie.
Ik zie je in de stad!
