(continua dall’articolo precedente TECNICHE PER UNA TIPOGRAFIA RESPONSIVE 1° parte)
RENDERE IL CORPO DEL TESTO RESPONSIVE
Quando si tratta di fare il corpo del testo reattivo, ci sono alcune note importanti da tenere a mente.
Non solo si deve ridimensionare il testo per adattarlo al suo contenitore, pur mantenendo un’ottima leggibilità e la lunghezza delle linee ragionevoli, ma è necessario ricordarsi di conservare ritmo verticale e interlinea (spazio tra linee) flessibili, assicurarsi che il testo scali bene su schermi ad alta risoluzione, che può essere facilmente modificata dall’utente.
I punti di cui sopra possono essere raggiunti utilizzando le unità di ridimensionamento proporzionale delle dimensioni dei carattere e definendo le altezze di linea.
USARE em E LE MEDIA QUERIES
Ethan Marcotte , il ragazzo dietro l’idea del “Responsive Web Design” , ha scritto un eccellente articolo sul blog di Adobe Typekit dove spiega perché utilizzando em ( e rem , in arrivo la prossima sezione) è molto meglio che usare i pixel per le dimensioni dei font.
Prima di addentrarci sui vantaggi di utilizzare em per le dimensioni del testo, è importante mostrare perché è una cattiva idea quella di usare pixel.
I pixel offrono un alto livello di controllo sui nostri formati di testo , ma hanno anche un inconveniente ben noto: il testo non scala quando si ridimensiona in Internet Explorer, quindi non c’è alcun modo per i lettori di aumentare la dimensione del font sulla pagina se vogliono, quando si utilizza pixel.
Ora, è vero che molti browser desktop, comprese le versioni più recenti di IE, includono una qualche forma di zoom della pagina, che può ingrandire la dimensione del vostro intero progetto, incluso il suo testo .
Ma le vecchie versioni di IE sono, purtroppo, ancora là fuori.
L’uso di em per le dimensioni del testo, d’altra parte , ci sbarazza di questo problema del tutto.
Inoltre, si consiglia di utilizzare un valore in percentuale per impostare le dimensioni per il corpo dei caratteri della pagina, e iniziare a definire la dimensione del contenuto proporzionale a questo valore.
Dichiarando la dimensione del carattere del vostro corpo in percentuale, si fornisce una base flessibile, da cui è possibile ridimensionare il testo verso l’alto o verso il basso con unità relative come l’ em.
Impostare la dimensione del carattere sul corpo al 100 % imposta la dimensione del testo alla dimensione del font di default del browser , che di solito è 16px.
Un sacco di sviluppatori tendono a, o a preferire , usare il valore di base 62,5% sul corpo invece di un 100%, perché la dimensione del carattere risultante applicata ad esso sarà ancor 10px, e così diventa molto più facile da definire altre dimensioni dei caratteri della pagina relative a questo numero, ma si scopre che Richard Rutter, autore dell’originale tecnica del 62,5 %, ha scritto un articolo per a List Apart raccomandando al 100 % come base migliore, quella che garantisce un più coerente cross-browser.
Così, con questo in mente , possiamo fare la nostra pagina tipo utilizzando em e media query.
L’esempio più semplice sarebbe simile a questo:
body {
font-size:100%; /* flexible baseline */
}
p {
font-size: 1.25em; /* 1.25em relative to a 16px baseline on the body will result in a 20px font size */
}Per ridimensionare il carattere per schermi di piccole dimensioni che utilizzano media query, è sufficiente ridimensionare solo la dimensione del corpo del carattere , perché il testo della pagina è dimensionato proporzionalmente ad essa, cambiando una sola riga di CSS:
@media screen and (max-width: 40em) {
body {
font-size:90%;
}
}
@media screen and (max-width: 30em) {
body {
font-size:80%;
}
}Ora, non possiamo avere del testo veramente reattivo senza mantenere un’altezza di linea flessibile per i nostri contenuti.
Abbiamo bisogno di assicurarci che il nostro testo venga ridimensionato bene quando la pagina viene ingrandita o ridotta, dobbiamo fare in modo che lo spazio tra le righe è anche ridimensionato e rimane proporzionale alla nuova dimensione del carattere su ogni ridimensionamento.
Come probabilmente avete indovinato ,pure le altezze di linea (interlinea) possono anche essere definite in em invece che in pixel.
Se dovessimo impostare le nostre altezze di riga in pixel, quindi se il lettore decide di ingrandire la pagina in su, per esempio, e aumenti la dimensione del carattere senza aumentare l’altezza della riga, lo spazio tra le righe rimarrà piccolo e le linee diventeranno affollate e il ritmo verticale sarà perso, rendendo il testo un spiacevole da leggere.
Impostare l’altezza della linea in unità relative assicura inoltre che, quando le dimensioni del testo diventeranno più piccole su schermi di piccole dimensioni, lo spazio verticale occupato dal testo diventerà anch’esso più piccolo, che è una necessità su schermi di piccole dimensioni che non hanno molto spazio di lettura verticale.
Un valore comune per altezze di linea , che è facilmente leggibile e facile sugli occhi è un valore di 1.4em per il corpo del testo e 1.2em per i titoli .
I valori possono cambiare a seconda del tipo di carattere che si sta utilizzando , ma questi sono valori abbastanza comuni.
Quindi, aggiungendo valori di altezza linea proporzionali alle regole di cui sopra si ottiene :
body {
font-size: 100%; /* flexible baseline */
}
p {
font-size: 1.4em; /* 1.4em relative to a 16px baseline on the body will result in a 20px font size */
line-height: 1.4em;
}
/* and if we have headings with defined styles we'd also add */
h1, h2, h3, h4, h5, h6 {
line-height: 1.2em;
}Un modo ancora migliore, più flessibile e più conveniente per impostare altezze di linea è quello di utilizzare i valori senza unità. Eric Meyer ha scritto un articolo eccellente e molto chiaro che spiega perché è preferibile impostare altezze di riga in valori senza unità. Assicurati di leggerlo.
Alcune note importanti:
- E ‘meglio utilizzare un qualche tipo di ripristino CSS quando si definiscono gli stili per i font, perché si browser sono predefiniti i margini per le intestazioni e paragrafi che possono interferire con lo spazio che si desidera definire tra le linee.
- Quando si lavora sul ritmo verticale della pagina, non si vuole dimenticare di impostare un margine adeguato tra i paragrafi per assicurare un ritmo verticale mantenuto per tutta la vostra pagina.
“Il trattamento di default per i browser web dei paragrafi è quello di inserire un superiore e inferiore margine di 1em. Nel nostro caso questo darebbe una spaziatura tra i paragrafi di 12px e quindi buttare il testo fuori ritmo. Se il ritmo della pagina deve essere mantenuta, la spaziatura dei paragrafi deve essere correlata alla base dell’unità altezza della linea. Ciò si ottiene semplicemente impostando-top e bottom-margini pari alla altezza della linea -. Richard Rutter, Comporre un ritmo verticale, 24Ways Blog“
- Per impostare le dimensioni dei caratteri in em, c’è una semplice regola da seguire per determinare l’em alternativa ad un valore di pixel. L’articolo di Ethan Marcotte sul blog Typekit spiega come calcolare le dimensioni dei caratteri in em chiaramente, in modo da essere sicuri di dare una lettura se non hai familiarità con esso.
USARE rem E LE MEDIA QUERIES
Proprio come “em”, “rem” è anche una unità CSS relativa. E ‘molto simile ad “em”, tranne che la dimensione del carattere definito utilizzando “rem” viene impostato rispetto alla dimensione del font dell’elemento radice, l’html, invece del corpo, da qui la r di rem , dove rem significa “em root”.
Il dimensionamento del testo con rem è praticamente lo stesso che con em, con gli stessi vantaggi, ed una piccola differenza: si imposta una dimensione del carattere del 100% sull’elemento html invece del body, e quindi per ridimensionare il testo nel media query, si modifica il valore dell’elemento html proprio come abbiamo fatto in precedenza sull’elemento body.
Ma se rem e em sono così simili, allora perché usare rem? Che vantaggio ha rem hanno più di loro?
La cosa migliore nell’ utilizzare rem è che è possibile ridimensionare il testo del vostro intero contenuto nel contesto dell’elemento radice, non nel contesto del suo contenitore.
Ad esempio, il dimensionamento di liste nidificate utilizzando em può diventare davvero disordinato e ingombrante a causa della cascata:
“Se si decide che gli elementi dell’elenco devono essere font-size: 1.1em e poi hanno nidificato le liste, si cascata e far crescere la dimensione del carattere delle liste figlio. Probabilmente non voleva questo. Si può fissare con “li li {font-size: 1em;}” ma questo è il genere di cosa che può macinare la vostra zucca.
Ecco dove “rem” può inserirsi, ma può essere difficile anche perché c’è meno supporto del browser (IE 9+).” – Perché Ems? by Chris Coyier
Sebbene il supporto del browser è diventato abbastanza ragionevole, si può ancora aver voglia di fornire fallback per browser meno recenti in pixel, ritornare ai valori em vi metterà di nuovo nella complessità del contesto “em” che probabilmente si voleva evitare, a seconda se hai deciso di usare “rem” invece di “em”.
Se si utilizza un preprocessore CSS come Sass, che totalmente consiglio di fare, è possibile utilizzare un mixin che farà tutti i calcoli di fallback per voi.
Ci sono diversi mixins là fuori per rem, è possibile scegliere quale preferisci e iniziare a utilizzare rem nel progetto di oggi.
Utilizzando rem è anche preferibile quando si lavora su progetti di grandi dimensioni con un sacco di contenuti e moduli per i quali tenere traccia di contesto e la dimensione del carattere può ottenere molto faticoso, quindi utilizzando una unità parente che non richiede alcuna consapevolezza del contesto di un elemento è molto conveniente.
UTILIZZANDO LE UNITA’ CSS VIEWPORT
Utilizzando unità CSS viewport per rendere il corpo del testo reattivo si fa esattamente nello stesso modo e per le stesse ragioni viste nella sezione precedente dove siamo andati ad utilizzare queste unità per fare grandi titoli reattivi, quindi non andrò oltre questo metodo.
Utilizzando unità viewport per ridimensionare il corpo del testo ha un evidente vantaggio rispetto ai metodi precedenti utilizzando “em” e “rem” che il testo diventa 100% fluido, e non dipende da una serie di punti di interruzione media query per ridimensionare, ma ridimensiona e adattandosi alle dimensioni del relativo contenitore non importa se cambia larghezza o quando.
Vedrete un esempio di utilizzo di unità delle viewport per la creazione di testo fluido nella sezione successiva.
UTILIZZANDO UNA PLUGIN JQUERY
All’inizio di questo capitolo abbiamo detto che quando “responsiamo” il contenuto del testo in una pagina, dobbiamo fare in modo che la lunghezza della linea sia pure facilmente leggibile.
La lunghezza della linea è il numero di parole per riga.
Linee che sono troppo lunghe o troppo corte possono portare ad una esperienza di lettura negativa:
“Se una riga di testo è troppo lunga l’occhio del visitatore avrà difficoltà a concentrarsi sul testo. Questo perché la lunghezza rende difficile avere un’idea di dove la linea inizia e termina. Inoltre può essere difficile continuare sulla linea corretta in grandi blocchi di testo.
Se una linea è troppo breve l’occhio dovrà viaggiare indietro troppo spesso, rompendo il ritmo del lettore.
Linee troppo corte tendono a sressare le persone, facendole iniziare dalla riga successiva prima di terminare quella attuale (quindi saltando parole potenzialmente importanti) – Leggibilità:. La lunghezza ottimale di linea”
Una buona lunghezza della linea è quella che consente agli occhi del lettore di fluire dalla fine di una riga all’inizio della successiva in modo semplice e naturale.
La lunghezza della linea ottimale per il vostro corpo di testo è considerato come 50-60 caratteri per riga , spazi inclusi , e alcune persone dicono che fino a 75 o addirittura 80 caratteri è accettabile .
Quando il ridimensionamento del testo per adattare la larghezza degli elementi all’interno di diverse dimensioni dello schermo , dobbiamo tenere a mente che il testo di grandi dimensioni su piccoli schermi produrrà linee che sono troppo brevi e di piccole dimensioni, testo su schermi grandi e larghi porterà a lunghe code di testo con lunghezza superiore al numero di parole consigliati per la migliore leggibilità , dunque , in entrambi gli scenari, rischiando una cattiva leggibilità e di conseguenza una cattiva esperienza utente.
Con questo in mente, è meglio se potessimo trovare un modo per diminuire la dimensione dei caratteri su schermi piccoli, e aumentare su grandi schermi , diminuendo così il numero di parole su grandi schermi, e aumentarli su schermi più piccoli, per mantenere un’abbastanza ragionevole quantità di parole per la migliore leggibilità .
Ed è anche meglio se potessimo raggiungere questo testo ridimensionando automaticamente senza impostare manualmente le dimensioni dei caratteri in media query , ottenendo così il 100 % corpo del testo fluido che , combinato con altezze di linea relativa e un ritmo verticale equilibrata, può risultare in un esperienza di lettura ottimale, o almeno avvicinarcisi.
Le unità CSS viewport possono aiutarci a raggiungere la fluidità di cui abbiamo bisogno ridimensionando il testo con cambiamenti delle viewport, ma il problema è che più è piccolo lo schermo più diventerà più piccola la dimensione del carattere, e potrebbe finire per essere troppo piccola e illeggibile su piccoli schermi, e troppo grande per schermi più grandi, e non c’è modo di impostare un limite minimo o massimo per la dimensione del carattere se non utilizzando di nuovo media query, e impostando una dimensione di carattere specifica per le dimensioni dello schermo in cui il font può essere troppo grande o troppo piccolo, e poi c’è anche il supporto del browser che si trova anche nel modo di essere in grado di raggiungere il tipo veramente fluido in tutti i browser .
Di seguito è riportato un esempio utilizzando unità viewport per realizzare un corpo di tipo fluido. Quando si ridimensiona il browser la larghezza finestra diventa più piccola , il testo diventa troppo piccolo per leggere quando si arriva a circa 480px di larghezza finestra.
Ho aggiunto un paio di media query per regolare le dimensioni su schermi di dimensioni ridotte e commentato in modo che si possa inizialmente notare che il tipo di carattere continua a diminuire di dimensioni fino a diventare illeggibile .
Rimuovere il commento sulle regole di media query , se si desidera regolare la dimensione dei caratteri su schermi più piccoli .
FlowTypeJS è un plugin che funziona sul ridimensionamento del carattere e sull’altezza della linea, in base alla larghezza di un elemento specifico, con conseguente testo fluido come risultano con le unità viewport, ma ovviamente ha un paio di vantaggi rispetto a quest’ultime: il supporto cross-browser , e le opzioni che ci permettono di specificare le dimensioni minime e massime dei caratteri, in modo che il testo non diventa più grande o più piccolo di quello che vogliamo.
Utilizzare il plugin FlowType è semplice: si collega il plugin nella pagina, aggiungere alcuni stili per gli utenti che non dispongono di Javascript abilitato il carattere di default, e chiamare il plugin su qualsiasi elemento che contiene il contenuto del testo che si desidera rendere fluido, e personalizzarlo in base alle opzioni disponibili del plugin. Potete leggere di più su opzioni del plugin sulla sua homepage.
Qui di seguito è un fork della descritto sopra.
Invece di utilizzare unità di viewport, ho usato il plugin FlowType come detto sopra sul paragrafo del testo che ho aggiunto solo per esempio, e nelle opzioni del plugin ho specificato le dimensioni massime e minime dei caratteri per il testo. Scopri il codice nelle schede qui sotto.
Si può vedere come è facile da raggiungere un corpo di testo fluido utilizzando questo plugin, senza doversi preoccupare di aggiungere delle regole media query in più.
UTILIZZANDO L’ELEMENT QUERY
Le query element sono simili alle media query, in quanto, se la condizione è soddisfatta, verrà applicato un po ‘di CSS.
Le condizioni di elemento query (come min-width, max-width, min-height e max-altezza) sono basate su elementi, invece che sulla schermata.
Ma la cosa è che le query element nemmeno ancora esistono in CSS.
Il concetto di element query è nato da un articolo scritto da Ian Storm Taylor, in cui spiega come per modulare i CSS non può essere realizzato utilizzando le media query, e che essere in grado di definire i punti di interruzione su un elemento piuttosto che sul browser, è un migliore modo per costruire elementi riutilizzabili con stili modulari.
Un element query risulterà simile al seguente:
.main-nav (max-width: 30em) {
font-size: 0.75em;
}Dopo l’articolo di Ian, un altro articolo sul tema è stata pubblicato su Smashing Magazine, e un polyfill element query è stato introdotto da Tyson Matanich.
Il polyfill ElementQuery, invece, utilizza una sintassi simile a quella descritta sopra sostenendo la ~ = attributo selettore per verificare se il valore è contenuto in un elenco delimitato da spazi. Per esempio:
/* This rule queries itself for a single condition */
header[min-width~="500px"] {
background-color: #eee;
}
/* This rule queries itself for multiple conditions */
header[min-width~="500px"][max-width~="800px"] {
background-color: #eee;
}I Query Element sono molto utili nel senso che ci permettono di definire degli stili responsive per gli elementi a prescindere dall'”ambiente ” o layout in cui esistono.
Definendo stili modulari per gli elementi , possiamo riutilizzare questi elementi e farli comparire ovunque e saranno semplicemente in grado di adattarsi al layout in cui vengono utilizzati .
Ad esempio , supponiamo di avere un menù di navigazione e volete che sia reattivo indipendentemente da dove è posizionato nell’header .
Invece di dover definire gli stili in base alla larghezza del contenitore corrente, è possibile definire i suoi stili interrogando la larghezza del menù stesso, quindi non dover tener conto dei margini, padding e altre proprietà del contenitore, che di solito si prendendo in considerazione per determinare i punti di interruzione per il contenuto .
Per rendere il menù flessibile e reattivo e quindi riutilizzabile , è possibile definire i suoi stili reattivi a seconda di come cambia la larghezza.
Quindi sarebbe come dire : indipendentemente da dove il menù è messo, se in una vasta un’intestazione o una barra laterale stretta , voglio i suoi link posizionati l’uno accanto all’altro e con una dimensione di carattere di 1em quando è abbastanza ampia per contenere gli elementi, per esempio quando la sua larghezza è maggiore o uguale 400px, e se la sua larghezza è inferiore a 400px , voglio avere gli elementi del menù uno sopra l’ altro e diminuiendo la loro dimensione del font da 0.8em .
Così , si può vedere che questo metodo è simile a quelli precedenti utilizzando em e rem di media query , ma sostituisce le media query con le element query.
Tyson Matanich ha creato una collezione di demo su Codepen che mostrano come diversi elementi possono essere realizzati reattivi con il suo polyfill ElementQuery . Qui di seguito c’è un esempio , che mostra come gli stili di un menù di navigazione cambiano a seconda della propria larghezza.
Controllare la scheda CSS e giocherellare con il codice un po ‘per vedere come gli stili del menù cambiano in base alla propria larghezza.
UN RESPONSIVE DI TIPO REATTIVO?
Un concetto abbastanza nuovo e piuttosto interessante per il testo “responsifying” è stato introdotto daL web designer croato Marko Dugonjic, che utilizza il rilevamento del volto e la webcam di un utente per ridimensionare il testo su una pagina basata sulla prossimità dell’utente allo schermo, che è un’idea fantastica, devo dire!
Se questo metodo è pratico o no, è sicuramente un progetto creativo e utile che vale la pena menzionare quando stiamo affrontando la tipografia reattiva.
Puoi controllare come funziona sul sito del progetto. È necessario disporre di una webcam per vedere come funziona.
Il testo nella demo è aumentato quando ci si sposta più lontano dallo schermo e diminuisce quando ci si avvicina ad esso, mantenendo una lunghezza di riga leggibile che non superi il numero consigliato di parole quando il testo diventa più piccolo. Abbastanza pulito, giusto?
CONSIDERAZIONI FINALI
Un modo utile per verificare come appare e funzioni la tua pagina è quello di metterla a nudo spogliandola di tutti i tipi di immagini e media, e verificare come i tuoi contenuti appaiano senza di loro . Il vostro testo è allineato bene ? Ha un ritmo verticale equilibrato? Le vostre lunghezze di linea e i caratteri sono leggibili? Che dire della gerarchia ?
C’è una crescente tendenza a credere che il web reattivo sarà il 99,9 % tipografia , e con la crescente ” complessità ” di dispositivi di oggi e le sfide che portano al web design reattivo, un sacco di designer sono diretti verso i layout più semplici che si concentrano principalmente sulla tipografia , perché, dopo tutto , il contenuto web è, per prima cosa, da leggere.
A causa di questo , la tipografia reattiva è uno degli aspetti più importanti del web design di oggi .
Rendere la tipografia della tua pagina leggibile e reattiva non è difficile , ed è una cosa importante da fare quando si parte per costruire i siti web responsive.
Spero che questo articolo vi abbia aiutato a conoscere una serie di tecniche che si possono scegliere per fare “responsify” il tuo sito, e spero che abbiate imparato qualcosa di nuovo, io l’ho trovato utile .
Grazie per la lettura ! = )
Traduzione dell’articolo “TECHNIQUES FOR RESPONSIVE TYPOGRAPHY” del blog “CODROPS“
