Ritmo verticale

Questo arti­colo su Opera Dev mi dato lo sti­molo per scri­vere qual­che appunto un po’ più com­pleto sulle gri­glie per la base­line del testo (uso i ter­mini in inglese quando non cono­sco i cor­ri­spon­denti cor­retti in ita­liano), in par­ti­co­lare quando usiamo un fra­mework per i CSS come YUI.

La prime cose da deci­dere sono la font-size e line-height; con YUI, i valori sono: font-size: 13px e line-height: 1.231em (ovvero, 16px). In altri arti­coli ho visto appli­care un valore del 150%; con YUI avremmo 19.5px, che pos­siamo otte­nere, appros­si­mando, con 146.5% (19px) o 153.9% (20px), ma per que­sto arti­colo usiamo il default.

L’idea di base è che una volta scelto, que­sto valore sarà la nostra unità di base per cal­co­lare pad­ding, mar­gin e line-height, in modo che l’altezza com­ples­siva di un ele­mento sia sem­pre un suo mul­ti­plo di tale unità.

Paragrafi e altri block elements

Per ele­menti come p basta com­pen­sare il valore di 1em asse­gnato di default dai bro­w­ser ai margini:

p {
  margin-top: 16px;
  margin-bottom: 16px;
}

Liste

Per le liste dob­biamo deci­dere, even­tual­mente caso per caso, se spe­ci­fi­care il trat­ta­mento per ogni sin­gola riga, e quindi rica­dere negli esempi visti prima, o con­si­de­rare la lista come blocco unico; in que­sto caso basterà spe­ci­fi­care margin-bottom.

Immagini e callouts

Per gli altri ele­menti, dob­biamo deci­dere in base alla pos­si­bi­lità o meno di sapere in anti­cipo l’ingombro ver­ti­cale: di un’immagine pos­siamo sta­bi­lire che dovrà essere alta, ad esem­pio, 80px (ovvero, un mul­ti­plo di 16) e quindi essere certi che non rom­perà il ritmo ver­ti­cale; per gli ele­menti varia­bili come bloc­chi di testo in cal­lout, se gli ele­menti all’interno rispet­tano già la misura stan­dard, dob­biamo solo accer­tarci che la somma di mar­gin, pad­ding e bor­der siano anch’essa un multiplo:

.callout {
  border: 1px solid #ddd;
  padding: 7px 10px;
  margin-bottom: 16px;
}

Infatti: bor­der top + pad­ding top + pad­ding bot­tom + bor­der bot­tom = 16px.

Nel caso delle imma­gini, se vogliamo anche cal­co­lare la pos­si­bi­lità che l’utente possa ridi­men­sio­nare il testo, pos­siamo spe­ci­fi­care le dimen­sioni dell’immagine in em, in que­sto caso, 5em.

Quindi, quando le dimen­sioni del testo non variano basta lavo­rare sui para­me­tri del box model: mar­gin, bor­der e padding.

Variazioni su line-height

Invece, tutte le volte che cam­biamo font-size si pone il pro­blema di cosa fare con il valore di line-height. Su OperaDev quest’ultimo non viene nem­meno variato e si lavora solo sul box model; nell’arti­colo di A List Apart, con­si­gliano di usare sem­pli­ce­mente dei mul­ti­pli del valore di base per i titoli ma non dicono nulla sulla pos­si­bi­lità di avere dei cal­lout in cui la dimen­sioni del testo è minore di quel valore; in 24 Ways, il valore di line-height per i titoli viene otte­nuto divi­dendo il valore di base per font-size e appli­cando lo stesso metodo anche ai cal­lout in modo da otte­nere sem­pre una gri­glia omo­ge­nea — tut­ta­via non dicono nulla sul pro­blema di una line-height troppo pic­cola quando i titoli scor­rono su più righe; infine, Mark Boulton pro­pone un miglio­ra­mento per i cal­lout ma pur­troppo non dice nulla sui titoli.

Che fare? Questi sono i valori che ho usato per il file di esem­pio di gri­glia per ritmo ver­ti­cale:

h1 {
    font-size: 24px;
    line-height: 0.6667em;
    margin-bottom: 0.6667em;
    margin-top: 1.3334em;
}
h2 {
    font-size: 19px;
    line-height: 1.2631em;
    margin-bottom: 0.8421em;
    margin-top: 0.8421em;
}
h3 {
    font-size: 18px;
    line-height: 0.8889em;
    margin-bottom: 0.8889em;
    margin-top: 0.7778em;
}

In pra­tica ho usato la divi­sione, tranne che per l’h2, dove, a causa del testo che scorre su più righe, il valore di line-height era troppo basso e quindi l’ho mol­ti­pli­cato per 1,5, otte­nendo un box di 48px.

Considerazioni simili pos­sono essere fatte per bloc­chi di testo con un valore di font-size infe­riore a quello base, come nei cal­lout: pos­siamo fare in modo che ogni riga stia nella gri­glia stan­dard o fare in modo che sia pro­por­zio­nale alle dimen­sioni del testo nel callout.

Nel primo caso line-height viene incre­men­tato tra­mite la for­mula: line-height stan­dard / dimen­sione testo cal­lout. Nel secondo caso dob­biamo prima deci­dere il rap­porto, fra numero di righe del testo prin­ci­pale e quello del cal­lout e poi fare qual­che cal­colo. Se vogliamo che ogni quat­tro righe di testo “stan­dard” ci siano cin­que righe di cal­lout, allora il valore di line-height sarà: line-height stan­dard * 4 / 5, ovvero, 12.8 px. Tuttavia va ricor­dato che dovremo anche aggiu­stare (a occhio) il valore di margin-top.

Strumenti utili

Se con­si­de­riamo ogni caso sin­go­lar­mente, gli accor­gi­menti descritti non sono dif­fi­cili da seguire ma quando lavo­riamo su una pagina nel suo insieme può venire utile qual­che strumento.

Per FireFox, oltre ai clas­sici come Firebug e Web Developer, ho tro­vato utile Gridfox.

Altri post sull’argomento

• Ritmo ver­ti­cale nelle pagine web
• Ritmo ver­ti­cale con le note a margine