Traduzione dell’articolo “Fluid Typography (tipografia fluida) By Michael Riethmuller” del blog “SMASHING MAGAZINE.“
LA TIPOGRAFIA FLUIDA
Abbracciare la tipografia fluida potrebbe essere più facile di quanto si pensi.
Ha un ampio supporto di browser, è semplice da implementare e può essere raggiunta senza perdere il controllo su molti aspetti importanti della progettazione.
A differenza della tipografia reattiva, che cambia solo a impostare punti di interruzione, la tipografia fluida si ridimensiona senza step per adattarsi a qualsiasi larghezza del dispositivo. Si tratta di un’opzione intuitiva per un web in cui abbiamo un numero praticamente infinito di dimensioni dello schermo. Eppure, per qualche ragione, è ancora usato molto meno rispetto alle tecniche reattive.
Questo potrebbe essere dovuto dal fatto che la tipografia è così profondamente radicata nella storia secolare della composizione. Il concetto di avere qualcosa di “fluido” è spesso in contrasto con questa tradizione. Nella stampa, le dimensioni sono sempre state esatte, ma non hanno bisogno di esserlo sul web. Ecco perché penso che la tipografia fluida è un partner perfetto per il web. E ‘un approccio diverso per un mezzo completamente diverso.
Questo non significa che dobbiamo buttare via tutte le convenzioni e tutto quello che sappiamo sulla tipografia. Abbiamo solo bisogno di imparare come applicare le tecniche che conosciamo in modo leggermente diverso. Una grande attenzione ai dettagli garantirà ancora un’esperienza perfettamente artigianale in tutte le dimensioni dello schermo.
PER INIZIARE CON LA TIPOGRAFIA FLUIDA
Le unità “viewport” sono ciò che rende possibile la tipografia fluida sul web. Le unità viewport si riferiscono ad una percentuale delle dimensioni del riquadro di visualizzazione del browser. Ad esempio, 1 “viewport width” (VW) è pari all’1% della larghezza della viewport. Le unità differiscono dalle percentuali perché sono sempre relative alla viewport, mentre una percentuale è relativa al contenitore principale dell’elemento.
Ciò significa che, a differenza di tutti gli altri tipi di unità, le unità viewport non sono in alcun modo legate alla dimensione del font di base. Questa differenza è significativa e rende le unità interessanti e uniche.
Quattro unità viewport sono a nostra disposizione:
- vw: viewport width
- vh: viewport height
- Vmin: il valore più piccolo della larghezza e dell’altezza della finestra
- Vmax: il valore maggiore della larghezza e dell’altezza della finestra
Il modo più semplice per iniziare a utilizzare la tipografia fluida è quello di impostare il font-size sull’elemento HTML con una unità fluida:
html { font-size: 2vw; }In questo esempio, abbiamo impostato l’elemento principale di 2vw. Pertanto, abbiamo cambiato l’ “em radice.” Perché tutte le unità em e REM sono direttamente o indirettamente legati all’ em radice, che saranno ora anche fluide. Per esempio:
h1 { font-size: 2em; }Una dimensione intestazione di 2em è ora equivalente a 4vw, perché questo è il doppio della dimensione del carattere corrente di 2vw.
Utilizzando solo un’unità viewport-relativa ci porta ad alcuni inconvenienti. Non otteniamo un controllo preciso sul fattore di scala; non abbiamo il min o la dimensione dei caratteri max; e, proprio come coi pixel, una dichiarazione può ignorare le preferenze font-size dell’utente. Per fortuna, ci sono modi per superare tutte queste limitazioni.
CONTROLLARE LE UNITA’ VIEWPORT PER OTTENERE LE DIMENSIONI MINIME E MASSIME DEL CARATTERE
Mettere 2vw sull’elemento HTML, visto che tutto è fluido e richiamarlo è facile, non produrrebbe il miglior risultato. Le unità viewport sono un corpo contundente e richiedono qualche sforzo supplementare per ottenere un risultato praticabile.
Poiché le unità viewport sono sempre relative alla finestra, su schermi molto piccoli, si potrebbe finire con caratteri ridicolmente di piccole dimensioni.
Idealmente, ci piacerebbe essere in grado di impostare una dimensione minima dei caratteri, ma non abbiamo ancora la proprietà min-font-size in CSS. Con un po “di pensiero laterale”, però, siamo in grado di ottenere lo stesso risultato in un paio di modi diversi.
In primo luogo, potremmo usare un’espressione “calc ()”:
html { font-size: calc(1em + 1vw); }In questo esempio, ad una larghezza finestra di 0, il font-size sarebbe esattamente 1em. Mentre lo schermo diventa più grande, il valore di 1vw sarebbe aggiunto alla dimensione minima dei caratteri di 1em. Ma questa tecnica non è sempre ideale; Spesso vogliamo impostare una dimensione minima dei caratteri in una dimensione dello schermo diversa da zero. Siamo in grado di gestire questo utilizzando media query:
@media screen and (min-width: 50em) {
html {
font-size: 2vw;
}
}In questo esempio, la dimensione del carattere diventerebbe liquida una volta che la finestra raggiunge una larghezza di 50 ems. Questo funziona molto bene, ma di solito significa un salto tra i valori fissi e fluidi. Per eliminare questo, siamo in grado di elaborare il punto preciso in cui il valore del fluido corrisponde al valore fisso e impostare un punto di interruzione con le dimensioni della finestra.
Se la dimensione del font di default è di 16 pixel e se 2vw è il 2% della larghezza della finestra, il calcolo per elaborare il punto di interruzione sarebbe 16 ÷ (2 ÷ 100). Questo ci dà 800 pixel.
Poichè vogliamo usare le unità em per i nostri media query, cerchiamo di convertire i pixel in ems. Dividiamo 800 con 16 (o qualunque sia la radice em è uguale in pixel): 800 ÷ 16 = 50. Se si trova più facile, siamo riusciti a fare il calcolo in em: 1 ÷ (2 ÷ 100) = 50. come si può vedere nell’esempio precedente, impostando una dimensione del carattere di 2vw e un punto di interruzione di 50em, otteniamo una transizione senza soluzione di continuità tra i valori fissi e fluidi.
Possiamo usare lo stesso calcolo per elaborare una dimensione massima del carattere. Se volevamo una dimensione massima di 24 pixel, potremmo calcolare in questo modo: 24 ÷ (2 ÷ 100) = 1200px. In ems, che sarebbe: 1.5 ÷ (2 ÷ 100) = 75. Poi, sopra 75 ems, ci sarebbe ripristinare la dimensione del carattere di un valore fisso.
@media screen and (min-width: 75em) {
html {
font-size: 1.5em;
}
}Questi calcoli non sono difficili, ma trovo che una tabella ci aiuti a visualizzare i punti di interruzione e la velocità con cui i font scalano con diverse viewport. I valori viewport sono in alto, e le risoluzioni dei dispositivi lungo il lato sinistro della tabella.
| 1VW | 2VW | 3VW | 4VW | 5VW | |
|---|---|---|---|---|---|
| 400px | 4px | 8px | 12px | 16px | 20px |
| 500px | 5px | 10px | 15px | 20px | 25px |
| 600px | 6px | 12px | 18px | 24px | 30px |
| 700px | 7px | 14px | 21px | 28px | 35px |
| 800px | 8px | 16px | 24px | 32px | 40px |
Guardando questa tabella, si può vedere che abbiamo poco controllo sul tasso con cui le unità viewport cambiano. Utilizzando le unità viewport da sole, ci si limita alle dimensioni dei caratteri disponibili in una singola colonna della tabella.
CONTROLLARE IL TASSO DI SCALABILITA’
Se volessimo scegliere una dimensione del carattere di 16 pixel a una risoluzione dello schermo di 400 pixel per poi passare a 24 pixel con una risoluzione di 800 pixel, non ne saremmo in grado – non senza un punto di interruzione. Come pure, avrete notato abbiamo calcolato dei punti di interruzione per le dimensioni minime e massime dei caratteri, non avendo scelta.
Come si arriva intorno a queste limitazioni? La risposta è quella di utilizzare calc (). Utilizzando calc () e le unità di viewport insieme, possiamo ottenere la tipografia fluida avanzata in grado di scalare perfettamente tra i valori dei pixel specifici all’interno di una gamma di viewport. Abbiamo semplicemente bisogno di creare una funzione matematica di base.
Questa funzione prende un valore all’interno di un intervallo e lavora ciò che il nuovo valore sarebbe se applicato a un intervallo diverso. Quindi, se avessimo i numeri 1 e 100 e un valore di 50 e quindi applicato ad un nuovo intervallo tra 1 e 200, il nuovo valore sarà 100. Entrambi questi valori rimangono nel mezzo della gamma.
Questa è una funzione comune per i valori di mappatura, e l’ho usato un sacco quando si lavora con i dati in JavaScript. Ero curioso circa la possibilità di utilizzare funzioni con calc (), e quando ho notato che questa era una funzione puramente matematica, sapevo che tutto quello che serviva era una variabile. Questa è la differenza fondamentale con le finestre: La dimensione del viewport è variabile. Un valore di 100vw è la variabile in questa equazione perché il valore deliberato di 100vw cambia come cambia la dimensione della finestra. Con quest’ idea iniziale, ho perso un po più di tempo per fare in modo che la funzione lavori. La funzione calc () gestisce tipi di unità nelle equazioni in modo molto specifico. Se siete interessati a questo tipo di cose, mi raccomando di leggere le specifiche del W3C sui tipi e valori unitari; se non altro, si farà una grande conversazione alla vostra prossima cena.
Sebbene il calcolo ha un aspetto leggermente complesso, è abbastanza semplice. Abbiamo scelto le dimensioni dello schermo su cui il tipo di carattere dovrebbe scalare, e poi inseriti nell’equazione come dimensione minima e massima del carattere. Siamo in grado di utilizzare qualsiasi tipo di unità, compreso ems, rem o pixel. Sto usando pixel per gli esempi in questo articolo, perché rendono più facile la comprensione dei concetti, ma io di solito uso unità REM nel mio lavoro. Qualunque sia la scelta, l’unica cosa da ricordare è che si deve utilizzare lo stesso tipo di unità per tutti i valori nell’equazione e si deve spogliare le unità, come mostrato nell’esempio.
Se non si desidera scrivere tutto a mano, un sacco di strumenti rendono più facile, tra cui mixins per SASS e LESS e un plugin PostCSS. Qualsiasi cosa farete, sarete coperti!
IL MANTENIMENTO DELLA LUNGHEZZA DI LINEA IDEALE
Nel suo libro “The Elements of Typographic Style”, Robert Bringhurst suggerisce che una comoda lunghezza della linea è di circa 45-75 caratteri.
Qualsiasi cosa, da 45 a 75 caratteri è ampiamente considerata come una lunghezza di linea soddisfacente per una pagina a colonna singola con carattere serif e una certa dimensione di testo. La linea di 66 caratteri (contando entrambe le lettere e gli spazi) è ampiamente considerato come ideale.
La stessa regola può essere applicata direttamente alla tipografia fluida, e, in molti casi, raggiungendo una scala di lunghezza di linea e di testo coerente .
In un approccio reattivo, in cui regoliamo la dimensione del carattere a impostiamo i punti di interruzione, ci si regolerà spesso anche la larghezza di un contenitore per mantenere la giusta lunghezza della linea. Tuttavia, con la tipografia fluida, regolazione a punti di interruzione specifici diventa inutile. Basta impostare la dimensione del contenitore per scalare alla stessa velocità anche il tipo di carattere. Siamo in grado di utilizzare la tecnica “calc ()” sopra descritta sulla proprietà “width” altrettanto facilmente come facciamo su “font-size”. Questo rende più facile mantenere una lunghezza di linea perfetta – e ho notato anche che i miei fogli di stile sono molto più facili da leggere e mantenere. (Continua)
Traduzione dell’articolo “Fluid Typography (tipografia fluida) By Michael Riethmuller” del blog “SMASHING MAGAZINE.“
