paitadesignblog

HTML, CSS e tutto il resto

CSS e tipografia perfetta: consigli e risorse

La tipografia su web sta vivendo una seconda vita, da quando stanno diventando sempre più diffusi gli standard CSS3 e servizi come Cufon.
L’interesse verso la tipografia è dovuto al fatto che la maggior parte dei siti web si basano su contenuti testuali per trasmettere i loro messaggi, quindi non è una sorpresa che il testo sia trattato con la massima cura!

La tipografia è senza dubbio uno degli elementi più importanti di tutto il design, online o offline. E mentre impostare un carattere su una pagina non è complicato di per sé, se si seguono alcuni principi aumenterà notevolmente la leggibilità e l’estetica di un layout. Imparare queste linee guida può fare la differenza tra una tipografia di livello adeguato e una realmente grande.

Ma, da dove cominciare? Ecco un po’ di consigli:

CSS Font Shorthand: tutto in breve…ma in ordine!

I CSS permettono di scrivere una dichiarazione dei valori di tutte le proprietà di un selettore raggruppandoli in una regola unica, detta shorthand.
Vediamo un esempio per i font:

…che equivale a scrivere:

Come possiamo notare, invece di specificare ogni proprietà separatamente, si può fare tutto in una volta, utilizzando la proprietà shorthand (in questo caso per i font, ma l’esempio vale per tutte le proprietà).
Gli shorthand permettono ai webdesigner di risparmiare un bel po’ di linee di codice: nel primo esempio infatti abbiamo utilizzato 146 caratteri, nell’esempio con lo shorthand solo 73. Non male, vero?
Per i font l’ordine delle proprietà è il seguente:

css font shorthand cheat sheet

Utilizzare qualsiasi font? font-face!

Ultimamente gli esempi di siti web che utilizzano magnificamente la regola font-face sono numerosi.
La proprietà font-face infatti è abbastanza semplice da comprendere e utilizzare, e con una ottima compatibilità cross-browser.

CSS3 font-face: browser support

Ecco per sommi capi come funziona: carichiamo il carattere che vogliamo utilizzare per il nostro sito web (prima bisogna assicurarsi di averei permessi di licenza), diamo un nome e impostiamo la posizione del file. Per ottenere tutto questo, utilizziamo il generatore @font-face di FontSquirrel.
Il CSS che otterremo sarà simile a questo:

Abbiamo in questo modo attivato una nuova famiglia di font, che può essere richiamata per qualsiasi selettore in modo usuale, così:

Controllare le ‘orfane’ al termine di paragrafo

In termini tipografici, le orfane sono parole o frasi si trovano alla fine di una colonna o pagina.
Nei siti web, questa situazione accade molto spesso quando un testo dentro a un paragrafo viene affiancato a una immagine flottante a sinistra. Ecco cosa succede:

CSS Paragrafo con orfane: esempio

Possiamo correggere questo errore applicando al paragrafo di testo la proprietà overflow:hidden;.
Se il nostro layout, o markup, prevede una succesione di paragrafi, In alternativa, possiamo wrappare il paragrafo, o i vari paragrafi dentro un div e appliacare ad esso l’overflow.
Ecco come:

CSS e puntini di sospensione…

La proprietà text-overflow permette di controllare ciò che viene mostrato quando il testo è in eccedenza rispetto al suo contenitore.
Questa proprietà è utilissima se si desidera che tutti gli elementi di un elenco di notizie abbiano la stessa altezza, indipendentemente dalla quantità di testo: possiamo utilizzare i CSS per aggiungere puntini di sospensione (…) per indicare più testo.
Questa proprietà funziona nelle ultime versioni di Safari e Opera e in IE6 (dove l’elemento che sborda deve avere una larghezza impostata, ad esempio 100%) e IE7.
Per essere in grado di applicare la proprietà ad un elemento, esso deve avere white-space: nowrap e overflow settato su qualcosa di diverso da visible.
Per farlo funzionare anche in Opera, è necessario aggiungere la proprietà specifiche del fornitore; purtroppo, non è supportato da Firefox! Aggiornamento: adesso è possibile avere l’ellissi del testo anche su Firefox con i soli CSS!)
Ecco come impostare i CSS:

  • Safari
  • Chrome
  • Opera
  • IE6+

Web e sillabazione: si può!

Dato che, come abbiamo visto, le pagine web hanno principalmente contenuti testuali, la sfida con il rendering del testo è che il testo incolonnato o il resize della pagina può produrre effetti imprevedibili nella visualizzazione dei contenuti.

Semplicemente, hyphenator.js è uno script JavaScript che divide automaticamente il testo a interruzioni di linea (sillabe). Questo consentirà di evitare che le parole si rompano su un ritorno a capo, o di essere completamente spostate verso il basso alla riga successiva.

Ecco un esempio di pagina con sillabazione: per verificare l’effetto dello script, provate a ridimensionare la pagina, o a attivare/disattivare lo script con il tool in alto a destra.