10 netttypografiregler som enhver designer bør kjenne til

Du kan inkorporere mange elementer i webdesignet ditt som vil skape engasjement og holde de besøkendes oppmerksomhet. Disse inkluderer bilder, videoer og til og med lyd. Imidlertid er den viktigste delen av nesten alle nettsider innholdet som besøkende leser for å få informasjonen de leser.

Hvis du vil gjøre denne informasjonen lettere å lese, visuelt interessant, og for at teksten skal legges til den generelle utformingen av et nettsted, må du forstå typografi. Dette er kunsten og ferdigheten til å gjøre det skrevne ord både funksjonelt og estetisk tiltalende.

Hvis du vil lære å bruke typografi til din fordel, sjekk ut disse 10 reglene som enhver designer bør huske på.

1 Slutt å bruke LoremIpsum etter den første designprosessen

Hvis innhold er konge, hvorfor vurderes det ikke seriøst i webdesignprosessen? Ved å bruke falskt innhold som plassholder, henviser webdesignere innhold til en sekundær rolle. Dette er en stor indikasjon på at designprioriteringer er ute av spill. Det er ikke så problematisk i de tidlige stadiene, for eksempel når du spotter en rekke sideoppsett. Men når du har begrenset ting, er det viktig å jobbe med faktisk nettinnhold når du lager det endelige designet. Dette sikrer at det som blir sagt på en bestemt nettside blir gitt like stor betydning som layout og visuelle elementer.

I tillegg til dette betyr det å ha faktisk tekst med tanke på design og layout. Du vil ikke være i stand til å ha fulldesignet en nettside, bare for å finne ut at den ikke fungerer med det faktiske innholdet. Dette er grunnen til at det er ekstremt viktig å få den faktiske teksten fra klienten til innholdsforfatteren så snart som mulig.

2 Lag Text Sans Serif

Serif-teksten er helt nydelig. Dette er flotte skrifttyper å bruke for utskrift og for større utskriftsapplikasjoner som overskrifter, titler og underoverskrifter. Dessverre, på skjermen, skalerer seriffer ikke godt når det kommer til mindre visninger av innhold som blokker med tekst. Serifene som ser fine ut i større størrelse, gjør teksten vanskelig å lese når skriften blir mindre. På grunn av dette er det tilrådelig å lagre seriffer for stor tekst og å stole på sans når lesbarhet kan være et problem. Enda bedre, omfavn det rene, elegante, moderne utseendet til sans fonts og lagre seriffer for trykkpressen. På denne måten trenger du aldri å forholde deg til forringelsen av lesbarheten til fordel for å bruke en skrifttype som ser pen ut.

3 Tenk på smarte sitater og andre symboler tidlig i designprosessen

Sjansen er stor for at du har besøkt et nettsted der visse symboler ikke vises riktig. Noen ganger erstattes de med et spørsmål eller en rekke karakterer som ser merkelige ut. Andre ganger er de rett og slett ikke der. Dette skjer ofte med smarte eller "krøllete" anførselstegn. Dette er ofte et resultat av at tekst opprettes i MS Word eller en annen pakke og deretter overføres til en nettside. Ting blir rett og slett ikke oversatt som ønsket. Det er også vanlig for euro symbol, doble byte-tegn og andre symboler hentet fra utenlandsk innhold.

For å unngå dette problemet i ditt endelige design, har du et par alternativer. Først kan du endre innholdet ditt for å bli kvitt disse symbolene. Dette fungerer hvis du er villig til å endre symbolene til naturlig språk. Du kan også bruke HTML for å sikre at symbolene vises riktig i stedet for bare å stole på kopiering og innliming. Uansett hva du bestemmer deg for, sørg for å teste nettsiden i alle nettlesere du kan. Det som kan løse et problem med symboler i én nettleser er kanskje ikke effektivt i en annen nettleser.

4 avanserte CSS-ferdigheter er ekstremt viktige

Hvis du har utviklet gode CSS-ferdigheter, bør de besøkende være i stand til å navigere gjennom sidene på nettstedet ditt på en helt sømløs måte. Hvis du lager stilarkene dine riktig, kan du til og med ha flere versjoner av samme side samtidig som du opprettholder stor kontinuitet når det kommer til typografi. Du trenger selvfølgelig ikke bruke mye lureri. God CSS kan hjelpe deg med å unngå små, men vanlige problemer som å endre skrifttyper og skriftstørrelse fra en side til den neste.

Hvorfor er konsekvent typografi en slik nødvendighet? Bruk av CSS for å opprettholde konsistent typografi gir nettstedet ditt et profesjonelt og skarpt utseende. Det betyr også at du ikke trenger å tenke på typografi når du designer hver side. I stedet bruker du bare det riktige stilarket. Hvis du bestemmer deg, på en bestemt side, at du skal bryte normen og gjøre noe annerledes med typografi for å skape en effekt eller for å trekke oppmerksomhet til noe, vil den skille seg ut mer takket være din bruk av CSS.

5 Både mikro- og makrotypografi er viktig

Mikrotypografi relaterer seg til detaljene i typografi som er relatert til lesbarhet. For eksempel er avstand et problem knyttet til mikrotypografi, det samme gjelder skalering og kontrast. Justeringene du gjør for å sikre at en tekstblokk er lesbar på alle enheter eller nettlesere, er alle relatert til mikrotypografi.

Makrotypografi relaterer seg til måten valgene dine angående typografi henger sammen med ditt overordnede design. Det er knyttet til estetikk.

God typografi tar hensyn til både mikro- og makrotypografi. Har du noen gang besøkt et nettsted som har brukt en veldig pen, tilpasset skrift som også var nesten umulig å lese? Det er det som skjer når oppmerksomheten rettes mot makrotypografi, men ikke mikrotypografi.

6 Kjenn innholdet så vel som designet

Som du vet har en god nettside flyt. En del av dette er lesbarheten til innholdet som er på siden. Vi har allerede diskutert hvordan dette påvirkes av ting som seriffer, og vi har diskutert hvordan dummy-tekst ikke er noen erstatning for den virkelige tingen når det kommer til de senere faser av design. Vi er ikke ferdige ennå. Innhold er virkelig konge. Når det endelige designet, inkludert innhold, er på plass, må du lese nettsiden.

Når du leser innholdet etter at designet er ferdig, kan du finne ut om det er problemer med mellomrom eller linjeskift. Disse kan gjøre innholdet forvirrende, eller til og med utilsiktet endre betydningen av innholdet. Å fikse disse problemene ved å bruke noen få typografitriks kan sikre at sluttproduktet ditt kommuniserer nøyaktig hva du eller kunden din har til hensikt.

7 Forstå betydningen av hierarki

Hierarki er veikartet du gir til folk som besøker nettstedet ditt. Du kan bruke bilder, video, farger og (selvfølgelig) typografi for å lage det hierarkiet.

Det er rett og slett et spørsmål om å veilede den besøkende fra det første du vil at de skal se til det neste, og så videre. Med typografi kan du bruke størrelse, endringer i skrift og mellomrom for å definere hierarkiet du vil at brukerne skal følge. Faktisk, hvis du har en side som ikke konverterer, kan det være lurt å leke litt med typografi for å se om noen endringer du gjør vil hjelpe besøkende til oppfordringsknappen.

8 Vær kreativ, men forsiktig med farger

Den enkleste måten å sikre at du aldri har problemer med lesbarhet på grunn av problemer med skriftfarge og bakgrunnsfarge, er å bruke de høyeste kontrastfargene som finnes, svart og hvitt. Dessverre kan det gi en ganske kjedelig design.

Ikke vær redd for å bruke farger. Faktisk, ikke vær redd for å bruke fargekombinasjoner som ikke virker som om de ville fungere. Noen ganger er det bare å gå en eller to nyanser lysere eller mørkere. Deretter går typografien din fra uleselig til perfekt gjenkjennelig og ser veldig kul ut.

9 Grøftesentrert tekst

Problemene med sentrert tekst er mange. Først og fremst kan det få nettsidene dine til å ligne dårlig utformede flyers. I tillegg til dette ender man nesten alltid opp med merkelige marger og tekst som fremstår som om det er ment å være et dikt eller linjenoter fra et gammelt rockealbum. Selv om det kan være greit å bruke sentrert tekst for overskrifter, er det som regel best å unngå det helt. Hold deg til venstrejustert tekst, og leserne vil finne innholdet ditt mye lettere å lese.

10 Vurder hvordan teksten din ser ut forstørret

Enten de bruker tommelen og pekefingeren eller klikker på zoomknappen, kommer folk til å gjøre teksten din større. Noen ganger gjør de dette for å kompensere for en mindre skjerm. Andre ganger gjør de det rett og slett fordi det er en kamp for dem å lese teksten din i normal størrelse.

Det ville vært flott om alle kunne se teksten din slik de var tenkt, men med boomere som ofte trenger litt ekstra hjelp for å se tekst, er det rett og slett ikke mulig. Vær forsiktig så du ikke bruker en skrifttype som forringes hvis den forstørres.

Nyttige verktøy og ressurser

Her er noen nyttige verktøy og ressurser for å hjelpe deg å gjøre mer med typografi:

• FontFace Ninja: Dette verktøyet hjelper deg å identifisere fonter du finner på internett. Dette er et flott verktøy å ha når du kommer over en skrift som virkelig fanger oppmerksomheten din. Denne Chrome-pluginen hjelper deg med å identifisere, finne og kjøpe alle kommersielt tilgjengelige fonter du ser på et hvilket som helst nettsted.
• TypePlate: Dette er et komplett typografirammeverk som er perfekt for webdesignere. TypePlate kan håndtere drop cap, blokkanførselstegn, skalering, farger og en rekke andre typografirelaterte utfordringer.
• Modular Scale: Dette er en skala som lar deg bestemme den ideelle fonten og skriftstørrelsen. Det hjelper deg også å skape en balanse mellom størrelsen på skrifttypen til titlene og overskriftene dine, og skriften du velger for teksten.
• TIFF: Dette verktøyet lar deg hente frem to forskjellige fonter. Deretter viser den forskjellene mellom hver av de to skriftene for deg. Den lar deg til og med sammenligne forskjellige bokstaver og tall fra en skrifttype til den neste.
• TypeWolf: Bruk denne nettsiden for å finne noen av de kuleste fontene og mest inspirerende bruken av typografi på internett. Dette er en utmerket kilde til inspirasjon, så vel som informasjon.
• Why Fonts Matter, Sarah Hyndman: Dette er en utmerket bok som utforsker betydningen av fonter og måtene typografi kan påvirke sinnstilstanden på. Det er en flott bok for folk som brenner for typografi, men også for folk som kanskje trenger å overbevise om viktigheten av å velge riktig type jobb.

Konklusjon

Forhåpentligvis påvirker denne artikkelen webdesignere til å tenke litt mer over typografi, og også finne måter å bruke tekst mer effektivt og mer kreativt i designene deres.