10 Web Typografi Regler Varje Designer ska veta
När någon besöker en webbplats du har utformat är oddsen att de inte bryr sig mycket om färger, bilder eller ljud, de tittar omedelbart på texten.
Oavsett hur många klockor och visselpipor du har byggt in på en webbplats, bygger alla på text för att uppnå vad de än besöker webbplatsen .
Att ensam borde göra typografi, konsten att arrangera typ, en prioritet för någon webbdesigner.
I den här artikeln tar vi en titt på 10 enkla regler att komma ihåg när du utformar ditt nästa webbprojekt.
1. Läs själv själva texten
Med en design som JonesingFor en formgivare utan ett bra grepp om texten skulle ha kämpat för att sätta ihop den typografi som gör att denna webbplats verkligen fungerar. När du hanterar din egen typografi behöver du nog inte oroa dig för att skriva en webbplatss text - men du måste läsa den!
Vissa webbdesigners tror att bara kopiering och klistra ut av en textfil utgör summan av sina textuppgifter. Men läsning genom texten ger åtminstone en grundläggande uppfattning om hur texten kan integreras i en webbplats, för att undvika kopplingen mellan skrivandet och utformningen av en webbplats.
Du kan sparka din typografi upp ytterligare en hack, om du kan läsa igenom texten när den är på plats i din design. Lägg märke till utrymmet runt bokstäverna . Har du några ovanligt stora utrymmen som ser konstigt ut? En liten noggrann typografi kan eliminera dessa problem. Du kan också få en uppfattning om linjer som kan vara för långa för att lätt läsa, besvärliga raster och liknande problem.
2. Dump Lorem ipsum så snart som möjligt
Tror du att du kunde ha utformat Jesus Rodriguez Velascos hemsida utan den faktiska texten? Webbplatsen är starkt beroende av det skrivna ordet - och mycket specifika ord också. Även kroppstexten fick särskild uppmärksamhet med en dropplock och några andra tweaking som bara inte hade varit möjligt med Lorem ipsum.
Om inte texten på din webbplats är egentligen Lorem ipsum, kommer dummy-texten inte att likna den verkliga saken . Det betyder att varje tweak du kan göra med texten - eller designen som omger det - måste vänta tills du får den riktiga grejen. Fråga efter (och få) text från din klient så tidigt som möjligt i processen ger dig möjlighet att matcha din övergripande design och din typografi.
3. Visa en tydlig hierarki
När du kommer till Rik Cat Industries , du vet omedelbart var du ska börja läsa. Även om det finns några länkar längst upp på sidan, förstår Rik välkomna ditt öga först. Det är mycket större, med hjälp av typografi för att skapa en tydlig hierarki .
Varje sida behöver en välutvecklad hierarki: indikatorer på var börjar börja läsa och hur man går vidare. Din typografi kan ge den hierarkin - precis som Rik gör - så länge du vet din hierarkiska ordning i förväg. Genom att tänka på storlek och typsnitt kan du markera en bit text som en rubrik på ett sätt som olika placeringar i designen inte kan ge.
Din designs hierarki går utöver den typografi du använder, förstås, men eftersom användarna nästan alltid börjar med texten är det meningslöst för designers att göra detsamma.
4. Var uppmärksam på både makro och mikro typografi
Att förlita sig helt på typografi för deras första sida, den Crowley Webb och Associate s Webbplatsen utformades med två faktorer i åtanke: både makro och mikro typografi .
Makrotypografi är den övergripande strukturen av din typ, hur den visas i samband med din design och dess estetiska när du betraktar din text som ett block i sig.
Mikro typografi är mer oroad över detaljerna i avståndet, de problem som avgör om ord är lätta att läsa. Mikro typografi är en absolut nödvändighet när det gäller att sätta ihop ett textblock: om det inte är läsbart finns det ingen mening att gå vidare. Crowley Webb och Associates tog upp denna fråga genom både noggrann skrivning och avstånd från de ord som webbplatsen skulle lyfta fram.
Men makrotypografi ger dig möjligheten att göra din text mer än väl avstånd: det är chansen att få det att vara tilltalande och en del av hela din design . Valet av typsnitt och färger på denna webbplats skapar en livskraftig helhet. Att ignorera någon typ av typografi är skadlig.
5. Var försiktig med typfärger
Det skulle vara så lätt att tappa text i bakgrunden av ArtofElan , speciellt den ljusa röda på mörkröd kombination som används av konstruktören. När en webbdesigner arbetar med färgad typ är vård absolut nödvändig, det finns ingen garanti för att en röd i röd kombination, eller till och med en gul på röd kombination, kommer att synas . När allt kommer omkring har alla besökt en webbplats där texten tycktes bara vara en nyans av bakgrundsfärgen och fått ett ögonblick när de försökte läsa den.
Den enklaste lösningen för den här situationen är att se till att färgen på din typ är väsentligt annorlunda än din bakgrunds . Svartvitt fungerar så bra eftersom de är lika drastiskt olika som du kan få, men det finns några färgkombinationer som fungerar bra: något i linje med en mörkblå på en ljusrosa kommer att få jobbet gjort. Reverserad text är ganska knepig ... medan du kan arbeta med ljusrosa text på en mörkblå bakgrund, är du mer sannolikt att få ett klagomål om det.
6. Var seriös om din CSS
Om din CSS är solid kan du flytta mellan sidor på din webbplats sömlöst, precis som de olika versionerna av Hutchouse.com lita på olika stylesheets för att skapa några imponerande effekter. Även om du inte tar saker så långt som Hutchhouse kan CSS hjälpa till med att eliminera problem med amatör typografi som att ändra teckensnitt och storlekar mellan sidor.
CSS kan ge enkel konsistens mellan din typografi över hela en webbplats . Om du är konsekvent i hur du använder typ, kan bryta den konsekvensen även en liten mängd göra vad du vill markera verkligen sticka ut, precis som att etablera och sedan bryta ett rutnät kan göra en effektiv design. I webbtypografi kan det vara en enkel fråga om CSS att hålla dina teckensnitt konsekventa.
7. Dikta den centrerade texten
Att välja ett alternativ till centrerad text kan göra en webbdesign enklare att läsa , precis som DesignCanChange.org . Valet för centrerad text, särskilt på en sida som denna, skulle göra en problematisk sida: de skarpa kanterna som centrerar skapar på varje sida gör det mycket svårare att läsa och det finns gott om möjligheter för perfekt centrerad text för att sluta snedvrida resten av dina mönster på olika skärmar.
I vissa cirklar är centrerad typ bara ett steg uppåt från att använda Comic Sans i en webbdesign. Du kan överväga det för en rubrik, men i allmänhet kommer anpassningen av texten till vänster att göra dina läsare mycket bekvämare, om inte de läser från höger till vänster .
8. Hantera smarta citat och andra symboler
Luigi Ottani s webbplats visar hur noggrann uppmärksamhet på citattecken och andra symboler får dig: En fullständig brist på problem när webbplatsen visar dessa symboler. Många webbplatser är prickade med symboler som en webbläsare inte kan visa. Det är ett arv av det faktum att det mesta av texten som en webbdesigner jobbar med var troligen skrivet i Microsoft Word eller en annan bit av ordbehandlingsprogramvara som gör alla möjliga små förändringar i text utan att författaren uppmärksammar mycket.
En av de värsta förändringarna är smarta citat: de krökta citatteckenen Word ersätter automatiskt raka citattecken . Ett annat problemområde kommer när du arbetar med text skrivet på ett annat språk: accenter och umlats kan orsaka lika mycket problem som Words hjälpsamhet. Om du bara kopiera och klistra in text med sådana ändringar i din design, kommer du sannolikt att gå tillbaka och fixa dem senare, åtminstone för vissa webbläsare.
Istället får du dem tidigt i designprocessen, så att du kan fokusera på att göra din text bättre med din design . Om du vill ha de fina symbolerna och smarta citat som visas i den slutliga designen, bryta ut dina HTML-enheter.
9. Planera för din text för att bli större
När du ökar textens storlek på Veerle Pieters ' webbplats, det är inte riktigt så vackert än om du använder teckensnittstorleken hon plockade ut. Men du kan fortfarande läsa allt, hitta länkar och så vidare, något som är sant för väldigt få webbplatser.
Det beror delvis på att många designers ser till att layouttexten är 10 punkter eller ännu mindre. De flesta människor är bekväma att läsa sådana teckensnitt, men Baby Boomers utgör en stor del av webbläsande befolkningen och många av dessa åldrande websurfare kommer att få sina webbläsare inställda att visa typen så stor som de kan . Din text, såväl som din design, måste kunna anpassas till det faktum.
Det är också värt att ta hänsyn till det faktum att webbläsarens storlek kan variera dramatiskt och flytta texten till oväntade platser om du inte är försiktig. Om bumping storleken upp en punkt skapar problem, att äldre demografiska kommer att gå vidare till nästa webbplats i bråttom. Att behöva bläddra för alltid över till sidan kommer att ha ett liknande resultat.
10. Visa en preferens för sans serif
Om du tittar på En lista Apart s webbplats, ganska stort sett varje stort textblock sätts i en sans serif typsnitt, vilket gör det mycket lättare att läsa. Rubriker och andra mindre textblock läggs ut i serifed typsnitt, vilket ger en balans mellan de två.
När det gäller att lägga ut text på en skärm, är sans serif typsnitt nästan alltid det bästa alternativet , speciellt om du valde ett teckensnitt som Verdana som var utformat för visning på en datorskärm. Serifed typsnitt har en högre chans att visa dåligt, bli suddig eller till och med pixelerad.
Det är naturligtvis inte möjligt att helt undvika serifs. Men för stora block av text speciellt, med hjälp av ett teckensnitt utan serifs kan erbjuda en extra garanti för att besökare kommer att kunna läsa en webbplatss text enkelt. När du väljer typsnitt för ett projekt, titta först genom dina sans serif-alternativ .
En sista kommentar
Typografi är lätt förbises, och även när en designer tar hänsyn till det är det enkelt att skriva ut som en tidsintensiv aktivitet med liten avkastning. Men att tillbringa några minuter med texten som kommer att vara centrum för din design kan omvandla den från något som någon webbdesigner kunde släppa på en sida till ett element som stöder resten av designen.
Skriven uteslutande för WDD från torsdag Bram.
Följer du dessa regler och andra? Vänligen dela dina åsikter nedan ...