Share
Möjligen är den mest uppenbara typografiska frågan i händerna på en formgivare "vilken typsnitt ska jag använda?" Den andra frågan, en som sällan får den typ av uppmärksamhet den borde är "i vilka storlekar ska jag sätta min typ?" Att fastställa en modulär skala är det bästa sättet att bestämma typografiska storlekar, det kan faktiskt hjälpa till med att lägga ut mätningar och proportioner över hela ditt sidlayout.
Under denna session har vi tittat på hierarkin; hur storlek och andra faktorer kan påverka det visuella förhållandet mellan typografiska element. Vi har också nyligen tittat på vertikal rytm, visuell konsistens av avstånd och element på en sida. Då har vi frågan om att ställa in ett grunnlinje, vilket knyter samman med att etablera vertikal rytm. Vi har även pratat om att använda ems som en måttenhet, dubbelt i själva verket. Alla dessa aspekter av typografi är bundna av den grundläggande närvaron av storlek, så hur exakt bestämmer du hur stor din typografiska element ska vara?
Termen Modular Scale refererar till en rad harmoniska värden. Att vara en skala är varje värde en faktor för de andra och det kan se ut så här:
Om du använder denna skala till några grundläggande typografiska CSS kan vi få:
h1 fontstorlek: 36px h2 font-size: 24px h3 fontstorlek: 18px h4 fontstorlek: 14px p fontstorlek: 11px liten fontstorlek: 9px
Du kanske känner igen dessa värden som en del av den klassiska modulskalaen, illustrerad av Robert Bringhust i The Elements of Typographic Style.
En modulär skala, som en musikalisk skala, är en förutbestämd uppsättning harmoniska proportioner.
Robert Bringhurst
Genom att hålla sig till denna skala och ställa in dina olika typografiska bitar och bitar till de visade värdena, kommer de att ta på sig en inneboende skönhet; proportioner som har arbetat för typografiska designers i århundraden.
Det är rätt, århundraden.
I själva verket kom ursprunget att etablera en typografisk skala så mycket från ett praktiskt behov som en estetisk bedömning. I de hejda dagarna av gjutmetallformatering, när varje brevform gjordes som ett metallblock (kallat sort) var det opraktiskt, för dyrt att tillverka och lagra hela teckenuppsättningar av varje typsnitt, i alla olika vikter, i alla möjliga storlekar.
Typesättare bestämde sig därför över tiden i ett användbart antal storlekar som fungerade harmoniskt tillsammans.
Låt oss skapa en enkel skala för användning i våra egna projekt.
Vi måste börja någonstans, så vi börjar med ett betydande basnummer; vår basstorlekstorlek. Jag har vana att börja med vad som helst som webbläsaren dikterar som standard, så vi använder 16px som vår bas. Tim Brown rekommenderar att du börjar med den teckensnittstorlek där din typsnitt är mest spridda - oftare än inte, det kommer att vara 16px för teckensnitt utformade med webben i åtanke.
(Tyvärr, det var det enda citatet jag kunde tänka på att innehålla förhållande.)
Så nu måste vi fastställa ett förhållande, ett värde som vi multiplicerar exponentiellt och delar upp vårt basvärde. Detta förhållande kan vara vad du vill, Om du har en viss skala som håller specifika skönheter i dina ögon, så är det bra.
Du kan till exempel gå till den gyllene delen 1: 1.61803398875. Detta förhållande har sina rötter i världens väldiga tyg och har använts av designers och arkitekter för att strukturera estetisk harmoni sedan ... för alltid.
För att illustrera vad som händer enkelt, kommer vi att använda 1: 2 (den musikaliska bland er, som inte är jag förresten, kommer att känna igen detta som en oktav). Från och med 16 får vi följande:
16 * 2 = 32 32 * 2 = 64 64 * 2 = 128
Och detta kan fortsätta exponentiellt. För att fastställa vår skala nedåt delar vi:
16/2 = 8 8/2 = 4 4/2 = 2
Detta ger oss början på vår skala:
som vi kan ansöka om vår enkla typografiska CSS som så:
h1 fontstorlek: 256px h2 fontstorlek: 128px h3 fontstorlek: 64px h4 fontstorlek: 32px p fontstorlek: 16px liten fontstorlek: 8px
Bra jobb hittills!
Denna skala är ganska extrem. Det fungerar, men för mätningar på en webbsida är det ganska oförlåtligt. För att ge oss mer flexibilitet, låt oss ge oss fler alternativ genom att lägga till en andra dimension i skalan, en process som skisseras av Tim Brown i sin A List Apart-artikel Mer meningsfull typografi.
Välj ett annat nummer. Varje nummer, så länge det har någon betydelse för din design. Vi har redan använt 16 eftersom det är vår basstorlek, så låt oss komplimangera att genom att lägga till 95, bredden på en enda kolumn kommer jag att använda i den här fiktiva 1,140px breda layouten.
Tips: Det kan finnas många aspekter av din design som har betydelse; mätningar och dimensioner som resonerar genom hela layouten. Experimentera med de värden du väljer, du kan bli förvånad över vilka proportioner känna höger.Vid tillämpning av förhållandet 1: 2 till 95 får vi följande skala:
11,875 / 2 = 5,938 23,75 / 2 = 11,875 47,5 / 2 = 23,75 95/2 = 47,5 95 * 1 = 95 95 * 2 = 190 190 * 2 = 380 380 * 2 = 760
Så nu har vi två skalor, båda baserade på samma förhållande, som därför existerar ganska snällt:
Faktum är att vi kan kombinera dem, för att ge oss en skala så här:
760.000 512.000 380.000 256.000 190.000 128.000 95.000 64.000 47.500 32.000 23.750 16.000 11.875 8.000 5.938 4.000 2.969 2.000 1.485
Detta fyller luckorna för oss, vilket gör vår skala mer långt komplett.
Vi har redan nämnt hur vi kan applicera vår skala till grundläggande typografiska element, så låt oss uppdatera det.
h1 font-size: 64px h2 font-size: 47.5px h3 fontstorlek: 32px h4 fontstorlek: 23.75px p fontstorlek: 16px liten fontstorlek: 8px
Där går vi, inte riktigt så intensiva. Våra skalor kan också låna sig för andra typografiska funktioner, till exempel linjens höjd och därmed hela baslinjen:
p font-size: 16px; linjehöjd: 23.75px; marginal: 0 0 16px 0;
Och vi kan kan förbättra allt genom att använda ems också, vilket gör relationerna och proportionerna snyggare:
kropp font-size: 100%; p font-size: 1em; linjehöjd: 1.484; marginal: 0 0 1em 0;
Om du kämpar med beräkningarna vid den här tiden, gå vidare till Tim Browns Modular Scale. Hans kalkylator kommer automatiskt att churn out pixel och em värden för dig.
För referens, här är vad vår skala ser ut när det gäller ems (med andra ord i förhållande till basstorleken):
64 47,5 32 23,75 16 11,875 8 5,938 4 2,969 2 1,484 1 0,742 0,5 0,331 0,25 0,186 0,125 0,093
Efter att ha tagit hand om de grundläggande typelementen på vår sida, låt oss uppmärksamma någon struktur. En enkel stapel med tolv kolumner ligger lätt ut:
.kolumn 1 bredd: 95px; * .kolumn-2 bredd: 190px; * .kolumn-3 bredd: 285px; kolumn-4 bredd: 380px; * .kolumn-5 bredd: 475px; kolumn-6 bredd: 570px; kolumn-7 bredd: 665px; kolumn-8 bredd: 760px; * .kolumn-9 bredd: 855px; .kolumn-10 bredd: 950px; .kolumn-11 bredd: 1045px; .kolumn-12 bredd: 1140px; / * i ett fluidnät, skulle dessa konverteras till% värden * /
Du kommer att känna igen värdena med en asterisk bredvid dem som i vår modulära skala.
Varje kolumn måste också flyta, för att bilda takrännorna kan vi lägga till en del på 1em (16px, vilket också ingår i vår skala).
/ * Lägg till en naturlåda layoutmodell till alla element * / *, *: före, *: efter -moz-box-size: border-box; -webkit-box-dimensionering: border-box; box-dimensionering: gränsvärde; .column float: left; vaddering: 0 1em;
Mycket snabbt har vi lagt grunden för ett solidt nät, plus typografi, allt baserat på en harmonisk skala.
Att kombinera nät med typografi kan vara ett komplext företag; beräkning av harmoni kan tyckas mycket ointuitiv ibland! När du väl har börjat med några grundläggande jordningar finner du att du inte kan skapa en webbsida utan någon form av betydelse för relationerna på dina sidor.
Det vi har gjort hittills är en bra start, men det finns fortfarande mycket mer att göra och gott om finjustering. Gränssnittet, till exempel, kan vara lite besvärligt att bygga från den här punkten, så du kan hitta några av de ursprungliga värdena inte fungerar. Vi skulle dessutom vilja att vårt nät ska vara flexibelt, så att kolumnerna inte behåller de fasta värdena som vi ursprungligen använde. Av denna anledning kan du hitta våra horisontella värden fungerar inte alltid med våra vertikala mätningar.
Det finns etablerade vågar och galler, testat och testat genom åren. Varför inte prova att använda några av dem till ditt eget arbete? Har du någonsin tillämpat en avsiktlig modulär skala för ditt arbete? Om inte, hur bestämmer du för din typografiska storlek? Finns det några specifika problem du stöter på med våg? Låt oss höra dina tankar i kommentarerna!
Accentsconagua