Leggerai questo articolo in: 3 minuti

Oggi voglio proporti un interessante argomento che ho letto in questi giorni in un famoso ebook di Ethan Marcotte, sto parlando di Responsive Web Design.

Come esprimere le dimensioni del testo in modo flessibile utilizzando em

Vorrei concentrarmi su un capitolo in particolare intitolato “Flexible Typesetting” in cui con un semplice esempio viene mostrato un concetto alla base dei template responsive, nel caso specifico sul testo ma come vedremo lo stesso ragionamento può essere riportato su qualsiasi elemento del nostro sito.

Cos’è un sito responsive?
Per responsive web design si intende un layout in grado di adattare le dimensioni dei suoi elementi e contenuti in base alla risoluzione e/o al dispositivo che l’utente sta utilizzando, in linea di massima senza la necessità di creare più versioni (più stili css) del sito stesso.

Perchè responsive è meglio?
Ovviamente con l’avvento di smartphone e tablet, la possibilità di navigare in mobilità è diventata una comodità alla portata di tutti e per questo motivo avere un layout che si adatti a diversi dispositivi è sicuramente un vantaggio.

Come ti dicevo voglio concentrarmi su uno dei principali aspetti da prendere in considerazione quando si sviluppa un nuovo progetto. La dimensione del testo.

Vediamo un esempio:

Un semplice tag h1 con al suo interno un tag a

1
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="#">Read more</a></h1>

Aggiungiamo un pò di stili:

1
2
3
4
body{
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;

Come puoi notare non abbiamo fatto nulla di speciale, vorrei focalizzare l’attenzione su un aspetto in particolare.

Come ti sarai accorto abbiamo impostato il font-size al 100%, questo non vuol dire altro che settare la dimensione di default del nostro testo. Di solito nei browser principali questa è 16px.

Facciamo qualche piccolo aggiustamento:

1
2
3
4
5
h1 {
font-size: 24px;
font-style:italic;
font-weight:normal;
}
1
2
3
4
5
6
7
h1 a {
color: #747474;
font: bold 11px Calibri,Optima, Arial, sans-serif;
letter-spacing: 0.15em;
text-trasform: uppercase;
text-decoration:none;
}

Non c’è nulla di sbagliato nel codice qui sopra, però il nostro scopo è quello di rendere il testo flessibile, per farlo esprimeremo la proprieta font-sizenon più in px ma in em.

Vediamo come:

Per farlo serve una semplicissima formula matematica espressa come:

  • target / context = result.

Ovvero prendiamo la nostra dimensione target (24px) dividiamola per il nostro context (16px) e otterremo la nostra misura equivalente espressa in em.

In termini pratici:

24px/16px = 1.5em

A questo punto la nostra dimensione di riferimento sarà 1.5 em. In questo modo abbiamo espresso elegantemente la nostra font-size in em.

1
2
3
4
5
h1 {
font-size: 1.5em; /* 24px / 16px */
font-style:italic;
font-weight:normal;
}

I commenti a fianco alle misure in em ci possono aiutare per rapide modifiche future.

Similmente andiamo a trasformare gli 11px del tag a in em:

In termini pratici:

11px/24px= 0.45833333333333333

Perchè dividiamo per 24?

Nell’ esempio precedente abbiamo diviso per 16px perchè il nostro “context” era body che aveva settato una dimensione per il testo di 16px. In questo caso invece il nostro “context” è cambiato!, non ci stiamo più riferendo a body ma al tag h1 che contiene il nostro tag a. Quindi il nostro “context” sarà quello di h1 ovvero 24px;

Possiamo approssimare il nostro risultato (0.45833333333333333) a 0.46em.

1
2
3
4
5
6
7
h1 a {
color: #747474;
font: bold 0.46em Calibri,Optima, Arial, sans-serif; /* 11px / 24px*/
letter-spacing: 0.15em;
text-trasform: uppercase;
text-decoration:none;
}

In questo modo ogni dimensione di un ogni elemento testuale è espresso in relazione al suo “contenitore”.

La cosa più interessante è che seppur io ti ho portato un esempio sul testo tu potrai applicare questo metodo per qualsiasi elemento all’interno del tuo sito utilizzando la solita formula:

  • target / context = result.

andando così a creare un sito completamente responsive!

Fine! ecco il risultato:

Come esprimere le dimensioni del testo in modo flessibile utilizzando em - Risultato

Puoi scaricare una demo da qui.

Ti è piaciuto questo articolo? Utilizzavi già questa tecnica?

Non dimenticare di condividerlo con i tuoi amici su Facebook, Twitter e Google+. Nella speranza di averti fornito delle informazioni utili ti auguro una splendida giornata!

 
[adsense]