Hur man gör din typ mer tilltalande på webben
Det är inte ovanligt för en formgivare i dagens värld att inte uppmärksamma vilken typ som läggs ut, speciellt med de så enkelt praktiska standardinställningarna för rubriktaggar och webbsäkra teckensnitt som finns universellt på webben.
Om vi som interaktiva designers kan vi ta lite mer tid när det gäller typografi, än resultaten skulle visa en unik, väl genomtänkt design som motsätter sig en "run of the mill" -skapande.
Det finns en god chans att de flesta designers och mönster du beundrar visar goda exempel på typografi.
Jag ska visa dig några steg jag tar i tweaking set typ för att vara mer tilltalande än de vanliga scenarierna av 24px H1-taggar tillsammans med 13px i Times New Roman.
Avgör inte för standardinställningar, alla gör det.
Här har vi det någonsin så vanliga utseendet på en rubrik tillsammans med en bit kroppscopi att följa. Detta drar inte precis in dig eller sätter dig ifrån varandra från alla andra prover precis som det, eller hur? För att göra textprovet mer visuellt tilltalande kommer vi först att göra några ändringar med vårt typsnitt.
Välj ett teckensnitt som kommer att ha mer synvikt med rubriken
Även om teckensnittsval är inte exakt "typografi" är det faktiskt en kvintessiell komponent för att hjälpa typen på en sida skilja sig från andra element. Med början av @ font-face finns massiva mängder av val tillgängliga för designers överallt.
Här har jag använt en extrakompenserad gotisk stil typsnitt som lätt kan hittas på en fri typsnitt som FontSquirrel.com. Om vi slutar och tänker på det, ska namnet "Condensed" betyda något, för det är faktiskt mer tätt än det är en vanlig bokstilfamiljemedlem, vilket är exakt vad vi vill ha ur en rubrik: något som drar användaren i och verkligen sätter sig ifrån kroppen kopia. Det lyckas verkligen med att fånga din uppmärksamhet bättre än originalet men det finns några saker vi kan göra för att ytterligare förbättra texten.
Gör det mer tilltalande med två rader av CSS
Den omedelbara förändringen finns i bokstäverna; de är alla aktiverade nu men de har nu också negativ kärnning mellan var och en av bokstäverna (en teknik som överförs från tidningsdesign).
Båda dessa egenskaper kan enkelt uppnås genom CSS, { text-transform: store bokstäver; och brevavstånd: -Xpx; }. Genom att göra dessa två linjer värda av kodningsändringar, resulterar det i en stor förbättring av synvikt, särskilt över originalet.
Träna några sista små tweaks
I nästa steg har teckensnittet som används i kroppsavsnittet faktiskt ändrats till en renare sans-serif, vilket bättre komplimangerar rubriktexten. Vi närmar oss en mycket mer visuellt tilltalande design, men det finns några förändringar vi kan göra för att städa upp det ännu mer.
Som de gröna indikatorerna visar är det ojämna marginaler och vilka typografer som vill kalla en "föräldralös". Vilket är ett enda ord som faller till sista raden i stycket. Det skapar en mycket ojämn vikt visuellt jämfört med resten av texten, och problemet kan lösas enkelt genom att omformulera texten något.
När det gäller marginaler finns det ingen regel att alla måste vara lika. Men om du börjar en ung webbdesign karriär är det bra att ha lika marginaler fram till du upplever och lär dig tekniker som låter dig sträcka sig utöver riktlinjerna för uppsättning och fortfarande uppnå ditt mål visuellt.
Efter att ha skapat en mer balanserad visuell duk genom att avlägsna föräldralösa och justera marginalerna kan du se slutresultatet, ett bra uppsättning typ som är bekvämt där det ligger.
Vilka är dina bästa tips för webtypografi? Låt oss veta i kommentarerna!