# Far stare i numeri di Mole nella barra dei menu
> Perché i valori di CPU e memoria di Mole sembravano fuori posto nella barra dei menu, e i dettagli di tipografia, spaziatura e allineamento che hanno risolto il problema.
Published: 2026-09-27 | Updated: 2026-10-01
Mole può mostrare due numeri accanto alla piccola talpa nella barra dei menu, per impostazione predefinita CPU e memoria. Da tempo mi dicono che non si abbinava mai del tutto alle icone vicine, anche se nessuno sapeva dire esattamente perché. Questa volta ho fatto uno screenshot della mia barra dei menu e l’ho esaminata elemento per elemento. Il problema non era un singolo numero. Dimensione del testo, peso e spaziatura sembravano accettabili presi uno per uno, e insieme facevano risaltare Mole rispetto a tutto il resto della barra.
La stessa barra dei menu, prima in alto e dopo in basso.
## Partire dai vicini
Nel mio screenshot, l’elemento a sinistra di Mole era Stats, un monitor open source per la barra dei menu. Ho letto il codice che usa per disegnare nella barra: le sue piccole celle mettono un’etichetta da 7 pt in peso leggero sopra un valore da 12 pt in peso normale, la velocità di rete su due righe è da 9 pt, e in tutta la barra non c’è nemmeno un grassetto. Mole usava due righe di testo da 8 pt in semigrassetto. Misurato sullo stesso screenshot, il testo di Mole era alto 12 pixel, quello di Stats da 13 a 16, quindi Mole era una taglia più piccolo dei vicini e l’unico testo in grassetto della barra, e finiva per sembrare una piccola macchia grigia.
Avevo già ritoccato queste impostazioni diverse volte, passando da 10 pt a 9 pt e poi a 8 pt, e ogni volta guardavo la talpa da sola, non accanto ad altri elementi di stato. Così il testo continuava a rimpicciolirsi mentre il peso restava sempre lo stesso. La barra dei menu è uno spazio condiviso, e nessuno legge l’elemento di un’app isolato dagli altri, quindi questa volta ho seguito lo stile che le persone leggono già ogni giorno: etichette da 7 pt in peso leggero, valori da 12 pt in peso normale, 9 pt normale per il layout su due righe e la velocità di rete, niente grassetto, e una gerarchia affidata solo alla dimensione.
## Misurare l’inchiostro, non il riquadro
Una volta sistemata la tipografia, sono emersi i problemi di spaziatura. La distanza tra la talpa e il primo numero, quella tra due metriche e quella tra un’etichetta e il suo valore venivano calcolate ciascuna a modo suo, così l’elemento non si leggeva mai come un insieme. Il vecchio codice misurava le distanze dai bordi delle immagini o dai riquadri di impaginazione del testo, ma l’occhio vede l’inchiostro, e lo spazio vuoto tra un riquadro e il suo inchiostro cambia da un glifo all’altro. Due spazi impostati entrambi a 3 pt potevano sembrare diversi del doppio.
La talpa lo mostrava più chiaramente di tutto. Lo sprite sheet di ogni personaggio ha un proprio margine trasparente, quindi una distanza fissa dal bordo dell’immagine lasciava solo 6,5 pt accanto alla talpa, e di più accanto a un altro personaggio. Ora Mole trova il pixel opaco più a destra in tutti i fotogrammi dell’animazione e misura da lì, così, qualunque personaggio si scelga, la distanza dai numeri è di circa 12 pt.
Lo spazio tra due metriche nascondeva una trappola simile. Ogni cella riserva lo spazio per il suo valore più largo, 100% per le percentuali, così la barra dei menu non si sposta quando un valore passa da 9% a 44%, e con valori a due cifre restano circa 13 pt tra le celle. Quando però entrambe le celle arrivano a 100%, il margine riservato scompare. Una versione intermedia lasciava solo 3 pt tra le celle, e a pieno carico il layout su due righe stampava `100%999 KB/s` tutto attaccato. Ora le celle restano distanti almeno 6 pt, quindi rimangono separate anche a pieno carico. Etichette e valori distano 3,5 pt in verticale, come in Stats.
## Anche righe allineate a sinistra possono sembrare storte
Nelle vecchie celle l’etichetta era centrata sopra il numero e si leggeva come una didascalia sospesa sopra di esso. Questa volta etichetta e valore sono entrambi allineati a sinistra e disegnati dalla stessa coordinata x, quindi dovrebbero essere allineati. Ingrandendo, però, l’etichetta stava sempre un po’ più a sinistra del numero. La causa è nel font: ogni glifo ha un piccolo margine incorporato sul lato sinistro. Le cifre tabulari da 12 pt ne hanno da 0,7 a 1,0 pt, la cifra 1 ne ha 1,7 pt, e le maiuscole di un’etichetta da 7 pt solo da 0,3 a 0,6 pt. Partono dallo stesso punto, eppure i tratti visibili finiscono sfalsati di 1 a 3 pixel, soprattutto quando un valore inizia con 1.
A sinistra, entrambi disegnati dallo stesso punto, e l’1 sta a destra della C. A destra, l’etichetta si sposta sul tratto della cifra e i bordi si allineano.
La correzione sposta l’etichetta sul primo tratto del valore e lascia fermo il valore. Il valore cambia ogni secondo, e se si spostasse ogni volta che cambia la prima cifra, il numero che stai guardando oscillerebbe da una parte all’altra. Spostare la piccola etichetta sopra evita il problema; si muove, di meno di 1 pt, solo quando il valore passa a un’altra decina.
Anche con i tratti perfettamente allineati, il valore sembrava ancora leggermente spostato a destra. È un’illusione comune quando una cifra grande sta sotto un testo piccolo: una cifra tonda da 12 pt è molto più grande di una didascalia leggera da 7 pt, e l’occhio percepisce il bordo del glifo più grande come più rientrato. Ho confrontato 0, 0,5 e 1 pt. A 1 pt il numero sembrava già sporgere, quindi ora il valore sporge di 0,3 pt verso sinistra, poco più di mezzo pixel, quanto basta perché le due righe sembrino appoggiate sullo stesso bordo.
Le linee blu segnano il bordo sinistro di ogni etichetta. Dall’alto in basso: perfettamente allineati, il valore che sporge di 0,3 pt verso sinistra, e di 1 pt. Quella centrale è la versione adottata.
## Riservare la larghezza di ogni numero
Quando qualcosa nella barra dei menu cambia larghezza, tutte le icone alla sua destra si spostano insieme, quindi ogni tipo di valore ha bisogno di uno spazio riservato per la sua forma più larga. Sono saltate fuori due lacune. La velocità della ventola si scrive `850` sotto i 1000 giri/min e `2.1k` sopra, e le due forme riservavano larghezze diverse, così l’intera barra dei menu faceva un salto quando la ventola superava i 1000 giri/min. Lo swap usava direttamente il formato dei byte di sistema, che produceva `10.52 GB`, oppure `1,2 Go` su un sistema in francese: troppo lungo per una cella da 12 pt, e con una larghezza che cambiava insieme al valore. Ora le due forme della ventola condividono la stessa larghezza, e nella barra dei menu lo swap è sempre in forma breve di al massimo tre cifre, come `512 MB`, `1.2 GB` o `12 GB`. Il valore completo resta nel popover.
Strada facendo, anche la velocità di rete ha avuto una correzione. Sotto i 10 KB/s mostrava una cifra decimale, così uno `0.0 KB/s` a riposo stava sopra `86 KB/s` con il separatore decimale su una riga e non sull’altra, e la coppia allineata a destra non sembrava mai in ordine. Un decimo di kilobyte al secondo dice molto poco, quindi i KB/s ora sono sempre un numero intero. I MB/s mantengono un decimale sotto 10, dove la differenza tra `1.5 MB/s` e `1 MB/s` conta davvero.
## Come impostarlo
Nelle Impostazioni di Mole, apri la scheda Barra dei menu. La riga Visualizzazione ha tre opzioni: Corridore mostra solo la talpa, Metriche mostra solo i numeri, ed Entrambi mostra la talpa con i numeri accanto, quindi scegli Metriche o Entrambi per vedere i numeri di cui parla questo articolo. Sotto compaiono allora alcune righe in più. Disposizione impostata su Riga dà le celle con l’etichetta sopra il valore, mentre Impilato dà le due righe di testo piccolo. Indicatore 1 e Indicatore 2 scelgono le due metriche, CPU e memoria per impostazione predefinita, e ognuna può passare a GPU, temperatura, potenza, ventola, swap o la batteria di un dispositivo Bluetooth. Attivando Velocità di rete si aggiungono upload e download sulla destra. La talpa stessa si può sostituire con un altro personaggio in Stile, e il pulsante accanto gira il personaggio dall’altra parte.
A volte mi chiedono perché la talpa corra così veloce. Il suo passo è la lettura della CPU: più il Mac è impegnato, più corre veloce. Segue il valore più alto tra l’utilizzo complessivo della CPU e il carico medio di un minuto. Del tutto a riposo fa un passo circa ogni 1,3 secondi, e dal 70% in su smette di accelerare, a circa quattro passi al secondo. La curva sale più in fretta a carico basso perché 10% e 30% si distinguano chiaramente, il che significa che con un browser aperto e un po’ di scrittura in corso corre già circa il doppio di quando il Mac è a riposo, e compilare codice o esportare un video la fa correre sul serio. Il passo è un segnale voluto, per questo non c’è un’impostazione separata per la velocità. Gli altri personaggi vanno al proprio passo, perché ognuno ha un numero diverso di fotogrammi di animazione. Quando è visibile solo la talpa, passando il puntatore sopra compare anche il suggerimento «Corre più veloce quando la CPU è più occupata».
La scheda Barra dei menu nelle Impostazioni, dove si impostano la modalità di visualizzazione, il personaggio, la disposizione e le metriche.
## Cosa ho provato e lasciato com’era
A un certo punto la cella della temperatura mi sembrava troppo grande. Ho fatto una versione con l’unità a 9 pt e un’altra a 10 pt, e in entrambe il `°` più piccolo scendeva verso la linea di base, così `58°C` si leggeva come il refuso `58°c`, e il simbolo di percentuale diventava visibilmente più piccolo di quello che Stats mostra proprio accanto. Misurando di nuovo, ho visto che il numero aveva esattamente la stessa dimensione di quello nella cella della CPU; sembrava più grande solo perché `58°C` ha una lettera maiuscola in più rispetto a `44%`. Quindi la dimensione è rimasta com’era.
C’era anche una vecchia regola per cui accanto al personaggio poteva comparire solo il layout su due righe, mai queste celle con l’etichetta sopra il valore. La versione contro cui era stata scritta quella regola usava un 12 pt semigrassetto. Tolto il grassetto, il motivo non vale più, quindi ora accanto al personaggio possono comparire entrambi i layout, e le celle sono l’opzione predefinita.
In ordine: il personaggio con le metriche, con l’aggiunta della velocità di rete, il layout su due righe, solo le metriche, ventola e swap, e pieno carico. In nessuno i valori si accavallano.
Ripensandoci, nessuna di queste modifiche è grande. Sono mezzi pixel, un decimale e qualche punto di spaziatura, e insieme decidono se un’icona si fonde con la barra dei menu o salta all’occhio. Se sviluppi un’app per la barra dei menu, metti il tuo elemento e qualche vicino popolare nello stesso screenshot e confrontali, misura l’inchiostro invece del riquadro, e riserva la larghezza massima di ogni valore. Dopo queste tre cose, probabilmente non sembrerà più fuori posto.
Tutti questi valori ora sono coperti da test, uno per il peso, uno per la larghezza e uno per l’allineamento delle etichette, così è meno probabile che una modifica futura li annulli. È la stessa idea di [Progettare Mole per restare discreto](https://mole.fit/it/blog/the-design-of-mole): ciò che vive nella barra dei menu funziona meglio quando lo guardi ogni giorno e non te ne accorgi mai.
---
Canonical HTML page: https://mole.fit/it/blog/mole-menu-bar-redesign
Blog index for agents: https://mole.fit/it/blog/llms.txt
Site index for agents: https://mole.fit/llms.txt
