I dag har webdesignere nok værktøjer og værktøjer i deres hænder til korrekt at præsentere tekst på hjemmesider. Desværre, enten på grund af mangel på tid eller uvidenhed, bruger ikke alle udviklere aktivt selv de mest grundlæggende regler for typografi. Mange mennesker forstår ikke, hvorfor de bøvler med webtypografi i første omgang, hvis der er en masse andre elementer til at designe websider.

Formålet med ethvert websted er et målrettet informationsbudskab, og det første, de besøgende er opmærksomme på, er naturligvis teksten. Det viser sig, at den overordnede succes for et webprojekt afhænger af kvaliteten af ​​den information, der gives? Lad os finde ud af det.

Faktisk er der visse forhold, hvorunder typografi er praktisk talt ligegyldig. De er som følger:

• der er ingen grund til at skabe og yderligere vedligeholde billedet af en webressource;
• information videregives til slutbruger brug af medier;
• tekstdelen af ​​siden er så unik, at der ikke er behov for at præsentere den for brugeren på nogen særlig måde.

I betragtning af det faktum, at internetpladsen er på stadiet af permanent udvikling, er det unikke ved enhver webressource ret relativ. I sidste ende, normalt blandt konkurrerende websteder med næsten det samme indhold, vinder den mest effektive. Forresten bestemmer brugen af ​​typografi i webstedsdesign i høj grad denne effektivitet. Som du kan se, er der heller ingen måde at undvære det her.

Regler og grundlæggende for typografi i webdesign

Fordi typografi er så vigtig, når man laver hjemmesider, er der visse regler for brugen af ​​den.

Skrifttype til webstedet

Det korrekte valg af skrifttype bestemmer i høj grad webstedets koncept og påvirker den overordnede opfattelse.

Top tip! Du bør ikke bruge skrifttyper til webstedet, der ikke er tilgængelige som standard. Desværre lige nu automatisk installation skrifttyper giver ikke altid resultater, og der er en risiko forkert visning websted i brugerbrowsere.

Tekst dekoration

Korrekt computer sæt- en af ​​sektionerne af typografi.

Placer tegnsætningstegn, mellemrum, parenteser, bindestreger, anførselstegn osv. korrekt, nogle kræsne brugere er nogle gange endda ufrivilligt opmærksomme på denne type fejl.

Makro- og mikrotypografi i hjemmesidedesign

Makro typografi- den generelle struktur af tekstdelen i sammenhæng med webstedsdesignet som helhed. Og tekstens design (mellemrum mellem ord, afstand mellem linjer, skrifttyper osv.) små dele) - det er det allerede mikrotypografi.

Makrotypografi giver dig mulighed for at vælge den rigtige farve, skrifttyper og gøre tekstblokken solid og levedygtig, og selve webstedet attraktivt og organisk. Mikrotypografi er designet til at gøre indhold let at læse.

For eksempel, da designeren oprettede webstedet www.crowleywebb.com, stolede designeren specifikt på makro- og mikrotypografi:

Sådanne websteder kan i øvrigt også oprettes baseret på skabeloner. Et eksempel er en HTML-skabelon:

Skriftstørrelse og stilsæt

Den mest behagelige skriftstørrelse i tekst er 12-16 pixels. Men overskrifter og underoverskrifter (H1, H2, H3) er normalt noget større. Det er meget vigtigt at udvikle dit eget stilsystem og bruge det i alle tekst design på ressourcen. Det er tilrådeligt at bruge til overskrifter og citater forskellige muligheder stilen på den anvendte skrifttype, eller prøv at bruge en helt anden skrifttype for at få speciel kontrast. At fokusere mest på vigtige steder i teksten skal den fremhæves med fed eller kursiv. For eksempel, som på hjemmesiden www.hausofdesign.co.uk:

Gode ​​layoutteknikker

Læsbarhed af tekster er det, der sikrer succes.

Sådan kan det se ud på et eksempelwebsted:

Og dette er et eksempel på et vellykket flash-skabelonlayout. For at se det mere detaljeret, klik på billedet.

Eksperimentering opfordres her, men gå ikke for langt ud over de almindeligt anerkendte regler.

CSS stilarter

CSS-styling hjælper med at eliminere eventuelle mangler - skriftstørrelser, farver, uspecificerede skrifttyper osv. CSS sikrer enhed og konsistens af typografi på tværs af alle sider på et websted. Selvom du tydeligt overvåger for eksempel rækkefølgen af ​​brug af visse skrifttyper på en ressource, kan selv den mindste afvigelse fra stilen forårsage dissonans i opfattelsen. Det er derfor, du ikke bør ignorere brugen af ​​style sheets.

Justering af tekst i blokke

Her er det nemmere at sige, hvad man ikke skal gøre. Du bør ikke justere teksten til midten eller endda til bredden. Skarvede kanter Centreret tekst på siderne gør det ofte svært at læse. Tekst i bredden forkæler oftest også visuelt blokken med indhold. Den almindeligt accepterede regel for at arrangere tekst på en hjemmeside er at justere den til venstre eller søge alternativ måde præsentation af information.

MED udvikling af HTML og borde CSS stilarter Der er flere og flere muligheder for at organisere sig tekstoplysninger på hjemmesidens sider. Nu, i stedet for billeder, der viser overskrifter og andre sektionsnavne, bruger professionelle designere typografiregler.

Godt typografisk design - effektiv metode for at implementere en original designidé er reglerne for webtypografi dog ikke så enkle, som de måske ser ud til. Ud over teori skal du højst sandsynligt have din egen flair, smag og en vis mængde erfaring. Selvom ingen har aflyst eksperimenter. Eksperimenter og må kraften være med dig!

P.S. Hvordan kan du lide artiklen? For at være ærlig, så skrev jeg det ikke. Faktisk har jeg aldrig publiceret gæsteindlæg og alle artikler på bloggen er skrevet af mig personligt. Men da Olga Vladyko, en af ​​forfatterne af TemplateMonster Russia-webstedet (dette er i øvrigt hendes artikel) kontaktede mig og tilbød at samarbejde med dette populære projekt, sagde jeg ja.

For det første er dette ikke et reklameindlæg, der er publiceret for penge, men en artikel, som jeg er sikker på vil være nyttig for mange af mine læsere. Eller tager jeg fejl? For eksempel bruger jeg som mange tegnet "-" i stedet for "-", osv. Det er bare mere praktisk, selvom det ikke er korrekt. Generelt vil det ikke skade os at kende reglerne for webtypografi.

En anden grund er, at min artikel handler om konsekvent at bringe søgegæster ind. Det betyder, at mange mennesker er interesserede i emner for siden. EN SkabelonMonster Rusland er den russiske afdeling af www.templatemonster.com - en af ​​verdens førende inden for webdesign, produktion og salg af hjemmesideskabeloner af høj kvalitet. Deres partnere omfatter: kendte mærker, som 1C-Bitrix, REG.RU, UMI.CMS osv.

Her finder du skabeloner for enhver smag: HTML, Flash, til CMS og blogs, Facebook skabeloner, til netbutikker og mobile enheder. Dette vil gøre det nemt. Jeg anbefaler at kigge nærmere på TemplateMonster Russia-webstedet, måske er det det, du har ledt efter i lang tid. Se nu videoen, hvor virksomhedens medarbejdere fortæller om sig selv. Hej alle sammen!

Typografi

Denne artikel hjælper dig med at forstå de grundlæggende termer i typografi. Og for at gøre informationen bedre og lettere at opfatte, er kedelige tekster illustreret med sjove billeder. Artiklen indeholder også de mest almindelige fejl, som webdesignere begår, når de arbejder med tekst, og giver anbefalinger til, hvordan man undgår dem.

Typografi- det stærkeste værktøj til at udtrykke et budskab i webdesign. Med dens hjælp kan du kombinere tekst og visuelle komponenter, som hjælper dig med at nå din besøgende. Korrekt brug typografi vil hjælpe med at undgå typiske fejl tilladt af designere, når de skaber deres næste mesterværk. Lad os prøve at forstå, hvad vi gør forkert, og hvordan vi undgår fejl i fremtiden.

Lad os først forstå terminologien. De fleste af begreberne kender du sikkert, men det vil ikke skade at sætte dig ind i definitionerne igen. Måske vil dette supplere den information, du allerede har.

Typografi- et sæt love, regler og normer for tekstdesign, baseret på studiet af læserens opfattelse af sætning. Viden og forståelse for typografi gør tekst til et kompositionsværktøj, gør den levende, giver den karakter og evnen til at formidle en idé ikke kun gennem indhold, men også grafisk.

Headset- en skrifttype eller flere skrifttyper, der har stilistisk enhed af stil. Består af et sæt tegn. Dette begreb forveksles ofte med begrebet "skrifttype", selvom en skrifttype er en specifik tegnstil, mens en skrifttype definerer en generel "familie" af skrifttyper.

Headset kan opdeles i to hovedkategorier:

• Antiqua- serif skrifttyper.
• Grotesk, derfor er en sans-serif skrifttype.

Du kan bruge en hvilken som helst i dine projekter; der er ingen rigtig eller forkert mulighed. Du skal se på situationen, hvilken slags projekt du laver, og hvad der er mere relevant for det.

En serif-skrifttype ser ud til at holde en linje, og følgelig øges læsbarheden. Serif-skrifttyper skaber ofte en følelse af professionalisme og autoritet i de givne oplysninger, udtrykker respekt og understreger stabilitet og konservatisme i ordets bedste betydning. Sans serif-skrifttyper har en tendens til at understrege rationalitet, stil, ungdommelighed og modernitet. De hjælper med at skabe rum mellem bogstaver, samt adskille en karakter fra en anden.

Skittle- bogstavets højde, inklusive de nederste og øverste elementer. Målt i typografiske punkter (betegnet som pt). For eksempel vil tekst indtastet i 14 punkts størrelse være 14 pt i højden.

Førende - linjeafstand. Afstand mellem basislinjer tilstødende linjer.

Kerning- afstand mellem bogstaver. Hovedideen bag kerning er at vælge forskellig afstand mellem forskellige par af specifikke bogstaver for at øge læsbarheden.

Der er et vidunderligt træningsspil - Kern Type. Bare sæt alle bogstaverne på deres plads. Det er faktisk ikke så enkelt. Processen er ret kompliceret og kræver et fremragende øje. Denne oplevelse vil især være nyttig, når du laver logoer.

Hvad gør vi forkert?

Vi bruger et stort antal af skrifttyper

Det anbefales ikke at bruge mere end 3 stilarter. Disse kan være skrifttyper fra samme skrifttype eller fra forskellige. Eksempelvis indeholder Roboto-skrifttypen et ret stort antal forskellige stilarter. Af disse kan du nemt vælge tre, som vi mener passer til vores side. Lad os sige, at disse er Light, Regular og Bold. Du kan bruge skrifttypen fed eller lys til overskrifter, fed for knapper og almindelig til brødtekst. Ved at bruge én skrifttype forsynede vi vores websted med den korrekte typografi. Det hele afhænger naturligvis af webstedets tema og ideen, som du planlægger at indarbejde i designet. Mit eksempel er universelt og foregiver ikke at være noget unikt eller ekstraordinært.

Vi ved ikke, hvilken størrelse skrifttypen skal være

Tekststørrelsen på nettet bør ikke være mindre end 12 pixels. Det bedste valg- inden for 14–18 px for hovedteksten. Ikke for stor og samtidig læsbar. Desuden, hvis vi har valgt en størrelse på 16 px, skal den forblive 16 px på alle sider på siden og ikke hoppe plus eller minus 1 px fra blok til blok. Det gælder også for at lede, det skal være det samme overalt.

Skriftstørrelser skal angives i hele tal uden brug af decimaler, f.eks. 16,28 px. Og selvfølgelig skal du i Photoshop konvertere pt til px. For at gøre dette, vælg fra menuen: Redigering - Indstillinger - Grundlæggende. Næste - Måleenheder og linealer. Skift elementerne i rullemenuerne "Tekst" og "Linjaler" til pixels. Klik på "OK".

Linjelængde - betyder det noget?

Linjelængden bør ikke overstige 600 px. Det her optimal størrelse for behagelig bevægelse af øjet fra en linje til en anden. En meget bred indholdsdel er svær at læse – ofte mister man simpelthen den linje, man skulle til, efter at have læst den lange forrige linje. Hvis du stadig har brug for at strække tekstblokken med 1000 px eller mere i bredden, kan du prøve at opdele teksten i to eller flere kolonner. En anden mulighed er at gøre linjeafstanden lidt større end normalt for visuelt at adskille linjerne fra hinanden. Husk at dele teksten op i afsnit, det vil også være med til at gøre den let at læse.

Førende matcher skriftstørrelse

Mellemrummet mellem linjer bør næsten altid være større størrelse skrifttype. Bortset fra overskrifterne. For at opnå en balance mellem tekst og luft skal du lave linjeafstanden cirka halvanden gange højden små bogstaver. Eller indstil føringen til 150 % af skriftstørrelsen. For eksempel er tekststørrelsen 14 px, så er interliningen 21 px. 14/2 = 7 + 14 = 21.

Vælg enhver skrifttype, du kan lide

Jeg tror, ​​at alle allerede ved, at skrifttyper til webstedsdesign bedst bruges sammen med fonts.google.com og webfont.ru, medmindre kunden selvfølgelig har givet dig deres egen skrifttype.

O Lorem, lorem...

Det er helt naturligt, at når man udvikler en hjemmeside, bliver det indhold, der vil være der, næsten aldrig brugt – ofte findes dette indhold simpelthen ikke endnu. Det er derfor, designere (og også layoutdesignere) bruger "fisk" - fri tekst, som passer ind i indholdsblokke. Dette er ret praktisk, især for designere, for nu kan den berygtede "Lorem Ipsum..." indsættes direkte fra Photoshop (Menu: Tekst - Indsæt Lorem Ipsum). Men for russisksprogede websteder anbefales det ikke at gøre dette - det latinske alfabet giver ikke en idé om, hvordan den indtastede tekst vil se ud Kyrillisk skrifttype. Derfor kan en tekstgenerator hjælpe dig.

Det er enkelt at kontrollere designet for korrekthed: Hvis seeren uden at røre musen kan gætte, hvor linket er, og hvor det ikke er, så har vi et godt websted. Derfor er det nødvendigt på forhånd at tænke over, hvordan alle links på siden vil se ud. Lad os sige, at alle klikbare elementer er én farve, for eksempel rød, og ikke klikbare elementer af en anden farve - sort. Så bliver ingen forvirret.

Dette sker ofte: overskriften er fremhævet med rødt (den skal trods alt fremhæves på en eller anden måde), efterfulgt af et par meget vigtige USP-sætninger af blå farve og alt dette er blandet med almindelig sort tekst. I slutningen af ​​teksten er der en knap, også rød. Det er klart, at du skal klikke på knappen, men det viser sig, at teksten farvet i blåt også var klikbar (den åbnede Yderligere Information). Men hvem vidste, hvem vidste...

Justering

Der er tekstblokke, der meget ofte er justeret forkert - justeret, centreret og højrejusteret. I alle disse tilfælde er teksten ubelejlig at læse og visuelt ser den uinteressant ud. Justering skal ALTID efterlades. Selv hvis du virkelig gerne vil gøre det på den rigtige side (simpelthen fordi det forekommer dig, at det er sådan det skal være kompositionsmæssigt) - er det forkert. En undtagelse kan være en eller to korte sætninger, som højst sandsynligt er underoverskrifter for hovedteksten.

Kontrast

Kontrast er et af de vigtigste udtryksmidler i design. Ingen grund til at være bange for store former og tomme rum! Bevidst stor typografi bliver et selvstændigt element, der ikke kræver yderligere grafiske værktøjer registrering

For at afklare enhver forvirring, der måtte opstå, er det vigtigt at afklare betydningen af ​​nogle nøglebegreber. Første vigtige sæt søgeord definere begreberne "skrifttype" og "skrifttype".

Skrifttype - tegnsæt bestemt størrelse og tegning. En skrifttype definerer også skrifttypefamilier. Nøgleordet her er typografier, der adskiller forskellige skrifttyper i grupper eller familier. For eksempel kan disse være serif, sans serif, håndskrevne, display, monospace og andre. Vi kan sige, at en skrifttype er et sæt skrifttyper af forskellige stilarter og størrelser, forenet af en fælles udførelsesstil. Som du kan se, er skrifttype et snævrere begreb.

Når du opretter et websidelayout, er valget af skrifttype meget vigtigt. Det er naturligvis bedst at bruge skrifttyper fra standarden Vinduer sæt eller Mac. Men nogle gange er dette sæt ikke nok til at bringe designerens idé ud i livet, og så falder hele byrden på layoutdesignerens skuldre. Heldigvis, Google Web-skrifttyper tilbyder en meget elegant løsning på dette problem.

Der er også udtryk som "vægt" og kerning. Alle kan ændres ved hjælp af CSS-værktøjer og kan anvendes på afsnit, overskrifter eller andre tekstelementer. En skrifttypes "vægt"-egenskab bestemmer graden af ​​tykkelse af linjerne, når de skrives. Dette er en række værdier fra 100 til 900, hvor hvert tal angiver en vægt, der svarer til stilens dristighed. Normal skrifttype"normal" svarer til tallet 400, fed "fed" - 700. Kerning - ændring af afstanden mellem bogstaver afhængigt af deres form. Det er en proces korrekt placering symboler, justere afstanden mellem dem, som et resultat af hvilken harmoni skal opnås. Selvom mange mennesker ikke er meget opmærksomme på kerning, er det de små ting, der hjælper med at opnå meget gode resultater.

Overtrædelse af normer

Det er ganske rimeligt at diskutere behovet for at oprette nye skrifttyper. Bag På det sidste mange hjemmesider er forældede. De bruges standard skrifttyper, som vi allerede er trætte af nok.

I dag er der hundredvis af skrifttyper, men forskellige OS tilbyde deres egne pakker. Og kun få af skrifttyperne er inkluderet i disse pakker. Hvis du vælger en skrifttype, som en anden måske ikke har på dit system, vil skrifttypen blive erstattet med standardskrifttypen. Af disse grunde anbefales det at bruge grundlæggende skrifttyper. Men nogle gange kan grundlæggende skrifttyper ikke fuldt ud fange en designers fantasi. Derfor, hvis du er overbevist om, at en speciel skrifttype er nødvendig for dit design, kan du lave din specielle skrifttype om til et billede og uploade det til din hjemmeside. Lav dine titler, overskrifter eller menuer til grafik og brug dem.

Sørg for at sikre, at overskrifterne svarer til webstedets emner. De kan omfatte forskellige farveskema, understregning, baggrundsikoner eller grafisk tekst. I sidste ende er beslutningen din.

Derudover skal du sikre dig, at alle tekstlinks har samme skrifttype på siden. Brug af links anden skrifttype og design vil give brugeren betydelige vanskeligheder i navigationen.

Valg af den rigtige skrifttype

Det skal også bemærkes, at forskellige skrifttyper kan have forskellige effekter på stemningen hos læserne. Generelt er serif-skrifttyper bedre egnet til trykte materialer. Seriffer hjælper med at skabe rum mellem bogstaver og adskiller også et tegn fra et andet. Serif-skrifttyper giver ofte en personlig følelse; de ​​formidler respekt, intelligens og professionalisme.

Sans serif-skrifttyper er bedst til websider. Lave skærmopløsninger får seriffer til at se slørede ud og til gengæld svære at opfatte. Sans serif-skrifttyper har en tendens til at udtrykke følelser af rationalitet, stilfuldhed, ungdommelighed og modernitet.

For eksempel giver valget af seriffer en følelse af professionalisme og autoritativ information. Dette kan ofte ses i almindelige medier som New York Times. Til små blogs kan du bruge en sans serif skrifttype med stor højde linjer. Dette giver brugerne mulighed for hurtigt at se blogtekst.

Du bør altid tænke over, hvilken information du forsøger at formidle til den besøgende. Når du vælger en skrifttype, skal du huske, at glade beskeder skal ledsages af lyse, luftige og bløde skrifttyper, mens beskeder med nogle mørkere temaer, såsom Halloween, bedre ville være ledsaget af skrifttyper med hårdere kanter.

Læsbarhed

Typografi, og oftere ulæselig typografi, kan være meget irriterende for øjnene. Der er selvfølgelig nogle undtagelser, hvor Funky eller andre ulæselige skrifttyper kan bruges, såsom til natklubkampagner.

Men alligevel, hvis du har et ønske om at bruge for eksempel Sodavand, Bored eller Akka, så er det bedre at opgive denne idé. Hvis ønsket stadig er stærkt nok, så skal disse skrifttyper bruges sparsomt. For eksempel som en titel. Men så burde hovedteksten være mere læselig. Dette kan hjælpe med at skabe fremdrift på dit websted. Og du skal huske, at brugen af ​​sådanne skrifttyper skal være en fordel ved designet, og ikke en ulempe.

Informationsindhold

Designet skal supplere dit budskab. Brugeren behøver ikke finde ud af, hvad designeren præcis havde i tankerne. Det forkerte valg af typografi kan bidrage til brugerens misforståelse om virksomheden og dens tjenester.

Når du designer til forretningsprojekter, bør du for det meste bruge traditionelle glatte skrifttyper. Dette bør også tages i betragtning, hvis du ikke har et officielt design. Især hvis du vil have folk til at tage dit websted seriøst.

Placering og dimensioner

Meget vigtigt for effektivt design— hvilke steder skal teksten placeres, og hvad er dens størrelse. Ingen ønsker at anstrenge deres øjne for at læse information eller se utroligt store ord på en hjemmeside. Formålet med skabelsen godt design er at finde balancen. Og det første skridt til dette er at finde ud af, hvilken information der vil være vigtigst.

Typisk skal de ord, du vil være opmærksomme på, gøres lidt mere. Eller omvendt - mindre skal være mindre. Det hele afhænger af vigtigheden. Med andre ord skal du oprette et hierarki af ord.

Når det kommer til skrifttypeplacering, så prøv at holde det afbalanceret. Der er ingen grund til at sprede dele af teksten i fire hjørner. Dette kan være en betydelig distraktion for brugerne.

Farve

Dette er et af de nemmeste aspekter. Du skal vælge en farve, der får teksten til at skille sig ud fra baggrunden og forblive læsbar.

Dine hjælpere vil være kontrasterende farver, samt brugen af ​​effekter som streger (slag) og glød (glød). Dette vil hjælpe med at gøre siden mere attraktiv og lettere at læse. Du skal vælge en farve, der får folk til at stoppe op og kigge, og gøre informationen til den dominerende del af designet.

Konklusion

Brug af skrifttyper i Photoshop er væsentligt anderledes end at bruge dem på websider. Dette forklarer, hvorfor nogle designere har så svært ved at arbejde med typografi. Typografi på nettet er et ret bredt emne og kræver en del research. Du skal altid huske, at det er meget vigtigt at finde en tilgang til brug af typografi, der matcher stemningen og æstetikken i designet. Vær ikke bange for at mikse og matche Forskellige typer skrifttyper, bare sørg for, at de er gode.

Vi som designere skal ikke kun forstå og forstå tekstens betydning, men skal se den. Det vil sige at genkende hvilken skrifttype teksten blev skrevet i, og hvilken stil der blev brugt. For at vælge de rigtige skrifttyper til websteder eller mobile applikationer Du skal i det mindste forstå typografi indgangsniveau. I denne artikel vil jeg forklare de grundlæggende principper og begreber for typografi, som vil hjælpe en nybegynder webdesigner, hvis det er første gang, du hører om begrebet typografi.

Lad os starte med typografieksempler.

Typografi er brugen af ​​de rigtige skrifttyper, ikke kun i design af bøger og magasiner, men også til hjemmesider eller applikationer til en mobilenhed.

Det er der ingen grund til

Du kan ofte finde denne type typografi i annoncer på pæle eller i metroen.
For at forstå forskellen mellem de første eksempler og de andre, skal du kende de grundlæggende principper og definitioner, du skal forstå og føle skrifttyperne. Teori er vigtig, hvis du hurtigt og effektivt vil starte i webdesign-nichen.

Prøv at læse denne tekst på 20 sekunder.

Der er en fejl i hvert ord i denne tekst. Da vi er læsefærdige mennesker, er vi vant til at se det, vi gerne vil se. Vi kan sagtens læse selv en sådan tekst, uden at læse ind i symbolerne, og forstå den. Dette er normalt, de fleste læsekyndige gør dette, det vil sige, de bemærker ikke stavefejl, fordi de vil se, hvad der står her (forstå betydningen af ​​teksten), og ikke se abra-kadabra. Når skrifttyperne er valgt rigtigt, vil det derfor ikke være svært for dig at læse jævn tekst med stort beløb tastefejl.

Typografi

Definitionen af ​​typografi er design af tekst ved hjælp af skrive- og layoutværktøjer. Begrebet "typografi" kommer fra trykning.
På billedet er bogstavet en metalblok, hvorpå der er trykt rumelementer, der sætter et aftryk på papiret, og det tilsvarende bogstav opnås. Derfor er der i definitionen af ​​"typografi" ord som "tastning" og "layout"; de kom fra trykning.

Grundlæggende definitioner i typografi

Eksempel på kalligrafi

Kalligrafi- kunst fint brev. Tag en bred pen, en pensel eller et stykke af en lineal og brug disse værktøjer til at skabe sådanne værker.

Oprettelse af dekorative skrifttyper. Normalt tegnes en skitse i en notesblok, overføres derefter til Illustrator, skrifttypen er skitseret ved hjælp af Bezier-kurver, hvorefter en pæn inskription opnås.

Bogstaver til logoet

Forskellen mellem kalligrafi og bogstaver. Kalligrafi er, når du tager en kuglepen, tusch eller hvad som helst og tegner hvor som helst. Bogstaver - når du tegner en skitse, skal du overføre den til en grafisk editor, spore den og få smukke bogstaver, som kan bruges i et logo eller andre steder.

Grundlæggende regler for typografi

Skrifttype med små bogstaver og store bogstaver

Små bogstaver- bogstaver accepteret til kontinuerlig indtastning.
Store bogstaver(store bogstaver, populært "store") bogstaver bruges til store bogstaver; en sætning eller et eget navn begynder med dem.

Bindestreg og bindestreg
En vigtig funktion, som begyndere savner. En bindestreg og en bindestreg er forskellige tegn, det er vigtigt at vide.
Bindestreg- et kort streg for at adskille ord og bindestreger. Intet slår ordene. Mellemrum er IKKE placeret før eller efter det.
En tankestreg bruges til at angive numeriske områder, normalt heller ikke adskilt af mellemrum.
Em bindestreg- Dette er et tegnsætningstegn, brugt i sætninger og adskilt af mellemrum.
Bindestreg, en bindestreg og em bindestreg afvige i længden af ​​selve skiltet. Der er også et minustegn, det er det korteste af alle. Her er et lille tip. Gem billedet til dig selv for at huske, hvad der er hvad.


Hold nede for at skrive en streg på en pc alt-tasten og på yderligere numerisk tastatur(du har en blok til højre) tast 0151, du får en em bindestreg. En tankestreg: alt + 0150.
Hvis du glemmer kombinationen, så skriv "em bindestreg" i en søgemaskine, find Wikipedia-artiklen og kopier bindestregen derfra.

Citater
Det er vigtigt at huske, at det i Rusland er sædvanligt at bruge Citater om juletræer"". For at skrive dem, brug alt + 0187. Nogle mennesker bruger det dobbelte minuttegnet " som anførselstegn, men det er bedre at bruge anførselstegn“ ”: alt + 0147.
Kombination Shift-tasterne+ 2 i det kyrilliske tastaturlayout bringer det velkendte "tegn" frem på skærmen. Det angiver slet ikke anførselstegn (som man almindeligvis tror), men sekunder: 68° 13′ 22″ eller tommer: en 17″ diagonal skærm.
Publikationen skal bruge ét citatmønster, undtagen i "tilfælde af "citat inden for et citat".

Skrifttyper

Vi har sorteret skiltene fra, nu om begrebet skrifttype. Her vil jeg kun give grundlæggende definitioner af hvordan man bruger skrifttyper korrekt, læs ind.
Skrifttype- et sæt bogstaver beregnet til at skrive tekst. Et bogstav er det, jeg talte om ovenfor, en metalblok med et bogstav. Groft sagt er en skrifttype et sæt metalbogstaver designet til tekst.

Headset- et sæt skrifttyper, der har ensartet stil og design. Naturligvis skal de have en lignende stil. For eksempel består PT Sans-skrifttypen af ​​forskellige skrifttyper: Fed, Kursiv og andre. Alle stilarter tilsammen giver os PT Sans-skrifttypen.

Skrifttypestile er en grafisk skrifttype inden for samme skrifttype. For eksempel har PT Sans tynde, fed, fed og andre stilarter. Normalt i Photoshop er det skrevet på engelsk.

- afstanden mellem basislinjerne for tilstødende linjer.

Tilpasning (tilpasning i livet)- metoden til at placere en ufuldstændig indtastet linje i forhold til de lodrette grænser for opkaldsbjælken. Du har sikkert set knapper som denne i MS Word (find billede, juster). Det kaldes en kontakt, for når det var nødvendigt at arrangere metalbogstaverne korrekt, blev der placeret mellemrumsmetalblokke i dem for at slukke dem. Det er derfor, det hedder "sluk".

Tekstjustering eller begrundelse

Kerning og sporing
Kerning- selektiv ændring i afstanden mellem bogstaver afhængig af deres form. Når flere (forskellige) tegn er justeret. Visuelt er nogle kombinationer af bogstaver meget tætte; hvis der var den samme afstand mellem alle tegn, ville det visuelt se anderledes ud. Derfor bruger de, når de opretter skrifttyper, tabeller, hvor kombinationen af ​​bogstaver og afstanden mellem dem er strengt skrevet. I gode headset dette er allerede angivet som standard, men kan justeres i grafisk redaktør, som du bruger (for eksempel Photoshop).

Sporing- afstanden mellem tegn i et ord eller en sætning.
Det giver mening at bruge sporing, hvis du bruger store bogstaver, giver det mening at spore, så afstanden mellem dem bliver større, de bliver nemmere og bedre læst.

Hvis du bruger Photoshop til at lave et webstedsdesignlayout, så råder jeg dig til at indstille kerningen til "auto" og slet ikke gider sporing. Nogle gange, for at skrifttyperne i det endelige resultat skal se det samme ud som i layoutet, skal du kommunikere med layoutdesigneren.

Antiqua- serif skrifttyper. Seriffer er vandrette striber i toppen og bunden af ​​bogstaver. De kom fra gamle skrifttyper, der kan dateres tilbage til tiden med at skrive på sten. Det er nemmere at læse seriffer i bøger; seriffer skaber vandrette linjer, som ser ud til at understøtte skrifttypen på basislinjen og gør det nemmere for os at løbe øjnene op for at læse sætninger.
Grotesk, eller sans-serif skrifttype, dukkede op for nylig i forbindelse med den såkaldte skrifttyperevolution, hvor seriffer ikke længere var nødvendige. Grotesk bruges ofte i webskrifttyper og skærmting (på telefoner, for eksempel). Det er enklere på grund af manglen på seriffer, det er godt at bruge til kontinuerlig sætning på internettet. Du kan bruge enhver mulighed i projekter; der er ingen rigtig eller forkert mulighed. Du skal se på situationen, hvilken slags projekt du laver, og hvad der er mere relevant for det.
Dette afslutter introduktionskurset om typografi for en webdesigner :)
Ved kun at huske Antiqua og Grotesque, vil du allerede være foran mange designere med hensyn til viden. Stå ikke stille, læs typografi, det er interessant og hjælper dig med at skabe seje og pæne projekter.
Skriv i kommentarerne, hvad du har lært af denne artikel.

Typografi spiller nøglerolle i webdesign, ifølge statistikker, er 95% af hjemmesidens indhold tekstindhold. Skrifttypedesign styrer stemningen og skaber en vis atmosfære, når du læser tekstindholdet på websider.

Moderne webtypografi er baseret på CSS-stile. Ved at ændre standardbrowserens stilindstillinger kan du gøre tekstindhold mere attraktivt.

Denne artikel vil se på hovedaspekterne af moderne webtypografi, der hjælper dig med at beslutte, hvornår du vælger en skrifttype, og hvordan du designer tekst.

CSS-egenskaber til korrekt webtypografi

1. Skrifttypefamilie (font-family property)

Valg af en skrifttype begynder med at vælge en skrifttype.

Headset- en skrifttype eller flere skrifttyper, der har stilistisk enhed af stil. Består af et sæt tegn (normalt tal, bogstaver, tegnsætningstegn, specialtegn, men kan også udelukkende bestå af ikke-alfabetiske tegn). For eksempel består Times New Roman-skrifttypen af ​​regulære, kursiv, fed og mange andre skrifttyper fra denne familie.

Headset kan opdeles i to hovedkategorier: serif(antikke og pladeskrifttyper) og sans serif(grotesker).

Sans serif-skrifttyper er enkle og klare udseende. Serif-skrifttyper formidler på den anden side en mere seriøs og formel tone.

I læsningsprocessen vænner øjnene sig til hovedskrifttypen, og de bliver trætte, hvis overskrifter, indholdsfortegnelse og sekundær tekst er skrevet i skrifttyper af forskellige skrifttyper, der ikke er i harmoni med hovedskrifttypen. Når du vælger skrifttyper, er det derfor nok at fokusere på en eller to skrifttyper og lægge vægt på størrelse, farve, stil mv.

Hvornår kan du bruge flere skrifttyper?

Der er ingen specielle stilarter i skrifttypen (fed, halvfed, kursiv);
det er nødvendigt at opnå lighed med en vis æra;
til visuel adskillelse af tekster af flere typer (for eksempel kommentarer i teksten, kodelinjer, formler, tekster på et andet sprog);
til æstetiske formål.

TypeTester-tjeneste til valg af skrifttype

2. Kombination af serif og sans serif skrifttyper

I anbefalinger til kombination af skrifttyper er der en uskreven regel gældende: en sans-serif-skrifttype vælges til overskrifter, og en serif-skrifttype bruges til brødteksten. Denne tilgang er dog ikke så populær, som den måske ser ud til.

Faktisk gælder denne regel primært for trykte publikationer og bogtryk. Dette skyldes, at en skrifttype med seriffer (små streger i enderne af hovedstregene) jævnt linjer op i én linje, hvilket gør teksten lettere at opfatte og gør den mere læsbar.

Situationen er anderledes med visning af tekst ved skærme. forskellige enheder. Der er et problem med udjævning og ujævne seriffer. Derfor er en sans-serif-skrifttype med en let øget højde af små bogstaver bedre egnet til brødtekst.

3. Skriftfarve (farveegenskab)

Farve giver tekst klarhed og udtryksfuldhed. Farvede overskrifter og små accenter i teksten kan tiltrække mere opmærksomhed end sort tekst.

Vi bør dog ikke glemme, at enhver farve bærer sit eget humør med sig, og hver person har personlige følelser, som den eller den farve fremkalder i dem.

Varme farver henleder aktivt opmærksomheden på teksten, hvilket gør den visuelt større end skrifttyper i samme størrelse i kølige nuancer. Til små tekstelementer er lysere farver velegnede; sideindholdet på siden kan fremhæves med en farve, der er 20-30 % lysere end tekstfarven på websidens hovedindhold.

Når du vælger antallet af tekstfarver, er det at foretrække at begrænse dig til to ret kontrasterende farver (bortset fra sort og hvid). Sort tekst på hvid baggrund er en klassiker, ret kontrasterende.

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

Basisskriftstørrelsen i browseren er 16px, og størrelsen af ​​overskrifter indstilles i forhold til basisskriftstørrelsen (h1 - 2em, h2 - 1.5em, h3 - 1.17em osv.).

Ved at variere skriftstørrelsen kan du tilføje visuel betydning til teksten og henlede besøgendes opmærksomhed på de vigtigste dele af teksten. Som regel gælder det, at jo større elementet er, jo vigtigere er det.

Størrelsen på teksten i browservinduet påvirkes af opløsningen på brugerens skærm: tekst af samme størrelse på en skærm med høj opløsning vises mindre end tekst i samme størrelse på en skærm med lavere opløsning.

Skrifttyper i forskellige familier af samme størrelse kan også have forskellige faktiske størrelser.

Med stigningen i skærmopløsning og skærmstørrelser er det nødvendigt at genoverveje den sædvanlige tekststørrelse på 12-14px. For almindelig tekst er en skriftstørrelse på 14-18px allerede meget brugt. Når du indstiller skriftstørrelsen, må du ikke glemme tilpasningsevnen, dvs. Skriftstørrelsen bør ændre sig afhængigt af skærmstørrelsen.

5. Tekstjustering (tekstjusteringsegenskab)

Justeret tekst ser godt ud på den udskrevne side ved at fordele ordene jævnt på tværs af linjer. Lignende formatering af websider ved hjælp af CSS er umuligt og begrundelse af teksten skaber store, ubehagelige mellemrum mellem ordene. Derfor er venstrejustering almindeligvis brugt i webtypografi.

6. Bogstav- og tegnafstand (egenskaber for ord- og bogstavafstand)

Bogstavafstand påvirker læseligheden af ​​tekst. Variering af teksttætheden (komprimeret og sparsom tekst) vil give dig mulighed for at diversificere tempoet i opfattelsen og opnå en balance i tekstsammensætningen på webstedet.

Serif-skrifttyper ser mere udtryksfulde ud med en reduceret bogstavafstand.

7. Linjeafstand (linjehøjdeegenskab)

Den optimale linjeafstandsværdi er 1,4 - 1,6 gange skriftstørrelsen.

Også, lad være store fordybninger mellem overskrifter og det tilhørende afsnit.

8. Linjelængde

En linje til kontinuerlig læsning bør indeholde fra 30 til 75 tegn (ca. 7-10 ord på en linje). Jo bredere tekstlinjen er, jo større skal linjeafstanden være. Linjeafstand Der skal ikke være mindre end et mellemrum mellem ordene.

9. Skrifttype (font-style egenskab)

Du kan skabe smuk typografi ved at kontrollere skrifttypestilen. For eksempel giver kursiv teksten en vis højtidelighed. Fed stil plus en øget skriftstørrelse giver dig mulighed for at fremhæve det ønskede indhold, men kun hvis en sådan tekst vil skille sig ud mod baggrunden af ​​nærliggende objekter.

Egenskab font-variant: small-caps; tilføjer typografisk sofistikering til teksten ved at transformere teksten, så alle bogstaver vises med små bogstaver. Denne teknik er velegnet til små tekstfragmenter.

10. Tekststruktur og visuelt hierarki

I strukturen af ​​websiden er der følgende genstande:
logo/webstedsnavn;
titler/titler;
baggrundsoverskrifter;
hovedtekst;
navigation;
hypertekst links;
lange citater;
sidepaneler;
signaturer/påskrifter i tabeller, figurer.

Hvert listeelement repræsenterer en grundlæggende del af webstedet, og dette retfærdiggør behovet for at fremhæve det.

Der er seks niveauer af overskrifter i HTML, startende med det vigtigste

og slutter med mindre signifikant

. Overskrift

skal komme først i dokumentstrukturen og overskrifter lavere niveauer skal følge ham og detaljere oplysningerne. For at fremhæve overskrifter kan du bruge teknikken til at fremhæve en del af overskriften med farve.

For lettere assimilering bør teksten opdeles i dele, og for hvert afsnit skal du vælge en overskrift på det relevante niveau. Jo højere overskriftsniveauet er, jo mere betydningsfuldt skal afsnittet være i indhold.

I generel struktur tekst, bør der lægges særlig vægt på links; de skal let skille sig ud fra det omgivende indhold.

Visuelt hierarki etableres på siden korrekt struktur, hvilket gør teksten lettere at forstå og læse. I de fleste tekster er der en opdeling af teksten efter betydning. Der er flere måder, den enkleste er at dele teksten op i afsnit.
kapital;
kursiv;
fed/fed stil;
størrelse;
farve;
skift af headset;
ændring af tegns placering på en tekststribe (store og små bogstaver, indrykninger);
fremhæve tegn ved hjælp af grafiske elementer— pointere, rammer, ikoner osv.

For meget vægt lægger ikke kun for meget vægt på en bestemt passage, men gør den også svær at læse.

11. Sikre skrifttyper

Windows-skrifttyper/Mac-skrifttyper/ Fontfamilie

Arial, Arial, Helvetica, sans serif

sans serif

kursiv

monospace

Georgia 1, Georgia, serif

sans serif

Lucida-konsol, 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-konsol, Monaco 5, monospace

Lucida Sans Unicode, Lucida Grande, sans serif

Palatino Linotype, Bog 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