Share
Att lära sig allt om insidan och utgåvan av den tekniska sidan av typografi är bra. Det ger dig en solid grund när du letar efter typsnitt eller typsnitt och hjälper dig att förstå lite mer om själva typografiens typografi. Du kommer snart inse hur mycket jobb som krävs för att få typ rätt när som helst, inte bara på webben.
En av de viktigaste aspekterna av typografi på webben är vertikal rytm - och detta kan också vara en av de svårare att få rätt eftersom det ofta tar mycket tid och experiment. Det finns många sätt att uppnå en god vertikal rytm på en sida, även om vissa kan koka ner helt enkelt vad som känns och ser rätt ut till dig på skärmen.
Rytmen är ...
ett starkt, regelbundet, upprepat rörelse- eller ljudmönster
och ju mer konsekvent och bekant en rytm är desto bättre och starkare blir det.
Vi kan tillämpa detta på webben med termen "vertikal rytm" - i västkulturen, som vi läser från vänster till höger och uppifrån och ned, vill vi försöka hålla en konsekvent visuell rytm till innehållet på vår sida. Att hålla vår vertikala rytm överensstämmer med att vi kan skapa en visuellt mer avkopplande upplevelse som ger oss en känsla av förtrogenhet för våra användare, att ta bort visuella hinder och göra innehållet mycket mer läsbart.
Att skapa en bra vertikal rytm på en webbdesign kan vara hård. Syftet är att skapa ett harmoniskt förhållande mellan allt innehåll (inklusive bilder och text) på din webbplats.
Till exempel hur ser avståndet mellan stycken ut (är det för stort eller för litet?), Hur lätt tycker du själv att den läser? Det finns många frågor att fråga och det mesta kommer att koka ner hur lätt det är att läsa (även snabbt skanna över) webbplatsens innehåll. Även de minsta förändringarna som ger en bättre läsupplevelse på din webbplats kommer att göra en stor skillnad för dina användare.
Så nu vet vi vilken vertikal rytm är, vi behöver lära oss lite mer om vad som gör en god vertikal rytm. Nyckeln här är läsbarhet.
När du arbetar med typografi på webben, är de två stora sakerna du vill uppmärksamma på teckensnittstorlekar och rader. Även om det finns så mycket annat som överensstämmer med de två sakerna, är dessa dina två viktigaste komponenter för att skapa en bättre vertikal rytm på din siddesign. Om dina typsnittstorlekar inte passar ihop - genom att ha massiva rubrikstorlekar och exempelvis löjligt små kroppstaltextstorlekar, till exempel - då kommer det här att göra innehållet mycket svårare att läsa eller skanna igenom snabbt. På samma sätt, om ditt innehåll har en linjehöjd som gör texten besvärlig att läsa - antingen genom att vara åtskilda för nära varandra eller vara för långt ifrån varandra - så blir användarna avstängda när du vill vara engagerade med dem.
Att skapa god vertikal rytm i dina mönster kommer med mycket träning, men också mycket teori och ibland matte.
Först måste du börja titta på en baslinje (även känd som baslinjenät). En baslinje är standardlinjens höjd som du baserar din vertikala rytm på - och därmed kan du börja använda den här baslinjen för att hjälpa dig i raden för alla andra teckensnitt och innehåll i ditt design.
Trent Waltons hemsida är ett utmärkt exempel på god vertikal rytm i design. När du arbetar med en baslinje är det en bra idé att gå med linjehöjden på den vanligaste eller primära teckensnittstorleken i din design. Det enklaste exemplet jag kan tänka på är att tänka på din huvudsakliga basfontstorlek på 100% (vilket motsvarar 16px i de flesta webbläsare). Om du har en linjehöjd på 1 så kommer din linjhöjd också att vara 16px. Linjehöjder brukar emellertid bäst sitta mellan 1,4-1,6 gånger storleken på ditt teckensnitt (visuellt verkar detta bara fungera med de flesta teckensnitt - men ta det inte som regel, bara leka med det). Om vi ser en linjehöjd precis i mitten av den, med 1,5, blir vår linjhöjd 24px - och det är vårt baslinjenummer. Härifrån vill vi se till att allt innehåll och typografiska element på vår design matchar eller lägger till den här 24px siffran.
En annan viktig sak att mäta är våra marginaler. Ett riktigt enkelt sätt att hålla vår rytm i kontroll är att använda detta magiska nummer (24px) för våra marginaler.
Jag har varit en stor fan av enriktad marginal sedan Harry Roberts föreslog detta i en artikel i mitten av 2012 där marginalerna vi tillämpar på alla blocknivåelement placeras i en riktning (dvs: på botten av element ). Detsamma kan sägas när vi designar, så som 24px är vårt "magiska nummer" - och numret att allt ska vara multipel eller, i det minste hänför sig till, vi kan lägga till en bottenmarginal till alla våra blocknivåer element av 24px (eller 1.5rem, om du föredrar - men du vill lägga till den här koden i din CSS är bra!). Detta hjälper oss att hålla vår vertikala rytm flytande snyggt och gör att alla våra element håller sig i linje med den baslinje som vi har skapat.
Ett litet tips som jag hittar när jag arbetar med bilder i min design - och säkerställer att de inte slänger vår baslinje och vertikal rytm helt och hållet - är att se till att bildhöjder matchar upp till flera av vårt magiska nummer. Så, till exempel, kan en bild ha en höjd på 240px (10x24px, vårt magiska nummer) med en undermarginal på 24px. Eller vi kan till och med ha en höjd på 252px med en bottenmarginal på 12px - så länge som allt lägger till den multipeln av 24px, borde vi vara okej.
Medan det är viktigt att komma ihåg ditt magiska nummer kan du ändå alltid bryta av det något - om något inte känner sig riktigt på 1,5 linjens höjd som du har satt, försök sedan något annat - så länge du kan ändra den andra värden så att den faller tillbaka till baslinjen och därmed håller din vertikala rytm i kontroll.
Om du till exempel väljer att istället gå med en något högre linjehöjd på 26 pixlar (som fungerar vid cirka 1625 gånger den ursprungliga teckensnittstypen vi hade på 16px), så länge dina marginaler speglar detta, så kommer din vertikala rytm kommer att bli okej. Eftersom vi har lagt till en extra två pixlar till linjens höjd, måste vi ta de två pixlarna från den undre marginalen på det här elementet. Om du kan kan du försöka söka efter mönster i din design där detta kan hända och arkitekturen din CSS på ett sätt som speglar detta mönster - så skapar du en modulär CSS-klass för element som har det designmönstret som du skulle med något projekt du utvecklar.
Att arbeta för att skapa en god vertikal rytm kan vara tuff - men lyckligtvis, som med de flesta design- och utvecklingstekniker, finns det några bra verktyg för att hjälpa oss. Jag tycker att dessa verktyg är speciellt bra för att öva och visuellt förstå mer om typografi på en sida.
Typecast är ett fantastiskt verktyg för designers - det låter dig inte bara leka med tusentals olika teckensnitt eller typsnittskombinationer, men det hjälper oss också att sätta ihop och bilda en riktig baslinje. Jag tycker att jag alltid dyker in här innan någonting annat när jag börjar titta på typografi i min design.
Modulskalan är en annan liten teknik som kan utnyttjas eller användas vid utformning med typografi - som beskrivs på A List Apart
en modulär skala är en sekvens av siffror som relaterar till varandra på ett meningsfullt sätt.
Tim Brown
Dessa nummer kan användas (genom mycket experiment och byte och förändring) i dina mönster, om du så önskar. Det är åtminstone värt en titt och ett spel - och kan hjälpa dig att fatta mer informerade beslut om saker som behållarens bredder och hur dessa andra nummer kan också spela en roll i din vertikala rytm.
Om du är en fan av att designa i webbläsaren eller bara vill se till att baslinjerna du har utformat någon annanstans följer igenom när du börjar kodning - då kan du använda en av dessa två JavaScript-plugins för att kontrollera hur din baslinje är utför i din kod. Den första (Basehold.it) av Dan Eden och Michael Wright ger dig ett JavaScript-överlägg på din webbsida, medan Baseline.js av Dan Eden ger dig möjlighet att hantera bilder på din sida, om de behövs.
För den här uppgiften vill jag helt enkelt leka med ett grunnlinje - oavsett om det här sker genom en försök i Typecast, med hjälp av en av de ovannämnda JavaScript-pluggarna eller helt enkelt genom att skapa en grunnlinje i Photoshop eller en annan grafikapp är helt upp till du. När du har ett baslinje färdigt, börja börja sätta principerna i den här artikeln i det; sätt lite av ditt innehåll på plats och börja räkna ut de skalor och teckensnittstorlekar du vill använda.
När du har de på plats, börja titta på hur dessa alla knyts ihop med ditt grunnlinje. Om du aldrig har gjort det tidigare kan det vara ganska jobbigt att ta sig runt - men det är väl värt att ta sig tid att förstå exakt hur de fungerar. Därefter kan du börja integrera en god vertikal rytm i din webbplats design mycket lättare - och dina användare kommer att tacka dig!
Accentsconagua