Share
Forse la domanda tipografica più ovvia nelle mani di un designer è "quali caratteri tipografici dovrei usare?" La seconda domanda, che raramente ottiene il tipo di attenzione che dovrebbe, è "a che dimensioni dovrei impostare il mio tipo?" Stabilire una scala modulare è il modo migliore per determinare le dimensioni tipografiche, infatti, può essere d'aiuto nell'elaborazione di misure e proporzioni nell'intero layout di pagina.
Durante questa sessione abbiamo esaminato la gerarchia; in che modo le dimensioni e altri fattori possono influenzare la relazione visiva degli elementi tipografici. Di recente abbiamo anche considerato il ritmo verticale, la consistenza visiva della spaziatura e degli elementi su una pagina. Quindi abbiamo il problema di impostare una griglia di riferimento, che si collega con il ritmo verticale stabilito. Abbiamo persino parlato dell'utilizzo di ems come unità di misura, due volte in realtà. Tutti questi aspetti della tipografia sono legati insieme dalla presenza fondamentale di taglia, quindi, come decidi esattamente quanto dovrebbero essere grandi i tuoi elementi tipografici?
Il termine scala modulare si riferisce a una serie di valori armoniosi. Essendo una scala, ogni valore è un fattore degli altri e potrebbe sembrare qualcosa del genere:
Applicando questa scala ad alcuni CSS tipografici di base, potremmo ottenere:
h1 font-size: 36px h2 font-size: 24px h3 font-size: 18px h4 font-size: 14px p font-size: 11px small font-size: 9px
Potresti riconoscere questi valori come parte della scala modulare classica, illustrata da Robert Bringhust in The Elements of Typographic Style.
Una scala modulare, come una scala musicale, è un insieme preordinato di proporzioni armoniose.
Robert Bringhurst
Aderendo a questa scala e impostando i vari bit e pezzi tipografici ai valori mostrati, essi assumeranno una bellezza intrinseca; proporzioni che hanno funzionato per i progettisti tipografici per secoli.
È vero, secoli.
In realtà, l'origine di stabilire una scala tipografica derivava tanto da un'esigenza pratica quanto da un giudizio estetico. Nei giorni inebrianti della composizione di metalli da fonderia, quando ogni form di lettere veniva lanciato come un blocco di metallo (chiamato tipo) era poco pratico, troppo costoso, produrre e archiviare interi set di caratteri di ogni tipo di carattere, in tutti i vari pesi, in tutti i possibili dimensioni.
I tipografi si insediarono quindi, nel corso del tempo, su una gamma di dimensioni utilizzabili che lavoravano armoniosamente insieme.
Impostiamo una scala semplice, da utilizzare nei nostri progetti.
Dobbiamo iniziare da qualche parte, quindi inizieremo con un numero di base significativo; la nostra dimensione del carattere di base. Ho l'abitudine di iniziare da qualunque cosa il browser indichi come predefinito, quindi useremo 16px come base. Tim Brown consiglia di iniziare con la dimensione del carattere in cui il tuo carattere tipografico viene visualizzato in modo più nitido - il più delle volte, che sarà 16px per i font progettati con il web in mente.
(Scusate, quella era l'unica citazione che potevo pensare di contenere rapporto.)
Quindi ora dobbiamo stabilire un rapporto, un valore con il quale moltiplicheremo esponenzialmente e divideremo il nostro valore di base. Questo rapporto può essere qualunque cosa tu voglia; se hai una scala che trattiene la bellezza specifica nei tuoi occhi, va bene.
Ad esempio, potresti optare per la sezione aurea 1: 1.61803398875. Questo rapporto ha le sue radici nel tessuto stesso del mondo che ci circonda ed è stato usato da designer e architetti per strutturare l'armonia estetica da ... per sempre.
Per illustrare ciò che sta accadendo facilmente, useremo 1: 2 (il musical tra di voi, che non sono io, comunque, riconoscerà questa come un'ottava). A partire da 16, otteniamo quanto segue:
16 * 2 = 32 32 * 2 = 64 64 * 2 = 128
E questo può continuare in modo esponenziale. Per stabilire la nostra scala verso il basso, dividiamo:
16/2 = 8 8/2 = 4 4/2 = 2
Questo ci dà l'inizio della nostra scala:
che possiamo applicare al nostro semplice CSS tipografico in questo modo:
h1 font-size: 256px h2 font-size: 128px h3 font-size: 64px h4 font-size: 32px p font-size: 16px small font-size: 8px
Ottimo lavoro finora!
Questa scala è abbastanza estrema. Funziona, ma per le misurazioni su una pagina web è abbastanza spietato. Per concederci più flessibilità, diamo più opzioni aggiungendo una seconda dimensione alla scala, un processo delineato da Tim Brown nel suo articolo di A List Apart. Tipografia più significativa.
Scegli un altro numero. Qualsiasi numero, purché abbia un qualche significato per il tuo progetto. Abbiamo già usato 16 perché è la nostra dimensione del font di base, quindi complimentiamoci aggiungendo 95, la larghezza di una singola colonna che userò in questo fittissimo layout di 1,140 px.
Mancia: Ci possono essere molti aspetti del tuo design che hanno un significato; misure e dimensioni che risuonano in tutto il layout. Sperimenta con i valori che scegli, potresti essere sorpreso di quali proporzioni sentire destra.Applicando il rapporto da 1: 2 a 95, otteniamo la seguente scala:
11.875 / 2 = 5.938 23.75 / 2 = 11.875 47.5 / 2 = 23.75 95/2 = 47.5 95 * 1 = 95 95 * 2 = 190 190 * 2 = 380 380 * 2 = 760
Quindi ora abbiamo due scale, entrambe basate sullo stesso rapporto, che quindi coesistono abbastanza bene:
In effetti, possiamo combinarli, per darci una scala come questa:
760.000 512.000 380.000 256.000 190.000 128.000 95.000 64.000 47.500 32.000 23.750 16.000 11.875 8.000 5.938 4.000 2.969 2.000 1.485
Questo riempie le lacune per noi, rendendo la nostra scala molto più completa.
Abbiamo già menzionato come possiamo applicare la nostra scala agli elementi tipografici di base, quindi aggiorniamolo.
h1 font-size: 64px h2 font-size: 47.5px h3 font-size: 32px h4 font-size: 23.75px p font-size: 16px small font-size: 8px
Eccoci, non così intensi. La nostra scala può anche prestarsi ad altre caratteristiche tipografiche, come l'altezza della linea e quindi l'intera griglia di riferimento:
p font-size: 16px; line-height: 23.75px; margine: 0 0 16px 0;
E possiamo migliorare tutto usando anche gli em, rendendo più nette le relazioni e le proporzioni:
body font-size: 100%; p font-size: 1em; altezza della linea: 1.484; margine: 0 0 1em 0;
Se stai lottando con i calcoli a questo punto, vai alla scala modulare di Tim Brown. La sua calcolatrice farà uscire automaticamente i valori pixel ed em per te.
Per riferimento, ecco come appare la nostra scala in termini di em (in altre parole, relativa alla dimensione del carattere di base):
64 47.5 32 23.75 16 11.875 8 5.938 4 2.969 2 1.484 1 0.742 0.5 0.371 0.25 0.186 0.125 0.093
Dopo aver affrontato gli elementi di base della nostra pagina, rivolgiamo la nostra attenzione ad alcune strutture. Una semplice pila di dodici colonne è facilmente disposta:
.column-1 width: 95px; * .column-2 width: 190px; * .column-3 width: 285px; .column-4 width: 380px; * .column-5 width: 475px; .column-6 width: 570px; .column-7 width: 665px; .column-8 width: 760px; * .column-9 width: 855px; .column-10 width: 950px; .column-11 width: 1045px; .column-12 width: 1140px; / * in una griglia fluida, questi sarebbero convertiti in valori% * /
Riconoscerai i valori con un asterisco accanto a loro come mostrato nella nostra scala modulare.
Ogni colonna dovrà anche fluttuare, inoltre, per formare le grondaie, possiamo aggiungere un po 'di padding a ciascuna di 1em (16px, che è presente anche nella nostra scala).
/ * applica un modello di layout naturale a tutti gli elementi * / *, *: before, *: after -moz-box-sizing: border-box; -webkit-box-dimensionamento: border-box; dimensionamento della scatola: border-box; .column float: left; riempimento: 0 1em;
Molto rapidamente abbiamo gettato le basi per una griglia solida, oltre alla tipografia, il tutto basato su una scala armoniosa.
Combinare le griglie con la tipografia può essere un'attività complessa; l'armonia calcolatrice può sembrare a volte non intuitiva! Una volta che hai iniziato con alcune basi di base, però, scoprirai che non puoi impaginare una pagina web senza alcun tipo di significato per le relazioni sulle tue pagine.
Quello che abbiamo fatto finora è un buon inizio, ma c'è ancora molto da fare e molta messa a punto. La griglia di base, ad esempio, potrebbe essere un po 'scomoda da costruire da questo punto, quindi potresti scoprire che alcuni dei valori iniziali non funzionano. Inoltre, vorremmo probabilmente che la nostra griglia fosse flessibile, quindi le colonne non manterrebbero i valori fissi che avevamo originariamente utilizzato. Per questo motivo, potresti scoprire che i nostri valori orizzontali non sempre funzionano con le nostre misurazioni verticali.
Esistono scale e griglie consolidate, provate e testate nel corso dei secoli. Perché non provare ad applicarne alcuni al tuo lavoro? Hai mai applicato una scala modulare deliberata al tuo lavoro? Se no, come decidi il tuo dimensionamento tipografico? Ci sono dei problemi specifici che incontri con le bilance? Sentiamo i tuoi pensieri nei commenti!
Accentsconagua