10 Web Typography Regler Hver Designer skal vide
Når nogen besøger et websted, du har designet, er oddsene, at de ikke er ligeglade med farverne, billederne eller lyde, de kigger straks på teksten.
Uanset hvor mange klokker og fløjter du har bygget ind i en hjemmeside, er alle afhængige af tekst for at opnå det, de besøger siden .
Det alene bør gøre typografi, kunsten at arrangere type, en prioritet for enhver webdesigner.
I denne artikel tager vi et kig på 10 enkle regler, der skal tages i betragtning ved udformningen af dit næste webprojekt.
1. Læs selv gennem teksten
Med et design som JonesingFor en designer uden en stor forståelse af teksten ville have kæmpet for at sammensætte den typografi, der gør dette websted virkelig arbejde. Når du håndterer din egen typografi, behøver du sandsynligvis ikke at bekymre dig om at skrive et websteds tekst - men du skal læse det!
Nogle webdesignere tror, at bare kopiering og klipning ud af en tekstfil udgør summen af deres tekstlige opgaver. Men læsning gennem teksten giver i det mindste en grundlæggende ide om, hvordan teksten kan integreres i en hjemmeside, idet man undgår afbrydelsen mellem skrivning og design af et websted.
Du kan sparke din typografi endnu en hak, hvis du kan læse teksten, når den er på plads i dit design. Vær opmærksom på pladsen omkring bogstaverne . Har du nogle usædvanligt store mellemrum der ser mærkeligt ud? En lidt forsigtig typografi kan eliminere disse problemer. Du kan også få en ide om linjer, der kan være for lange til nemt at læse, akavede linjeskift og lignende problemer.
2. Dump Lorem ipsum så hurtigt som muligt
Tror du, du kunne have designet Jesus Rodriguez Velascos hjemmeside uden den faktiske tekst? Webstedet er stærkt afhængig af det skrevne ord - og også meget specifikke ord. Selv kroppens tekst fik særlig opmærksomhed med en drop cap og nogle andre tweaking, der bare ikke ville have været muligt med Lorem ipsum.
Medmindre teksten på dit websted er faktisk Lorem ipsum, vil dummy tekst ikke bære nogen lighed med den rigtige ting . Det betyder, at enhver tweak du kan lave til teksten - eller det design der omgiver det - bliver nødt til at vente, indtil du får den rigtige ting. At bede om (og få) tekst fra din klient så tidligt som muligt i processen giver dig mulighed for at matche dit overordnede design og din typografi.
3. Vis et klart hierarki
Når du ankommer til Rik Cat Industries , du ved straks, hvor du skal begynde at læse. Selvom der er et par links øverst på siden, fanger Rik velkommen først øjet. Det er meget større ved at bruge typografi til at etablere et klart hierarki .
Hvert websted har brug for et veludviklet hierarki: indikatorer for hvor man skal begynde at læse og hvordan man kan fortsætte. Din typografi kan give dette hierarki - lige som Riks gør - så længe du kender din hierarkiske orden i forvejen. Ved at tænke på størrelse og skrifttyper, kan du fremhæve et stykke tekst som en overskrift på en måde, som forskellige placeringer i designet ikke kan give.
Dit designs hierarki går ud over den typografi du bruger, selvfølgelig, men siden brugerne næsten altid starter med teksten, giver det mening for designere at gøre det samme.
4. Vær opmærksom på både makro og mikro typografi
Stolt udelukkende på typografi for deres forsiden, den Crowley Webb og Associate s Webstedet er designet med to faktorer i tankerne: både makro og mikro typografi .
Makrotypografi er den overordnede struktur af din type, hvordan den vises i forbindelse med dit design og dets æstetiske, når du betragter din tekst som en blok alene.
Mikro-typografi er mere bekymret over detaljerne i afstanden, de problemer, der afgør, om ord er let at læse. Mikro typografi er en absolut nødvendighed, når det kommer til at sammensætte en tekstblok: hvis det ikke er læseligt, er der intet punkt i processen. Crowley Webb og Associates adresserede dette spørgsmål gennem både omhyggelig skrivning og afstand af de ord, som webstedet ville fremhæve.
Men makro-typografi giver dig mulighed for at gøre din tekst mere end godt inddelt: det er chancen for at få det til at se tiltalende og en del af hele dit design . Valget af skrifttyper og farver på denne hjemmeside skaber en levedygtig helhed. At ignorere begge facetter af typografi er skadeligt.
5. Pas på type farver
Det ville være så nemt at tabe tekst i baggrunden af ArtofElan , især den lyse rød på mørk rød kombination, der bruges af designeren. Når en webdesigner arbejder med farvet type, er pleje absolut nødvendigt, der er ingen garanti for, at en rød på rød kombination eller endog en gul på rød kombination er synlig . Når alt kommer til alt, har alle besøgt et websted, hvor teksten tilsyneladende kun var en skygge væk fra baggrundsfarven og fik en øjenstamme, da de forsøgte at læse den.
Den nemmeste løsning på denne situation er at sikre, at din type farve er meget anderledes end din baggrundsfarve . Sort og hvid fungerer så godt, fordi de er så drastisk forskellige, som du kan få, men der er nogle farvekombinationer, der fungerer godt: noget i lyset af en mørkblå på en lyserød vil få jobbet gjort. Reverseret tekst er temmelig vanskelig ... mens du kan arbejde med lyserød tekst på en mørkblå baggrund, er du mere tilbøjelig til at klage over det.
6. Vær seriøs om din CSS
Hvis din CSS er solid, kan du flytte mellem sider på din hjemmeside problemfrit, ligesom de forskellige versioner af Hutchouse.com stole på forskellige stylesheets for at skabe nogle imponerende effekter. Selvom du ikke tager ting så langt som Hutchhouse, kan CSS bidrage til at eliminere problemer med amatør typografi som at ændre skrifttyper og størrelser mellem sider.
CSS kan give nem sammenhæng mellem din typografi på hele et website . Hvis du er konsekvent i, hvordan du bruger type, kan det dog være en smule, at bryde den sammenhæng, selvom en lille mængde gør det, du ønsker at fremhæve, virkelig skille sig ud, ligesom oprettelse og derefter at bryde et gitter kan gøre for et effektivt design. I webtypografi kan vedligeholdelse af dine skrifttyper være et simpelt spørgsmål om CSS.
7. Dæk den centrerede tekst
At vælge et alternativ til centreret tekst kan gøre et website design let at læse , ligesom DesignCanChange.org . Hvis du vælger centreret tekst, især på en side som denne, ville det være en problematisk side: de skarpe kanter centrering skaber på hver side gør det meget sværere at læse, og der er masser af muligheder for perfekt centreret tekst for at afvikle forvrider resten af dine designs på forskellige skærme.
I nogle cirkler er centreret type kun et trin op fra at bruge Comic Sans i et website design. Du kan overveje det til en overskrift, men generelt vil tilpasningen af din tekst til venstre gøre dine læsere meget mere behagelige, medmindre de læser fra højre til venstre .
8. Deal med smarte citater og andre symboler
Luigi Ottani s site viser hvilke forsigtige opmærksomhed på citatmærker og andre symboler du får: En fuldstændig mangel på problemer, når webstedet viser disse symboler. Mange websteder er præget af symboler, som en browser ikke kan vise. Det er en arv af det faktum, at det meste af den tekst, en webdesigner arbejder med, formentlig var skrevet i Microsoft Word eller et andet stykke tekstbehandlingssoftware, der gør alle mulige små ændringer til tekst uden at forfatteren betaler meget opmærksomhed.
En af de værste ændringer er smarte citater: de krøllede citatmærker Word erstatter automatisk for lige citater . Et andet problemområde kommer, når du arbejder med tekst skrevet på et andet sprog: accenter og umlats kan forårsage lige så mange problemer som Word's hjælpsomhed. Hvis du bare kopierer og indsætter tekst med sådanne ændringer i dit design, skal du sandsynligvis gå tilbage og rette dem senere, i hvert fald for nogle webbrowsere.
I stedet får du dem tidligt i designprocessen, så du kan fokusere på at gøre din tekst bedre egnet til dit design . Hvis du vil have disse fancy symboler og smarte citater, der dukker op i det endelige design, skal du bryde dine HTML-enheder ud.
9. Planlæg din tekst for at blive større
Når du øger tekststørrelsen på Veerle Pieters ' hjemmeside, det er ikke helt så smukt, end hvis du bruger den skriftstørrelse, hun valgte. Du kan dog stadig læse alt, finde links og så videre, noget der er sandt for meget få hjemmesider.
Det skyldes til dels, at mange designere sørger for layouttekst i 10-punkts skrifttype eller endnu mindre. De fleste mennesker er behagelige at læse sådanne skrifttyper, men Baby Boomers udgør en stor del af den web-gennemsynende befolkning, og mange af de aldrende webs surfere skal have deres browsere sat til at vise typen så stor, som de kan . Din tekst, såvel som dit design, skal kunne tilpasses til det faktum.
Det er også værd at tage højde for, at browserstørrelsen kan variere dramatisk og flytte tekst rundt til uventede steder, hvis du ikke er forsigtig. Hvis bumping størrelsen op et punkt skaber problemer, at ældre demografiske vil gå videre til næste hjemmeside i en fart. At skulle rulle for evigt over til siden vil have et lignende resultat.
10. Vis en præference for sans serif
Hvis du kigger på En Liste Apart er hjemmeside, stort set alle store tekstblokke er sat i et sans serif skrifttype, hvilket gør det meget lettere at læse. Overskrifter og andre mindre tekstblokke er udlagt i serifed skrifttyper, hvilket skaber en balance mellem de to.
Når det kommer til at lægge tekst på en skærm, er sans serif skrifttyper næsten altid den bedste indsats , især hvis du vælger en skrifttype som Verdana, der var designet til visning på en computerskærm. Serifed skrifttyper har en højere chance for at vise dårligt, bliver sløret eller endda pixeleret.
Det er ikke muligt at helt undgå serifs, selvfølgelig. Men for store blokke af tekst, især ved at bruge en skrifttype uden serifs, kan der ydes et ekstra niveau for garanti for, at besøgende nemt kan læse et websteds tekst. Når du vælger skrifttyper til et projekt, skal du først se dine sans serif-muligheder først .
En endelig kommentar
Typografi er let overset, og selv når en designer tager det i betragtning, er det nemt at afskrive som en tidsintensiv aktivitet med ringe afkast. Men at bruge endnu et par minutter med teksten, der vil være centrum for dit design, kan omdanne det fra noget, som enhver webdesigner kunne smække på en side til et element, som understøtter resten af designet.
Skrevet udelukkende til WDD af torsdag Bram.
Følger du disse regler og andre? Venligst del dine synspunkter nedenfor ...