C’è un CSS Font Size/Altezza della Linea di Calcolatrice?

Ho guardato alcuni conferenza recentemente online, parlando abt tipografia web. C’era qualcosa di cui circa un web calcolatrice per il calcolo font-size/line-height con il rapporto aureo. Tutte le idee in cui si può trovare? O che cosa le dimensioni utilizzate per le vostre intestazioni?

InformationsquelleAutor JM at Work | 2011-05-20

 

5 Replies
  1. 33

    La proprietà CSS ‘line-height’ accetta in realtà un puro valore numerico, che il lavoro l’altezza della linea di base la dimensione del carattere impostato. Se si desidera utilizzare il golden ratio (1.61803399), allora si potrebbe impostare questo come l’altezza della linea del corpo.

    body { 
    tipo di carattere: 100%/1.618 sans-serif; 
    } 
    

    Come un esempio, l’impostazione di un H1 font-size di 24px potrebbe produrre una line-height di 39px (arrotondato da 38.832).

    • Per qualsiasi tipo di carattere e la dimensione, l’altezza della linea deve aumentare la larghezza della linea aumenta troppo
    • Cura di elaborare, Tom? Utilizzando una unità di valore inferiore indica al browser di regolare l’altezza della riga a seconda della dimensione del font. Non sono sicuro di dove la larghezza di riga viene a giocare qui, ma potrebbero essere interessati al tuo ampliato pensieri.
    • Come la larghezza della linea è aumentato, il testo diventa più difficile da leggere, perché l’altezza della linea non è stata aumentata per compensare l’effetto della larghezza. Ci sono 3 tipografici dimensioni: la dimensione del carattere, l’altezza delle righe e la larghezza della linea. Che cosa succede se si voleva utilizzare un 16px la dimensione del carattere contenuto larghezza di 550px? Che cosa dovrebbe regolato l’altezza della riga in questo caso? Secondo voi è 25.88, ma l’ottimale è di 25.00. Questo è solo un ulteriore lettura 😉
    • Grazie per l’espansione e sono completamente d’accordo che il tipo deve essere impostato correttamente, ma non è sempre facilmente realizzabili in CSS. A seconda di come si imposta i vostri stili e di markup, l’impostazione di un line-height con ogni font-size potrebbe causare ingestibile codice in futuro. Almeno un unità di base-meno valore di incremento/decremento line-height insieme con il font-size, anche se è strano pixel fuori dall’optimum di qua e di là. E poi si può regolare la chiave di blocchi di testo, caso per caso.
  2. 0

    Coloro che cercano di impostare in modo esplicito il line-height con il Golden Ratio, è possibile utilizzare:

    line-height: 161.8%;

    Questa scala correttamente con diverse dimensioni di carattere.

Lascia un commento