Typografi spiller nøkkelrolle i webdesign, ifølge statistikk, er 95 % av innholdet på nettstedet tekstinnhold. Fontdesign styrer stemningen og skaper en viss atmosfære når du leser tekstinnholdet på nettsider.

Moderne netttypografi er basert på CSS-stiler. Ved å endre standardinnstillingene for nettleserstil kan du gjøre tekstinnhold mer attraktivt.

Denne artikkelen vil se på hovedaspektene ved moderne netttypografi som vil hjelpe deg med å bestemme når du velger en skrifttype og hvordan du skal designe tekst.

CSS-egenskaper for riktig netttypografi

1. Skriftfamilie (font-family property)

Å velge en skrift begynner med å velge en skrifttype.

Hodesett- en font eller flere fonter som har stilistisk enhet av stil. Består av et sett med tegn (vanligvis tall, bokstaver, skilletegn, spesialtegn, men kan også bestå utelukkende av ikke-alfabetiske tegn). For eksempel består Times New Roman-skrifttypen av vanlige, kursiv, fet skrift og mange andre fonter fra denne familien.

Headset kan deles inn i to hovedkategorier: serif(antikk- og platefonter) og sans serif(grotesker).

Sans serif-fonter er enkle og klare utseende. Serif-fonter, derimot, formidler en mer seriøs og formell tone.

I prosessen med å lese blir øynene vant til hovedfonten og de blir slitne hvis overskriftene, innholdsfortegnelsen og sekundærteksten skrives inn med skrifttyper av forskjellige skrifttyper som ikke er i harmoni med hovedfonten. Derfor, når du velger fonter, er det nok å fokusere på en eller to fonter, og legge vekt på størrelse, farge, stil osv.

Når kan du bruke flere fonter?

Det er ingen spesielle stiler i skrifttypen (fet, halvfet, kursiv);
det er nødvendig å oppnå likhet med en viss epoke;
for visuell separasjon av tekster av flere typer (for eksempel kommentarer i teksten, kodelinjer, formler, tekster på et annet språk);
for estetiske formål.

TypeTester-tjeneste for valg av skrift

2. Kombinasjon av serif- og sans serif-fonter

I anbefalinger for kombinasjon av fonter råder en uskreven regel: en sans-serif-font velges for overskrifter, og en serif-font brukes for brødteksten. Denne tilnærmingen er imidlertid ikke så populær som den kan virke.

Denne regelen gjelder faktisk først og fremst for trykte publikasjoner og boktrykk. Dette skyldes det faktum at en skrift med seriffer (små streker i enden av hovedstrekene) jevnt opp på én linje, noe som gjør teksten lettere å oppfatte og gjør den mer lesbar.

Situasjonen er annerledes med visning av tekst ved skjermer. ulike enheter. Det er et problem med utjevning og ujevne seriffer. Derfor er en sans-serif-skrift med litt økt høyde på små bokstaver bedre egnet for brødtekst.

3. Skriftfarge (fargeegenskap)

Farge gir tekst klarhet og uttrykksfullhet. Fargede overskrifter og små aksenter i teksten kan tiltrekke seg mer oppmerksomhet enn svart tekst.

Vi bør imidlertid ikke glemme at enhver farge bærer med seg sitt eget humør, og hver person har personlige følelser som denne eller den fargen fremkaller i dem.

Varme farger trekker aktivt oppmerksomheten til teksten, noe som gjør den visuelt større enn fonter av lignende størrelse i kjølige nyanser. For små tekstelementer er lysere farger egnet sideinnholdet på siden kan fremheves med en farge som er 20-30 % lysere enn tekstfargen til hovedinnholdet på nettsiden.

Når du velger antall tekstfarger, er det å foretrekke å begrense deg til to ganske kontrasterende farger (ikke medregnet svart og hvit). Svart tekst på hvit bakgrunn er en klassiker, ganske kontrasterende.

4. Skriftstørrelse (font-size-egenskap)

Grunnskriftstørrelsen i nettleseren er 16px, og størrelsen på overskrifter settes i forhold til størrelsen på basisfonten (h1 - 2em, h2 - 1.5em, h3 - 1.17em, etc.).

Ved å variere skriftstørrelsen kan du legge til visuell betydning til teksten og trekke besøkendes oppmerksomhet til de viktigste delene av teksten. Som regel, jo større element, jo viktigere er det.

Størrelsen på teksten i nettleservinduet påvirkes av oppløsningen til brukerens skjerm: tekst av samme størrelse på en skjerm med høy oppløsning vises mindre enn tekst i samme størrelse på en skjerm med lavere oppløsning.

Fonter i forskjellige familier av samme størrelse kan også ha forskjellige faktiske størrelser.

Med økningen i skjermoppløsning og skjermstørrelser, er det nødvendig å revurdere den vanlige tekststørrelsen på 12-14px. For vanlig tekst er en skriftstørrelse på 14-18px allerede mye brukt. Når du stiller inn skriftstørrelsen, må du ikke glemme tilpasningsevnen, dvs. Skriftstørrelsen bør endres avhengig av skjermstørrelsen.

5. Tekstjustering (tekstjusteringsegenskap)

Justert tekst ser bra ut på den utskrevne siden ved å fordele ordene jevnt over linjene. Tilsvarende formatering av nettsider bruker CSS er umulig og å begrunne teksten skaper store, ubehagelige mellomrom mellom ordene. Derfor er venstrejustering ofte brukt i netttypografi.

6. Bokstav- og tegnavstand (egenskaper for ordavstand og bokstavavstand)

Bokstavavstand påvirker lesbarheten til tekst. Å variere teksttettheten (kondensert og sparsom tekst) vil tillate deg å diversifisere tempoet i oppfatningen, og oppnå en balanse i tekstsammensetningen til nettstedet.

Serif-fonter ser mer uttrykksfulle ut med redusert bokstavavstand.

7. Linjeavstand (linje-høyde-egenskap)

Den optimale linjeavstandsverdien er 1,4 - 1,6 ganger større størrelse font.

Ikke gjør det heller store innrykk mellom overskrifter og tilhørende avsnitt.

8. Linjelengde

En linje for kontinuerlig lesing bør inneholde fra 30 til 75 tegn (ca. 7-10 ord på en linje). Jo bredere tekstlinjen er, jo større bør den være linjeavstand. Linjeavstanden skal ikke være mindre enn mellomrommet mellom ordene.

9. Skriftstil (font-style-egenskap)

Du kan lage vakker typografi ved å kontrollere skriftstilen. Kursiv gir for eksempel teksten en viss høytidelighet. Fet stil pluss en økt skriftstørrelse lar deg fremheve ønsket innhold, men bare hvis slik tekst vil skille seg ut mot bakgrunnen til objekter i nærheten.

Egenskap font-variant: small-caps; legger til typografisk sofistikering til teksten ved å transformere teksten slik at alle bokstaver vises med små bokstaver. Denne teknikken Egnet for små tekstfragmenter.

10. Tekststruktur og visuelt hierarki

I strukturen til nettsiden er det følgende objekter:
logo/navn på nettsted;
titler/titler;
bakgrunnsoverskrifter;
hovedtekst;
navigasjon;
hypertekstlenker;
lange sitater;
sidepaneler;
signaturer/påskrifter i tabeller, figurer.

Hvert listeelement representerer en grunnleggende del av nettstedet, og dette rettferdiggjør behovet for å fremheve det.

Det er seks nivåer av overskrifter i HTML, og starter med det viktigste

og slutter med mindre betydningsfull

. Overskrift

bør komme først i dokumentstrukturen, og overskrifter lavere nivåer må følge ham og detaljere informasjonen. For å markere overskrifter kan du bruke teknikken med å markere deler av overskriften med farge.

For enklere assimilering bør teksten deles inn i deler og for hver del, velg en overskrift på passende nivå. Jo høyere overskriftsnivå, desto mer betydningsfull bør delen ha innhold.

I den overordnede strukturen til teksten bør det legges spesiell vekt på lenker, de skal lett skille seg ut fra innholdet rundt.

Visuelt hierarki etableres på siden riktig struktur, noe som gjør teksten lettere å forstå og lese. I de fleste tekster er det en inndeling av teksten etter mening. Det er flere måter, den enkleste er å dele teksten i avsnitt.
hovedstad;
kursiv;
fet/dristig stil;
størrelse;
farge;
bytte av headset;
endre plasseringen av tegn på en tekststripe (store og små bokstaver, innrykk);
fremheve tegn ved hjelp av grafiske elementer– pekere, rammer, ikoner osv.

For mye vekt legger ikke bare for mye vekt på en bestemt passasje, men gjør den også vanskelig å lese.

11. Sikre fonter

Windows-fonter/Mac-fonter/ Fontfamilie

Arial, Arial, Helvetica, sans serif

sans serif

kursiv

monospace

Georgia 1, Georgia, serif

sans serif

Lucida-konsoll, Monaco 5, monospace

sans serif

serif

Tahoma, Genève, sans serif

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, sans serif

Verdana, Verdana, Genève, sans serif

Symbol, Symbol (Symbol 2, Symbol 2)

Webdinger, Webdinger (Webdings 2, Webdings 2)

Wingdings, Zapf Dingbats

MS Sans Serif 4, Genève, sans serif

MS Serif 4, New York 6, serif

Arial, Arial, Helvetica, sans serif

Arial Black, Arial Black, Gadget, sans serif

Comic Sans MS, Comic Sans MS 5, kursiv

Courier New, Courier New, Courier 6, monospace

Georgia 1, Georgia, serif

Impact, Impact 5, Charcoal 6, sans serif

Lucida-konsoll, Monaco 5, monospace

Lucida Sans Unicode, Lucida Grande, sans serif

Palatino Linotype, Book Antiqua 3, Palatino 6, serif

Tahoma, Genève, sans serif

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, sans serif

Verdana, Verdana, Genève, sans serif

Symbol, Symbol (Symbol 2, Symbol 2)

Webdinger, Webdinger (Webdings 2, Webdings 2)

Wingdings, Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4, Genève, sans serif

MS Serif 4, New York 6, serif

Vi som designere må ikke bare forstå og forstå betydningen av teksten, men må se den. Det vil si å gjenkjenne hvilken skrifttype teksten ble skrevet inn i og hvilken stil som ble brukt. For å velge riktige fonter for nettsteder eller mobilapplikasjoner Du må i det minste forstå typografi inngangsnivå. I denne artikkelen vil jeg forklare de grunnleggende prinsippene og konseptene for typografi, som vil hjelpe en nybegynner webdesigner hvis dette er første gang du hører om konseptet typografi.

La oss starte med typografieksempler.

Typografi er bruken av de riktige skriftene, ikke bare i utformingen av bøker og blader, men også for nettsteder eller applikasjoner for en mobil enhet.

Det er ikke nødvendig å gjøre det

Du finner ofte denne typen typografi i annonser på stolper eller i T-banen.
For å forstå forskjellen mellom det første eksemplet og det andre, må du kjenne til de grunnleggende prinsippene og definisjonene, du må forstå og føle skriftene. Teori er viktig hvis du raskt og effektivt vil starte i nettdesignnisjen.

Prøv å lese denne teksten på 20 sekunder.

Det er en feil i hvert ord i denne teksten. Siden vi er litterære mennesker, er vi vant til å se det vi ønsker å se. Vi kan lett lese selv en slik tekst, uten å lese inn i symbolene, og forstå den. Dette er normalt, de fleste lesekyndige gjør dette, det vil si at de ikke legger merke til skrivefeil, fordi de vil se hva som står her (forstå betydningen av teksten), og ikke se abra-kadabraen. Derfor, når skriftene er valgt riktig, vil det ikke være vanskelig for deg å lese jevn tekst med stort beløp skrivefeil.

Typografi

Definisjonen av typografi er utforming av tekst ved hjelp av skrive- og layoutverktøy. Konseptet "typografi" kommer fra trykking.
På bildet er bokstaven en metallblokk som det er trykt romelementer på som setter et avtrykk på papiret og den tilsvarende bokstaven er oppnådd. Derfor, i definisjonen av "typografi" er det ord som "skriving" og "layout" de kom fra trykking.

Grunnleggende definisjoner i typografi

Eksempel på kalligrafi

Kalligrafi- Kunst fint brev. Ta en bred penn, en pensel eller et stykke av en linjal og bruk disse verktøyene til å lage slike verk.

Opprettelse av dekorative fonter. Vanligvis blir en skisse tegnet i en notisblokk, deretter overført til Illustrator, fonten er skissert ved hjelp av Bezier-kurver, hvoretter en pen inskripsjon oppnås.

Bokstaver for logoen

Forskjellen mellom kalligrafi og bokstaver. Kalligrafi er når du tar en penn, tusj eller hva som helst og tegner hvor som helst. Bokstaver - når du tegner en skisse, overfør den til en grafisk editor, spor den og hent vakre bokstaver, som kan brukes i en logo eller andre steder.

Grunnleggende regler for typografi

Skrift med små og store bokstaver

Liten bokstav- bokstaver akseptert for kontinuerlig skriving.
Stor bokstav(store bokstaver, populært "store") bokstaver brukes for store tegn en setning eller egennavn begynner med dem.

Bindestrek og bindestrek
En viktig funksjon som nybegynnere savner. Bindestrek og bindestrek - forskjellige tegn, dette er viktig å vite.
Bindestrek- en kort strek for å skille ord og bindestreker. Ingenting slår ordene. Mellomrom er IKKE plassert før eller etter.
En strek brukes til å angi numeriske områder, vanligvis heller ikke atskilt med mellomrom.
Em dash– Dette er et skilletegn, brukt i setninger og atskilt med mellomrom.
Bindestrek, en bindestrek og em strek forskjellig i lengden på selve skiltet. Det er også et minustegn, det er det korteste av alle. Her er et lite hint. Lagre bildet for deg selv for å huske hva som er hva.


For å skrive en em-strek på en PC, hold nede alt-tasten og på tillegg numerisk tastatur(du har en blokk til høyre) ring 0151, du får en em-strek. En bindestrek: alt + 0150.
Hvis du glemmer kombinasjonen, skriv inn "em dash" i en søkemotor, finn Wikipedia-artikkelen og kopier bindestreken derfra.

Sitater
Det er viktig å huske at i Russland er det vanlig å bruke Sitater om juletre"". For å skrive dem, bruk alt + 0187. Noen bruker det dobbelte minutttegnet " som anførselstegn, men det er bedre å bruke anførselstegn“ ”: alt + 0147.
Kombinasjon Shift-tastene+ 2 i det kyrilliske tastaturoppsettet viser det velkjente "tegnet" på skjermen. Det angir ikke anførselstegn i det hele tatt (som man ofte tror), men sekunder: 68° 13′ 22″ eller tommer: en 17″ diagonal skjerm.
Publikasjonen må bruke ett sitatmønster, bortsett fra i "tilfeller av "sitat i et sitat."

Skrifter

Vi har sortert ut skiltene, nå om begrepet font. Her vil jeg kun gi grunnleggende definisjoner på hvordan du bruker fonter riktig, les inn.
Font- et sett med bokstaver beregnet på å skrive tekst. En bokstav er det jeg snakket om ovenfor, en metallblokk med en bokstav. Grovt sett er en font et sett med metallbokstaver designet for tekst.

Hodesett- et sett med fonter som har enhetlig stil og design. Naturligvis bør de ha en lignende stil. For eksempel består PT Sans-skrifttypen av forskjellige skriftstiler: fet, kursiv og andre. Alle stiler sammen gir oss PT Sans-skrifttypen.

Skriftstiler er en grafisk skrifttype innenfor samme skrifttype. For eksempel har PT Sans tynne, dristige, dristige og andre stiler. Vanligvis i Photoshop er det skrevet på engelsk.

- avstand mellom grunnlinjer tilstøtende linjer.

Justering (tilpasning i livet)- metoden for å plassere en ufullstendig skrevet linje i forhold til de vertikale grensene til oppringingslinjen. Du har sikkert sett knapper som dette i MS Word (finn bilde, juster). Det kalles en bryter, for når det var nødvendig å ordne metallbokstavene riktig, ble det plassert rommetallblokker i dem for å slå dem av. Det er derfor det kalles "slå av".

Tekstjustering eller begrunnelse

Kerning og sporing
Kerning- selektiv endring i avstanden mellom bokstaver avhengig av formen deres. Når flere (forskjellige) tegn er justert. Visuelt er noen kombinasjoner av bokstaver veldig nære hvis det var samme avstand mellom alle tegnene, ville det visuelt sett annerledes ut. Derfor, når de lager fonter, bruker de tabeller der kombinasjonen av bokstaver og avstanden mellom dem er strengt skrevet. I gode hodesett dette er allerede spesifisert som standard, men kan justeres i grafisk redaktør, som du bruker (for eksempel Photoshop).

Sporing- avstanden mellom tegn i et ord eller en setning.
Det er fornuftig å bruke sporing, hvis du bruker store bokstaver er det fornuftig å spore slik at avstanden mellom dem blir større, de blir lettere og bedre lest.

Hvis du bruker Photoshop til å lage et nettsteddesignoppsett, anbefaler jeg deg å sette kerning til "auto" og ikke bry deg med sporing i det hele tatt. Noen ganger, for at skriftene i det endelige resultatet skal se ut som i layouten, må du kommunisere med layoutdesigneren.

Antiqua- serif-fonter. Seriffer er horisontale striper øverst og nederst på bokstaver. De kom fra gamle fonter som dateres tilbake til tiden da man skrev på stein. Det er lettere å lese seriffer i bøker horisontale linjer, som ser ut til å støtte skrifttypen på grunnlinjen og gjør det lettere for oss å løpe øynene for å lese setninger.
Grotesk, eller sans-serif font, dukket opp nylig, i forbindelse med den såkalte fontrevolusjonen, da seriffer ikke lenger var nødvendig. Grotesk brukes ofte i nettfonter og skjermting (på telefoner, for eksempel). Det er enklere på grunn av mangelen på seriffer, det er godt å bruke for kontinuerlig typesetting på Internett. Du kan bruke et hvilket som helst alternativ i prosjekter, det er ikke noe riktig eller galt alternativ. Du må se på situasjonen, hva slags prosjekt du holder på med og hva som er mer relevant for det.
Dette fullfører introduksjonskurset om typografi for en webdesigner :)
Ved å huske kun Antiqua og Grotesque, vil du allerede være foran mange designere når det gjelder kunnskap. Ikke stå stille, studer typografi, det er interessant og vil hjelpe deg med å lage kule og pene prosjekter.
Skriv i kommentarfeltet hva nytt du har lært av denne artikkelen.

Kommunikasjon spiller en stor rolle i design. Det er svært viktig å skape en sterk forbindelse mellom nettsiden og brukeren selv og deretter hjelpe ham med å nå sine mål. Når vi snakker om kommunikasjon i sammenheng med webdesign, snakker vi vanligvis om tekst. Typografi er en integrert del av denne prosessen:

Mer enn 95 % av informasjonen på Internett lagres i skriftlig form.

God typografi gjør informasjon lett tilgjengelig, mens dårlig typografi krever innsats for å forstå teksten. Som Oliver Reichenstein bemerker i artikkelen "Webdesign er 95% typografi":

Typografioptimalisering handler om å optimere lesbarhet, tilgjengelighet, brukervennlighet (!) og å oppnå grafisk balanse som regel.

1. Bruk et minimum antall skrifter

Ved bruk mer enn 3 forskjellige fonter nettstedet ditt mister struktur og ser uprofesjonelt ut. Husk at overbruk av skriftstørrelse og stil kan ødelegge enhver layout.

For å unngå denne situasjonen, prøv å holde antallet fonter som brukes på et minimum.

Generelt, hold antall fonter på et minimum (to er mer enn nok, én er ofte nok) og hold deg til å bruke de samme på hele nettstedet ditt. Hvis du bestemmer deg for å jobbe med mer enn én skrift, sørg for at skriftfamiliene samsvarer med hverandre når det gjelder bokstavbredde. Ta en titt på eksemplet nedenfor. Kombinasjonen av Georgia og Verdana (til venstre) har Generelle egenskaper, som lar dem harmonisk kombinere med hverandre. La oss ta kombinasjonen av Baskerville og Impact (til høyre) for sammenligning. Den "tunge" innvirkningen undertrykker sin "hakk"-partner.

Sørg for at skriftfamilier samsvarer med hverandre når det gjelder bokstavbredder

2. Prøv å bruke standard fonter

I skrifttjenester (for eksempel Google Web Fonts eller Typekit) kan du finne mange interessante som vil legge til noe nytt og uvanlig til designet ditt. Dessuten er de veldig enkle å bruke. Ta Google for eksempel:

1. Velg hvilken som helst skrifttype. La oss si Open Sans.

2. Generer koden og lim den inn i

Din HTML. 

3. Ferdig!


Men hva kan gå galt?

Faktisk har denne metoden ett alvorlig problem - brukere er vant til standard fonter og leser tekst skrevet i slike fonter raskere.

Vanligvis er den beste løsningen å bruke systemfonter(Arial, Calibri, Trebuchet, etc.). Et unntak kan være behovet for å holde seg til noen fonter som klienten selv spesifiserte: for eksempel for merkevarebygging eller for å lage noe minneverdig. Husk at god typografi påvirker lesingen av teksten, ikke visuell oppfatning font.

3. Begrens linjelengden

Riktig antall tegn på én linje er nøkkelen til å gjøre teksten din lett å lese. Når du velger bredden på teksten, bør du ikke fokusere på designet ditt, men på klarheten og presisjonen til den skrevne teksten. Vurder dette rådet fra Baymard Institute:

"Hvis du vil at leseren skal være komfortabel, bør hver linje ikke inneholde mer enn 60 tegn. Å ha riktig antall tegn på én linje er nøkkelen til å gjøre teksten din lett å lese.»

Hvis linjen er for kort, må øynene dine skifte fokus ofte, noe som vil forstyrre lesetempoet. Hvis linjen er for lang, vil leserens øyne tvert imot måtte fokusere på det som skrives i lang tid. Foto: Materialdesign

For mobile enheter, hold deg til 30-40 tegn per linje. Nedenfor er et eksempel på to nettsteder som er åpnet på mobile enheter. På én linje inneholder fra 50 til 75 tegn ( beste mengde tegn per linje for trykt tekst og datamaskinoppløsning), og på den andre ser vi de optimale 30-40 tegnene.

I webdesign kan du oppnå det nødvendige antallet tegn ved å redusere bredden på tekstblokker ved å bruke ems eller piksler.

4. Velg skrifttyper som er enkle å lese uansett størrelse

Brukere vil få tilgang til nettstedet ditt fra forskjellige enheter, som følgelig har forskjellige størrelser og oppløsninger. Flertall brukergrensesnitt bruke tekstelementer i ulike størrelser (kopiknapp, feltetiketter, seksjonsoverskrifter osv.). Du må velge en skrifttype som vil se bra ut og forbli lesbar i alle størrelser.

Roboto fra Google

Sørg for at skrifttypen du velger er lett å lese på små skjermer! Unngå å bruke kursive skrifttyper som Vivaldi (bildet nedenfor): selv om de ser vakre ut, kan de noen ganger være vanskelige å forstå.

Bruk Vivaldi font gjør det vanskelig å lese tekst på en liten skjerm

5. Bruk fonter med tydelige bokstaver

Mange skrifttyper er utformet på en slik måte at det noen ganger kan være veldig lett å forveksle lignende bokstaver, spesielt "I" og "L" skrevet med latinsk skrift (som i bildet nedenfor). Hos noen er bokstavene plassert så nær hverandre at kombinasjonen av "r" og "n" kan forveksles med bokstaven "m". Derfor, når du velger en font, test den i forskjellige sammenhenger. På denne måten kan du forsikre deg om at leseren ikke får problemer med å forstå teksten på grunn av skrifttypen.

6. Unngå caps

Tekst skrevet med capser – eller alene med store bokstaver- egnet for situasjoner der brukeren ikke er involvert i leseprosessen (for eksempel i forkortelser eller logoer). Men i andre tilfeller, ikke tving leserne dine med tekst med store bokstaver. Som Miles Tinker bemerker i sin kjent verk"Lesbarhet av trykk", slik tekst leses mye tregere enn tekst skrevet med små bokstaver.

7. Hold linjeavstanden på et minimum.

I typografi er det en spesiell betegnelse for avstanden mellom linjer - ledende (eller linjeavstand). Ved å øke avstanden øker du det vertikale rommet mellom linjene, og forbedrer dermed lesbarheten til tekst på skjermen. I henhold til reglene, for å sikre lesbarheten til teksten, bør linjen være omtrent 30 % større enn høyden på tegnet.

Riktig linjeavstand fremmer bedre lesbarhet av teksten. Foto: Microsoft

I følge Dmitry Fadeev øker korrekt valgt avstand mellom avsnitt leseforståelsen med 20 %. Designerens evne til å jobbe med hvitt mellomrom lar brukerne absorbere hele innholdet i teksten uten å gå glipp av noen detaljer.

Til venstre: Teksten er skrevet nesten flush. Høyre: Riktig linjeavstand forbedrer tekstens lesbarhet. Foto: Apple

8. Sørg for god fargekontrast

Ikke bruk samme eller lignende farger for tekst og bakgrunn. Jo bedre teksten er synlig, jo bedre raskere brukere vil kunne lese den og fange hovedpoengene. Konsortium Verdensveven anbefaler å bruke følgende forhold for brødtekst og bildetekst:

• Små tekster bør ha et kontrastforhold på minst 4,5:1 i forhold til bakgrunnen.

• Store tekster (fra størrelse 14 med fet skrift / fra størrelse 18 og oppover standard font) må ha et kontrastforhold på minst 3:1 i forhold til bakgrunnen. 


Denne teksten er ikke i samsvar med standarden fargekontrast, så det er vanskelig å skille det fra bakgrunnen.

Denne teksten følger standarden for fargekontrast, så den er lett å lese.

Når hentet du fargevalg, må du gi teksten din å lese ekte brukere og gjerne på flere forskjellige enheter. Hvis testing avslører problemer med tekstgjenkjenning, kan du være sikker på at mange brukere kan støte på det samme problemet i fremtiden.

9. Unngå å bruke rødt eller grønt i teksten.

Fargeblindhet er et ganske vanlig fenomen, spesielt blant menn (8 % av den mannlige befolkningen er fargeblind). Derfor, i tillegg til farge, er det tilrådelig å bruke noen andre tegn for å fremheve viktig informasjon. Prøv også å unngå å bruke rødt og grønt, da dette er fargene som oftest ikke gjenkjennes av fargeblinde.

10. Unngå å bruke flimrende tekst

Informasjon som blinker eller flimrer kan forårsake ubehag for mottakelige brukere. I tillegg til at du føler deg kvalm, kan dette også forårsake irritasjon for mange lesere, da det vil distrahere dem fra leseprosessen.

Ikke bruk flimrende tekst!

Konklusjon

Typografi er en veldig viktig ting. Ved å ta de riktige valgene gir du nettstedet ditt med klarhet og klarhet. Samtidig kan feil valg føre til uoppmerksom lesing av teksten, da det distraherer all oppmerksomhet til seg selv. Typografi skal være lesbar, tydelig og forståelig.

Typografi bør respektere innholdet

Dette innebærer at leseren aldri skal føle seg ukomfortabel mens han leser teksten.

Å samhandle med typografi riktig er viktig for hver webdesigner. Tross alt utgjør tekstinnhold omtrent 90 % av det totale innholdet på nettstedet. Teksten kontrollerer brukernes oppmerksomhet, og bærer ikke bare en informasjonsmessig, men også en estetisk belastning. Derfor er det verdt å bruke nok tid på hovedaspektene ved moderne netttypografi, låneopptak beste ideene, bruke dem i praksis.

Skrifter

Typografi i webdesign er underlagt visse lover og regler. Mange av dem angår fonter som grunnlag for dannelsen av evt tekstinnhold. Riktig valg V i dette tilfellet bestemmer konseptet for prosjektet som helhet og påvirker brukernes oppfatning av ressursen.

For ikke så lenge siden hadde designere bare noen få typer fonter som ble brukt til å laste operativsystem. Alt annet var i flash- eller bildeformat. Det var visse løsninger i denne saken. Imidlertid forårsaket de mye hodepine.

En ny æra innen webdesign begynte med bruken av @font-face-regelen. I hovedsak ga det designere frie hender, og ga et nesten ubegrenset aktivitetsfelt. Imidlertid er ikke alle fonter verdt å bruke i webdesign. Noen på grunn av dårlig lesbarhet, andre på grunn av tyngde.

Justering

Justert, senter- og høyrejustering er de verste eksemplene. I det første tilfellet dannes det ujevne mellomrom mellom ord, det andre og tredje alternativet gir en fillete, ujevn frontkant, noe som svekker lesbarheten. Blikket har ikke noe referansepunkt, og når det er spredt oppfattes informasjonen dårlig.

Et godt alternativ for justering er å orientere teksten til venstre. Dette formatet er passende i 99 % av tilfellene.

Makro og mikrografikk

Makronivået er ansvarlig for generell struktur tekst på nettstedet, plassering i forhold til andre designelementer. Hans mål er globale - å gjøre teksten helhetlig, harmonisk og samtidig "levende".

Mikronivået har ansvar for området de minste detaljene: mellomrom, mellomrom, innrykk osv. Det danner et slikt konsept som lesbarhet. Eliminer den og teksten blir til et kontinuerlig lerret av bokstaver og skilletegn.

For å angi fonter i webdesign, er det bedre å bruke relative verdier "em" eller %. Dette lar deg gjøre innholdet tilpasningsdyktig og fleksibelt. Det anbefales å bruke piksler i forhold til ikke-adaptive beholdere, når når skjermstørrelsen endres, flytter blokker seg, mens fonten ikke endres.

Tekstblokker

Avsnitt og blokker med lange setninger gjør det vanskelig å forstå informasjon. Det er mye mer praktisk når linjen ikke inneholder mer enn 70 tegn, men ikke mindre enn 30. Linjeavstanden varierer avhengig av bredden på tekstlinjen. For brukerens bekvemmelighet bør det ikke være mindre enn mellomrommet mellom ordene.

Skrifttype

Når du jobber med typografi, kan du ikke klare deg uten variasjoner i bokstavstilen. Når den brukes dyktig, blir denne evnen til et kraftig aksentvåpen. Kursiv gir for eksempel teksten en viss høytidelighet, fete omriss indikerer viktigheten av informasjon, og skriftvarianten: egenskapen med små bokstaver gir en viss sofistikering.

Serif eller sans serif

Mange designere finner sans serif-fonter ideelle for overskrifter og underoverskrifter. Mens hoveddelen skal formes i en serif-font. Dette er en uuttalt regel, hvis relevans allerede er uttømt.

Vær oppmerksom på at bruken av en sans serif-font fortsatt er berettiget:

• Når leserne er barn.
• Med en lys aksentfargepalett.
• Hvis teksten er smal eller for liten.

Verden av webdesign har gått gjennom en lang prosess med å introdusere typografiske effekter på nettsteder. Slike effekter for noen år siden var enten umulige eller støttet av en eller to nettlesere. Heldigvis har dette endret seg og vi nyter en kreativ eksplosjon i bruken av typografi på nettsider. I dette tilfellet forblir ressursene tilgjengelige og vises riktig. I løpet av de siste årene har det blitt flere fonter, designstiler, overleggseffekter, ikoner og emoji i teksten, noe som gjør teksten mer variert, rikere og mer uttrykksfull.

Store fonter

Bruken av store fet skrift- trend. Det gir teksten individualitet og forskyver gradvis bilder fra hovedposisjonene. Typografi tar en ledende rolle, og erstatter bilder og videoer, som mister mye av sin effektivitet på skjermer på mobilenheter.

Serifs er tilbake

Serif-fonter er en godt glemt gammel ting I det siste har blitt så populær at det har blitt noe helt nytt. Store serif-fonter er symbolet på 2018! Så ta den glemte Clarendon fra hylla, du trenger den igjen!

Typografi utover standardoppsett

Trender indikerer at penseltegnede skrifter mister popularitet. Nettverdenen blir erobret av 3D-stiler, illustrerte fonter, animerte, mer livlige bokstaver. Designere forlater klassiske rutenettoppsett uten å nøle. Tekster på nettsider ligner mer og mer på typografi i publiseringsdesign. La oss si "Takk!" progressiv standardisering av Flexbox og CSS Grids og introduksjon av variable fonter.

Første roller i teksten

Tekstene på nettstedet har ikke bare en estetisk funksjon. Typografi er en måte å uttrykke personligheten til et produkt, dets stemme og intonasjon. For å forsterke denne effekten brukes alle mulige verktøy: ikoner, emoji, piktogrammer, lyd- og bildeoverlegg. Tekst er nå så respektert at et vanlig tekstavsnitt kan være et av hovedelementene, noen ganger til og med konkurrere med overskriften.

Tekstdekorasjon

Det er mange typiske (og helt atypiske) måter å formatere tekst på. Jeg kan kombinere klassisk understreking og kursiv i ett avsnitt forskjellige størrelser. Slik legger vi vekt og styrker budskapet. Spredt utover teksten er en rekke museover-effekter, fargerike understrekingseffekter, skisserte fonter, typografiendringer, veksling mellom serif- og sans serif-fonter (noen ganger i samme setning), ikoner, emojier. Alt dette forfølger både dekorative og semantiske mål. EN hovedoppgaven— gjør teksten så dynamisk som mulig. Kombinasjonene av designmetoder er uendelige, og mange er et resultat av eksperimenter i dagens fasjonable trender – brutalisme og maksimalisme.

Utviklingen av avsnittet

Skriftstørrelser og avsnittslengder har vokst overraskende raskt i det siste. Forfatterne av artikkelen klarte ikke å beherske seg og laget en liten graf om hvordan avsnitt utviklet seg i webdesignens historie.

Typografitrender 2018

Her er litt om hvilke typografiske trender som hersker i 2018: