vad teckensnittet är vertikal rytm och modulär skala?

någon som har varit i hörhåll av mig har sannolikt hört mina ramblings om stilguider, och en stor del av det har nyligen varit att skapa en vertikal rytm och använda en modulär skala. Men vad typsnittet pratar jag om? I den här artikeln kommer jag att gå igenom varför du bör bry dig om vertikal rytm och modulär skala, definiera dem och avsluta med en demonstration om hur du integrerar dem i ditt nästa projekt.

Varför Ska Jag Bry Mig?

jag ville börja med det här först eftersom jag tycker att det är fördelaktigt att förstå problemet vi försöker lösa och vikten av både vertikal rytm och modulär skala som delar av en övergripande lösning. Hela anledningen till att denna artikel är på både vertikal rytm och modulär skala beror på att de båda bidrar till den visuella harmonin på en sida. Vertikal rytm engagerar och guidar läsaren ner på sidan, bra vertikal rytm gör en layout mer balanserad och vacker och dess innehåll mer läsbart. Modulär skala ger resonansnummer med hjälp av kulturellt relevanta, historiskt tilltalande förhållanden och uppmuntrar tankeväckande upprepning. Repetition föder förtrogenhet och förstärker ett mönster som hjälper användaren att förstå innehållet och layouten. Exemplet före nedan använder webbläsarens standardteckenstorlekar och linjehöjder, medan exemplet efter visar hur samma innehåll ändras när de begrepp jag introducerar nedan tillämpas.

före och efter tillämpning av begreppen vertikal rytm och modulär skala

vertikal rytm

vertikal rytm är avståndet och arrangemanget av text när användaren går ner på sidan. Vertikal Rytm . Det har bidragit med tre faktorer; teckenstorlek, linjehöjd och vertikala marginaler eller vaddering. Grundenheten för vertikalt utrymme är linjehöjd-vanligtvis linjehöjden på kroppskopian, eftersom det kommer att vara det dominerande innehållet på en viss sida. För att illustrera, jag kommer att ta exempel från en nyligen webbplats Jag har arbetat med. I början av projektet tillhandahölls vi mönster som använder Open Sans 15px teckensnitt med en linjehöjd på 25px. Så i det här exemplet nedan skulle den vertikala rytmbasenheten vara 25px.

exempel på vertikal Rytmlinjehöjd

exempel på vertikal Rytmlinjehöjd

med vår basenhet räknat ut, måste vi nu se till att det upprätthålls i hela kroppen kopia. En vanlig plats att förlora rytmen är i marginalgapet mellan blocknivåelement. Standardwebbläsarbehandlingen av stycken är att infoga en övre och nedre marginal på 1em och kalla det en dag. Detta är inte idealiskt om rytmen ska bibehållas, i vårt exempel nedan skulle det innebära att marginalerna skulle vara 15px istället för den 25px vi behöver. Det är också värt att notera att olika teckensnitt har olika linjehöjder inbyggda i dem, vilket ytterligare orsakar visuellt inkonsekvent avstånd. Så marginaler och linjehöjder måste återställas.

ett exempel som visar luckorna från marginaler mellan blocknivåelement

ett exempel som visar luckorna från marginaler mellan blocknivåelement

Detta är vanligt nuförtiden men jag ville notera att det alltid är bäst att starta saker på lika villkor, vi måste se till att alla vertikala mätningar inklusive linjehöjd, vaddering och marginaler återställs på ett kompatibelt sätt. Med detta lika villkor kan vi sedan ställa in dessa värden efter behov samtidigt som vi behåller rytmen. Jag har använt normaliseringen.css, bra ol ’ Återställ CSS från Eric Meyer, och till och med följande block med framgång. Vad du än väljer beror på dina projektbehov.

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p, blockquote,th,td { margin:0; padding:0; }

med vilken webbplats som helst finns det en hel del variationer i textstorlekar för element som rubriker och blockcitat, alla dessa olika textstorlekar bör också ta upp multiplar av basenheten. Fortsatt vårt exempel skulle det innebära att varje avledning från styckets textstorlek fortfarande borde ta multiplar av 25px. Det är här det riktiga roliga börjar, justera linjehöjden och marginalen för dessa element i enlighet därmed. Vi kommer att dyka in i mer information om detta i det sista avsnittet om hur du integrerar dessa koncept i dina projekt.

Illustration av flera variationer i textstorlek

Illustration av flera variationer i textstorlek

modulär skala

modulär skala är en sekvens av siffror som relaterar till varandra på ett meningsfullt sätt.

”en modulär skala, som en musikalisk skala, är en förutbestämd uppsättning harmoniska proportioner.”

– Robert Bringhurst,

du börjar med ett förhållande och ett tal. Liksom vertikal rytm är det bästa sättet att säkerställa effektiviteten i ditt startnummer att använda kroppskopian. Eftersom detta ställer in skalan vill vi använda dess teckenstorlek snarare än dess linjehöjd. Fortsätter med samma exempel från tidigare skulle vi använda 15px som vårt basnummer. Förhållandet är svårare att hitta, vanligast är det gyllene förhållandet (1.618) och perfekt fjärde (1.333). Båda är kulturellt relevanta; den förra är en favorit i klassisk grekisk och Renässansmatematik, arkitektur och konst, och finns också i naturen; den senare var populär i början av 20-talets musik. En bra tumregel är att överväga hur mycket typografisk och layout variation du behöver. Om du behöver steg för alla sex rubriker kommer du sannolikt att välja ett förhållande som möjliggör mer subtilitet mellan steg.

på webben innebär användning av en modulär skala att man väljer siffror från skalan för typstorlekar, linjehöjder, linjelängd (bredden på en kopia), marginaler, kolumnbredd och mer.

med ett förhållande och nummer valt kan du sedan multiplicera och dela dem för att få många resonansnummer. Nedan är en lista över resonansnummer som vi skulle få från att använda 15px-basen och det ”gyllene förhållandet” på 1: 1.618 för multiplikationen/ divisionen, jag använder superhjälp modularscale.com webbplats för att göra dessa beräkningar för mig och visa mig visuellt hur den resulterande sekvensen ser ut.

ett exempel på modulär skala applicerad med det gyllene förhållandet

ett exempel på modulär skala tillämpas med Golden Ratio från modularscale.com

vad detta gjorde var att ta startnumret 15 och

  • multiplicera det med det gyllene förhållandet 1.618 för att få 24.27
  • sedan multiplicerade det med 1.618 för att få 39.269, och så vidare
  • det delade också 15 med 1.618 för att få 9.271
  • sedan delade det med 1.618 för att få 5.73 och så vidare

för jämförelse, nedan är samma 15px-bas och det ”perfekta fjärde” förhållandet 1 till 1.333 som nämnts tidigare. Som du kan se har detta förhållande mer subtilitet mellan steg i den nya uppsättningen beräkningar. Eftersom förhållandet är mindre är stegen mellan skalan närmare varandra och mer subtila.

ett exempel på modulär skala applicerad med det perfekta fjärde förhållandet

ett exempel på modulär skala applicerad med det perfekta fjärde förhållandet från modularscale.com

du har också möjlighet att definiera ett andra basnummer och förhållande för att generera vad som kallas en dubbelsträngad modulär skala. Detta kombinerar två uppsättningar resonansnummer för att ge dig fler mätalternativ som fyller i luckorna i den första skalan. För det andra basnumret har jag sett att folk använder mindre bildtext och större siffror som bredden på en kolumn i 12-kolumnnätet som de implementerar. Så länge det är ett ”viktigt” nummer till layouten finns det inget fel svar. Här är vad som lägger till en andra bas av 95px (storleken på en kolumn i en 1140px bred layout) skulle se ut.

ett exempel på modulär skala applicerad med det gyllene förhållandet och två basnummer

ett exempel på modulär skala tillämpas med det gyllene snittet och två basnummer från modularscale.com

toppen! Nu har vi många fler alternativ att arbeta med!

historielektion

en metall Sortera illustration
en typ fall, där metall sorter lagrades i små fack av lådor

ursprunget till att upprätta en typografisk skala kom lika mycket från praktiskt behov som estetisk bedömning. Tillbaka när utskriften gjordes via boktryck, rörlig typ komponerades för hand för varje sida med hjälp av gjutna metallsorter (uppe till höger). Det var opraktiskt att tillverka och lagra hela teckenuppsättningar av varje typsnitt i alla möjliga storlekar. Med tiden bosatte sig typsättarna på ett användbart antal storlekar som fungerade harmoniskt tillsammans.

Bonus-bokstäver organiserades och lagrades i små fack av lådor (längst ner till höger) i ett typfall. Stora bokstäver lagrades traditionellt i en separat låda, eller fodral placerat ovanför fodralet med de andra bokstäverna. Detta är ursprunget till termerna ”versaler” och ”gemener.”

likheter och skillnader

låt oss nu snabbt gå igenom några likheter och skillnader mellan vertikal rytm och modulär skala

som nämnts i början innehåller den här artikeln både vertikal rytm och modulär skala eftersom båda är inbördes relaterade och bidrar till den visuella harmonin på en sida. Både vertikal rytm och modulär skala använder oftast den primära kroppskopian för sina startbasnummer.

där de skiljer sig mest är i deras tillämpning – vertikal rytm handlar bara om typografi där modulär skala ger en uppsättning resonansnummer som ska användas för typografi, kolumner, linjelängder etc. En annan viktig skillnad är hur strikt de är avsedda att följas. Med vertikal rytm ju mer konsekvent du följer mönstret desto bättre blir rytmen. Å andra sidan är modulär skala mer ett verktyg som kan improviseras vid behov. Citatet nedan hänvisar till matematiken som är involverad i modulär skala.

”matematik är inget substitut för en erfaren designer öga, men det kan ge både tips och begränsningar för beslutsfattande.”

-Tim Brown,

Integration

förhoppningsvis har jag nu övertygat dig om att dessa metoder är fördelaktiga och värda din tid att genomföra eftersom jag har två bitar av dåliga nyheter.

först är ett genomgripande antagande: ”jag kan ansluta ett par nummer till en generator och allt fungerar bara!”Även om det finns onlineverktyg som hjälper till med mycket matematik och gissningar, kommer det fortfarande att bli några försök och fel. Varje projekt är annorlunda, så en perfekt hållbar lösning för en kommer inte nödvändigtvis att passa för en annan.

för det andra har allt material jag hittat online relaterat till dessa ämnen kommit från design-eller design-dev-tankesättet där personen som bestämmer modulär skala och vertikal rytm är den som slutligen ansvarar för att fatta dessa typografiska beslut. I vårt fall oftare än inte vi överlämnade mönster som måste konverteras från Sketch/PSD till webben.

men det finns hopp! På mina senaste projekt har jag framgångsrikt tagit det som tillhandahölls av ett designteam och kunde arbeta dem i en rytm och skala som passar de riktlinjer som hittills nämnts samtidigt som jag behöll designens integritet. Tricket är att få beräkningarna så nära som möjligt och skapa en exempelsida som tydligt illustrerar fördelarna innan du når ut till designteamet för OK att gå vidare med ändringarna. Enligt min erfarenhet, de har varit ännu större typ nördar än mig och uppskattade extra ansträngning inblandade.

talade den här artikeln till dig? Är du yr med utsikterna till matteinspirerad enhetlighet och konsekvens i designarbetet? Förutom kompletta end-to-end-lösningar som webbplats och mobila översyner, har vi de bästa i klassen designers på varje projekt, säkerställa konsekvens och göra kundernas drömmar verklighet. Kolla in vårt senaste bidrag till builtinchicago.com om att anställa designers och våra öppna designpositioner.

Lämna ett svar

Din e-postadress kommer inte publiceras.