Share
Velkommen til niende leksjonen i vår Web Design for Kids-serie, alt om typografi.
I denne opplæringen vil vi se på hva typografi handler om og hvorfor det er så viktig i design. Vi har snakket om brukerens opplevelse så langt, og denne opplæringen vil ikke være noe unntak; Vi jobber hardt for å sørge for at teksten vår er vakker og lett å lese!
Ikke glem å stille spørsmål i kommentarfeltet nederst på denne siden!
Typografi er overalt. Det er hvordan vi ser skrevne ord, så hvor som helst vi kommer over ord vi ser typografi. Disse ordene finnes på skjermbilder, papir og skilt rundt oss.
Med typografi kan vi endre "look and feel" av disse ordene og endre hvordan de påvirker leserne. De design av ord vil ofte påvirke brukerne våre før de får en sjanse til å lese innholdet vårt, så det er viktig at designen og den generelle følelsen av vår typografi stemmer overens med innholdet i selve innholdet.
I den forrige leksjonen snakket vi om hvor viktig innhold er. Tross alt, det spiller ingen rolle hvor godt nettstedet vårt ser ut hvis det ikke inneholder informasjon som noen vil lese! Hvordan vi presenterer disse ordene for brukeren, blir imidlertid like mye del av meldingen som ordene selv.
Typografi innebærer mye ganske lignende terminologi.
EN skriftsnitt er den generelle utformingen av en samling av tegn (ord og symboler), mens a font er en bestemt størrelse, vekt (hvor tykk bokstavene er), stil og bruk av et skrifttype.
Vår Tuts + Town design bruker a skriftsnitt kalt "Open Sans". Vi bruker forskjellige størrelser og vekter av dette skrifttypen, som forteller oss hvilke fonter å laste inn på siden.
Så, mens vi bruker skrifter på nettstedet vårt, er disse skrifter basert på skrifttyper som noen har brukt mye tid på å designe.
Et skrifttype kan være serif eller sans serif. EN serif er best beskrevet som haler eller utvidelser i enden av noen bokstaver.
Et serif skrifttype har disse utvidelsene:
Åpen Sans er en sans-serif skrifttype; betydning uten serif. En sans-serif-skrifttype har ikke utvidelser som brevet ovenfor:
Det er ikke noe riktig eller feil svar på hva som skal brukes på nettstedet vårt, men vi vil at det skal samsvare med den overordnede utformingen og føle Vi prøver å oppnå, så vel som det mest lesbare alternativet, vurderer vår layout og mengde tekst.
En serif skrifttype er som regel lettere å lese på papir eller når det er mye tekst, mens en sans-serif kan være bedre på en skjerm eller med en mindre mengde tekst totalt.
For å få den aller beste typografien for våre nettsider må vi tenke på hva som gjør hver skrifttype forskjellig fra en annen. Det er mange forskjellige deler av hver skrifttype som noen har designet og tenkt på i detalj.
Det er disse detaljene som utgjør det unike hverandre, og det er opp til oss å velge hvilken som passer best for forskjellige design og situasjoner.
La oss kort ta en titt på noen detaljer om skrifttyper for å bedre forstå hvordan disse kan forbedre (eller forverre) våre design:
Det er ikke nødvendig å huske disse delene akkurat nå, men bare vet at variasjoner av dem bidrar til å gjøre hvert skrifttype spesielt.
Som med de fleste ting relatert til typografi, er avstanden super viktig når du bygger den beste opplevelsen for brukerne. Mengden mellomrom mellom hvert brev, mellom ord og mellom ordlinjer kan gjøre en stor forskjell for lesbarhet.
Ikke nok avstand gir oss bokstaver og ord som er for sammenslåtte for å lese godt, mens for mye avstand vil bryte alt opp og være like vanskelig å lese og følge.
Fonter kommer med sin egen avstand som vanligvis er ganske fin å lese, men la oss se på hva alt dette forskjellige avstand heter, og hvordan å gjøre endringer i vårt CSS i tilfelle vi noen gang trenger i våre design.
sporing er den generelle avstanden mellom alle tegn (bokstaver) i et stykke tekst.
Vi kan gjøre endringer i dette i vårt CSS hvis vi vil, ved å bruke avstand mellom bokstavene eiendom:
h1 brevavstand: 5px;
Accentsconagua
ord-spacing eiendom:h1 ord-avstand: 15px;
utligning er avstanden mellom to tegn.
Kerning mellom hvert tegnpar er endret av skrifttyperen, fordi noen bokstaver ser bedre nærmere sammen og litt lenger fra hverandre. Dette er helt nede for å gjøre ting ser balansert ut og er vanskelig å gjøre med bare CSS alene.
ledende refererer til avstanden mellom setningslinjer.
Vi kan gjøre justeringer til denne avstanden ved å gi en verdi som endrer standardinnstillingene som er angitt av skrifttypen som brukes i linjehøyde eiendom.
p linjehøyde: 2;
En verdi på 2 her vil sikre at ledelsen vår er dobbelt så mye som standardbeløpet for den aktuelle fonten.
Hvis et enkelt ord er igjen på en linje av seg selv (aaaah) på slutten av en blokk med tekst kalles det a Enke.
La oss si at blokkene i det følgende bildet representerer ord i kolonner. Enken er den blå blokken, som sitter på egen side i enden av kolonnen fordi det er der setningen avsluttes:
en Foreldreløs er et enkelt ord som eksisterer på en linje av seg selv i begynnelsen av en kolonne, som vanligvis bor ved siden av kolonnen der det meste av den relaterte teksten er.
Enker og foreldreløse blir vurdert dårlig typografi på grunn av hvordan distraherende de kan være, noe som gjør den generelle leseopplevelsen verre.
Det er flere forskjellige tilnærminger vi kan ta for å rette opp et av disse problemene hvis det skjer på våre nettsteder, for eksempel:
Vi kan velge å rette inn vår tekst til venstre (standard på nettet for språk skrevet til venstre til høyre som engelsk), i midten eller til høyre.
Tekst på nettet skal generelt være venstrejustert (igjen, for språk skrevet til venstre til høyre) fordi det er hvordan høyttalere og lesere av disse språkene er vant til å lese.
Senterjustering brukes ofte på titler og overskrifter som hjelper dem til å skille seg ut fra hovedteksten på en side. Vi kan gjøre dette i vårt CSS med tekst-Juster eiendom, for eksempel:
h1 text-align: center;
Tekst som er justert på denne måten, kan vanligvis finnes på skilt og flyger som prøver å få tak i andres oppmerksomhet, men vi bør ikke sentrere justere en stor teksttekst på nettet fordi det vil være mye vanskeligere for brukerne å lese. Senterjustert tekst skaper svært forskjellige bredder fra linje til linje, noe som gjør det vanskeligere for øyet å følge.
Noen språk (som hebraisk) er skrevet fra høyre til venstre, noe som gjør riktig justering av standardjusteringen.
Som designere kan vi også velge å ha visse små biter av tekst rett innrettet slik at det kan skille seg ut litt mer, som bildetekster. Disse bildetekster er titler eller beskrivelser for bilder med eget HTML-element, figcaption.
Ovennevnte justering gjøres ved å erklære Ikke sant på elementet i et CSS-dokument:
figcaption text-align: right;
Mye av typografien vi designer vil være på grunn av å lese innholdet selv og gjøre justeringer etter behov. Det er imidlertid noen generelle tips som kan hjelpe oss med å bli mer komfortabel med våre typografievner.
EN skriftstørrelse mindre enn 16px På teksten som utgjør hovedparten av innholdet, anses vi for lite og vanskelig å lese på skjermene.
Vi snakket mye om visuelt hierarki i forrige veiledning om grunnleggende design. Innstilling av hierarki for teksten gjennom hele vårt design vil sikre at nettstedet er lettere å navigere ved å skille mellom relatert innhold og fremheve det viktigste..
Teksten på vår Tuts + Town-side har flere forskjellige nivåer av hierarki, med tittelen som den viktigste, etterfulgt av forretningskategorier og bestemte butikker, og slutter med "opprettet av" -delen helt nederst.
Hierarkiet her er opprettet av forskjellige størrelser, farger og steder på siden.
Vi snakker lengre om farge og kontrakt i neste opplæring, så bare vet å være oppmerksom på fargen på teksten og om det går i konflikt med bakgrunnsfargen, noe som gjør det vanskelig å lese.
Her er et eksempel på dårlig kontrast til venstre og bedre kontrast til høyre:
Den lyse rosa teksten på en mørk turkis bakgrunn til venstre viser virkningen av dårlig kontrast. Teksten er vanskelig å lese, ser litt sløret ut og gjør vondt i øynene!
Som en generell regel er det best å ikke bruke mer enn to til tre forskjellige skrifttyper per prosjekt. Parrede skrifttyper skal passe hverandre, og begge støtter den generelle følelsen og ideene bak designet.
Ikke alle skrifttyper fungerer bra på nettet og er best for utskrift bare. Heldigvis gir Google Fonts, som vi brukte for å importere Open Sans, til vår Tuts + Town-side, en fantastisk liste over skrifter som er tilpasset nettet.
I denne opplæringen berørte vi hvilken typografi som er nøyaktig, gjennomgå hvordan forskjellige deler av et skrifttegn kan skille det fra andre, og konkluderes med noen generelle tips for å huske på når du arbeider med tekst og fonter på nettet. Alt for å oppnå ett ultimate mål: å gjøre innholdet enklere å lese.
Deretter vil vi dykke inn i noen generelle regler involvert i å bruke farger på nettet og hvilken melding vi kommuniserer til brukeren vår basert på vårt generelle fargevalg.
Se deg rundt i byen!
