Share
Typografi er et grunnleggende element i ethvert design som du jobber med. Hovedårsaken til at vi har nettsteder i utgangspunktet, er å vise informasjon, og for at informasjonen skal forbrukes av brukere som kommer over det. Selv om det kan være mange andre elementer til et nettsted, er kjernen innhold. At innholdet må være lett å lese, fordøye, forstått og ha en solid typografisk base, vil bare hjelpe med det.
Å komme i gang med typografi er muligens en av de mer tilgjengelige delene av læringsdesign, bare på grunn av hvor enkelt det er å endre og leke med teksten for å få umiddelbare resultater. Men raffinering typografi ferdigheter, slik at du kan designe noe som fungerer bra og er effektiv, er lesbar og nyttig for brukerne, er mer en utfordring.
Først av, vi får noen av de grunnleggende tekniske termer ut av veien. Dette er bare et lite trekk på noen av de vanligste vilkårene du kommer over når du jobber med typografi, og det er langt mer omfattende guider på nettet eller i bøker hvis du vil lese mer.
Denne første termen er en som reiser flest folk opp. skriftsnitt beskriver de utformede brevformene. EN font er kjøretøyet som inneholder skrifttypen. Du laster ned og installerer en skriftpakke for å kunne bruke et skrifttype i designet.
Du kan trygt tenke på at det er to hovedtype klassifikasjoner - serif og sans serif. Serif skrifttyper ser vanligvis litt mer klassisk ut i stil, ofte med små flik eller utsmykninger (serifs) der brevformene avslutter.
Eksempler på seriffonter inkluderer Times New Roman, Baskerville og Georgia. Sans serif skrifttyper mangler serif utsmykninger, i stedet ser litt mer moderne ut. Eksempler på sans seriffonter inkluderer Helvetica, Arial og Futura.
La oss kort undersøke anatomien til en brevform.
Stiggeren er en del av et små bokstaver som strekker seg over bokstavens x-høyde. Du vil være kjent med bokstaver som har oppstigninger som b, d, f, h, k, l.
En nedstigning er en del av et små bokstaver som strekker seg under bokstavens x-høyde. For eksempel g, j, p, q, y.
I et brev er en teller det buede lukkede (eller delvis lukkede) negative rommet i et brev. Vanlige bokstaver med tellere inkluderer b, d, e, o, s.
Som vi har nevnt, serifs er de ekstra flikkene og utsmykningene du kan se når du skiller mellom serif og sans serif font stiler.
Grunnlinjen er en usynlig linje som alle tegnene sitter på. Denne basislinjen kan variere massivt mellom forskjellige skrifttyper, men er vanligvis alltid konsekvent innenfor et enkelt skrifttype.
Hettens høyde er avstanden fra grunnlinjen til toppen av store bokstaver.
X-høyden er høyden på hoveddelen av små bokstaver (eller i det minste høyden på små bokstaver x, derav navnet). Denne høyden inkluderer ikke høyden på flere oppstigninger eller nedstigninger.
En glyph er et individuelt tegn i en skrift. Disse inkluderer et hvilket som helst symbol eller brev, gjennom til ekstra glyfer som kan være tilgjengelige for deg som ikke samsvarer med noen av de mest brukte eller brukte symboler eller bokstaver.
... du bør tenke på:
Når du arbeider med typografi (og dette kan høres opplagt) bør du vurdere størrelsen på teksten du vil jobbe med.
Med hver designtrend som passerer der, vil det også være trender om hvor liten eller stor teksten skal være. Tenk for eksempel om ønsket publikum; er publikum et yngre eller eldre publikum, vil de trenge en større tekststørrelse?
Tenk også om hvordan tekststørrelsen vil påvirke nettstedet ditt. Ønsker du at det skal være fokusert på typografi, eller har du andre utsmykker og designelementer du vil inkludere som kan påvirke måten typografien sitter i designet?
Kontrast påvirker lesbarheten av en tekstblokk enormt. Når vi snakker om kontrast, er det to viktige ting å huske på.
For det første vil du sikre at kontrasten mellom teksten og bakgrunnen er sterk nok til å være merkbar. Tenk på tilgjengelighet her - gå tilbake til å snakke om farge tilgjengelighet i design, det samme gjelder for teksten. Hvis du er usikker på om teksten din vil ha nok kontrast, må du bruke et verktøy som Lea Verous kontrastforhold for å hjelpe deg.
Du må også være oppmerksom på skriftvalgene du lager. Mange skrifter som har svært tynne vekter, kan ikke vise seg godt i bestemte størrelser, og kan være mer nyttige for større skrifter eller vise overskrifter. Prøv også å sikre at de skrifter eller skrifttyper du velger, har god nettleser og operativsystemstøtte. Enkelte skrifter og skrifttyper kan fungere godt på en plattform, men ser og utfører seg fryktelig på en annen.
Når du arbeider med typografi, som med alle andre deler av designet, vil du sørge for at du gir det nok plass til å puste og for innholdet å snakke for seg selv.
Innholdet på nettstedet ditt er den kjerneopplevelsen som brukerne trenger å bli tilbudt. Bortsett fra alle andre designelementer, alle brukerne dine egentlig trenger å se er innholdet. På grunn av det, vær ikke redd for å gi mer plass til innholdet og la innholdet gjøre mer av snakkesystemet.
Negativ plass er rommet eller hullene som er igjen rundt elementene i et design; ikke vær redd for å forlate dette negative rommet rundt innholdet ditt.
Ikke glem også plassen rundt hver del av teksten. Tillat for en generøs linjehøyde som ikke gjør teksten din trang og vanskeligere å lese. Som regel bør du ha en linjehøyde som er minst 140% til 160% av tekststørrelsen, men du må ha en god balanse for teksten din..
Et typografisk hierarki handler om hvordan innholdet er lagt ut i ditt design.
Etablering av god innholdshierarki starter i begynnelsen, når du arbeider for å skape en god struktur i innholdet ditt. Typografisk hierarki fungerer så med innholdet ditt - gjennom fra overskrifter til vanlige avsnitt og deler av innholdet du vil understreke - for å bidra til å danne en struktur som brukerne enkelt kan navigere.
Virkningen et hierarki har på designet ditt, kan være enormt. Du bør gjøre brukerens reise for å finne innholdet de er ute etter så enkelt som mulig, og å etablere et solidt hierarki vil bare gi positive effekter.
Du kan etablere et godt, visuelt, typografisk hierarki på en rekke måter, inkludert bruk av farge eller varierende tekststørrelser for å skape vekt og struktur i innholdet ditt. Alle de tidligere tipsene vil hjelpe deg med å etablere et bedre typografisk hierarki, selv om det er noe som alltid kommer med praksis.
Vi vil diskutere webfonter i nærmere detalj senere i denne serien, men følgende bør være en solid innføring i mulighetene for webfonter.
I dag er vi veldig heldige at vi har mange muligheter for å implementere webfonter på våre nettsider - og med den vanligste bruken av webfonter på nettet (brakt på grunn av bedre nettleserstøtte) kan vi være mer oppfinnsom i typografiske stiler og design kan vi inkludere i våre design.
I tillegg til at du kan være vert for dine egne skrifter med @ font-face, er det mange online-tjenester tilgjengelig for å hjelpe deg med å bruke flere webfonter på nettet, inkludert:
og mange, mange flere. Selv nettsteder som FontShop eller MyFonts (som pleide å være begrenset til bare å selge skrivebordsfonter) kommer nå inn i markedet for webfonter, og tilbyr deg nedlastbare fonter som du kan bruke med @ font-face-teknikken.
Etter å ha dekket grunnleggende om typografi, vil vi i neste artikkel se på vertikal rytme. Ikke glem at du også kan dykke inn i vår pågående sesjon A-Z of Web Typography for flere detaljer på noen av disse punktene.
Accentsconagua