Share
Probabil cea mai evidentă întrebare tipografică din mâinile unui designer este "ce tipografii ar trebui să folosesc?" Cea de-a doua întrebare, care rareori primește acea atenție pe care trebuie să o aibă, este "la ce mărimi aș fi așezat tipul meu?" Stabilirea unei scări modulare este cea mai bună metodă de a determina dimensiunile tipografice, de fapt, poate ajuta la stabilirea măsurătorilor și a proporțiilor în întregul aspect al paginii.
În această sesiune am analizat ierarhia; modul în care dimensiunea și alți factori pot influența relația vizuală a elementelor tipografice. De asemenea, am analizat recent ritmul vertical, consistența vizuală a spațiului și a elementelor de pe o pagină. Apoi, avem problema stabilirii unei rețele de referință, care se leagă de stabilirea ritmului vertical. Am vorbit despre utilizarea ems ca unitate de măsură, de două ori de fapt. Toate aceste aspecte ale tipografiei sunt legate de prezența fundamentală a mărimea, deci cum să decideți cât de mari ar trebui să fie elementele dvs. tipografice?
Termenul Modular Scale se referă la o serie de valori armonioase. Fiind o scară, fiecare valoare este un factor al celorlalți și poate arăta așa:
Aplicând această scală la unele CSS tipografice de bază, am putea obține:
h1 font-size: 18px h4 font-size: 18px h4 font-size:
S-ar putea să recunoașteți aceste valori ca făcând parte din scala modulară clasică, ilustrată de Robert Bringhust în The Elements of Typographic Style.
O scară modulară, la fel ca o scală muzicală, este un set de proporții armonioase preordonate.
Robert Bringhurst
Prin aderarea la această scală și stabilirea diferitelor dvs. biți și bucăți tipografice la valorile afișate, ei vor avea o frumusețe inerentă; proporții care au lucrat timp de secole pentru designerii tipografici.
Asta-i bine, secole.
În realitate, originea stabilirii unei scări tipografice a venit la fel de mult ca o necesitate practică ca o judecată estetică. În zilele fericite de tipărire a metalelor de turnătorie, atunci când fiecare foaie de scris a fost aruncată ca un bloc metalic (numit un fel), era impracticabilă, prea scumpă, să se producă și să se păstreze seturi întregi de caractere ale fiecărei litere, în toate greutățile, dimensiuni.
De aceea, tipografii s-au stabilit, pe parcursul timpului, pe o gamă utilizabilă de dimensiuni care au lucrat împreună armonios.
Să stabilim o scară simplă, pentru a fi utilizată în propriile noastre proiecte.
Trebuie să începem undeva, așa că vom începe cu un număr de bază semnificativ; dimensiunea fontului de bază. Sunt obișnuit să încep de la orice dictează browserul ca fiind implicit, așa că vom folosi ca bază 16px. Tim Brown recomandă să începeți cu dimensiunea fontului la care textul dvs. este afișat cel mai clar - mai des decât nu, care va fi de 16 pixeli pentru fonturile concepute cu ajutorul webului.
(Scuze, a fost singurul citat pe care mi-l puteam gândi să îl conțin raport.)
Deci, acum trebuie să stabilim un raport, o valoare prin care vom multiplica exponențial și vom împărți valoarea de bază. Acest raport poate fi orice doriți; dacă ai o scară care are o frumusețe specifică în ochii tăi, e bine.
Ați putea, de exemplu, să mergeți la secțiunea de aur 1: 1.61803398875. Acest raport își are rădăcinile în chiar țesătura lumii din jurul nostru și a fost folosit de designeri și arhitecți pentru a structura armonie estetică de când ... pentru totdeauna.
Pentru a ilustra ceea ce se întâmplă cu ușurință, vom folosi 1: 2 (muzicalul dintre voi, care nu mă apropie de mine, o va recunoaște ca fiind o octavă). Începând cu 16 ani, obținem următoarele:
16 * 2 = 32 32 * 2 = 64 64 * 2 = 128
Și acest lucru poate continua exponențial. Pentru a ne stabili scara în jos, împărțim:
16/2 = 8 8/2 = 4 4/2 = 2
Acest lucru ne oferă începutul scalei noastre:
pe care le putem aplica la CSS-ul nostru simplu tipografic cum ar fi:
h1 font-size: 256px h2 font-size: 128px h4 font-size:
Muncă minunată până acum!
Această scală este destul de extremă. Funcționează, dar pentru măsurători pe o pagină web este destul de neiertător. Pentru a ne permite mai multă flexibilitate, să ne oferim mai multe opțiuni prin adăugarea unei dimensiuni secundare la scară, un proces prezentat de Tim Brown în articolul lui A List Apart More Significant Typography.
Alege un alt număr. Orice număr, atâta timp cât are o semnificație pentru designul tău. Am folosit deja 16 deoarece este dimensiunea fontului de bază, așa că haideți să complimentăm faptul că adăugând 95, lățimea unei singure coloane pe care o voi folosi în acest aspect fictiv de lățime de 1,140 de pixeli.
Bacsis: Pot exista mai multe aspecte ale designului dvs. care dețin semnificație; măsurătorile și dimensiunile care rezonează pe toată structura. Experimentați cu valorile pe care le alegeți, ați putea fi surprinși în ceea ce privește proporțiile simți dreapta.Aplicând raportul de la 1: 2 la 95, obținem următoarea scală:
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
Deci, acum avem două scale, ambele pe baza aceluiași raport, care, prin urmare, coexistă destul de frumos:
De fapt, le putem combina, pentru a ne da o scară ca aceasta:
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
Acest lucru umple golurile pentru noi, făcând scara noastră să pară mult mai completă.
Am menționat deja modul în care putem aplica scala noastră elementelor tipografice de bază, deci să le actualizăm.
h1 font-size: 64px h2 font-size: 32px h4 font-size:
Mergem, nu atât de intens. Scala noastră se poate imprima și altor caracteristici tipografice, cum ar fi înălțimea liniei și, prin urmare, întreaga rețea de referință:
p font-size: 16px; linia-înălțime: 23.75px; marcă: 0 0 16px 0;
Și putem îmbunătăți toate aceste lucruri și prin utilizarea ems, făcând relațiile și proporțiile mai exacte:
corp font-size: 100%; p font-size: 1em; înălțimea liniei: 1.484; marja: 0 0 1em 0;
Dacă te lupți cu calculele în acest moment, du-te pe Scala modulară a lui Tim Brown. Calculatorul său va scoate în mod automat valorile pixelilor și em pentru tine.
Pentru referință, iată cum arată scara noastră în ceea ce privește ems (cu alte cuvinte, în raport cu dimensiunea fontului de bază):
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
După ce am abordat elementele de bază ale paginii noastre, să ne îndreptăm atenția către o anumită structură. Un simplu set de douăsprezece coloane este ușor de stabilit:
.coloana-1 lățime: 95px; * coloana 2 (lățime: 190px); *. coloana-3 lățime: 285px; .colo-4 (lățime: 380px); * .colna-5 lățime: 475px; .colo-6 (lățime: 570px); .colo-7 lățime: 665px; .colo-8 lățime: 760px; * .colna-9 lățime: 855px; .colna-10 lățime: 950px; .colo-11 lățime: 1045px; ; coloana-12 lățime: 1140px; / * într-o rețea cu fluid, acestea ar fi convertite în% valori * /
Veți recunoaște valorile cu un asterisc de lângă acestea, ca în scala modulară.
Fiecare coloană va trebui să plutească prea mult, plus, pentru a forma jgheaburile, putem adăuga niște cearceafuri la fiecare dintre cele 1 (16 pixeli, care, de asemenea, apar în scara noastră.)
/ * aplica un model de aspect cutie naturala tuturor elementelor * / *, *: inainte, *: dupa -moz-box-size: box-border; -webkit-box-size: caseta de frontieră; box-size: caseta de margine; coloană float: left; umplutura: 0 1em;
Foarte repede am pus bazele unei rețele solide, plus tipografie, toate bazate pe o scară armonioasă.
Combinarea rețelelor cu tipografia poate fi o afacere complexă; calcularea armoniei poate părea foarte neintenționată uneori! Odată ce ați început cu unele fundamente de bază, totuși, veți găsi că nu puteți structura o pagină web fără nici un fel de sens la relațiile de pe paginile dvs..
Ceea ce am făcut până acum este un început bun, dar mai sunt încă multe de făcut și multe reglaje fine. Grilă de bază, de exemplu, ar putea fi un pic ciudat pentru a construi din acest punct, astfel încât s-ar putea să găsiți că unele din valorile inițiale nu funcționează. În plus, probabil că rețeaua noastră ar fi flexibilă, astfel încât coloanele să nu păstreze valorile fixe pe care le-am folosit inițial. Din acest motiv, puteți găsi că valorile orizontale nu funcționează întotdeauna cu măsurătorile noastre verticale.
Există scale și grile stabilite, încercate și testate de-a lungul vremurilor. De ce nu încercați să aplicați unele dintre ele la propria dvs. activitate? Ați aplicat vreodată o scară modulară deliberată pentru munca dvs.? Dacă nu, cum decideți cu privire la dimensiunea tipografică? Există probleme specifice pe care le întâmpinați cu scale? Să vă auzim gândurile în comentariile dvs.!
Accentsconagua