Traduzione dell’articolo “Fluid Typography (tipografia fluida) By Michael Riethmuller” del blog “SMASHING MAGAZINE.“
IMPLEMENTARE UNA SCALA MODULARE
Una scala modulare è una serie di numeri che sono armonicamente proporzionali tra loro. Questo è meglio descritta visivamente:
Diverse scale funzionano meglio per le diverse dimensioni dello schermo.
Su uno schermo piccolo, le dimensioni dei titoli dovrebbero essere più uniformi; uno schermo grande ha spazio per una maggiore variazione. Siamo in grado di utilizzare le tecniche tipografiche descritte sopra per la transizione in modo fluido tra le diverse scale modulari. Basta scegliere un rapporto per gli schermi piccoli e un rapporto diverso per schermi di grandi dimensioni, e poi lavorare le dimensioni minime e massime dei caratteri per ogni livello di titolo.
Per calcolare la scala modulare, prendete la dimensione del carattere di base e moltiplicatelo per il rapporto desiderato per ottenere numeri più grandi. Per i numeri più piccoli, dividete. Ripetete questa operazione con i risultati successivi per ottenere ogni passo necessario nella scala.
PIU’ LARGA
- 1em × 1.125em = 1.125em
- 1.125em × 1.125em = 1.266em
- 1.266em × 1.125em = 1.424em
- 1.424em × 1.125em = 1.602em
PIU’ PICCOLA
- 1em ÷ 1.125em = 0.889em
- 0.889em ÷ 1.125em = 0.790em
- 0.790em ÷ 1.125em = 0.702em
- 0.702em ÷ 1.125em = 0.624em
Usiamo 1.125 come nostra scala minima e fate gli stessi calcoli per 1.250 come scala massima. Ci piacerebbe poi applicare diverse fasi della scala ai nostri livelli di intestazione.
- Minimum scale: 1.125
- Maximum scale: 1.250
| HEADING LEVEL | MINIMUM FONT SIZE | MAXIMUM FONT SIZE |
|---|---|---|
| Heading 1 | 1.602em | 2.441em |
| Heading 2 | 1.424em | 1.953em |
| Heading 3 | 1.266em | 1.563em |
| Heading 4 | 1.125em | 1.250em |
Ho creato un esempio delle voci di scala modulari fluidi su Codepen per voi da guardare. Si può capire di più sul significato delle scale modulari in un’articolo di Tim Brown “More Meaningful Typography.” (La Tipografia più significativa)
Se avete bisogno di aiuto per la scelta di una scala adeguata, vi consiglio il sito web “Type scale” (la scala dei siti) di Jeremy Church e “Modular Scale” (Scala modulare) di Tim Brown e Scott Kellum.
MANTENERE UN RITMO VERTICALE
Il ritmo verticale ha a che fare con il mantenimento dello spazio coerente e proporzionale tra elementi della pagina. È possibile trovare maggiori informazioni sul ritmo verticale nell’articolo di Espen Brunborg “CSS Baseline: The Good, the Bad and the Ugly.” (CSS di base:. Il buono, il brutto e il cattivo)
Per mantenere il ritmo verticale nel nostro layout, dobbiamo impostare la spaziatura verticale di ciascun elemento come una percentuale della nostra misura di base. Una cosa che molte persone trovano difficile con la tipografia reattiva è trovare un ritmo verticale che funziona sia per i piccoli che per i grandi schermi. In genere, si potrebbe volere diverse misure di base per piccoli e grandi schermi, o si potrebbe desiderare di utilizzare diverse proporzioni.
Con la tipografia fluida, la linea di base può essere fluida, proprio come la dimensione del carattere. Infatti, se abbiamo già impostato l’elemento principale con un valore fluido, possiamo usare le unità em o REM, e possiamo usare calc () per renderlo più facile.
Diciamo che facciamo 1.5rem la nostra linea di base. Impostiamo il padding sull’elemento corpo ad una singola unità di una linea di base.
body {
padding: 1.5rem;
}Faremo lo stesso per l’altezza della linea e margini.
h1 {
font-size: 2rem;
line-height: 2rem;
margin-top: calc((1.5rem - 2rem) + 1.5rem);
margin-bottom: 1.5rem;
}In questo esempio, l’altezza totale dell titolo più i margini saranno 3rem, che è esattamente il doppio del valore della nostra base.
Ho creato un esempio di questa tecnica che utilizza le variabili Sass in modo che si possa giocare con misure diverse di linee di base per vedere come funziona.
In futuro, proprietà CSS personalizzate renderanno questa tecnica ancora più interessante. Saremo in grado di utilizzare le variabili CSS in espressioni “Calc()” (per cambiare la nostra misura di base con le media query.
LAVORARE CON I VINCOLI
Mettiamo il caso che si voglia implementare una tipografia fluida su un sito web che ha vincoli di layout esistente, o si debba lavorare all’interno di un layout predefinito in WordPress o Bootstrap. In questa situazione, i contenitori dovrebbero probabilmente non essere fluidi o, se lo sono, probabilmente non cambieranno allo stesso ritmo, come la dimensione del carattere.
Recentemente ho aiutato a implementare la tipografia fluida per il “Department of Human Services” del governo australiano. E ‘un grande sito web con contenuti impegnativi, e abbiamo dovuto lavorare con un progetto esistente. Ho avuto due problemi principali nell’attuazione della tipografia fluida su tale sito web fortemente trafficato.
In primo luogo, come potevo impedire che il layout si sfaldasse? In particolare, mi aspettavo che i contenuti traboccassero dai contenitori quando la dimensione del testo cambiava ad un ritmo diverso dal contenitore. Con mia grande sorpresa, questo non era un problema.
In realtà, si è rivelato essere piuttosto il contrario. Il contenuto si adattava naturalmente ai contenitori, mentre in precedenza era necessario un’aggiustamento in alcuni punti di interruzione. In generale, il foglio di stile necessitava meno di media query, e, per la maggior parte, erano necessari molti meno dichiarazioni di stile.
Questo è stato un vantaggio inaspettato, e in molti luoghi abbiamo abbandonato la progettazione per i tablet perché la presentazione del desktop lavorava anche su schermi più piccoli.
Di seguito è riportato un esempio di un componente di navigazione che in precedenza aveva bisogno di diverse regolazioni in diverse dimensioni dello schermo. Anche se non perfetto in piccole dimensioni, rimane funzionale, senza rompersi.
Clikkare per ingrandire
La mia seconda preoccupazione è che, dovendo lavorare con alcune larghezze fisse, sapevo che non potevo sempre ottenere la lunghezza ideale di caratteri per riga. Invece, ho regolato la dimensione del carattere per essere entro la lunghezza ideale su telefoni e tablet – dove penso che conti di più.
Ho dovuto accettare il fatto che, poiché il contenitore principale non scala alla stessa velocità come per il testo, un testo sarà inevitabilmente “reflow” (riposizionato) quando viene ridimensionato il browser. Questa è stata una preoccupazione solo perché non volevo che i lettori perdessero il punto quando cambiavano l’orientamento del dispositivo. Poichè non siamo riusciti a evitare questo, l’unica cosa che potevamo fare era quello di testare l’impatto su alcuni dispositivi. Con le scelte che abbiamo fatto, per fortuna il reflow era appena percettibile sui dispositivi mobili, e anche su grandi tablet l’impatto è stato minimo.
Alla fine, siamo stati soddisfatti del risultato. Mentre potremmo fare di più per migliorare la tipografia, senza dubbio abbiamo migliorato la leggibilità del sito. Con le lezioni apprese per attuare tipografia fluida, la prossima iterazione del progetto avrà probabilmente una forte attenzione sulla tipografia e la leggibilità.
CONSIGLI PER IMPLEMENTARE LA TIPOGRAFIA FLUIDA SU UN SITO ESISTENTE
- Scegliere con cura il tasso di scala e le dimensioni minime e massime dei caratteri che funzionano meglio con il vostro design.
- Usare le unità “em” per le dimensioni dei caratteri. Se è necessario disattivare la tipografia fluida in un contenitore particolare, come ad esempio il menù, impostare la dimensione del carattere del contenitore ad un valore fisso. I valori “em” in questo contenitore saranno poi relative ad valore fisso.
- Allo stesso modo, se è necessario, è possibile impostare la tipografia fluida solo per alcuni contenitori. Se si imposta la dimensione del carattere di un particolare contenitore per essere fluido, allora tutti i valori “em” nel contenitore diventeranno fluidi.
- Il Reflow del testo non è necessariamente una cosa negativa se succede solo quando il browser viene ridimensionato o cambia l’orientamento del dispositivo.
- Il mantenimento di una lunghezza di linea perfetta potrebbe essere impossibile. Una lunghezza di linea ideale sul cellulare e tablet viene prima.
SUPPORTO BROWSER E BUG
Mi capita spesso di sentire che Safari e Safari mobile, in particolare, ha bug significativi con entrambe le unità viewport e le espressioni “Calc (). Tuttavia, il più delle volte, i problemi specifici non sono indicati, così ho pensato di fare un mio test.
Ho provato le espressioni “calc ()” e le unità viewport per conto mio, così come le tecniche avanzate di tipografia fluida che combinano unità viewport e Calc (). Non ho trovato alcun problema che mi avrebbe impedito di utilizzare queste tecniche oggi.
Ho scoperto che entrambe le unità calc () e viewport funzionano bene nei browser moderni. Tuttavia, nelle versioni di Safari sotto l’8 e in Internet Explorer sotto la versione 11, le unità viewport quando vengono utilizzate in un’espressione calc () non sono aggiornate quando la finestra del browser viene ridimensionata.
È possibile forzare un’espressione ad aggiornarsi con media query aggiuntive:
/* Older browsers */
html { font-size: 16px; }
/* Modern browsers only need this one */
@media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
@media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}Questa tecnica costringe Safari sotto la versione 8 e Internet Explorer sotto versione 11 a ricalcolare la dimensione del carattere in punti di interruzione impostati.
Forzare vecchi browser per ricalcolare il layout con un evento di ridimensionamento della finestra in JavaScript potrebbe essere possibile, ma non sono riuscito a trovare un metodo affidabile di farlo, e potrebbe compromettere le prestazioni. Nella maggior parte dei casi, forzare un ricalcolo a impostare punti di interruzione deve essere un ripiego accettabile per questi browser.
Per i browser legacy che non supportano le unità viewport e le espressioni con “Calc ()”, la tecnica fluida viene semplicemente ignorato. Se sono impostate settaggi di default, questa tecnica può essere applicata con progressivi miglioramenti.
USARE LA TIPOGRAFIA FLUIDA OGGI
Se hai intenzione di usare la tipografia fluida oggi, decidete prima un approccio.
Se l’intero disegno sta per diventare fluido, allora probabilmente prenderete in considerazione di rendere fluido l'”em” radice, dichiarando una dimensione del carattere con un’ unità fluida sul elemento HTML. È quindi possibile utilizzare le unità “em” e “rem” per tutto il resto del disegno.
Scegli la dimensione minima e massima dei caratteri con attenzione. A questo punto, è necessario decidere se utilizzare le unità viewport direttamente o di esercitare un controllo più preciso rispetto al tasso di scala. Nel secondo caso, allora un mix tra Sass, LESS e il plugin PostCSS renderà le cose più facili.
Assicurarsi di avere la dimensione del carattere minima e massima esatta . Questa è la decisione più importante. Una volta che si cambia l’ “em” radice, la dimensione per tutti gli altri componenti del font sarà relativa a quello. La modifica di questo dato più tardi in un progetto potrebbe significare che si debba regolare tutto di nuovo.
Non dimenticare di dichiarare una dimensione predefinita prima di implementare una tecnica fluida. Questa impostazione predefinita verrà utilizzata nei browser che non supportano le unità fluide, e non c’è bisogno che sia identica alla dimensione minima dei caratteri.
Infine, considerare i vincoli del vostro progetto e come si sta per affrontare cose come le intestazioni e la lunghezza della linea. Guarda le tecniche in questo articolo. Se si dispone di componenti con diversi titoli che si desidera scalare ad un ritmo diverso dal testo normale, prendete in considerazione la leggibilità e la manutenzione dei fogli di stile con attenzione prima di aggiungere molti espressioni “Calc()”.
Spero ci si senta incoraggiati a pensare a dove la tipografia fluida possa andare bene nel vostro prossimo progetto.
Segue una breve lista di letture consigliate che possono essere trovate in questo link
Traduzione dell’articolo “Fluid Typography (tipografia fluida) By Michael Riethmuller” del blog “SMASHING MAGAZINE.“
