Quali considerazioni ci sono nella progettazione di caratteri pixel?


14

Sto progettando font pixel monospace per un gioco, e finora sono stato in grado di lavorare solo con dimensioni estremamente ridotte (la più grande che ho gestito è 5x9) perché quelle sono le più facili da provare e sbagliare. Spesso i risultati che mi vengono in mente per dimensioni anche di 7x13 sono tutti blocchi e poco attraenti.

Ho analizzato alcuni altri caratteri pixel e la maggior parte di quelli graficamente attraenti fanno molte considerazioni alternative che non avrei mai pensato di fare, come rendere intere sezioni collegate solo in diagonale.

Esistono dimensioni di blocco speciali "ottimali" per la progettazione di caratteri pixel? Esistono posizionamenti di pixel speciali che dovrei tenere a mente? Perché a volte quando disegno una linea che è lunga solo 11 pixel (o faccio intersecare le cose a dimensioni così piccole), finisce per apparire come qualcos'altro una volta ingrandito.

Risposte:


11

I caratteri pixel non sono terribilmente diversi dai caratteri minuscoli di stampa quando ci si arriva fino in fondo *. L'unica grande eccezione è che sai cosa farà il supporto con i caratteri pixel - un grande vantaggio.

Non esiste davvero una griglia di pixel ideale, di per sé. Ovviamente una griglia più grande ti dà più spazio per lavorare. I tipi più piccoli che ho visto funzionare con successo sono i progetti 7px. I design MiniFonts di Joe Gillespie ti aiuteranno a comprendere la progettazione alla soglia di leggibilità. Un'altra domanda qui trattava di quei micro disegni e potrebbe darti ulteriori riferimenti.

Dove iniziare

Ogni problema di progettazione inizia con un vincolo. Con un buon carattere è [di solito] l'uso previsto. Dove deve adattarsi il tuo font pixel? Il tuo gioco trarrebbe beneficio da una lettura semplice del testo o il testo deve essere tenuto lontano e essere disponibile per "decifrare" solo quando necessario?

Dovrai chiarire se desideri o meno una minuscola. Un carattere tutto maiuscolo può adattarsi a una griglia più piccola a causa delle forme relativamente semplici e della mancanza di estensori (sotto la linea di base e sopra l'altezza del cappuccio). Ma anche le lettere minuscole possono diventare piuttosto piccole: il Minx di Gillespie fornisce e un eccellente punto di riferimento per quello che considererei l'alfabeto minuscolo ragionevole più piccolo.

Minx è piccolo quanto la minuscola

I dettagli

Noterai qualcosa anche nei migliori caratteri pixel: sembrano terribili quando ti avvicini e provi a capirli. Sono pensati per essere "percepiti", ovvero le lacune nel progetto sono colmate dal cervello. Quindi due quadrati allineati a 45 ° diventano una linea diagonale. A volte un buco nella griglia è la linea "sottile" tra due tratti spessi.

Progettare da vicino : questa è la sfida del designer di font pixel. In altre parole, crei e modifichi le tue forme a distanze ridicolmente per tutto il tempo tenendo conto di come apparirà quando verrà visualizzato alle sue dimensioni normali.

Il computer è nostro amico in questa situazione confusa: basta tenere aperta una seconda finestra con una vista al 100% in modo da poter vedere come il tuo design è davvero . Avere un secondo monitor in giro per questa "visione della realtà" rende le cose molto più convenienti.

Accomodare il minuscolo

Dal momento che hai menzionato la necessità di minuscole a 6 x 12 ...

Ecco un breve esempio che ho messo insieme per illustrare le considerazioni specifiche con tale requisito.

Perdonami, è un'illustrazione approssimativa

Per cominciare, ho tagliato un pixel dalla tua altezza. Lavorando a dimensioni così ridotte, noterai che la leggibilità beneficia di un corpo di personaggio più ampio. I tappi devono essere solo leggermente più alti di quelli minuscoli. Dai un'occhiata a Verdana 9px per vedere come un corpo largo può giovare alla leggibilità.

I caratteri minuscoli con ascendenti prominenti leggeranno spesso meglio se si estendono leggermente oltre l'altezza del cappello (come bnel mio esempio). Il mio esempio riesce ancora a rimanere su un corpo alto 11px. Ciò è aiutato dal fatto che la leggibilità è meno influenzata dai decender lunghi: solo un paio di pixel farà lì.

Anche su questa griglia restrittiva, puoi vedere quali piccoli tocchi di stile puoi aggiungere senza rovinare completamente la leggibilità.

Ingrandito, puoi vedere come diventano strane le cose

Con l'altezza x e il corpo evidenziati per riferimento:

inserisci qui la descrizione dell'immagine

Alla dimensione ingrandita, Millustra una considerazione notevole. Con una griglia di numeri pari non hai un singolo punto medio per far atterrare un pixel. Questa non è necessariamente una cosa negativa, dovrai solo prendere alcune decisioni che sembrano strane quando ti avvicini. Il secondo M, ad esempio, sembra piuttosto imbarazzante quando ingrandito ma in realtà è un miglioramento delle dimensioni dello schermo. Questi tipi di linee implicite sono un componente critico della maggior parte dei caratteri pixel.

Ovviamente, dovrai anche tener conto dello spazio extra richiesto per la spaziatura delle lettere. Certamente non hai molto spazio per giocare lì, ma è una parte importante della leggibilità.

Guarda ai maestri

Come con qualsiasi forma d'arte, imparerai di più cercando di fare ciò che fanno i maestri. Gli esempi che ho linkato sopra ti forniranno moltissime informazioni.

Un caso di studio classico nell'eccellenza dei font pixel è Unibody 8 di Underware . Il romanzo verticale "corsivo" raggiunge l'effetto usando gli allineamenti a 45 ° per implicare l'angolo di un carattere corsivo senza compromettere l'intero carattere nel processo.

Emigre era un altro dei pionieri, insieme a Susan Kare sui primi Mac OS.

* Nota a
margine : Retina è un fantastico esempio di come un font di stampa rappresenti l'imprevisto in dimensioni minuscole, come è ciò che considererei il suo predecessore Bell Centennial .

Retina di H & FJ


In effetti, desidero un minuscolo. Voglio che il carattere 6x12 sia utilizzabile, per esempio, in una console.
Joe Z.

Sì, questa è un'ottima risposta, con molte risorse che posso approfondire. Grazie.
Joe Z.

1
aggiunta molto minore: "da vicino e lontano" è facilmente raggiungibile in Photoshop creando una nuova finestra (menu finestra> organizza> nuova finestra per docname-1) e lasciando uno di loro con dimensioni di zoom del 100% sul lato come un "preview copy"
horatio,

1
Nessun problema, ti viene l'idea. Non penso nemmeno che avrai bisogno dell'altezza extra. Vorrei solo aggiungere il pixel extra sulla larghezza e lasciare l'altezza tra 10 e 12. Gioca con alcuni personaggi e vedi dove finisci.
borghese il

1
A proposito, una parola di prova standard che rappresenta le forme di base dell'alfabeto romano è Hamburgefonts . Molti designer di tipi inizieranno con H, ne oper farsi un'idea delle caratteristiche essenziali.
borghese il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.