Share
Typografi er et stort felt. Folk bruker år i sitt liv til dette gamle håndverket, og likevel er det alltid noe nytt å lære. I denne artikkelen vurderer jeg de viktigste punktene du bør vurdere når du velger et skriftsted for et nettsted.
Publisert opplæringNoen få uker besøker vi noen av leserens favorittinnlegg fra hele historien til nettstedet. Denne opplæringen ble først publisert i oktober 2010.
Når du designer for nettet, må du godta at innholdet vil endres. Det er rett og slett ute av spørsmålet å ta seg tid til kjerne (tilpass rom mellom individuelle bokstaver) hver tittel på et stort nettsted. Med andre ord gir du litt kontroll.
Det jeg skal fokusere på i dag er praktisk typografi. For meg betyr dette at du aksepterer at du aldri vil ha full kontroll over typen på nettstedene dine. Å velge et skrifttype, bestemmer seg for en størrelse, dette er alle ting vi som designere har et ordtak i. Praktisk typografi betyr å lære hvordan og enda viktigere hvorfor å justere det du har kontroll over. La oss komme i gang.
Hva gjør du med type? Lese det! Så hvorfor gjør så mange nettsteder det så vanskelig å gjøre akkurat det? Uansett om det er små skriftstørrelser, proppet linjehøyde eller bare ren gale skrifttyper, ser det ut som at mange nettsteder der ute er fast bestemt på å ikke la deg få glede av innholdet deres!
Ved å gjøre din type lesbar, hopper du umiddelbart utover minst halvparten av konkurransen, som er heldig, virkelig, fordi det ikke er så vanskelig!
Når du bestemmer hvilket skrifttype du vil bruke på nettstedet ditt, er det viktig å huske: ikke tenk over det. Jeg vet at mange designere hater å bruke Helvetica, fordi det er mye overbrudd. Jeg er enig med dette, men det er en veldig viktig del av informasjonen denne setningen går ut: hvorfor. Folk overstyrer Helvetica fordi det er bare så jævla bra. Den passer perfekt med nesten alle design som er tenkelige, det fungerer bra i små, så vel som store størrelser.
Mens det kan gå imot din tro for å sette din type i et slikt misbrukt ansikt, hvis det virker, så gå for det.
Kroppseksemplaret ditt er uten tvil den delen av designet som trenger å være mest lesbar, så sørg for at du velger en skrift som fungerer bra i små størrelser. Hva mener jeg med det? Hvis du kan angi kopien din til 10px og du fortsatt kan finne ut hva det står, så er det en god indikasjon at du har valgt en lesbar skrifttype.
Det dekker kroppseksempler, men hva med titler?
Lesbarhet i store titler er langt enklere å finne ut enn i kroppseksemplar. Hvis du kan finne ut hva det står umiddelbart, så er det lesbart nok.
Det som er bra om skrifttyper er at når du har jobbet med nok prosjekter, får du en god ide om hva som fungerer og hva som ikke gjør det. Derfra vil du være i en bedre posisjon til å ta kritiske valg om skrifttyper.
Det er ingen formel for å velge de riktige fonter for nettstedet ditt. Ofte er den beste måten å bestemme på en, bare å prøve ut hver skrift du tror kan fungere, og deretter sammenligne. Velge skrifttyper er egentlig et tarminstinkt, men det er viktig å huske at 90% av tiden, vil en bruker ikke tenke på hvilken skrifttype som er brukt, så hvis det er lesbart, så er det ofte godt nok.
Det er sjelden (hvis noen gang) en situasjon der bare én skrifttype er egnet for bruk på et nettsted. Den gjennomsnittlige nettsiden har mye tekst. Det er ingen måte en skrifttype vil fungere for dem alle! De aller fleste velutviklede nettsteder bruker to skrifttyper: en for kroppskopi og en for overskrifter.
Når du velger et par skrifter, er det viktigste å vurdere hvordan de jobber sammen. "Er de like nok?" "For like?" "Ikke forskjellig nok?" Alt dette er spørsmål du burde spørre deg selv. Jeg finner ut at den beste måten å velge et par skrifter på, er å bare sette mange av dem side om side og bestemme seg for det beste. Det er ingen måte å vite hvilken er best før du har prøvd dem alle.
Noen ganger vil det mest hensiktsmessige være to sans-serifs, mens andre ganger, du vil ha en sans for overskrifter, og en serif for kroppskopi. Det er ikke særlig viktig om de ser like ut, det som er viktig er om de opptre lignende. Dette avhenger selvfølgelig av resten av designet. Uansett hvilke skrifttyper du velger, må du formidle budskapet ditt sterkt, og hvis det betyr at du har kontrasterende skrifttyper, så gå for det.
Simon Collison bruker fontparing utmerket på sin side, velger en sterk sans-serif for hovedtitler, og en enkel Serif for den andre, mindre overskrifter, samt kopi. Dette samarbeidet viser ekspertvis meldingen som nettstedet prøver å si, på en måte som hver skrift hver for seg ikke kunne uttrykke.
Som en generell regel, liker designere å sette sin kroppskopi i det minste ved 12px. De fleste valgte imidlertid en større størrelse som 14px, noe som er enda bedre for lesbarhet. Font-dimensjonering er egentlig ganske enkelt å bestemme seg for for kroppskopi, men det er titlene som begynner å bli kompliserte.
Hvor stor skal dine titler være? Det kommer an på. I min observasjon og opprettelse av nettsteder har jeg kommet til den konklusjonen at en tittel bare skal være så stor som den må være. Dette betyr at du bør prøve ut forskjellige størrelser til du finner en som bare er stor nok til å trekke oppmerksomheten du vil ha, men ikke større, med mindre stor tekst er det du skal til, i så fall gå rett framover.
Naturen til en tittel er stor. Det er et viktig element på siden, så det bør naturligvis være større, ikke sant? Ja og nei. Ja, titler er generelt større enn andre elementer, men nei, dette er ikke den eneste måten å trekke oppmerksomhet på. Farge, vekt og plassering er alle like viktige for å etablere et klart visuelt hierarki til sidene dine.
Nøkkelpunktet å huske om visuelt hierarki er at det er alt relativt. Tekst på nettstedet ditt må bare skille seg i forhold til den andre teksten på nettstedet ditt. Ta Wilson Miner's nettsted for eksempel. Hans titler er ganske små for hvor viktige de er, og er overraskende tett i størrelse. Men hans bruk av farge skiller den viktigste tittelen, og gir dem mer mening.
Bruken av typen er et svært viktig verktøy for å etablere visuelt hierarki, enten det er størrelse, farge, vekt eller plassering.
Ledende, eller mellomrommet mellom tekstlinjer, er et uvurderlig verktøy for lesbar tekst. Dårlig ledelse kan ødelegge et ellers strålende stykke kopi, og god ledelse kan gjøre selv den verste typen se lesbar. Heldigvis er det ikke så komplisert å implementere.
Bruke CSS linjehøyde eiendom, kan du enkelt tildele plass mellom dine linjer med kopi. Generelt sett, for store tekstblokker, er 1,5 ganger størrelsen på teksten en god størrelse. Mindre tekst skal ha strammere ledende, og stor tekst skal ha mye. Det er ikke så komplisert, virkelig.
Sporing er mellomrom mellom tegn i tekst. Jeg innrømmer at dette er litt av et grått område når det gjelder "Praktisk typografi", fordi CSS ikke gir oss stor kontroll over det. Vanligvis trenger du ikke å bekymre deg for det for liten tekst, det er bare for titler at det blir et problem. Generelt sett legger du til brevavstand: 1px; eller brevavstand: 2px; til CSS bør være nok plass mellom bokstavene.
Et annet sted ville det være fordelaktig å legge til sporing til småpotter. Her anses det generelt som god praksis å legge til en ekstra piksel eller to mellom tegnene, da de naturlig sett vises større.
Selv om det ikke er strengt talende typografi, er farge en svært viktig del av hver nettside type. Jeg snakker ikke om fargeskjemaer, men heller om kontrast som er nødvendig for å sikre lesbarhet på nettstedet ditt. Svart tekst på en hvit bakgrunn (eller lys bakgrunn) anses allment for å være den mest lesbare fargen for tekst.
Jeg sier ikke at du bør gå og sette alt til svart-hvitt, bare at når du designer, bør du være oppmerksom på kontrast av teksten. Det kan komme tilbake til å bite deg hvis du ikke er forsiktig.
Etter min mening er bruk av rutenettet den viktigste ideen for praktisk typografi på nettet. Du kan ha gode skrifttyper, mellomrom og farger, men hvis du ikke har en god layout, kan du også bruke tegneserier.
Bruke et rutenett når du designer med type gir en klar balanse og geometrisk struktur til designet. Det er ikke den magiske løsningen til en dårlig design, men hvis du designer med et rutenett fra starten, kan du være sikker på at i det minste vil oppsettet være solid.
Så hva har et rutenett å gjøre med typografi? Enkelt sagt: alt. Rutenettet belyser alle grunnleggende idealer for typografi. Det er geometrisk, konsistent, brukbart og fremfor alt: vakker.
Innstilling av teksten med et rutenett er en viktig måte å etablere visuelt hierarki på, og det er en god indikator på hvor stor (eller liten) teksten din skal være.
Som jeg sa før, hvis du er typografi, er lesbar, så er du allerede foran 50% av konkurransen, så hva med den andre halvdelen? Hvis du har gjort det så langt, så lar vi sammen de klare, konsekvente lesbarhetsregler og inn i den uklare og mystiske verden å være unik.
Vil du at nettstedet ditt skal skille seg ut? Trinn 1. Bruk noen unike typografi. Formentlig for deg betyr dette å bruke noen unike skrifttyper. Men hva gjør en unik font? For meg er det ikke en som ikke brukes ofte, men en som har en melding eller følelse som ikke er ansatt av andre ansikter.
Å velge en unik font handler egentlig om følelse. Gjør denne skrifttypen føle forskjellig? Eller ser det bare annerledes ut? Når du velger skrifttyper for eventuelle prosjekter, bør du alltid vurdere designens følelse. Siden dette er helt personlig, kan jeg ikke hjelpe deg med å finne et unikt skriftsted. Det jeg kan gjøre er å vise et eksempel på unike skrifttyper.
Design Cubicle har en veldig unik logo og design. Den er sterk, men stilig, oppsiktsvekkende, men likevel subtil. Når jeg ser på designen, så er følelsen av klassen bare oser ut av nettstedet. Det står: "Jeg vet hva jeg gjør."
Hvor mange nettsteder kan du vite hvis logoen er like stor som innholdet? Hva med en ultra-tynn tittel? I motsetning til mitt siste punkt, er uortodoks å se hva andre gjør, og deretter gjøre det motsatte.
Folkene på Savvy Belfast er klare. De la merke til det trange utseendet på de fleste nettsteder, og bestemte seg for å erstatte all den meningsløse kopien med en uttalelse.
Selv om du besøker nettstedet deres for et øyeblikk, kan du ikke unngå å huske navnet deres.
Typografi er ikke sin egen ting. Det er en del av webdesign akkurat som alle andre. Type er viktig, ja, men du bør ikke glemme at det er bare en del av det som gjør et webdesign flott. Du bør utforme din type med resten av designet i tankene.
Hvis du bruker en svært forseggjort bakgrunnsstruktur, så kanskje en fin serif ville være bra for dine titler.
Mitt poeng her er enkelt: Ikke glem det kontekst. Design er et stort felt, og i dag snakker jeg bare om en del av det. For en vellykket nettside design, må alle delene maske sammen vellykket. Det er målet: å lage opplevelsen som noen vil ha på nettstedet ditt. Du kan ikke gjøre det med bare skriv inn, eller bare farge, eller bare innhold!
Så mye av en opplevelse er definert av hvordan du føler: glad, trist, underholdt, sint, bla blah blah. Mennesker har et bredt spekter av følelser, og som designere er det vår jobb å fremkalle disse følelsene med våre design.
Av alt jeg har snakket om i dag, er dette langt den mest abstrakte, og det er litt vanskelig å forklare. I stedet for å prøve å forklare dette for deg, la meg vise deg.
Da jeg først besøkte Solid Giant, smilte jeg. Jeg smilte neste gang jeg så det, og til og med neste gang. Umiddelbart følte jeg et slægtskap mot designen. Den store, fuzzy "G" er bare for søt å glemme!
Helt ærlig, jeg tror det er geni.
Det er ingen måte å lære følelsesmessig design, det er noe du må oppleve, og deretter spille med i dine egne design.
Vel, du har nådd slutten av innlegget. Jeg håper at i det minste har du lært noe, men hvis ikke, det er greit også. Hvis det er en tror jeg vil forlate deg etter at du har lest dette, er det det fremfor alt: være lesbar. Resten vil følge.
Hva synes du den viktigste delen av typografi på nettet er? La din mening stå i kommentarene!
Accentsconagua