Share
Webbdesign är i grund och botten bara en utveckling av de principer och teorier som skapats under utvecklingen av trycket. Designbranschen förde många tekniker till webben, men vissa tog längre tid att behärska i en virtuell miljö. Tyvärr har vi inte en enda plattform för att vårt innehåll ska visas på; vi måste slåss med flera webbläsare, operativsystem och skärmstorlekar.
När webben har utvecklats, så har de designprinciper vi observerar. Grid-baserad design har ökat de senaste åren, varigenom designers kan lägga ut sin webbplats enligt ett kolumnrad. Gridsystem har varit ett mycket populärt sätt att organisera och justera element, och lägga till allmän ordning på en sida, genom att tillämpa proportioner och balans.
Med utgångspunkt i vår kunskap om att använda proportioner och balans, kan man använda en annan designprincip: baslinjen.
Gränssnittet är en teknik som används för att förbättra din webbaserade typografi. I huvudsak justerar den all din text till ett vertikalt galler där botten av varje bokstav är placerad på rutnätet, precis som att skriva på fodrad papper. Slutresultatet är en organiserad text som är perfekt organiserad, med ett undermedvetet erkännande av balans och kongruens.
Som jag sa tidigare är utskrift ett statiskt medium. Genom att designa för ett utskriftsformat kan du ange vad alla dina tittare ska se. På grund av de alternativa plattformarna kan din design tolkas på webben, men din CSS kommer oundvikligen att göra din linjehöjd och andra typografiska värden, olika för olika användare. För många designers, visar det sig att bara vara gissning och förutsäga vad slutanvändaren kommer att se.
Många skrivdesigners använder grunnlinor i kombination med deras designpaket, vare sig det är InDesign eller annat. Grids in print har spåras tillbaka till början av 1200-talet och är inte trånga bara för webbdesign. Faktum är att allt från nät till det gyllene förhållandet (dvs de flesta matematiska teorierna) delas i andra aspekter av livet, framförallt arkitektur.
Rutnätet gör det möjligt att föra alla delar av designtyps tecken, fotografi, ritning och färg - till ett formellt förhållande till varandra; det vill säga gridsystemet är ett sätt att införa ordning i en design. En avsiktligt sammansatt design har en tydligare, mer snyggt ordnad och mer framgångsrik effekt än en annons som slumpmässigt slås samman. - Josef Möller Brockmann
Låt oss nu titta på hur vi faktiskt skapar vårt grunnlinje.
För det första måste vi definiera en linjehöjd för baslinjen ruten baserat på ett förhållande med vår typsnittstorlek; för detta exempel är 1: 1.5 en fin mängd som ger oss en generös 50% ledande. Om vi hade en textstorlek på 12px, skulle linjens höjd (med detta förhållande 1: 1.5) vara 18px. 150% är en fin mängd som ger oss en design som lätt kan läsas, men det här värdet kan vara annorlunda. Du bör dock försöka hålla sig till ungefär 130% -160% när du överväger linjens höjd.
Innan vi går längre, borde du veta exakt hur CSS linehöjdsegenskapen egentligen fungerar. Linjens höjd är den totala kollektivhöjden på textraden, inte själva texten. Det fungerar genom att lägga på vaddering ovanför och under texten för att rymma den ut. Om vi faktiskt tar lite text och lägger den på en rullande bakgrund, ser vi texten placerad mellan linjerna, inte nödvändigtvis på dem.
För att göra saker enkelt, låt oss anta att vår text har en basstorlek på 10px. Genom att hålla fast vid vårt grova förhållande betyder det att vår linjehöjd blir 15px, även om vi kan variera detta. (För att göra en sidotal är 10px ganska liten och jag skulle inte nödvändigtvis rekommendera det i de flesta fall, men jag använder det här bara för att underlätta matteavdelningen). För att göra olika element passar in i vårt grunssystem, behöver vi sätta upp dem i vår CSS.
Innan vi fortsätter antar emellertid dessa exempel att du använder någon form av CSS-återställning. Om du inte är det kan standardmarginaler störa det arbete vi gör idag.
För att sparka bort saker, när vi har ställt in linjehöjden, måste vi passa en konsekvent marginal under varje rubrik och punkt. Eftersom vi arbetar med ett 15px rutnät här, sparkar vi bort saker genom att skriva över standard bottenmarginal för en stycketikett (som standard är det 1em vilket i detta fall blir 10px) att vara detsamma som vår linjehöjd inom text. Detta skapar en proportionell tom linje under varje stycke som är lika med höjden om text bodde där.
p margin-bottom: 15px;
På samma sätt, för rubriker behöver vi bara fortsätta att lyda stegvisa 15 pixlar. Genom att helt enkelt markera på vår marginal bortom 150% linjehöjd skapar vi en liknande, konsekvent paus.
h1 font-size: 20px; linjehöjd: 30px; marginal-botten: 15px;
Innan jag går längre vill jag notera att texten kanske inte alltid sitter på linjen om du har tillämpat en till din bakgrund. Oroa dig inte, så länge linjens höjd förblir densamma. Om din text flyter mitt i dina rader, kan du enkelt spela om med dina marginaler, men det är inte nödvändigt.
Nästa upp, hur hanterar vi listor? För det första vill vi tillämpa vår standardmarginal på samma sätt som vi gjorde i våra stycken. Detta ger rasten en grad av överensstämmelse med innehållet.
ul, ol margin-bottom: 15px;
Det börjar bli enkelt nu! Om du fortfarande har en linjehöjd på 15px definierad någon annanstans, kommer dina listor att passa bra in med resten av innehållet.
Bilder är där det börjar bli lite svårare. Vi vill helst ha samma konsistens i våra marginaler, så bilden behandlas på samma sätt som om det var ett textblock. Det betyder att dina bilder måste formas i multiplar av ditt linjens höjdvärde, vilket i detta fall är 15.
I mitt exempel har jag bilden till höger så jag har en 15px marginal applicerad på vänster sida och botten. Utöver vår befintliga marginal under stycket gav detta oss en konsekvent marginal som är lika med resten av vårt baslinjenät.
img.left float: left; marginal: 0 0 15px 15px;
Naturligtvis är det inte de enda elementen som vi behöver ändra för att följa vårt nya baslinjenät. Nyckeln är att se till att du arbetar inom en konsekvent inkrement, så allt är begränsat till samma nät. Detta kan resultera i att harmoni och balans blir tydlig på hela din webbsida när den används med stora textkroppar.
Här är vårt färdiga exempel, en enkel webbsida med avsnitt, titlar, en bild och en lista. Om du vill komma ut din linjal kan du, men jag kan försäkra dig om att allt följer det konsekventa nätet som bygger på vår typografi.
Vi har bara brutit ytan av att använda baslinjenät. Det kan bli mycket svårare när du börjar försöka tillämpa dem på mer komplexa mönster, vilket hamnar i få som används på webben. Det är dock möjligt och kan resultera i en balanserad, proportionell design som kan bidra till en bättre slutanvändarupplevelse.
Gränssnittet är ett bra sätt att lägga till lite balans och proportion till din typografi. Det är en av de subtila implementationerna som kan lägga till lite naturlig känsla i dina mönster. När det gäller grunnlinjen blir vår typografi förenlig med standardiserad avstånd vilket ger den den harmoniska känslan.
Tyvärr måste vi dock fortfarande bekämpa hotet om webbläsares inkompatibiliteter som kan göra vår CSS till skillnad för olika användare när de surfar på andra webbläsare, operativsystem eller enheter. Det här är en uppgift som inte verkar som om den är på väg ut, men även om du lägger till ett grunnlinje ger du andra fördelar. Till exempel kan denna typ av nätsystem hjälpa enormt vid skalning och tvingar därför en webbläsare att återställa sin CSS. Gränssnittsnät ger lite mer flexibilitet och uppmuntran åt webbläsaren att göra saker ordentligt.
Detta har varit en kortare artikel än vanligt, men det beror på att grunnlinor inte har så mycket för att förklara eller visa hur man använder. Den verkliga magiken kommer när designern tweaks och testar för att se till att hans grunnlinje fungerar, och framför allt gör designen visuellt tilltalande (något mer). För en alternativ spinn på saker, läs A List Aparts artikel om detta ämne. Fram till nästa gång, glad design!
Accentsconagua