Traduzione dell’articolo “TECHNIQUES FOR RESPONSIVE TYPOGRAPHY” del blog “CODROPS“
Uno degli aspetti più importanti del responsive web design è la tipografia reattiva.
Quando si tratta di tipo reattivo sul web, non c’è solo il ridimensionamento del contenitore del testo ma anche quello del testo al suo interno.
Dalla scelta di un tipo di font e colore, altezze di linea per raggiungere le dimensioni leggibili dei caratteri e lunghezze di linea su diverse dimensioni dello schermo, ci sono diversi modi per il raggiungimento di un testo fluido e veramente reattivo sul web.
PRIMA COSA: RENDERE IL TESTO ACCESSIBILE
Prima di parlare di tecniche per ridimensionare il testo per le diverse dimensioni dello schermo, è necessario assicurarsi che il testo sia accessibile mediante contrasto cromatico sufficiente e un font facilmente leggibile per evitare di trasformare il contenuto della pagina in qualcosa di stancante per gli occhi.
Se il testo non è contrastato , non importa quanto si ridimensiona, si avrà con un testo illeggibile, che è ovviamente l’opposto di quello che si è voluto ottenere.
Ci sono tre punti da considerare per assicurarsi che il testo sia leggibile e accessibile:
SCEGLI UN TIPO DI CARATTERE LEGGIBILE
E ‘importante quando si sceglie un tipo di carattere che se ne scelga uno leggibile.
Non tutti i tipi di font sono adatti per l’uso come tipo di corpo.
Alcuni font come font di script artistic possono essere una grande scelta per i titoli brevi, ma quando si tratta di tipo di corpo è necessario assicurarsi di scegliere un font che è facilmente leggibile.
Ci sono così tanti stili di font tra cui scegliere, e servizi come “Google Web Fonts” e “Typekit“, tra gli altri, offrono una lunga lista di opzioni fra cui scegliere, ed entrambi offrono opzioni di anteprima che può aiutare a prendere una decisione migliore su quale font scegliere .
Inoltre, la regola “@font-face” in CSS consente di utilizzare caratteri personalizzati nella pagina, e con il buon supporto del browser, è possibile iniziare ad usarlo subito, e fornire un fallback per i browser che non lo supportano.
Per definire un font utilizzando la regola @ font-face nell’esempio qui sotto, stiamo andando a utilizzare la sintassi a prova di proiettile di Paul Irish.
A causa della diversità dei formati supportati dai browser, è necessario creare un font “kit” con almeno tre tipi di font, al fine di ottenere il supporto a tutti i browser: EOT, WOFF, e TrueType.
Ci sono centinaia di kit di font gratuiti disponibili là fuori che contengono tutti i tipi di file che avete bisogno nel vostro @font-face e, se si desidera utilizzare un carattere personalizzato, si può sempre utilizzare il generatore di font-face di “Font Squirrel”, che fa un lavoro impressionante generando tutto il necessario per aggiungere il nuovo carattere alla tua pagina, basta assicurarsi che il font che si desidera generare sia legalmente ammissibile per l’ incorporamento nel web e poi sei pronto per cominciare.
/* Declare your font using the @font-face rule */
/* Source: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ */
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
}Dopo aver dichiarato il carattere, è possibile utilizzare proprio come si usa qualsiasi altro font nel foglio di stile, e fornire un fallback per i browser che non possono leggere il carattere personalizzato dichiarato nella regola @font-face.
font-family: 'Graublau Web', 'Droid Sans', Arial, sans-serif; /* you can add any number of fallback fonts */
I browser visualizzano il primo che incontrano sulla lista, quindi se un visitatore sta visualizzando la pagina in un browser che supporta @font-face allora vedranno il vostro font personalizzato. Se non si possono vedere i caratteri di fallback che hai fornito, e se tutto il resto fallisce dovrebbero essere in grado di vedere l’opzione generica.
Tenete a mente che l’utilizzo di troppi tipi di font in una pagina (non in regola di carattere di cui sopra) possono creare una confusione a livello visivo della pagina, che è un male per tutti gli utenti, e può essere particolarmente difficile per gli utenti con problemi nella lettura, difficoltà di apprendimento, o disturbi da deficit dell’attenzione.
Risorse:
- A great @font-face 101 articolo sul Blog di ThemeForest
- Questo articolo di Duncan Midwinter ti guida attraverso la creazione di un tuo font personalizzato utilizzando il generatore di font-face di Font Squirrel
- Paul Irish spiega nel suo articolo perchè la menzionata sintassi del @font-face sopra descritta è a prova di proiettile
ACCESSIBILITA’ DEL COLORE DEL FONT
I contenuti di un sito web sono principalmente lì per essere letti, e dei colori sui caratteri con un basso contrasto possono portare all’illeggibilità del testo.
Non bisogna compromettete l’alta leggibilità per delle belle composizioni.
Questo non è solo un suggerimento di design, ma è una necessità quando si sta creando contenuti sul web.
“La Guida del W3C Web Content Accessibility spiega di impostare il contrasto minimo tra il testo e lo sfondo in modo che possa essere letta da persone moderatamente ipovedenti (che è abbastanza comune).
Un altro esperimento conferma che il tempo di lettura è minore quando c’è un elevato contrasto tra il testo e lo sfondo. Cosa c’è di più, la sensibilità al contrasto diminuisce con l’età -. Contrast Rebellion Website“
Il testo è molto più facile da leggere quando c’è sufficiente contrasto tra esso e lo sfondo . Basso contrasto e colori strani tendono ad essere difficili da leggere anche per coloro che non sono daltonici , quindi è una buona pratica per garantire la leggibilità che il testo e lo sfondo abbiano un contrasto forte .
Ci sono diversi strumenti là fuori per aiutarvi a misurare il livello di contrasto dei colori che si sta utilizzando per i vostri progetti , uno di loro è questo strumento che si può anche utilizzare per trovare combinazioni di colori accessibili , e che calcola il contrasto in conformità W3C Web Content Accessibility Guidelines .
Per sottolineare l’importanza della leggibilità e accessibilità del carattere , e per sottolineare anche il fatto che RWD è qualcosa di più di un semplice adattamento del layout alle diverse dimensioni dello schermo , vale la pena ricordare che il W3C ha anche introdotto un nuovo concetto di media query in Query Media Module Level 4 , vale a dire la media query luminosità , tra le altre nuove funzionalità multimediali , che , se attuate , consentirà ai progettisti e sviluppatori di regolare lo stile del documento in risposta alla luminosità dell’ambiente in cui viene utilizzato il dispositivo , per garantire la massima leggibilità del web del contenuto della pagina . Il dispositivo dell’utente deve essere dotato di un sensore di luce per attivare questa nuova funzionalità media.
In sostanza , la media query luminosità consente di modificare gli stili della pagina all’interno di una regola CSS @media , proprio come si fa normalmente in media query regolari quando si definiscono nuovi stili a seconda delle dimensioni dello schermo , ma in questo caso , si sarebbe definire nuovi stili in base al valore della luminosità determinata dal sensore del dispositivo , che prende uno dei tre valori : dim , normale , o “pulito” .
Ad esempio, per cambiare il colore di sfondo e del testo in diverse condizioni di illuminazione devi scrivere qualcosa di simile a questo :
/* Source: http://www.jordanm.co.uk/post/65776639602/responding-to-environmental-lighting-with-css-media */
@media (luminosity: normal) {
body {
background: #f5f5f5;
color: #262626;
}
}
@media (luminosity: dim) {
body {
background: #e9e4e3;
}
}
@media (luminosity: washed) {
body {
background: #ffffff;
}
}Forse si ha familiarità con f.lux: si tratta di un’applicazione che rende il colore del display del computer di adattarsi al momento della giornata, calda di notte e come la luce del sole durante il giorno. Utilizzando la media query luminosità, è possibile modificare gli stili della tua pagina di adattarsi alle condizioni di luce esterne in un modo simile a quello che f.lux fa, a rendere i contenuti lettura sulle tue pagine web molto più facile per gli occhi.
Non saremo entrare nei dettagli di questa query media come questo è ancora una bozza di lavoro e non ancora supportato in qualsiasi browser, ma ne è valsa la pena menzionare per dimostrare che rendere il testo rispondente non si limita a modificare la sua dimensione su schermi di dimensioni diverse . Naturalmente, la media query luminosità viene utilizzato non solo per lo stile del testo in diverse condizioni di illuminazione, ma sarà probabilmente il più evidente caso d’uso per questa ricerca.
Potete leggere di più sulla media query luminosità in questo articolo di Jordan Moore, o di Media Queries Livello 4 bozza di lavoro del W3C.
UTILIZZARE IL TESTO “REALE” INVECE DEL TESTO ALL’INTERNO DI IMMAGINI
“Il testo può essere trasformato in suono attraverso i sintetizzatori vocali screen reader.
Il testo può anche essere ampliato con l’allargamento dello schermo o software di ingrandimento, senza alcuna perdita di qualità.
Questi sono i due motivi principali per cui avere il contenuto in formato testo è così importante per l’accessibilità. Anche se è possibile fornire testo alternativo per la grafica, non è possibile ingrandire il testo nella maggior grafica senza perdita di qualità (a meno che non sia grafica vettoriale scalabile [SVG] o Flash, ma questo introduce un diverso insieme di potenziali problemi di accessibilità) -. Web Accessibility In Mind“
Quando si crea web design reattivo che si rivolgono a dimensioni dello schermo e ad utenti diversi, è necessario anche per mantenere utenti con certe incapacità e fare in modo che siano in grado di accedere ai tuoi contenuti.
Responsive web design è qualcosa di più di un semplice adattare il layout del tuo sito web a diverse dimensioni dei dispositivi, si tratta anche di rendere sicuro il vostro contenuto rispondendo alle esigenze degli utenti in modo che possano accedervi da qualsiasi dispositivo, non importa il contesto.
Ora che abbiamo esplorato i punti principali dell’accessibilità del carattere, guarderemo modi diversi per creare il design fluido e quello reattivo sul web.
FARE GRANDI TITOLI RESPONSIVE
USANDO UN PLUGIN JQUERY
Ci sono tre plugin abbastanza ben conosciuti per fare grandi titoli reattivi: FitText, BigText, e SlabText. Questi tre plugin consentono di creare grandi, audaci, titoli reattivi che riempiono la larghezza dell’ elemento genitore in qualsiasi dimensione.
Tra questi plugin, uno che sembra avere un vantaggio sugli altri due è il plugin SlabText dallo sviluppatore Brian McAllister, che combina FitText con l’algoritmo slabtype di Erik Loyer per il rendering del testo, per creare titoli reattivo flessibili e scalabili.
“In parole povere, lo script divide i titoli in righe prima di ridimensionare ogni riga per riempire lo spazio orizzontale disponibile. Il numero ideale di caratteri per impostare su ogni riga è calcolato dividendo la larghezza disponibile dal pixel font-size – lo script utilizza quindi questo conteggio carattere ideale per dividere il titolo in combinazioni di parole che vengono visualizzati come righe separate del testo -. SlabText demo Pagina“
L’ utilizzo del plugin è abbastanza semplice. Supponendo di aver un titolo che si vuole avere grande e che il suo contenitore sia fluido, tutto quello che dovete fare è includere il plugin nella vostra pagina, aggiungere alcuni stili nel vostro foglio di stile che sono raccomandati nella demo del plugin (anche se devo dire che ho provato il plugin senza questi stili e ha funzionato perfettamente), e quindi richiamare il plugin sul titolo.
Ecco una demo con il slabText Plugin. Si può dare un’occhiata alla fonte di questa demo visualizzando il codice nel HTML, CSS, JS e le schede. Il codice è piuttosto semplice e intuitivo. Provare a visualizzare la demo in modo pieno e ridimensionare la finestra del browser per vedere come le dimensioni del testo si adatta alle dimensioni dello schermo.
E voilà! Hai un titolo completamente reattivo, fluido, grande su diverse dimensioni dello schermo.
Il plugin bigText di Zach Leatherman è anche facile da usare. Il plugin jQuery bigText prende un singolo elemento e le dimensioni del testo all’interno dei suoi “div” in base alla larghezza dell’elemento genitore.
Il tuo markup sarebbe simile a questo:
E devi solo inserire il javascript del plugin nella tua pagina e richiamarlo sull’elemento padre che contiene il testo il quale sarà ridimensionato per adattarsi alla larghezza a qualsiasi dimensione:
$('#bigtext').bigtext();Il plugin adatterà il testo automaticamente per adattarlo alla larghezza dell’elemento, indipendentemente dalla dimensione iniziale del carattere.
UTILIZZANDO UNITA’ CSS VIEWPORT
Un effetto simile a quello applicato dai plugin precedenti può essere ottenuta anche utilizzando unità CSS viewport: vw, vh, vmax, e Vmin.
Utilizzando le unità viewport permette di assicurarsi che il proprio testo si inserisca sempre nella larghezza del contenitore, perché la dimensione del carattere cambia rispetto al blocco contenitore iniziale , la finestra , che ha la dimensione della finestra del browser, e quando ci sono cambiamenti di larghezza, cambieranno pure la dimensioni del carattere. Questo suona molto simile al modo in cui FitText e slabText lavorano , giusto ? Questo è piuttosto buono visto che è possibile ottenere lo stesso effetto dei plugin jQuery, ma solo utilizzando i CSS .
Anche se, i risultati ottenuti utilizzando queste unità sono meno flessibili rispetto a quelli dei plugin , perché fitText e slabText ( e bigText ) espandono automaticamente le voci in modo che si riempia la larghezza del loro contenitore su tutte le righe, ma non succede quando si sta utilizzando unità di viewport , in quanto si dovrà regolare manualmente le dimensioni per ottenere questo.
“Le lunghezze finestra-percentuali sono relative alla dimensione del blocco contenitore iniziale.
Quando si modifica l’altezza o la larghezza del blocco contenitore iniziale, sono scalati di conseguenza.
1vw = Uguale a 1% della larghezza del blocco contenitore iniziale.
1VH = Uguale a 1% dell’altezza del blocco iniziale che contiene.
1vmin = Uguale al più piccolo dei ‘vw’ o ‘VH’
1vmax = Uguale al più grande dei ‘vw’ o ‘VH’.
– Valori W3C e Unità Modulo Livello 3“
Quando si utilizzano queste unità con “font-size”, è una lettera che prende quella dimensione del carattere, ma, e cito Chris Coyier qui “, come sappiamo, li cambia in caratteri non-mono-spaziati e la larghezza di una lettera è piuttosto arbitrario. Trovo che basti modificare i valori per farlo come si desidera. Che è fondamentalmente per quello che facciamo in ogni caso, giusto? ”
Di seguito è riportato un esempio utilizzando unità viewport per ridimensionare un titolo. Simile al demo precedente, è possibile controllare il codice nei pannelli di codice della demo incorporato. Inoltre, assicurarsi che si sta visualizzando questa demo in un browser supportato. È necessario stare attenti al supporto del browser quando si utilizza le unità CSS viewport.
Si può vedere che alcune righe della frase non si espandano in base alla larghezza del contenitore , perché non c’è alcun algoritmo applicato a espandere le lettere e calcolare il miglior numero di lettere su ogni riga e poi dividere il titolo in righe come il plugin slabText ha fatto nella demo precedente.
Una cosa da notare qui è che quando la finestra del browser viene ridimensionata , il carattere non si regoòa, in base alla nuova dimensione della finestra , ced è probabilmente un bug.
La dimensione del font cambia per adattarsi alla dimensione del contenitore se si aggiorna la pagina.
Per risolvere questo problema ( cioè permettere il ridimensionamento senza refresh di pagina ) è necessario causare un ” ridisegno ” (refresh) sull’ elemento. Voi potete farlo seguendo l’esempio di Chris Coyier e l’utilizzo di jQuery per causare un refresh .
Per ottenere il demo funzionante sopra , ho usato un frammento di Chris che cambia lo z-index del titolo sulla finestra di ridimensionamento , causando una refresh, e quindi si può vedere il titolo regolare la sua dimensione quando si ridimensiona il browser.
Se vuoi saperne di più sulle unità viewport CSS , suggerisco le seguenti risorse :
Viewport-Sized Typography su CSS – Tricks
CSS Values and Units Specification del W3C
CSS Viewport Units article articolo degli sviluppatori Opera.
New Viewport-Relative Units article – sul Blog Treehouse.
USANDO LE MEDIA QUERIES
L’ulima tecnica più comunemente conosciuta per fare un testo reattivo è quello di utilizzare le media query per definire le dimensioni del carattere su schermi di dimensioni diverse, utilizzando un set di punti di interruzione definiti per regolare la dimensione del carattere di conseguenza.
Naturalmente, il risultato di questo è che non sarà 100% fluido come nelle tecniche precedenti.
Si può avere il ridimensionamento su diverse dimensioni dello schermo utilizzando media query in questo modo:
body {
font-size: 100%; /* start with a flexible baseline, more on this in the next section */
}
h1 {
font-size: 2.5em;
}
@media screen and (max-width: 50em) {
h1 {
font-size:2em;
}
}
@media screen and (max-width: 40em) {
h1 {
font-size:1.5em;
}
}
@media screen and (max-width: 30em) {
h1 {
font-size:1.2em;
}
}Vale la pena notare che si tratta di una buona pratica quando si sta dichiarando media query di utilizzare “em” per impostare i punti di interruzione. Puoi saperne di più sulle media query proporzionali sul blog Nube Four. Ci chiederemo anche sul perché impostare le dimensioni dei caratteri in unità “em” è meglio che usare pixel nella sezione successiva.
Continua…
Traduzione dell’articolo “TECHNIQUES FOR RESPONSIVE TYPOGRAPHY” del blog “CODROPS“
