Spatiul in arta tipografica este ca si timpul in muzica. Este divizibil la infinit, dar doar cateva intervale proportionale pot fi mai folositoare decat toate cantitatile arbitrare in numar nelimitat.

Asa spune Robert Bringhurst typographer, si cum folosirea regulata a timpului produce ritmul in muzica, asa folosirea regulata a spatiilor produce ritm in arta tipografica, si fara ritm ascultatorul, sau cititorul, devine dezorientat si pierdut.

Pe web, ritmul vertical – spatierea si aranjarea textului in timp ce cititorul parcurge pagina – este realizat cu trei factori: marimea fontului, inaltimea randului (line-height) si margin sau padding. Toti acesti factori trebuie calculati cu atentie pentru ca ritmul sa se pastreze.

Unitatea de baza a spatierii pe vertical este line-height. Stabilirea unui line-height potrivit care poate fi aplicat intregului text din pagina, ca e titlu (heading), text din body sau text secundar (sidenote), este cheia unui ritm solid, care va ghida cititorul in jos pe pagina. Pentru a vedea acest lucru in actiune, am creat un exemplu cu titlu, footnotes si sidenotes.

Stabilirea unui line height potrivit

Cel mai usor loc pentru a incepe stabilirea unui line-height de baza este cu marimea fontului textului din body. De exemplu eu am ales 12px. Pentru a asigura lizibilitatea textului din body vom avea cu siguranta nevoie de leading, spatiul intre randuri. Un line-height de 1.5em rezulta un spatiu intre randuri de 6px la textul din body. In total iese o inaltime de 18px, care devine unitatea noastra de baza. Asa arata CSS-ul nostru pana acum:

body {
   font-size: 75%; 
}

html>body {
   font-size: 12px; 
}

p {
   line-height 1.5em; 
}

Exista multe modalitati pentru a scala textul in CSS iar abordarea de deasupra furnizeaza o metoda accesibila pentru a realiza o precizie la nivel de pixel necesara unei typography solide. Primul font-size reduce marimea fontului din body de la 16px default (valabil la majoritatea browser-erelor si sistemelor de operare) la 12px cat avem noi nevoie. Aceasta regula este in special acolo pentru Internet Explorer 6 si mai jos pe Windows: aceste procentaje inseamna ca textul se va scala in cazul in care userul mareste sau reduce marimea fontului. Al doilea font-size defapt stabileste marimea fontului si este ignorat de Internet Explorer 6, dar folosit de Firefox, Safari, IE7, Opera si alte browser-e moderne care permit utilizatorului sa scaleze textul setat in pixeli.

Spatierea intre paragrafe

Cu unitatea noastra ritmica setata la 18px trebuie sa ne asiguram ca se pastreaza pe intregul text din body. Cel mai probabil loc pentru a pierde ritmul este la decalajul intre margin. Browser-ele percep paragrafele cu un margin-bottom si margin-top de 1em. In cazul nostru acest lucru ar creea un spatiu intre paragrafe de 12px si prin urmare ar scoate textul din ritm. Daca vrem sa mentinem ritmul in pagina, spatiul intre paragrafe trebuie corelat cu spatiul de baza a unitatii de line-height. Acest lucru il obtinem usor, setand margin-top si margin-bottom egal cu inaltimea liniei.

Pentru a mentine integritatea tipografica cand textul este scalat de catre utilizator trebuie sa folosim ems pentru toate masurile verticale, inclusiv line-height, padding si margin.

p {
   font-size: 1em;
   margin-top: 1.5em;
   margin-bottom: 1.5em; 
}

Browser-ele aplica margin la toate elementele de tip block (titluri, liste si blockquotes) in consecinta pentru a ne asigura ca aplicam acelasi tratament la toate astfel de elemente, cel mai bine e sa resetam margin-ul la inceputul CSS-ului. Poti folosi o regula de genul urmator:

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

Ca alternativa poti incerca sa folosesti CSS-ul Yahoo! UI Reset care elimina cele mai generale stiluri, astfel furnizeaza o fundatie solida peste care poti sa-ti exprimi clar intentiile de design.

Variatii in marimea textului

Cand apare schimbarea de marime la text, poate la titlu sau la textul secundar, textul modificat trebuie sa pastreze acelasi leading sau un multiplu al acestuia. Asta inseamna, in exemplul nostru, ca fiecare deviere de la textul de baza trebuie sa foloseasca un multiplu de 18px. Acest lucru se rezolva prin ajustarea a line-height si margin corespunzator, dupa cum urmeaza.

Titluri (headings)

Subtitlurile in pagina exemplu sunt setate la 14px. Ca inaltimea fiecarei linii sa fie 18px, line-height trebuie setat la 18 ÷ 14 = 1.286. Deasemenea margin-ul deasupra si dedesubt de heading trebuie ajustat corespunzator. Tentatia e sa setam margin-ul la 1em, dar pentru a pastra ritmul, margin-top si margin-bottom trebuie setat la 1.286em pentru a mentine sptierea la 18px.

h2 {
   font-size: 1.1667em;
   line-height: 1.286em;
   margin-top: 1.286em;
   margin-bottom: 1.286em;
}

Putem folosi margin si asimetric, pentru titluri, unde margin-ul combinat rezulta un multiplu al unitatii de line-height. In exemplul nostru, margin-ul de sus de 1½ din linie e combinat cu margin de jos de jumatate de linie, dupa cum urmeaza:

h2 {
   font-size: 1.1667em;
   line-height: 1.286em;
   margin-top: 1.929em;
   margin-bottom: 0.643em; 
}

Deasemenea in exemplu, titlul principal este de 18px, asa ca line-height este setat la 1em, la fel ca si margin-ul:

h1 {
   font-size: 1.5em;
   line-height: 1em;
   margin-top: 0;
   margin-bottom: 1em;
}

Textul secundar (sidenotes)

Sidenotes (sau orice alt text auxiliar) este deobicei setat la o marime mai mica fata de textul de baza. Pentu a pastra ritmul, acest text mai mic tot trebuie sa se alinieze cu textul din body, astfel un calcul similar cu cel de la titluri este necasar. In exemplul nostru, textul secundar este setat la 10px si astfel line-height trebuie majorat la 18 ÷ 10 = 1.8.

.sidenote {
   font-size:0.8333em;
   line-height:1.8em; 
}

Marginile (borders)

Un punct unde ritmul vertical este deobicei pierdut este la introducerea border-erelor orizontale. Ele actioneaza ca si insertii impingand textul in jos, astfel un border de doi pixeli va decala ritmul cu doi pixeli. O metoda ocolitoare este de a folosi imagini de background pe post de linii orizontale sau, ca si in exemplul nostru, specifica latimea border-ului in ems si ajusteaza padding-ul pentru a compensa lipsa.

Designul footnote-ului in exemplul nostru necesita un border orizontal de 1px. Footnote-ul foloseste text de marime 12px, astfel 1px in ems e 1 ÷ 12 = 0.0833. Am adaugat un margin de 1½ din inaltimea liniei deasupra border-ului (1.5 × 18 ÷ 12 = 2.5ems), pentru a pastra ritmul, border + padding trebuie sa rezulte ½ (9px). Stim ca border-ul este setat la 1px, astfel padding-ul il setam la 8px. Pentru a transforma asta in ems folosim calculul deja familiar: 8 ÷ 12 = 0.667.

Bagheta ritmica

Compunand intr-un ritm vertical ajuta la ghidarea cititorul in josul paginii, dar este nevoie de disciplina tipografica pentru a obtine acest ritm. La prima vedere pare ca e nevoie de multa matematica migaloasa (cateva impartiri si inmultiri nu strica nimanui) dar stabilirea unor rapoarte inseamna cifre, iar aceasta atentie pentru detalii este cheia succesului.

autor: Richard Rutter pe 12 Decembrie, 2006
sursa: http://24ways.org/2006/compose-to-a-vertical-rhythm

  • Reddit
  • StumbleUpon
  • del.icio.us
  • Digg
  • Twitter