10 Web Typography Regler Hver designer burde vite
Når noen besøker et nettsted du har designet, er sjansene at de ikke bryr seg mye om farger, bilder eller lyder, de ser umiddelbart på teksten.
Uansett hvor mange bjeller og fløyter du har bygget inn i et nettsted, stoler alle på tekst for å oppnå hva de besøker siden å gjøre .
Det alene bør gjøre typografi, kunsten å arrangere type, en prioritet for enhver webdesigner.
I denne artikkelen tar vi en titt på 10 enkle regler å huske på når du designer ditt neste webprosjekt.
1. Les gjennom teksten selv
Med et design som JonesingFor en designer uten en god forståelse av teksten ville ha slitt med å sette sammen typografien som gjør at dette nettstedet virkelig fungerer. Når du takler din egen typografi, trenger du sannsynligvis ikke å bekymre deg for å skrive et nettsteds tekst - men du må lese det!
Noen webdesignere tror at bare å kopiere og lime ut av en tekstfil utgjør summen av deres tekstoppgaver. Men å lese gjennom teksten gir minst en grunnleggende ide om hvordan teksten kan integreres i et nettsted, unngår koblingen mellom skriving og utforming av et nettsted.
Du kan sparke din typografi enda en hakk, hvis du kan lese gjennom teksten når den er på plass i designet. Vær spesielt oppmerksom på plassen rundt bokstavene . Har du noen uvanlig store mellomrom som ser merkelig ut? En liten forsiktig typografi kan eliminere disse problemene. Du kan også få en ide om linjer som kan være for lang til å lese, vanskelige linjeskift og lignende problemer.
2. Dump Lorem ipsum så snart som mulig
Tror du at du kunne ha designet Jesus Rodriguez Velascos nettsted uten den faktiske teksten? Nettstedet er sterkt avhengig av det skrevne ordet - og veldig spesifikke ord også. Selv kroppsteksten fikk spesiell oppmerksomhet med en dråpehett og noen annen tilpasning som bare ikke hadde vært mulig med Lorem ipsum.
Med mindre teksten på nettstedet ditt egentlig er Lorem ipsum, vil dummy tekst ikke ha noe lik den virkelige ting . Det betyr at enhver tweak du kan gjøre med teksten - eller utformingen som omgir den - må vente til du får den virkelige tingen. Å spørre om (og få) tekst fra klienten så tidlig som mulig i prosessen, gir deg muligheten til å matche din overordnede design og typografi.
3. Vis et klart hierarki
Når du kommer til Rik Cat Industries , du vet umiddelbart hvor du skal begynne å lese. Selv om det er noen koblinger øverst på siden, tar Rik velkommen først øyet. Det er mye større, ved hjelp av typografi for å etablere et klart hierarki .
Hvert nettsted trenger et godt utviklet hierarki: indikatorer på hvor du skal begynne å lese og hvordan du skal fortsette. Din typografi kan gi det hierarkiet - akkurat som Riks gjør - så lenge du kjenner din hierarkiske rekkefølge på forhånd. Ved å tenke på størrelse og skrifttyper, kan du markere et stykke tekst som overskrift på en måte som annerledes plassering i designet bare ikke kan gi.
Designets hierarki går utover bare typografien du bruker, selvfølgelig, men siden brukerne nesten alltid starter med teksten, er det fornuftig for designere å gjøre det samme.
4. Vær oppmerksom på både makro og mikro typografi
Stole helt på typografi for deres forsiden, den Crowley Webb og Associate s Nettstedet ble designet med to faktorer i tankene: både makro og mikro typografi .
Makro-typografi er den generelle strukturen av din type, hvordan den vises i sammenheng med design og dets estetiske når du ser på teksten som en blokk i seg selv.
Mikro-typografi er mer opptatt av detaljene i avstanden, problemene som avgjøre om ordene er enkle å lese. Mikro-typografi er en absolutt nødvendighet når det gjelder å sette sammen en blokk med tekst: Hvis det ikke er lesbart, er det ingen grunn til å gå videre. Crowley Webb og Associates adresserte dette spørsmålet gjennom både forsiktig skriving og avstand ut de ordene som nettstedet skulle fremheve.
Men makrotypografi gir deg muligheten til å gjøre teksten mer enn godt avstand: det er sjansen til å gjøre det ser tiltalende ut og en del av hele designen din . Valget av skrifttyper og farger på dette nettstedet skaper en levedyktig helhet. Ignorering av hver type typografi er skadelig.
5. Ta vare på type farger
Det ville være så lett å miste tekst i bakgrunnen av ArtofElan , spesielt den lysrøde på mørk rød kombinasjon som brukes av designeren. Når en nettdesigner jobber med fargetype, er det absolutt nødvendig med omsorg, det er ingen garanti for at en rød på rød kombinasjon, eller til og med en gul på rød kombinasjon, vil være synlig . Tross alt har alle besøkt et nettsted der teksten syntes å være bare en nyanse fra bakgrunnsfargen og fått et øye på øynene når de prøvde å lese det.
Den enkleste løsningen for denne situasjonen er å sørge for at fargen på din type er vesentlig forskjellig fra bakgrunnen din . Svart og hvitt fungerer så bra fordi de er så drastisk forskjellige som du kan få, men det er noen fargekombinasjoner som fungerer bra: noe i mørkeblå på en lyserødt vil få jobben gjort. Omvendt tekst er ganske vanskelig ... mens du kan jobbe med lyserød tekst på en mørkblå bakgrunn, er du mer sannsynlig å få en klage om det.
6. Bli seriøs om CSS
Hvis CSS er solid, kan du flytte mellom sider på nettstedet ditt sømløst, akkurat som de forskjellige versjonene av Hutchouse.com stole på forskjellige stilark for å skape noen imponerende effekter. Selv om du ikke tar ting så langt som Hutchhouse, kan CSS bidra til å eliminere problemer med amatør typografi, som forandrer skrifttyper og størrelser mellom sider.
CSS kan gi enkel konsistens mellom typografien din på hele nettstedet . Hvis du er konsekvent i hvordan du bruker type, kan det imidlertid være en liten mengde å ødelegge konsistensen, selv om du ønsker å markere, skille seg ut, akkurat som å etablere og deretter kaste et grid, kan du lage en effektiv design. I webtypografi kan det være et enkelt spørsmål om CSS å holde skriftene konsistente.
7. Dekk den sentrerte teksten
Å velge et alternativ til sentrert tekst kan gjøre et nettsteddesign enkelt å lese , akkurat som DesignCanChange.org . Å velge mellom sentrert tekst, spesielt på en side som dette, vil gi en problematisk side: de skarpe kantene som skaper på hver side gjør det mye vanskeligere å lese, og det er mange muligheter for perfekt sentrert tekst for å vinne opp forvrengning av resten av Dine design på forskjellige skjermer.
I noen sirkler er sentrert type bare ett steg opp fra å bruke Comic Sans i et webdesign. Du kan vurdere det for et overskrift, men generelt vil tilpasningen av teksten til venstre gjøre leserne dine mye mer komfortable, med mindre de leser fra høyre til venstre .
8. Deal med smarte sitater og andre symboler
Luigi Ottani er Nettstedet viser hvilke forsiktig oppmerksomhet på sitatmerker og andre symboler som får deg: En komplett mangel på problemer når nettstedet viser disse symbolene. Mange nettsteder er prikket med symboler som en nettleser ikke kan vise. Det er en arv av det faktum at det meste av teksten en nettdesigner jobber med, var trolig skrevet i Microsoft Word eller et annet stykke tekstbehandlingsprogramvare som gjør alle slags små endringer i tekst uten at forfatteren betaler mye oppmerksomhet.
En av de verste endringene er smarte sitater: Den krøllete sitatmerket Word erstatter automatisk for rett anførselstegn . Et annet problemområde kommer når du arbeider med tekst skrevet på et annet språk: aksenter og omlats kan forårsake like mye trøbbel som Words hjelpsomhet. Hvis du bare kopierer og limer inn tekst med slike endringer i designet, må du sannsynligvis gå tilbake og fikse dem senere, i hvert fall for noen nettlesere.
I stedet får du dem tidlig i designprosessen, slik at du kan fokusere på å gjøre teksten din bedre med designen din . Hvis du vil ha de fancy symbolene og smarte sitater som dukker opp i det endelige designet, bryter du ut HTML-enhetene dine.
9. Planlegg teksten din for å bli større
Når du øker størrelsen på teksten på Veerle Pieters ' nettsted, det er ikke så pent enn om du bruker skriftstørrelsen hun plukket ut. Du kan imidlertid fortsatt lese alt, finne lenker og så videre, noe som er sant for svært få nettsteder.
Det skyldes, delvis, at mange designere sørger for å legge inn tekst i 10-punkts skrifttype eller enda mindre. De fleste mennesker er komfortable å lese slike skrifttyper, men Baby Boomers utgjør en stor del av nettleserbefolkningen, og mange av de aldrende nett surfere skal ha sine nettlesere satt til å vise typen så stor som de kan . Teksten din, så vel som designet, må kunne tilpasses til det faktum.
Det er også verdt å ta hensyn til det faktum at nettleserstørrelsen kan variere dramatisk , ved å flytte tekst rundt til uventede steder hvis du ikke er forsiktig. Hvis bumping størrelsen opp et poeng skaper problemer, vil eldre demografiske gå videre til neste nettside i en hast. Å måtte rulle for alltid over til siden, vil få et lignende resultat.
10. Vis en preferanse for sans serif
Hvis du ser på En liste Apart er Nettsted, stort sett er hver stor tekstblokk satt i en sans serif skrifttype, noe som gjør det mye lettere å lese. Overskrifter og andre mindre tekstblokker legges ut i serifed skrifttyper, og skaper en balanse mellom de to.
Når det gjelder å legge ut tekst på en skjerm, er sans serif-fonter nesten alltid den beste innsatsen , spesielt hvis du valgte en font som Verdana som var designet for visning på en dataskjerm. Serifed skrifttyper har større sjanse til å vise dårlig, bli sløret eller til og med pixelert.
Det er ikke mulig å helt unngå serifs, selvfølgelig. Men for store blokker av tekst, spesielt, ved å bruke en skrift uten serifs, kan du tilby et ekstra nivå på garanti for at besøkende lett kan lese et nettsteds tekst. Når du velger skrifter for et prosjekt, må du først se gjennom sans serif-alternativene dine først .
En siste kommentar
Typografi er lett oversett, og selv når en designer tar det i betraktning, er det enkelt å skrive av som en tidsintensiv aktivitet med liten retur. Men å tilbringe noen få minutter med teksten som vil være midtpunktet i designet, kan forvandle det fra noe hvilken som helst webdesigner kan slå på en side til et element som støtter resten av designet.
Skrevet utelukkende for WDD ved torsdag Bram.
Følger du disse reglene og andre? Vennligst del dine synspunkter under ...