Share
Välkommen till den nionde lektionen i vår webbdesign för barn-serie, allt om typografi.
I denna handledning ser vi på vilken typografi som handlar om och varför det är så viktigt i designen. Vi har pratat om användarens erfarenhet mycket hittills och denna handledning kommer inte att vara något undantag. Vi arbetar hårt för att se till att texten är vacker och lätt att läsa!
Glöm inte att ställa några frågor i kommentarfältet längst ner på den här sidan!
Typografi är överallt. Det är så vi ser skrivna ord, så överallt vi stöter på ord vi ser typografi. Dessa ord finns på skärmar, papper och skyltar runt oss.
Med typografi kan vi ändra "look and feel" av dessa ord och ändra hur de påverkar läsarna. De design av ord kommer ofta att påverka våra användare innan de får en chans att läsa vårt innehåll, så det är viktigt att utformningen och den övergripande känslan av vår typografi matchar själva innehållets känsla.
I den tidigare lektionen talade vi om hur viktigt innehåll är. Det spelar ingen roll hur bra vår webbplats ser ut om den inte innehåller information som någon vill läsa! Hur vi presenterar dessa ord för användaren blir emellertid lika mycket del av meddelandet som orden själva.
Typografi innebär mycket ganska liknande terminologi.
en typsnitt är den allmänna utformningen av en samling av tecken (ord och symboler), medan a font är en viss storlek, vikt (hur tjocka bokstäverna är), stil och användning av en typsnitt.
Vår Tuts + Town design använder a typsnitt kallas "Open Sans". Vi använder olika storlekar och vikter av denna typsnitt, vilket berättar för oss vilka typsnitt att ladda in på sidan.
Så, medan vi använder teckensnitt på vår webbplats, är dessa teckensnitt baserade på teckensnitt som någon har spenderat mycket tid på att designa.
En typsnitt kan vara serif eller sans serif. en serif beskrivs bäst som svansarna eller förlängningarna i slutet av några bokstäver.
En serif typsnitt har dessa tillägg:
Open Sans är en sans-serif typsnitt; menande utan serif. En sans-serif typsnitt har inga tillägg som bokstaven ovan:
Det finns inget rätt eller fel svar på vilka som ska användas på vår sida, men vi vill att den ska matcha den övergripande designen och känna Vi försöker uppnå och vara det mest läsbara alternativet med tanke på vår layout och mängd text.
En serif typsnitt är rent generellt lättare att läsa på papper eller när det finns mycket text, medan en sans-serif kan vara bättre på en skärm eller med en mindre mängd text totalt.
För att få den allra bästa typografin för våra webbplatser måste vi tänka på vad som skiljer varje typsnitt från en annan. Det finns många olika delar av varje typsnitt som någon har utformat och tänkt på i detalj.
Det är dessa detaljer som utgör unikheten hos var och en och det är upp till oss att välja vilken som passar bäst för olika mönster och situationer.
Låt oss kortfattat titta på några detaljer om typsnitt för att bättre förstå hur dessa kan förbättra (eller förvärra) våra konstruktioner:
Det finns inget behov av att memorera dessa delar just nu, men bara vet att variationer av dem hjälper till att göra varje typsnitt speciellt.
Som med de flesta saker som är relaterade till typografi är avstånd super viktigt när vi bygger den bästa upplevelsen för våra användare. Mängden avstånd mellan varje bokstav, mellan ord och mellan ordlängder kan göra stor skillnad för läsbarhet.
Inte tillräckligt med avstånd ger oss bokstäver och ord som är alltför klara för att läsa bra, medan för mycket avstånd kommer att bryta upp allt och vara lika svårt att läsa och följa.
Teckensnitt har sin egen avstånd som i allmänhet är ganska trevligt att läsa, men låt oss ta en titt på vad allt detta olika avstånd heter och hur man gör ändringar i vår CSS om vi någonsin behöver i våra mönster.
spårning är det allmänna avståndet mellan alla tecken (bokstäver) i en bit text.
Vi kan göra ändringar i detta i vår CSS om vi vill, genom att använda teckenavstånd fast egendom:
h1 brevavstånd: 5px;
Accentsconagua
word-avstånd fast egendom:h1 ordavstånd: 15px;
kerning är avståndet mellan två tecken.
Kerning mellan varje teckenpar ändras av typsnittet, eftersom vissa bokstäver ser bättre närmare varandra och några längre ifrån varandra. Detta är helt nere för att göra sakerna ser balanserade ut och är svåra att göra med bara CSS ensam.
Ledande hänvisar till avståndet mellan rader av meningar.
Vi kan göra justeringar till det här avståndet genom att ge ett värde som ändrar den standardinställda uppsättningen av det teckensnitt som används via radavstånd fast egendom.
p linjehöjd: 2;
Ett värde av 2 här kommer säkerställa att vår ledning är dubbelt så mycket som standardbeloppet för den fonten.
Om ett enda ord lämnas på en rad i sig (aaaah) i slutet av ett textblock kallas det a Änka.
Låt oss säga att blocken i följande bild representerar ord i kolumnerna. Ängen är det blå blocket, sitter självt i slutet av kolumnen, för det är där meningen slutar:
En Föräldralös är ett enda ord som existerar på en rad i sig i början av en kolumn, som vanligtvis bor bredvid kolumnen där det mesta av den relaterade texten är.
Änkar och Orphans anses vara dålig typografi på grund av hur distraherande de kan vara, vilket gör den övergripande läsupplevelsen sämre.
Det finns flera olika tillvägagångssätt som vi kan vidta för att korrigera en av dessa problem om det händer på våra webbplatser, till exempel:
Vi kan välja att justera vår text till vänster (standard på webben för språk som skrivs åt vänster till höger som engelska), i mitten eller till höger.
Text på webben ska i allmänhet vara vänsterjusterad (igen, för språk som skrivs åt vänster till höger) eftersom det är hur talare och läsare av dessa språk används för att läsa.
Centrerad anpassning används ofta på titlar och rubriker som hjälper dem att sticka mer ut från huvudtexten på en sida. Vi kan göra detta i vår CSS med text-align egendom, till exempel:
h1 text-align: center;
Text som anpassas på det här sättet kan vanligtvis hittas på tecken och flygblad som försöker ta tag i någons uppmärksamhet, men vi borde inte centrera justera en stor texttext på webben eftersom det blir mycket svårare för våra användare att läsa. Centrerad text skapar mycket olika bredder från linje till linje, vilket gör det svårare för ögat att följa.
Vissa språk (som hebreiska) skrivs från höger till vänster, vilket gör rätt justering av standardinriktningen.
Som designare kan vi också välja att få vissa små bitar av texten rätt inriktad så att det kan stå lite ut, som bildtexter. Dessa bildtexter är titlar eller beskrivningar för bilder med eget HTML-element, figcaption.
Ovanstående anpassning görs genom att deklarera höger på elementet i ett CSS-dokument:
figcaption text-align: right;
Mycket av den typografi vi designar kommer att vara på grund av att läsa innehållet själva och göra justeringar efter behov. Det finns dock några allmänna tips som kan hjälpa oss att bli mer bekväma med våra typografiska färdigheter.
en textstorlek mindre än 16px På texten som utgör huvuddelen av innehållet brukar vi betraktas som för liten och svår att läsa på skärmarna.
Vi pratade mycket om visuell hierarki i den tidigare handledningen om designens grunder. Inställning av hierarki för texten under hela vår design kommer att säkerställa att webbplatsen är lättare att navigera genom att skilja relaterat innehåll och markera det som är viktigast.
Texten på vår webbplats Tuts + Town har flera olika nivåer av hierarki, med titeln som den viktigaste, följt av företagskategorier och specifika affärer, och slutar med avsnittet "skapat av" längst ner.
Hierarkin här är uppbyggd av olika storlekar, färg och platser på sidan.
Vi pratar mer om färg och kontrakt i nästa handledning, så vet bara att du är medveten om färgen på din text och huruvida det sammanfaller med bakgrundsfärgen, vilket gör det svårt att läsa.
Här är ett exempel på dålig kontrast till vänster och bättre kontrast till höger:
Den ljusa rosa texten på en mörk turkos bakgrund till vänster visar effekten av dålig kontrast. Texten är svår att läsa, ser lite suddig ut och gör ont i våra ögon!
Som en allmän regel är det bäst att inte använda mer än två till tre olika teckensnitt per projekt. Parade teckensnitt ska passa varandra och båda stöder den övergripande känslan och idéerna bakom designen.
Inte alla teckensnitt fungerar bra på webben och är bäst för utskrift. Lyckligtvis ger Google Fonts, som vi brukade importera Open Sans till vår Tuts + Town-webbplats, en fantastisk lista över typsnitt som är anpassade till webben.
I denna handledning berörde vi vilken typografi som exakt har granskats, hur olika delar av en typsnitt kan skilja den från andra och avslutas med några allmänna tips att komma ihåg när du arbetar med text och teckensnitt på webben. Allt för att uppnå ett ultimat mål: att göra vårt innehåll enklare att läsa.
Därefter dyker vi in i några allmänna regler som är inblandade i att använda färger på webben och vilket meddelande vi kommunicerar med vår användare baserat på vårt övergripande färgval.
Vi ses runt om i staden!
