ambiente di test per design.italia.it

Tipografia

Web font

Le Web font sono famiglie di caratteri tipografici la cui licenza d’uso permette il download remoto per la loro visualizzazione in pagine web. Introdotte dalla versione CSS2 con la dichiarazione @font-face, le Web font sono oggi pienamente compatibili con la maggioranza dei browser (IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+, Chrome 4.0+) e costituiscono la soluzione più efficace per una coerente composizione tipografica. Google Fonts è una piattaforma di distribuzione gratuita di Web font.

Titillium Web

Il carattere tipografico istituzionale è la famiglia di font Titillium Web, realizzato come progetto didattico all’interno all’Accademia di Belle Arti di Urbino e distribuito con licenza Open Font da Google Fonts. La famiglia di caratteri Titillium Web è composta da numerose font di diversi pesi tipografici (dall’Extra-Light all’Ultra-Bold) garantendo così un’estrema flessibilità di utilizzo nelle composizioni dei testi.

Specimen della famiglia Titillium Web

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo extra light

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo extra light italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo light

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo light italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo normal

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo normal italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo semi bold

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo semi bold italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo bold

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo bold italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo ultra-bold

SI PUÒ Per la realizzazione dei siti è consigliato l’utilizzo del carattere Titillium Web, ma qualunque altra Web font che garantisca la leggibilità e un’analoga ampiezza di pesi tipografici può essere usata.

Dimensioni e interlinea del testo

SI DEVE Un paragrafo di testo non deve mai essere composto in una dimensione inferiore a 12px. La dimensione standard del paragrafo di testo è prevista in 18px. Un paragrafo di testo deve essere composto sempre nel peso Regular, mai in Light o Bold. L’interlinea avrà generalmente una dimensione pari a circa il 150% della dimensione del corpo del carattere (per esempio un testo in corpo 18px avrà un’interlinea di 27px).

Allineamento

SI DOVREBBE Un paragrafo di testo deve essere preferibilmente composto con allineamento a sinistra. Sono generalmente sconsigliati gli allineamenti centrati (a epigrafe) e a destra. L’allineamento giustificato e senza sillabazione è invece sempre da evitare per l’incongrua spaziatura delle parole e la minore leggibilità che comporta.

Giustezza

SI DEVE Ogni riga di testo non deve mai superare la lunghezza massima di 75 caratteri.

Markup semantico

SI DEVE L’uso dei tag semantici consente di venire incontro ai requisiti di accessibilità, permettendo la corretta interpretazione del testo da parte dei device di ausilio alla lettura.

Composizione tabelle

In genere nelle tabelle un corretto allineamento del testo e una giusta spaziatura fra le colonne e le righe sono già in grado di creare la percezione delle strutture verticali e orizzontali che sottostanno al contenuto, rendendo superflua la presenza di molte delle linee divisorie o dei fondini di cella.

Una tabella leggera (meno linee, meno colori) permette di concentrarsi meglio sul contenuto.

Esempio di tabella con CSS di default

Esempi di buona impaginazione delle tabelle

Esempi di cattiva impaginazione delle tabelle

Formattazioni consigliate

H1 Titolo

Titolo pagina: Titillium bold - corpo 54px, interlinea 1.2

H2 Titolo

Titolo sezione: Titillium bold - corpo 40px, interlinea 1.2

H3 Titolo

Titolo articolo: Titillium bold - corpo 32px, interlinea 1.2

H4 Titolo

Titolo paragrafo: Titillium bold - corpo 23px, interlinea 1.2
H5 Titolo
Testo grande: Titillium normal - corpo 21px, interlinea 1.2
H6 Titolo
Titoletto: Titillium bold - corpo 18px, interlinea 1.55

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo che pur vivono. Non ne sarò l'artefice impaziente

Testo standard: Titillium normal - corpo 18px, interlinea 1.55

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo. Non ne sarò l'artefice impaziente

citazione: Titillium normal - corpo 18px, interlinea 1.55

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo che pur vivono. Non ne sarò l'artefice impaziente

testo minimo: Titillium normal - corpo 15px, interlinea 1.55

Colore del testo

Generalmente il colore del testo deve essere nero (#1C2024) o grigio (#5A6772) su fondo bianco (#FFFFFF). Viceversa per le composizioni in negativo. Dove necessario possono essere usati colori diversi dal nero e dal grigio purché sia garantito un rapporto di contrasto minimo tra testo e sfondo di 4,5:1 (AA), come stabilito dalle specifiche di accessibilità. La verifica del rapporto di contrasto può essere facilmente effettuata attraverso molti tool online.

SI DOVREBBE Per una maggiore coerenza della user experience si suggerisce, per quanto riguarda i testi, l’adozione del seguente sistema cromatico.
  • Colore testo principale
  • Colore testo secondario
  • Colore testo evidenziato
  • Colore sfondo 1
  • Colore alert

Legature e crenatura

La leggibilità del testo, nelle versioni dei browser più recenti, può essere migliorata con l’utilizzo della dichiarazione text-rendering: optimizeLegibility che attiva il controllo della crenatura del testo e la sostituzione automatica dei glifi delle legature. Attualmente la dichiarazione è riconosciuta in Safari 5 e Chrome. Firefox applica automaticamente la dichiarazione per i testi composti in corpo superiore a 20 px. Utilizzando una font OpenType possono esserne sfruttate le opzioni per le legature comuni e discrezionali con la dichiarazione font-featuresettings: “liga” 1, “dlig” 1.


Crediti

Il testo utilizzato per le prove di composizione è tratto dalla poesia
La città nuova di Alda Merini

La città nuova
Ecco un bianco scenario
per tratteggiarvi l’accompagnamento
degli oggetti di sfondo che pur vivono.
Non ne sarò l’artefice impaziente.
Berrò alle coppe della nostalgia,
avrò preteso d’ozio nelle lacrime...
perché non mi ribello alla natura:
la mia lentezza li esaspera...
La mia lentezza? No, la mia fiducia.
Per adesso è deserto.
Il mondo può rifarsi senza me,
E intanto gli altri mi denigreranno

28 dicembre 1948 - La Presenza di Orfeo

l'ultima modifica di questa pagina risale a 15 giorni fa

torna all’inizio del contenuto
torna all'inizio del contenuto