Share
Ho intenzione di fare una dichiarazione radicale; i pixel non hanno spazio nel web design. C'è solo una ragione per cui stai ancora facendo affidamento sui pixel - e questo perché non hai ancora ottenuto il blocco degli sm. Cambiamo questo!
Decorativa M per gentile concessione di Frances Mcleod - vincitrice di TypeFight # 34 Quando costruiamo siti web, dobbiamo dire al browser quanto "grande" sia: "questa intestazione è così grande", "questo contenitore è yay alto", "questa forma è più ampia di quella", è come impaginiamo una pagina. I pixel hanno sempre avuto un senso perfetto come unità di misura scelta; stiamo trasmettendo a uno schermo, quindi che altro dovremmo usare?!
Tuttavia, risulta che i pixel sono intrinsecamente inflessibili. E si scopre che essere inflessibili non è eccezionale per il web.
Oliver Reichenstein ha affermato molto tempo fa: "Il web è tipografia al 95%", ma ci sono voluti alcuni anni perché le persone accettassero l'idea. Contenuto e utenti; sono le nostre priorità come web designer e il design tipografico ci aiuta a soddisfare tali priorità.
I browser visualizzano la copia del corpo con una dimensione predefinita. Sui desktop questo è generalmente 16px, i browser mobili variano. Gli utenti possono modificare questo valore predefinito, a seconda di cosa preferiscono.
Spesso i web designer usano i CSS per trasmettere le dimensioni del carattere di base in pietra ...
... impedendo all'utente di personalizzare la propria esperienza di lettura, rendendo il contenuto meno accessibile.
Lezione 1 sta restituendo il potere all'utente. Non impedire agli utenti di impostare le proprie dimensioni del testo, ma assicurati di iniziare a parità di condizioni. Imposta il carattere di base sul 100% del valore predefinito del browser:
allora possiamo lavorare da lì.
Dobbiamo ancora definire quanto grandi saranno i nostri vari elementi tipografici, specialmente se abbiamo usato una tecnica di ripristino CSS per rimuovere tutto il dimensionamento predefinito. Una scala modulare abbastanza tipica sarebbe simile a questa:
Queste cifre sono state usate per secoli, calcolate per ottimizzare le proporzioni, senza dover fabbricare fisicamente troppi blocchi usati nella stampa. C'è tutto il genere di matematica intelligente che giustifica bilance come questa e sono sicuro che puoi apprezzare che questa gamma è piacevole anche all'occhio.
Tradurremmo questa scala nella nostra tipografia applicando un po 'di CSS in questo modo:
Tuttavia (come già detto) l'uso di valori di pixel fissi non è flessibile, quindi rettifica che ...
Un em è un'unità di misura. Proprio come i pixel, gli em possono determinare la dimensione degli elementi su una pagina web. A differenza dei pixel, che sono assoluti, gli em sono relativi alla dimensione del font del genitore, che è il luogo dove risiede molta confusione.
1em è uguale alla dimensione del carattere ereditato. Se la dimensione del carattere di a Ems prende il nome dalla stampa. Precisamente quando il termine è stato usato per la prima volta non è chiaro, ma come il maiuscolo M (pronunciato emm) rappresenta più da vicino il blocco di stampa quadrato su cui sono state collocate le lettere di stampa, è venuto a dare il nome alla misurazione. Qualunque sia la dimensione in punti del font in questione, il blocco della M maiuscola definirà l'Em. Un em è solitamente un tocco più grande della forma di lettera, ma tu hai l'idea. Abbiamo già iniziato a impostare la nostra scala tipografica in pixel, quindi come possiamo convertirlo in ems? Un semplice calcolo, che esprime la dimensione del carattere desiderata in relazione alla dimensione del carattere del corpo: Utilizzando la dimensione del corpo assumiamo 16px, con l'obiettivo di convertire il nostro 36px Ecco come viene convertita la nostra scala, utilizzando il metodo sopra riportato: Alcuni di questi valori possono diventare un po 'complessi, ma non temere di essere il più precisi possibile con le cifre decimali. I browser faranno sempre del loro meglio per rendere i valori esatti. Mancia: Spesso è utile prendere nota nei commenti, per ricordare a te stesso come hai calcolato ciascun valore em. Il maggior numero di persone che hanno problemi di sms derivano da complicazioni derivanti dal collegamento a cascata. Un valore em è relativo al valore del genitore più vicino, che può accidentalmente rovinare le cose se non stai prestando attenzione. Dai uno sguardo al seguente css, che mira a ottenere uguali e paragrafi dimensionati allo stesso modo: Ora dai un'occhiata a questo pezzo innocuo di markup: Come ti aspetteresti, tutto appare bene nel browser. Sia il paragrafo che l'ancora sono visualizzati a 1.2em, in relazione alla dimensione del carattere del corpo Tuttavia, se dovessimo introdurre una seconda ancora entro il paragrafo, vediamo cosa succede: L'ancora all'interno del paragrafo è ancora dimensionata su 1.2em, ma ora è relativa al paragrafo genitore, che è già 19.2px - Nota: Gli elementi di elenco annidati nei menu di navigazione sono un classico esempio di dove la cascata può sfuggire al controllo: fai attenzione a quello. Non c'è una soluzione per questo; l'ultima cosa che vuoi fare è aggiungere una regola in più per ridurre la dimensione delle ancore che si trovano nei paragrafi - questo è un biglietto di sola andata per Migrainesville. Al fine di mantenere il tuo CSS e HTML manutenibile, è importante per Keep It Simple ™. Questo dovrebbe aiutare! Usare Ems significa che a volte dovrai pensare abbastanza duramente, ma farlo ti costringerà a ripulire il tuo operato e ad essere efficiente nella codifica. I Rem sono utili e si comportano esattamente allo stesso modo degli EMS, senza la cascata. Ogni Rem che definisci è relativo alla dimensione del carattere del corpo. Tuttavia, il supporto non è affatto buono, quindi IE8 e versioni precedenti avranno bisogno di un fallback basato su pixel. Abbiamo coperto il CSS Non esiste una regola fissa per quanto dovrebbe essere grande l'altezza della linea, ma 1.5em è un valore ragionevole da provare e renderà la tua tipografia piacevolmente leggibile. Mancia: Dai un'occhiata al suggerimento di Bryan Gruhlke nei commenti per l'utilizzo di valori senza unità con l'altezza della linea ... Nota: Le cose possono diventare complicate se stai provando a impostare una griglia di base con gli em, ma questo è un argomento per un altro articolo. Una volta entrato nella mentalità di mantenere flessibile il tuo layout in termini di dimensioni del carattere, scoprirai di fare affidamento sui pixel sempre meno per la disposizione degli elementi sulla pagina. Se stiamo parlando di layout fluidi, dovresti utilizzare i valori% per determinare la larghezza di ogni dato elemento. I pixel non dovrebbero essere visti da nessuna parte quando si determinano le dimensioni orizzontali. La spaziatura verticale può essere raggiunta molto facilmente con ems; di nuovo, è una questione di pulizia con il tuo markup e styling. Considera di limitare i margini al parte inferiore dei tuoi elementi, in modo da facilitare la gestione del ritmo verticale. Se è necessario definire un Angoli arrotondati su un pulsante? Impostare il Ombre di testo, ombreggiatura, idem. E se hai bisogno di cambiare la dimensione di qualunque cosa in determinate circostanze, come le finestre più piccole? Modificare la dimensione del font di base del corpo nella query media appropriata Come tutte le eccellenti regole scientifiche, deve esserci un'eccezione per dimostrarlo. In questo caso, posso pensare a un buon scenario in cui potresti aver bisogno di pixel; frontiere. Se si definisce una larghezza del bordo (o l'altezza di una regola orizzontale) in ems, potrebbe essere calcolato in modo così piccolo che il browser non può renderlo. In questo caso, semplicemente non lo vedrai. Per le regole orizzontali, potresti avere stili un po 'come questo: Per evitare che scompaia quando la dimensione del corpo è troppo piccola, puoi aggiungere questo: Là. Un pixel dangit. Le larghezze del bordo non possono avere un valore minimo (purtroppo), quindi un backup simile in quel caso non è possibile. Invece, potresti usare i valori della larghezza del bordo di Inizia a utilizzare ems oggi! Il tuo contenuto è tipograficamente radicato, che tu lo capisca o meno. Il riferimento ai pixel, la conversione di figure e il pensiero in termini di layout fissi non è nemmeno necessario. Inizia a pensare in ems e presto dimenticherai del tutto i pixel. Se riesci a pensare a una situazione in cui semplicemente non puoi usare lo sm, mi piacerebbe sentirlo nei commenti!
Una M maiuscola in Calendas Plus - la piazza circostante è alta 1em, larga 1em Conversione da Pixel
, noi abbiamo:
Problemi con Cascading
(1.2 * 16px = 19.2px).
(1.2 * 19.2px = 23.04px). Questo ci dà ancoraggi extra grandi in alcune parti della nostra pagina; difficilmente desiderabile.La correzione
Rems
Che dire dell'utilizzo di Ems altrove?
dimensione del font proprietà; un primo passo sensato nell'utilizzo di ems, ma ora guardiamo altezza della linea. Se mai c'è stata una proprietà che urla "non usare valori di pixel", è l'altezza della linea. L'altezza della linea (discussa in un articolo precedente in maggior dettaglio) di un elemento tipografico dovrebbe sempre essere relativo alla dimensione del carattere. Se hai un'intestazione la cui dimensione è impostata in em, ma la cui altezza della riga è impostata in pixel, potresti finire con brutte sovrapposizioni e una scarsa relazione visiva in generale.
In questo caso, 1.5em è 1,5 * 18 px che è 27px Elementi strutturali
altezza (che può essere complicato in layout flessibili) usa anche gli ems. Forse stai costruendo una navigazione e devi definire l'altezza dei collegamenti del menu: dovrebbero crescere e rimpicciolirsi con le dimensioni del carattere.border-radius usando ems, quindi tutto si adatta perfettamente.
Dai un'occhiata a questo Codepen per un esempio più visivo di ciò di cui sto parlando qui RWD
body font-size: 90%; e Wham! L'intero sito scala nel tempo necessario per entrare.eccezioni
Dai un'occhiata a questa piccola demo hr height: .02em; confine: nessuno; sfondo: bianco; margine: 2em 0; contorni: nessuno; blocco di visualizzazione; chiaro: entrambi; larghezza: 100%;
altezza minima: 1px;
di spessore, medio e magro, sebbene questi valori non si ridimensionino con la dimensione del font, meglio di quanto non facciano i pixel.Conclusione
Ulteriori letture
Accentsconagua