Share
God typografi kan være en hjørnestein til et vellykket webdesign. Fordi så mye av webdesign består av tekst, er det viktig å slå riktig merke for typografien din i den generelle suksessen til nettstedet ditt. Finesser av fin typografi kan være en vanskelig ting for nybegynnere å forstå? men i dag har vi 8 tips som skal hjelpe deg med å forbedre dine overordnede design.
Som jeg sa før, kan god typografi spille en viktig rolle i suksessen til et webdesign. Det kan bidra til å generere et visuelt hierarki. Det kan gjøre tekst enklere å lese. Som sitatet fra Steve Jobs 'Stanford-startadresse under notater, er typografi ikke noe tilfeldig spor av øyeblikkets beslutning. Det er mange faktorer og verdier som bør vurderes å generere skreddersydd typografi som ikke bare ser bra ut, men gir den funksjonelle fordelen å være lettere å lese og ta verdi bort fra.
Jeg bestemte meg for å ta en kalligrafi klasse for å lære å [lære kalligrafi]. Jeg lærte om serif og sans-serif skrifttyper, om å variere mellomrom mellom forskjellige brevkombinasjoner, om hva som gjør flott typografi flott. Det var vakkert. Historisk. Kunstnerisk subtil på en måte som naturvitenskapen ikke kan fange. Og jeg fant det fascinerende. Ingen av dette hadde noe håp om noen praktisk anvendelse i mitt liv. Men 10 år senere, da vi designe den første Macintosh-maskinen, kom det hele tilbake til meg. Og vi designet alt sammen i Mac. Det var den første datamaskinen med vakker typografi. Hvis jeg aldri hadde gått inn på det enkelt kurset på høyskolen, ville Macen aldri ha flere skrifttyper eller proporsjonalt fonter. Og siden Windows bare kopierte Mac, er det sannsynlig at ingen personlig datamaskin ville ha dem.
Vi kommer inn i klassifiserende skrifttyper og hvordan å plukke dem på bare et minutt? men jeg vil at du skal vurdere hvilke skrifttyper som virkelig betyr for deg (eller prosjektet du arbeider med i øyeblikket). Visst, du kan bruke omtrent alle skrifttyper til å lage et ord - men hva sier det skriftstedet egentlig om ordet? Mer enn noen annen designbeslutning du lager, hvilke typevalg du gjør, gir nettstedet ditt karakter og kontekst. Velg dem nøye, og de vil enten hjelpe deg med å kommunisere med seerne, eller distrahere dem.
Som et raskt eksempel, undersøk følgende to variasjoner av ordet "kanskje" (under). Ingenting endres vesentlig når det gjelder farge eller størrelse, men den underforståtte betydningen du har (ha har) ta bort endres dramatisk ganske enkelt med skrifttype og saksinnstilling.
Det er flere hovedklasser av skrifttyper, men bare to som hovedsakelig refereres til på nettet (serif og sans-serif). Den tidligere er en skrifttype som har serifs, liten ytterligere detalj på kantene til hvert brev, mens sistnevnte er sans serif (oversatt til uten serif, for de av oss som ikke forstår latin).
Mer enn noen annen designbeslutning du lager, hvilke typevalg du gjør, gir nettstedet ditt karakter og kontekst.
Begge skrifttyper kan fungere godt, enten innenfor et system av primært disse eller som en kombinasjon under noen omstendigheter. Men å få det galt kan gi webdesignet helt feil følelse og inntrykk, eller bare se helt dårlig ut. Vurder følgende eksempler og tone brakt til hvert design av de brukte skrifttyper:
Du bør også vurdere noen andre aspekter, som om teksten din er like lesbar i en serif font enn den er i en sans-serif skrifttype. Mindre tekst vil generelt bli representert bedre i en sans-serif font, så lenge du spiller pent med noen av de andre faktorene jeg skal nevne i dag.
Det er også verdt å merke seg at adventen til Google Fonts, Typekit, CSS @ font-face-tjenester og andre font-erstatningsteknologier har innvarslet en ny bølge av skrifttyper som kanskje ikke faller inn i kategoriene bare serif eller sans-serif. Vurder følgende eksempler:
Et nettsted som bruker mange forskjellige skrifttyper tilfeldigvis er som en person som bruker mange forskjellige stemmer i samme samtale? Det kan virke som en god ide, men sjansen er at du bare ender med å høres ut som en gal person til noen som går forbi
Felles kunnskap rådde en gang webdesignere til å velge en enkelt skrifttype og holde fast ved den, men det kan ofte være mye mer visuelt interessant å velge 2 eller 3 skrifttyper og bruke dem (konsekvent og jevnt!) I nøye utformede kombinasjoner. Dette er hvor å blande serif og sans-serif skrifttyper virkelig kan bli interessant. Vurder følgende eksempler og hvordan type mangfold bidrar til å bringe livet til designene:
Legg merke til at mens det er mer enn ett skrifttype brukt i hvert design, blir de brukt på riktig måte (se tips 1) og konsekvent på tvers av hver side.
Antallet forskjellige skriftfelter kan forårsake lesbarhet og andre generelle designproblemer, men dette betyr ikke at bare fordi du kan bruke 100 forskjellige skrifter, bør du. Det er noen tilfeller der mange skrifttyper blir brukt samtidig fungerer bra som en kunstnerisk erklæring, men det er vanligvis en god tommelfingerregel at du beholder antall fonter til et minimum.
Hvorfor? Et enkelt svar er at et nettsted som bruker mange forskjellige skrifttyper tilfeldigvis er som en person som bruker mange forskjellige stemmer i samme samtale? Det kan virke som en god ide, men sjansen er at du bare ender med å høres ut som en gal person til noen som går forbi. Å begrense antall skrifttyper på et nettsted bidrar til å etablere hierarki og tone uten å overdrive det.
Selvfølgelig er det også viktig å velge de riktige skriftene i dette valget. Enkelte skrifttyper fungerer godt med andre spesifikke skrifttyper, spesielt de som er i lignende kategorier som serif / sans-serif. Et skriftsnitt kan ikke matche den ultratynne skrifttypen du har satt den rett ved siden av. Prøv forskjellige kombinasjoner til du finner de riktige 2 eller 3 som jobber for deg.
Linjeavstand kan være en stor avtalebryter for en god typografiordning. Linjeavstand er bare det, avstanden mellom linjene i teksten. Flytt dem lenger fra hverandre, og det blir generelt mye mer lesbart og lettere på øyet. Din linjeavstand bør som en tommelfingerregel være omtrent 0.3em-0.5em større enn skriftstørrelsen din, selv om den kan variere avhengig av design. Selv om det er en tommelfingerregel, må du gjenkjenne at ledelsen skal variere avhengig av valg av skrift, ettersom andre skrifter kan kreve mer eller mindre ledende.
For å innse hvorfor generøs linjeavstand er et must i flertallet av design, se grafikken under for å få en grunnleggende forståelse. På dette nivået er de begge ganske lesbare, men den utstrekte ene er stadig mer, så på grunn av at hvert ord har mer plass å skille fra og skille fra resten.
Konseptet med et visuelt hierarki er hvor elementene du vil at leseren din skal se og oppfatte først er den mest fremtredende, enten det er laget gjennom farge, størrelse, skrifttype eller noe helt annet. Typografi kan spille det med i det overordnede hierarkiet på nettstedet ditt, men det kan faktisk ha det eget. Det enkleste eksempelet for å forklare dette, ser på tekst på en blogg, og legger merke til hvordan tittelen er generelt det større eksemplet på tekst.
Du kan bruke flere forskjellige faktorer for å bidra til å lage ditt hierarki. Farge er et eksempel, og det spiller pent i kontrast, hvor elementene du vil at brukeren skal lese først er de enkleste. Størrelsen er kanskje det største eksemplet, men du vil uten tvil legge merke til en massiv 10em streng med tekst over standardstørrelsen på 1em.
Macintude bruker Black Sakura-temaet fra ThemeForest. Du går sikkert og leser tittelen før du dykker inn i innholdet, nei? For mer informasjon om visuell hierarki i webdesign, se Brandons artikkel om det aktuelle emnet.
Tiltak er et viktig aspekt også. Mål er bredden på teksten din, og en faktor som kan avgjøre om teksten er for bred eller for smal. Målet fungerer generelt sammen med linjeavstand for å gjøre teksten lett å lese for sluttbrukeren ved å skreddersy innholdet til det området som menneskets øye komfortabelt reiser på sin reise på tvers av siden.
Med mindre malen er spesielt et smalt eller bredt design, vil du sannsynligvis ønske å holde teksten til en konstant bredde som overholder denne enkle matematiske summen: 30 x tekststørrelse. Bruk det som en grunnlinje sammen med din polstring og din bruk av det gyldne forholdet (bør du bestemme deg for å bruke det) for å lage en bredde som er lett nok til å lese. Bare ikke ødelegge alt ved å senke linjeavstanden din eller gjøre teksten for liten.
Det er litt vanskeligere å definere hva god måling er, da det kan variere veldig seriøst mellom forskjellige design. Bredere tekst kan passe et bestemt design bedre.
Tekstjustering er også en viktig faktor. Det er generelt fire typer du kan bruke: venstre, senter, rett og rettferdiggjort. Den gylne regelen for typografi er å gjøre den lesbar, og du har ikke så mye kontroll over det hvis du velger en rettferdig tekstjustering. Rettferdig tekst er grunnleggende der teksten er optimalisert for å fylle hele bredden på elementet ditt, og skaper det perfekte rektangel med tekst. Det kan være bra i aviser og utskrift, men på nettet virker det bare ikke så bra. En linje kan være mye mer crammed enn en annen linje, men det er ikke noe du spesielt kan kontrollere.
Sikker på at du kanskje har perfeksjonert typografien din på 100% skalaen, men noen brukere kan se med nettleservinduet zoomet inn eller ut. Derfor må din typografi være i stand til å skalere godt når brukeren kommandoerer en zoome inn eller zoome ut. Dette er veldig enkelt å teste og manipulere, bare ved å skalere nettleseren din.
Legg merke til dine besøkende med tilgjengelighetskrav, både inn og ut av typografi. Selvfølgelig kan skalering brukes av noen og mye av tiden, det kan faktisk være tilfeldig. Min brors netbook har regelmessig at det er Chrome-vinduet som zoomes inn i alt for langt, rent ved et uhell på grunn av bevegelsen involvert på styreflaten.
Selvfølgelig er typen av staggared zooming som er mulig i de fleste nettlesere, bare en type. Mac OS X Lion introduserer en vakker iOS-lignende klype-til-zoom som zoomer inn i en side som om det var et bilde. Man bør også vurdere den typen zoom, og hvordan teksten ser ut når den blir vist i samme layout, bare på en mye nærmere visning.
I et nøtteskall er en skrifts vekt hvor tykk den er. En font kan komme i mange vekter, alt fra ultra-lys hårlinjen til den ultra-svarte platen. Endre vekten av noen tekst brukes vanligvis til å legge til en del subtile definisjon for å bestemme betydning, som å markere nøkkelord eller et åpent avsnitt når de brukes i et avsnitt.
Font vekt kan brukes i mange forskjellige scenarier. For eksempel kan du bruke det i et innlegg for å plukke ut nøkkelord eller setninger. Distinguishing med skrifttype vekt betyr at det er mindre behov for flere skrifter eller å introdusere andre faktorer som kan forringe lesbarheten.
Typografi er en virkelig integrert del av design. Når du ser på en blogg, vil du legge merke til hvor mye tekst det er på siden og hvor mye påvirkning det kan ha på designen som helhet. Disse åtte faktorene er de viktigste når det gjelder typografi, og kan drastisk forandre estetikken til designen.
Å velge om skrifttyper bruker serifs er en viktig beslutning, og hvordan å blande dem er enda mer kritisk. Antallet skrifter, mellomrummet mellom tekstlinjene, målingen, justeringen og vekten er alle viktige charateristics også. I et nøtteskall er typografien din noe som bør være godt gjennomtenkt og ikke bare kastet sammen tilfeldig.
Accentsconagua