In che cosa si traduce esattamente la dimensione del carattere?

Ho un carattere di 40 pixel che sto cercando di tradurre in immagini personalizzate. Sto cercando di far corrispondere esattamente la dimensione dell'immagine, ma sto riscontrando dei problemi nel trovare esattamente la dimensione giusta. Fondamentalmente, ciò che si riduce è questo. Quando un carattere dice che sono X pixel, cosa significa fisicamente?

Questa è un'ottima domanda, che ha una risposta piuttosto insoddisfacente.

La dimensione del tipo, che sia specificata in pixel, punti (1/72 ") o millimetri, è l'altezza di un em-quadrato, una scatola invisibile che è in genere un po 'più grande della distanza dal montante più alto al discendente più basso.

Dato questo è una misura un po 'arbitraria che

• dipende dall'esatto disegno tecnico del carattere
• non può essere misurato con precisione da un campione stampato o rasterizzato

non è molto significativo o utile, se non come approssimazione.

Nel tuo caso, scopri quali dimensioni devi specificare in Photoshop per abbinare il rendering del browser tramite la sperimentazione. Dovresti trovare che questo è un rapporto costante per qualsiasi tipo di carattere, ma non mi aspetto che ciò avvenga se cambi browser o sistema operativo.

Tempo ASCII! Fai finta che le due scatole sottostanti siano pezzi di piombo del 1900 o giù di lì. Allora, i caratteri tipografici venivano lanciati in piombo (o instradati in legno). Per impostare il tipo in un blocco di stampa, dovevano essere collegati a blocchi solidi. Ecco da dove proviene la dimensione del tipo (in punti):

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

Nota che le due lettere sopra sono di dimensioni diverse, ma il loro riquadro di selezione è lo stesso. Pertanto, in termini di punti, entrambi i caratteri hanno le stesse dimensioni.

Al giorno d'oggi, non produciamo molto in piombo e legno e la maggior parte è digitale. Tuttavia, il concetto del dimensionamento dei punti esiste ancora in quanto esiste una scatola virtuale che ha la stessa altezza per ogni lettera su cui è posizionato il tipo. Ancora una volta, è questa scatola virtuale che definisce la dimensione in punti piuttosto che le misurazioni fisiche delle forme letterali stesse. La dimensione effettiva delle forme letterali è spesso inferiore alla dimensione in punti (ma può anche essere più grande).

La misurazione del tipo in pixel non funziona a causa di ciò, tuttavia è possibile "impostare" il tipo di pixel in CSS e simili. Il browser esegue una traduzione nel miglior modo possibile tra le dimensioni px dichiarate. Ma è sempre una stima sfocata.

In definitiva, non esiste un modo preciso per ottenere due tipi di carattere tipografici esattamente della stessa dimensione senza guardarli visivamente e cambiando la dimensione di ciascuno fino a quando non li vedo avere la stessa dimensione.

La "dimensione del carattere" di un carattere si riferisce all'altezza "em" del carattere, che non è necessariamente uguale all'altezza di caratteri particolari nel carattere.

Di solito l'altezza em di un carattere aderisce alla stessa idea di base - sarà approssimativamente impostata sulla distanza dal discendente più basso (come la parte inferiore della lettera g) al più alto ascendente (come la parte superiore della lettera h):

Come puoi vedere, nessuna delle singole lettere copre l'intero arco.

Con i caratteri digitali, l '"altezza dell'altezza" di un carattere è una scelta fatta dal progettista dei caratteri e non deve assolutamente conformarsi a questa convenzione: un progettista di tipi digitali può scegliere qualsiasi fondamento per la loro dimensione. Tuttavia, i caratteri continuano ad aderire, almeno approssimativamente, al tipo di convenzione sopra descritta. Ai vecchi tempi quando il tipo consisteva in blocchi di metallo, l '"altezza em" era l'altezza di uno di quei blocchi, che doveva essere abbastanza alto non solo per qualsiasi personaggio in quel carattere tipografico ma anche per eventuali ascendenti, discendenti e accenti.

Ora, molti caratteri tipografici moderni includono anche accenti sulle lettere maiuscole (come Ć) - questi accenti si estendono al di fuori del tradizionale ascendente tipografico e quindi questi (e forse altri caratteri speciali) non rientrano nella parte superiore della "em". Per motivi storici non regoliamo le dimensioni delle em per consentirle, manteniamo le dimensioni delle em e le estendiamo semplicemente - qualsiasi tipografo che usa tali accenti dovrà garantire che ci sia spazio per estenderle, sebbene di solito il l'interruzione di riga è adeguata nel testo del corpo.

L' interlinea nel testo del corpo è uno spazio lasciato tra il discendente di una riga di testo e l'ascendente della riga sottostante, ovvero la "dimensione del carattere" non include questa misurazione dello spazio di riga. Può essere influenzato dal campo CSS line-height, dove1.4significa che l'interlinea è 0,4 volte l'altezza em, e quindi un'intera riga del corpo del testo occuperà 1,4 volte l'altezza em compreso l'interlinea. In altre applicazioni lo spazio tra le righe può essere specificato in modo diverso: i word processor spesso specificano in termini di un multiplo di interlinea "singola", ma a differenza dei CSS, di solito lo spazio "singolo" non significa nessuna interruzione di linea, ma una linea "predefinita" gap, in cui l'applicazione tenta di trovare un valore predefinito basato sui metadati nel file dei caratteri. Esistono più standard per specificare le metriche nel carattere (ad es. In TrueType, esistono diversi standard per Mac e Windows / OS2), quindi l'interruzione di linea predefinita può variare tra applicazioni e sistemi operativi.

Ora, anche se un progettista fa seguire una convenzione prevedibile per la loro altezza em, questo ancora non vi dico la dimensione delle lettere maiuscole (cap-altezza) o la dimensione di dire una o(x-altezza o linea mediana) in quanto questi possono variare liberamente tra i caratteri tipografici in relazione all'altezza del montante. All'interno di una famiglia di caratteri, tuttavia, questi saranno generalmente coerenti. Quindi, ad esempio, Times New Roman Bold e Times New Roman Regular avranno le stesse dimensioni dei caratteri per la stessa dimensione di em, che dovrebbe includere ascendenti, discendenti, altezza del cappuccio e altezza x.

Prova a digitare il carattere barra verticale ('|') e misuralo. Se ho duplicato correttamente la tua situazione e il tuo antialiasing non la sta sfocando troppo, dovrebbe essere 22px.

22px rappresenta l'altezza del blocco di tipo. Ma ogni personaggio riempie il blocco in modo diverso. Una 'g' o 'q' occuperanno la regione inferiore di quel 22px, mentre le lettere maiuscole e minuscole come 'b' o 'd' occuperanno le parti superiori. '|' è uno dei pochi (se non l' unico) carattere a riempire interamente lo spazio di 22px.

Non so come confrontare le tue impostazioni CSS, ma questo spiega come Photoshop interpreta l'altezza del testo.

Sei sicuro che il tuo carattere sia misurato in pixel? Il più delle volte i caratteri sono misurati in punti. Un punto è 1/72 di pollice. Quindi un font da 40 pt è alto 40/72 "o 5/9". Il kicker è quella che è la dimensione dalla cima degli ascendenti sulle lettere alte fino alla parte inferiore dei discendenti sulle lettere che pendono sotto la linea di base. Ecco perché a volte viene utilizzata l'altezza x, come menzionato sopra. Questa è l'altezza delle lettere minuscole che non si attaccano su o giù.

Ad ogni modo, purtroppo le misure non sono mai esatte. Dovrai solo misurare e capire (e / o tentativi ed errori) per realizzare ciò che stai provando.