Share
Misschien is de meest voor de hand liggende typografische vraag in handen van een ontwerper "welke lettertypen moet ik gebruiken?" De tweede vraag, die zelden de aandacht krijgt, is "in welke maten moet ik mijn type instellen?" Het vaststellen van een modulaire schaal is de beste manier om typografische formaten te bepalen, in feite kan het helpen bij het opmaken van metingen en verhoudingen over de hele paginalay-out..
Tijdens deze sessie hebben we gekeken naar de hiërarchie; hoe grootte en andere factoren de visuele relatie van typografische elementen kunnen beïnvloeden. We hebben ook recent gekeken naar verticaal ritme, de visuele consistentie van spatiëring en elementen op een pagina. Dan hebben we de kwestie van het instellen van een basislijnraster, dat aansluit bij het vaststellen van verticaal ritme. We hebben zelfs gesproken over het gebruik van ems als meeteenheid, tweemaal in feite. Al deze aspecten van typografie zijn verbonden door de fundamentele aanwezigheid van grootte, dus hoe bepaal je precies hoe groot je typografische elementen moeten zijn?
De term modulaire schaal verwijst naar een reeks harmonieuze waarden. Omdat het een schaal is, is elke waarde een factor van de andere en ziet het er ongeveer zo uit:
Als we deze schaal toepassen op enkele standaard typografische CSS, kunnen we het volgende krijgen:
h1 font-size: 36px h2 font-size: 24px h3 font-size: 18px h4 font-size: 14px p font-size: 11px small font-size: 9px
Je zou deze waarden kunnen herkennen als onderdeel van de klassieke modulaire schaal, geïllustreerd door Robert Bringhust in The Elements of Typographic Style.
Een modulaire schaal, zoals een muziekschaal, is een vooraf afgesproken reeks harmonieuze verhoudingen.
Robert Bringhurst
Door je aan deze schaal te houden en je verschillende typografische stukjes en beetjes in te stellen op de getoonde waarden, krijgen ze een inherente schoonheid; verhoudingen die eeuwenlang hebben gewerkt voor typografische ontwerpers.
Dat klopt, eeuwen.
In feite kwam de oorsprong van het vaststellen van een typografische schaal evenzeer uit een praktische behoefte als een esthetisch oordeel. In de onstuimige dagen van het zetten van gieterijmetaal, toen elke lettervorm werd gegoten als een metalen blok (een soort genoemd), was het onpraktisch, te duur, om hele tekensets van elk lettertype te produceren en op te slaan, in alle verschillende gewichten, in alle mogelijke maten.
Setters hebben zich daarom in de loop van de tijd gevestigd op een bruikbare reeks maten die harmonieus samenwerkten.
Laten we een eenvoudige schaal opzetten voor gebruik in onze eigen projecten.
We moeten ergens beginnen, dus we beginnen met een significant basisnummer; onze lettergrootte. Ik heb de gewoonte om te beginnen met wat de browser dicteert als standaard, dus gebruiken we 16px als onze basis. Tim Brown raadt aan te beginnen met de lettergrootte waarmee je lettertype het meest scherp wordt weergegeven - vaker wel dan niet, dat is 16px voor lettertypen die zijn ontworpen met het web in gedachten.
(Sorry, dat was de enige quote die ik kon bedenken om te bevatten verhouding.)
Dus nu moeten we een ratio vaststellen, een waarde waarmee we exponentieel vermenigvuldigen en onze basiswaarde verdelen. Deze verhouding kan zijn wat je wilt; als je een schaal hebt die specifieke schoonheid in je ogen heeft, is dat prima.
U kunt bijvoorbeeld gaan voor de gouden sectie 1: 1.61803398875. Deze verhouding heeft zijn wortels in het weefsel van de wereld om ons heen en is door ontwerpers en architecten gebruikt om de esthetische harmonie te structureren sinds ... voor altijd.
Om te illustreren wat er gemakkelijk aan de hand is, gebruiken we 1: 2 (de musical onder jullie, die overigens niet van mij is, zal dit als een octaaf herkennen). Te beginnen met 16 krijgen we het volgende:
16 * 2 = 32 32 * 2 = 64 64 * 2 = 128
En dit kan exponentieel doorgaan. Om onze schaal naar beneden te bepalen, delen we:
16/2 = 8 8/2 = 4 4/2 = 2
Dit geeft ons het begin van onze schaal:
die we kunnen toepassen op onze eenvoudige typografische CSS zoals zo:
h1 font-size: 256px h2 font-size: 128px h3 font-size: 64px h4 font-size: 32px p font-size: 16px small font-size: 8px
Geweldig werk tot nu toe!
Deze schaal is vrij extreem. Het werkt, maar voor metingen op een webpagina is het behoorlijk meedogenloos. Om onszelf meer flexibiliteit te gunnen, laten we onszelf meer opties geven door een tweede dimensie aan de schaal toe te voegen, een proces dat Tim Brown in zijn A List Apart-artikel beschrijft Meer betekenisvolle typografie.
Kies een ander nummer. Elk nummer, zolang het maar een betekenis heeft voor uw ontwerp. We hebben er al 16 gebruikt omdat het onze basistekstgrootte is, dus laten we dit complimenteren door 95 toe te voegen, de breedte van een enkele kolom die ik in deze fictieve lay-out van 1,140 pixels breed zal gebruiken.
Tip: Er kunnen veel aspecten van uw ontwerp zijn die van belang zijn; afmetingen en afmetingen die door de hele lay-out resoneren. Experimenteer met de waarden die u kiest, u kunt verbaasd zijn over welke verhoudingen voelen rechts.Als we de verhouding van 1: 2 tot 95 toepassen, krijgen we de volgende schaal:
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
Dus nu hebben we twee schalen, beide gebaseerd op dezelfde ratio, die daarom best goed naast elkaar bestaan:
We kunnen ze zelfs combineren om ons een schaal als deze te geven:
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
Dit vult de gaten voor ons, waardoor onze schaal veel completer lijkt.
We hebben al genoemd hoe we onze schaal kunnen toepassen op elementaire typografische elementen, dus laten we dat updaten.
h1 font-size: 64px h2 font-size: 47.5px h3 font-size: 32px h4 font-size: 23.75px p font-size: 16px small font-size: 8px
Daar gaan we, niet zo intens. Onze schaal kan zich ook lenen voor andere typografische kenmerken, zoals de lijnhoogte en dus het hele basislijnraster:
p font-size: 16px; regelhoogte: 23.75 px; marge: 0 0 16px 0;
En we kunnen dit allemaal verbeteren door ook ems te gebruiken, waardoor relaties en proporties netter worden:
body font-size: 100%; p font-size: 1em; regelhoogte: 1.484; marge: 0 0 1em 0;
Als je momenteel worstelt met de berekeningen, ga je naar de modulaire schaal van Tim Brown. Zijn rekenmachine zal automatisch de pixel en em-waarden voor u uitrollen.
Ter vergelijking: hier ziet onze schaal eruit qua ems (met andere woorden, ten opzichte van de basislettergrootte):
64 47,5 32 23.75 16 11.875 8 5.938 4 2.969 2 1.484 1 0.742 0.5 0.371 0.25 0.186 0.125 0.093
Nadat we de elementaire elementen van onze pagina hebben aangepakt, laten we onze aandacht richten op een of andere structuur. Een eenvoudige stapel van twaalf kolommen is eenvoudig te maken:
.kolom-1 width: 95px; * .column-2 width: 190px; * .column-3 width: 285px; .column-4 width: 380px; * .column-5 width: 475px; .column-6 width: 570px; .column-7 width: 665px; .column-8 width: 760px; * .column-9 width: 855px; .column-10 width: 950px; .column-11 width: 1045px; .column-12 width: 1140px; / * in een vloeistofraster, zouden deze worden geconverteerd naar% waarden * /
U herkent de waarden met een sterretje ernaast op onze modulaire schaal.
Elke kolom moet ook zweven, plus om de goten te vormen, kunnen we wat opvulling toevoegen aan elk van 1em (16px, dat ook in onze schaal staat).
/ * past een natuurlijk dooslay-outmodel toe op alle elementen * / *, *: before, *: after -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; .column float: left; opvulling: 0 1em;
Al snel hebben we de basis gelegd voor een solide grid plus typografie, allemaal gebaseerd op een harmonieuze schaal.
Het combineren van netwerken met typografie kan een complexe aangelegenheid zijn; het berekenen van de harmonie kan soms heel onintuïtief lijken! Als u eenmaal bent begonnen met een paar basisrelaties, zult u merken dat u geen webpagina kunt opmaken zonder enige betekenis voor de relaties op uw pagina's..
Wat we tot nu toe hebben gedaan, is een goed begin, maar er moet nog veel meer worden gedaan en er moet nog veel worden bijgestuurd. Het basislijnraster kan bijvoorbeeld een beetje lastig zijn om vanaf dit punt te bouwen, dus het kan zijn dat sommige van de beginwaarden niet werken. Daarnaast willen we waarschijnlijk dat ons raster flexibel is, zodat de kolommen de vaste waarden die we oorspronkelijk gebruikten niet behouden. Om deze reden kan het zijn dat onze horizontale waarden niet altijd werken met onze verticale metingen.
Er zijn gevestigde schalen en roosters, beproefd en getest door de eeuwen heen. Waarom probeer je sommige ervan niet toe te passen op je eigen werk? Heb je ooit een bewuste modulaire schaal toegepast op je werk? Zo niet, hoe bepaalt u dan uw typografische dimensionering? Zijn er specifieke problemen die u tegenkomt met schalen? Laten we uw mening horen in de opmerkingen!
Accentsconagua