Web Design Basix Hvorfor Typografi Matters

Typografi er en av de viktigste ferdighetene som en designer kan ha? industri veteraner tilbringe år honing sin teknikk og du kan enkelt bruke år på et universitet som studerer emnet; Men hvor er det beste stedet å virkelig begynne? I dag, i det siste tillegget til Basix-serien, presenterer vi typografi for nybegynnere ved å forklare en enkel ting: hvorfor typografi betyr så mye i webdesign.


Hva er typografi?

Typografi er en gammel disiplin som bare kan forklares som kunsten å arrangere og designe det skrevne ordet. De tidligste eksemplene på typografi går tilbake så langt som 1800 B.C. med de gamle grekerne, men den moderne epoken av typografi er knyttet til midten av det 15. århundre da trykkpressen ble oppfunnet.

Jeg vil holde historieleksjonen kort her: Typografi er viktig av en grunn: fordi det er den primære måten designere kan kommunisere med leserne på? om mediet er en bok, en trykte reklame, billboard eller et tv-show, er typografi viktig fordi det er utførelsen av det visuelle språket.


Så, hva betyr vi når vi sier "webtypografi"?

96% av Internett består av skriftlig informasjon eller tekst. Denne teksten distribueres til store og små biter av informasjon som er spredt over ulike sider med forskjellige formater.

Formateringen av all denne skriftlige informasjonen i et nettsteds design er det vi kaller "Web Typografi".

Typografi er den viktigste delen av et webdesign fordi det påvirker måten et nettsted kommuniserer med leserne på. Fra større overskrifter og dristige blokker til liten kropp er de ulike bruken av tekst på nettet kjernekommunikasjonsmetoden? så det er naturlig at hvordan en webdesigner bestemmer seg for å arrangere typen på en nettside, er avgjørende for effektiviteten til dette nettstedet.

Vi ser bruken overalt som alle nettsteder stole på typografi for å formidle deres melding til leserne. Imidlertid er det noen webdesignere som pleier å overse den uunngåelige betydningen av typografi og fokusere bare på den visuelle eller grafiske delen av webdesign.


Hvordan er Web Typografi forskjellig fra Print Typography?

Bruke typografi for utskriftsmedium som brosjyrer, flyger, magasiner, bøker eller utendørsmedier som poletegn og billboards, er annerledes enn å bruke den til dataskjermen. Når det gjelder typografi, er skjermen et helt annet medium? og som med alle typer design, må du virkelig vurdere mediumet som folk vil se på ditt design gjennom. Vurder følgende to bilder:

Toppbildet er en plakat for bandet, The Black Keys. Bunnbildet er deres nettsted. Samme band, annen tilnærming til typografi. Hvorfor? Fordi mediet (og dermed meldingen og hensikten) for hvert design er forskjellig. Den ene er å markedsføre en konsert, den andre er en portal for all slags informasjon om bandet.

Når du bruker typografi i en utskriftsdesign for noe som en bok, vil det faktum at det blir sett fra en relativt nærhet, gi deg muligheten til å spille med skrifter ganske mye fordi det ikke vil skade lesbarheten mye. Hvis du bruker typografi for utendørs kommunikasjonsmedier som et billboard eller en plakat, vet du at leseren har bare en brøkdel av tid til å se brettet og konsumere det som blir kommunisert og slik at du ikke roter med finjustering av typografien mye - i stedet kan du fokusere på opprinnelig inntrykk en lesbarhet av typen.

Men med et nettsted er det helt forskjellige mål i tankene. Utforming av typografi for datamaskiner og Internett krever at designeren deler opp mye informasjon i ulike segmenter og delsegmenter (Mikro og Makro-typografi). Også en nettside er ikke konstant som den må vises på forskjellige nettlesere, forskjellige Internett-tilgangsenheter og med forskjellige skjermoppløsninger. Så må webtypografien håndtere et stort antall problemer i forhold til andre medier. Så, mens du velger typografi for deres nettside, må en designer vurdere plattformskompatibiliteten og lesbarheten. Dette er bare noen få bekymringer som en webdesigner må huske på når du nærmer deg et nettsted.


Webtypografi er "Informasjonsdesign"

Når det gjelder webdesign, er typografi ikke begrenset til å velge en skrift og legge den ut; Det er den kunst for å dele opp bunter med informasjon på en slik måte at leseren vil ha en god sjanse til å finne det som er av interesse for ham? dette er hvor typografi på nettet blir mer som informasjon design.

Typografi på nettet er så mye om å organisere type i effektive, meningsfulle layouter som det handler om å bruke et flott skrift.

Å trekke oppmerksomhet på en bestemt tekstblokk, som hjelper brukerne med å finne innholdet de søker etter, eller tilpasse et bredt utvalg av innhold til en enkelt side, gjøres alt gjennom typografiske ferdigheter.

Ideen om å designe type å være mer enn bare leselig, men også å være gir mening er en del av det som forvirrer mange mennesker om webtypografi. Alle kan skrive ut et avsnitt med tekst; færre mennesker kan bruke ting som letteravstand, linjehøyde og skriftstørrelse for å gi det en følelse av karakter; men de beste webdesignerne kan organisere typen på tvers av en hel layout på en måte som gir mening til leserne og hjelper veilede dem over en hel nettside.

Dette er hva vi mener ved at typografi er informasjonsdesign.


Makro-typografi og mikro-typografi


Fra Jeg elsker typografi

Det er ofte nyttig å starte det typografiske systemet for et design ved å bryte det opp i to forskjellige segmenter:

  • Makro-typografi, som består av en samlet tekststruktur av dokumentet
  • Micro-typografi, som dekker de mindre og mye detaljerte aspektene som skrifttype, linjehøyde og avstand mv.

Ved å nærme seg makro-typografi først, kan det være enkelt å skissere "større bilde" -elementene i typesystemet i et design. Hvor skal navigasjonen være? Hvordan skal type på nettstedet bli lagt ut? En kolonne? To? Mer? Alle de overordnede strukturelle reglene bør defineres først. På dette punktet kan du bruke omtrent alle skrifttyper du vil ha? men du kan begynne å få en følelse av størrelsen og omfanget av et design.

Når du har beskrevet det "store bildet", er det på tide å nærme seg Micro-typografi. Det er her du begynner å forfine ditt typesystem ved å definere de stilistiske elementene, for eksempel det primære (og muligens sekundære) font-ansiktet, hvor store store overskrifter vil være, standardstørrelsen på ting som sidebartitler, avsnittstekst, lenkefarge osv.


Tips for webtypografi

Hvis du nettopp har begynt som webdesigner, kan det være skremmende å se på alle de ville og galne tingene som skjer med webtypografi. Du kan ha en rekke spørsmål, som: Hvor skal du begynne? Hva er riktig og galt? Er det regler som jeg må følge? Den gode nyheten er at nettkartografi i sin kjernen faktisk har noen konsekvente regler som du bør være oppmerksom på. Det som følger er noen nyttige tips jeg har samlet for å skape effektive typesystemer for nettet:

Rengjør og fjern hierarki


Fra å tenke med type

Hierarkiet av typografi er svært viktig i et webdesign. Tenk på alle de forskjellige stedene du bruker tekst på et nettsted: navigasjonen, overskriftene, avsnittene, bildetekster, sidebjelker, etc? Sjansene er gode at det er mye tekst! Hvordan skal du gjøre alt dette til et logisk type system? Ved å utvikle et type hierarki.

Et godt utviklet hierarki gjør at du kan vite hvor du skal begynne å lese, hvordan du fortsetter å lese videre, og forskjellen mellom viktig og mindre viktig informasjon på en side. Med et effektivt typehierarki trenger du ikke å stole på tekstplassering lenger for å markere hva du vil at leserne skal gå gjennom først.

Les mer om Forståelse hierarki


Cascading Typography - være konsekvent

Mangel på konsistens i typografi er en av de vanligste og mest gjentatte feilene som webdesignere forplikter seg i disse dager. En trykkdesigner vil ofte omhyggelig utforme hver bokstav på en side? men det er ikke nødvendig med webdesign.

I stedet for å prøve å manuelt utforme hver eneste type på et nettsted, designe med ideen om Cascading Style Sheets (CSS) i tankene. Benytt deg av velsignelsen til CSS og angi font, størrelse, farge, linjeavstand, høyde og andre funksjoner i din typografi gjennom hele nettstedet.


Gå gjennom teksten

Jeg har nevnt dette tidligere, men la meg understreke poenget: Store webdesignere gjør mer enn bare å plassere bilder og lime inn tekst i et weboppsett. Det tar gode faglige vaner å lage en vinnende nettside design; En av de beste profesjonelle vanene en webdesigner burde ha er å Les teksten før du plasserer den i weboppsettet. Hvis du har tilgang til tekstinnholdet du vil bruke, må du bare unngå å lime alt i blindt. Ved å gå gjennom og lese den faktiske teksten, vil du kunne gjøre en bedre sammenheng mellom innholdet og utformingen.

Også, når du er ferdig med å plassere teksten og andre elementer i designen, gjør det et poeng å gå gjennom det igjen som en korrekturlesingsøvelse for å unngå feil eller ting utelatt. Det er utrolig hvor ofte designere glemmer å stilte enkle ting som punktlister fordi de rushed gjennom designfasen.


Makro og Micro Typografi - Begge Materiell!

For et vellykket webdesign bør en webdesigner være oppmerksom på både makro og mikro typografi. Selv de beste layoutene kan falle fra hverandre hvis ting mangler på "mikro" side av ting? og til og med den beste mikro-typografien vil ikke være nyttig for leserne hvis den ikke er lagt ut ved hjelp av riktige makrotypografiprinsipper. Begge er viktige!

Mange designere er spesielt gode på den ene eller den andre? så ta litt tid til å vurdere hva din sterkeste dress er: makro eller mikro? Så gjør ditt beste for å styrke dine evner (gjennom praksis og oppmerksomhet på detaljer!) I din svakere ferdighet.


Farger og typografi

Dette sier seg selv for mange designere, men fargen på tekst er en annen viktig ting å vurdere. Det er hundrevis av nettsteder som tar dette punktet for gitt og bruker skriftfarger som enten:

  • Gjør typografi utrolig vanskelig å lese
  • eller? er kjedelig! (og kjedelige farger er bortkastede farger)

Du trenger ikke å gå og plaske hele regnbuen over siden, og du trenger ikke å bruke noe forferdelig som rød tekst på en grønn bakgrunn? bare bruk enkel, fornuftig fargeteori for å velge farger for skrifttyper som er lesbare og interessante. Husk at koblinger skal være farget i de fleste tilfeller? det forteller folk at de kan klikke på dem!

Les mer om Web Design Color Theory.


Design med "Live Text"

Ikke bruk Lorem Ipsum! Det er ingen erstatning for den faktiske teksten mens du designer et nettsted. Mens du kan bruke dummy-tekst for å få en ide om hvordan ting skal se ut i layoutet, så snart webdesignet ditt er ferdig, kan du prøve å bruke den faktiske teksten du eller din klient planlegger å bruke i livewebsiden . Først da vil du kunne synkronisere utformingen med teksten og finne ut hvilken effekt av hvordan den overordnede nettsiden vil se ut? Selv små oversikter i denne prosessen kan føre til svake punkter i et design, så ta deg tid til å bruke livetekst før du ringer et prosjekt "komplett"!


Vis din typografiske personlighet

Den fantastiske tingen om webtypografi er at det finnes et bredt utvalg av måter å nærme seg på. Hver designer vil ha sin egen stil for å gjøre ting, og det er egentlig ikke en eneste "riktig" måte å layout ut type på web. Type har personlighet, akkurat som deg eller klienten du jobber for, så vær ikke redd for å leke med dine egne kreative variasjoner når du spiker basixen til et nettsteddesign.

Les mer om Velge riktig skrift


Konklusjon: Øvelse gjør perfekt

Webdesign krever at du behersker en rekke ting for å lage en virkelig flott layout, og typografi er definitivt en av disse tingene. En webdesigner som virkelig forstår betydningen av typografi, vil kunne slå suksessfaktoren oftere enn ikke? og alt det som virkelig trengs, er praksis for å trene tankene dine for å se best mulig måte å legge ut et gitt stykke type! Typografi er ikke rakettvitenskap, men det tar mye arbeid å finne den beste måten å gjøre ting på for et gitt prosjekt.

Ta litt tid hver dag til å trene - prøv å ta en artikkel som du virkelig liker og re-design den; Design ditt eget CV, portefølje, hva du kan finne? bare bruk hva ideer du kan for å øve deg, og du vil finne deg selv bedre på kort tid! Stol på meg, så snart du forstår det grunnleggende, blir det et stykke kake!

Denne artikkelen ble samskrevet av Arfa Mizra og Brandon Jones. Takk for at du leste!