Generatore di scala tipografica con sezione aurea

Inserisca una dimensione base, scelga quanti passaggi superiori e inferiori desidera e riceva un elenco deterministico di valori arrotondati, pronto per token di design, guide di stile o CSS. A differenza di un’impostazione fissa per i titoli, questo generatore consente di definire la profondità della scala e applica l’intera sezione aurea tra elementi adiacenti. Può mantenere l’etichetta predefinita in pixel oppure indicare un’altra unità senza modificare il calcolo sottostante.

Costruisca la scala partendo da una base significativa

Parta dalla dimensione che sostiene l’esperienza di lettura, anziché scegliere per primo il titolo più grande. In un sito web, la base coincide in genere con la dimensione del testo corrente; in una presentazione può essere il testo normale delle diapositive; in un sistema di stampa potrebbe corrispondere alla misura standard dei paragrafi in punti. Il generatore considera questo numero come passaggio zero. Ogni passaggio positivo lo moltiplica per phi, circa 1.61803399, mentre ogni passaggio negativo lo divide per lo stesso rapporto. Si ottiene così una progressione coerente in entrambe le direzioni e ogni elemento rimane matematicamente collegato al punto di riferimento. Scelga steps_up per controllare quanti valori maggiori vengono prodotti e steps_down per includere didascalie, note o etichette di supporto sotto la base. Entrambi i controlli sono limitati affinché il risultato resti pratico e semplice da esaminare. Una base di sedici con tre passaggi superiori, per esempio, crea dimensioni da esposizione progressivamente più incisive e mantiene sedici come centro concettuale esatto. Il campo dell’unità è un’etichetta e non un convertitore: sedici pixel e sedici punti producono la stessa scala numerica, ma comunicano ambienti di utilizzo diversi. Questa distinzione evita di fingere che unità fisiche e digitali prive di un rapporto diretto possano essere convertite senza contesto. Inizi da una dimensione di cui conosce già la leggibilità e usi quindi la scala per esplorare la gerarchia circostante.

Legga, arrotondi e applichi i valori generati

La risposta elenca gli elementi dal passaggio richiesto più grande al più piccolo, così da poterli esaminare immediatamente come gerarchia tipografica. Ogni riga include il passaggio con segno, la dimensione numerica, il valore formattato con l’unità scelta e un ruolo semplice che indica se è maggiore, uguale o minore rispetto alla base. Il passaggio zero è sempre identificato come base. Il campo della formula conserva la regola esatta utilizzata, utile per documentare la provenienza dei token di design o verificare in seguito un tema generato. La precisione controlla il numero di cifre decimali di ogni dimensione. Tre decimali sono adatti al CSS e alla maggior parte degli strumenti di progettazione digitale, mentre i numeri interi possono essere preferibili per interfacce vincolate o specifiche di stampa che evitano deliberatamente le frazioni. L’arrotondamento viene eseguito soltanto dopo il calcolo della potenza, quindi i passaggi intermedi non accumulano errori. Se due piccoli valori vicini diventano identici con una precisione ridotta, aumenti la precisione invece di modificarne uno manualmente e rompere la proporzione. Consideri il risultato come un sistema iniziale matematicamente coerente, non come l’obbligo di assegnare ogni valore. Un prodotto compatto può usare solo la base e due elementi maggiori, mentre un sito editoriale può sfruttare quasi tutta la scala. Copi i valori numerici in token come font_size_base o font_size_display e conservi i numeri dei passaggi nei commenti, affinché chi si occuperà del sistema possa rigenerarlo con coerenza senza dover indovinare l’origine di valori isolati.

Bilanci la proporzione classica con la tipografia pratica

La sezione aurea completa crea un contrasto deciso, proprio per questo si adatta a impaginazioni editoriali espressive, sistemi di marca, manifesti e pagine promozionali. Può però richiedere troppo spazio quando molti livelli consecutivi devono convivere in un’applicazione densa. Usi meno passaggi se il rapporto produce più gerarchia di quanto serva all’interfaccia e provi le dimensioni con il carattere effettivo, perché altezza della x, peso, larghezza e dimensionamento ottico modificano la scala percepita. I layout reattivi possono adottare basi diverse ai vari breakpoint mantenendo le stesse assegnazioni dei passaggi, così da conservare una somiglianza tra le viste senza imporre a uno smartphone una dimensione da esposizione pensata per desktop. L’accessibilità parte comunque da un corpo leggibile, una lunghezza di riga confortevole, un’interlinea adeguata e un contrasto sufficiente; una proporzione gradevole non può correggere una base troppo piccola o un carattere inadatto. Lo strumento calcola esclusivamente le dimensioni dei caratteri e non inventa interlinea, spaziatura, pesi o HTML semantico. Tali scelte dipendono da lingua, mezzo, carattere e densità dei contenuti. Per automatizzare, invii gli stessi dati tramite API a $0.002 per richiesta e salvi la scala restituita insieme ai token di design. Poiché il calcolo non usa rete, casualità né ora corrente, richieste identiche restituiscono sempre valori identici. L’output è quindi adatto a script di build, test snapshot, generatori di documentazione e verifiche dei sistemi di design in cui la riproducibilità conta quanto l’armonia visiva.