Come progettare e costruire un font corsivo funzionale

Cosa starai creando

Il tipo corsivo era una volta un ossimoro, ma la moderna tecnologia OpenType ora ci consente di creare veri caratteri corsivi con forme di lettera che si comportano in base al loro contesto, proprio come le vere lettere corsive, in una certa misura. 

In questo tutorial imparerai come creare un design corsivo, tradurlo in contorni di Bezier validi e pulirlo, inserirli in un font e codificare le regole di OpenType che ne programmano il comportamento corsivo.

1. Hai davvero bisogno di un font?

Questa potrebbe sembrare una domanda strana da chiedere, ma sempre più oggi i designer usano troppo i caratteri. La parola "font"Letteralmente significa" cast source ", riferendosi ai blocchi di metallo che un tempo costituivano un carattere tipografico. Questi blocchi erano fatti di metallo incredibilmente duro, progettato per sopravvivere a centinaia di migliaia di presse, o più tardi, per fungere da stampi ripetutamente copia delle sue lettere in lumache di metallo più morbide per la stampa tipografica.

Con questo vi è un'implicazione che i caratteri sono pensati per un uso pesante e ripetitivo. I progettisti di tipi affondano una grande quantità di lavoro in un font per garantire che funzioni nel miglior modo possibile in qualunque data impostazione. 

Quindi, se hai solo bisogno di una parola decorativa, non ha senso progettare (o oggigiorno acquistare) un intero carattere. Probabilmente stai meglio scrivendo la tua parola o frase e importandola nel tuo disegno. Ma se, forse, hai bisogno di più intestazioni diverse, o vuoi impostare un passaggio particolarmente lungo in quel carattere tipografico, o vuoi un disegno che può altrimenti stampare qualunque cosa diavolo vuoi, allora un font è la strada da percorrere.

2. Creazione del design

I tipi di disegni sono spesso il risultato di felici incidenti. Spesso posso letteralmente scrivere qualcosa su carta che sembra davvero buono, e questo si trasformerà in ispirazione per un intero carattere tipografico. Ad esempio, ecco alcuni titoli che ho scritto per alcuni compiti di fisica / statistica che ho pensato potessero fare un bel carattere tipografico.

Un consiglio: se stai provando a scrivere un campione, è spesso utile scrivere su carta a griglia in modo da poter conservare le tue lettere e scansionare le colture in modo semplice e diretto.


Questi sono stati scritti con una penna calligrafica a punte larghe. È possibile acquistare penne stilografiche calligrafiche molto economiche per meno di $ 10 da produttori come Sheaffer.

Dovrai scannerizzarli in immagini per vettorializzare i disegni. Se non hai uno scanner (come me), puoi semplicemente scattare una foto da un angolo ortogonale e usarla. Entrambe le scansioni di cui sopra sono state realizzate con una fotocamera per iPhone. La qualità dell'immagine non deve essere eccezionale: devi solo preoccuparti di evitare la distorsione geometrica.

3. Tracciare le lettere in FontForge

Per creare il carattere stesso, è necessario un programma di modifica dei font. Esistono molte opzioni orribilmente costose, ma una grande app, FontForge, è gratuita e open source. Utilizzeremo FontForge in questo tutorial. Assicurati di impostarlo per utilizzare solo le coordinate intere (File > Preferenze > La modifica > SnapToInt).

Passo 1

La prima cosa che dobbiamo fare è importare la scansione nell'area di disegno FontForge. Fai questo facendo clic su una finestra di modifica degli glifi e andando a File > Importare.

Quindi, assicurandosi di essere nel sfondo livello, utilizzare gli strumenti di spostamento e ridimensionamento per posizionare e ridimensionare l'immagine di riferimento. A scopo dimostrativo, inizierò con la lettera 'r' in questo esempio, quindi centrare la 'r' al centro del frame glifo, proprio sulla linea di base.

Passo 2

Iniziamo disegnando la giunzione in cui inizia l'instroke della lettera.

Quindi pianifichiamo Punti curva HV a tutti i minimi e massimi del contorno della lettera. Usando i punti curva HV aiuta ad ancorare in luoghi punti importanti lungo il contorno della lettera, e anche insidie ​​infiniti mal di testa con punti estremi mancanti lungo la strada. Per ora va bene se il percorso si interseca.

Quindi copia i punti di instroke e spostali orizzontalmente per formare i punti di uscita. È molto importante che le coordinate y delle due serie di punti rimangano le stesse.

Quindi finisci di delineare il glifo.

Passaggio 3

Regola le maniglie più belle dei punti della curva per adattarle al meglio al contorno del glifo.

Puoi vedere un'anteprima piena del glifo nella vista Font principale.

Passaggio 4

Ora possiamo affrontare il glifo successivo, in questo caso, una 'i'. Inizia roping via la 'r' impostando la sua larghezza di avanzamento in cima al suo bordo di uscita.

Tracciamo il glifo con le stesse tecniche con le quali abbiamo usato la 'r', avendo cura di rendere la giunzione tra l'uscita di r e l'instroke di i.

Dovrai disegnare l'uscita della "i" all'altezza corretta, in modo da allineare gli instro di tutte le altre lettere, quindi può essere estremamente utile creare linee guida Fontforge che segnino le altezze dei join. Crea linee guida trascinando verso il basso dal righello superiore nella finestra degli glifi. Assicurati che le linee guida siano arrotondate alle coordinate intere.

Quindi disegna il resto del glifo.

Passaggio 5

Questo 'i' è stato disegnato nello spazio degli glifi 'r'; dobbiamo spostarlo nel suo slot di glifo. Seleziona il contorno (e il punto) facendo doppio clic sui tracciati e tagliali e incollali nello slot glifo 'i'. Imposta la larghezza di avanzamento impostando tutti i sidebear pari a 0 (Metrica > Imposta entrambi i cuscinetti). Sposta l'immagine di sfondo, se necessario.

Puoi ancora vedere le lettere fianco a fianco digitandole nel elenco di parole scatola. Ciò è estremamente utile quando si creano caratteri corsivi per assicurarsi che i join siano uniformi e allineati.

Passaggio 6

Qui sto tracciando la lettera 'l' dal campione. Può essere più facile copiare una lettera esistente (in questo caso, una "i" senza puntini) e spostare i punti in modo che corrispondano alla nuova lettera, anche se ognuno ha il proprio modo di scansioni a mano.

Il sistema di punti con riquadro di delimitazione dell'HV a volte si rompe, poiché è impossibile tracciare certe curve usando solo i punti HV.

In questo caso, potrebbe essere necessario inserire ulteriori punti curva lungo la spline.

Le scritte a mano sono raramente perfette, ma i caratteri devono essere (uno degli svantaggi dell'uso dei caratteri). Ciò significa che al fine di evitare combinazioni problematiche, le lettere, in particolare i loro instrokes e outstrokes, devono essere un po 'standardizzate. Nel caso della "l", ciò significa abbassare la coda in modo che si trovi sulla linea di base.

Passaggio 7

Ecco una traccia della lettera "c". Come puoi vedere, ho apportato alcune modifiche dalla versione scritta per farlo funzionare bene con altre lettere. Il Finestra delle metriche può essere molto utile per testare stringhe di lettere.

4. Derivando il resto dell'alfabeto

Il tuo campione di lettere probabilmente non conterrà ogni lettera dell'alfabeto. In effetti, a volte puoi ottenere risultati migliori derivando lettere da lettere che hai già disegnato. Ad esempio, uno script 'a' è molto simile a un 'ci'.

Ho creato il sopramenzionato "a" semplicemente schiacciando insieme una "c" e una "i" nel campione.

Ogni lettera che creerai genererà più lettere. La 'a' per esempio dà origine alla 'd'.

La 'd' non è l'unica lettera che viene da 'a'. È anche possibile derivare il 'q', 'u', 'i' (se hai iniziato con un 'a' invece di un 'i'), 'n', 'm', 'p', 'h', e molti altri da "a". Esistono innumerevoli modi per ricavare un alfabeto a partire da alcune lettere di esempio. Di seguito viene mostrato un modo, a partire da "s", "a", "c", "e", "l", "o" e "r".

Ecco un esempio di un font che ho realizzato con tutte le 26 lettere.

5. Assemblaggio di un font funzionale

A questo punto, il font contiene un alfabeto completo, ma funziona a malapena come carattere, dal momento che le lettere funzionano solo insieme al livello più elementare. La prossima parte di questo tutorial si concentrerà sulla creazione di alternative necessarie e sulla programmazione del font per collegare le lettere in un piacevole script in corsivo.

Passo 1

Le tue lettere "b", "o", "v" e "w" avranno quasi sicuramente un risultato positivo che termina più in alto rispetto alle altre lettere. Fai del tuo meglio per standardizzare queste quattro lettere proprio come hai fatto con le normali lettere.

Passo 2

Se si verifica una di queste quattro lettere, la lettera che segue non si collegherà perché la sua instroke sarà inferiore alla precedente uscita della lettera. Abbiamo bisogno di creare un insieme di glifi alternativi con instrokes alti che possano collegarsi con 'b', 'o', 'v' e 'w'. Fai questo aggiungendo prima 26 slot di glifi al tuo font, in Codifica > Aggiungi slot di codifica.

I nuovi slot entreranno come spazi vuoti, e dovrai ordinarli andando a Elemento > Altre informazioni > Glifo di massa Rinomina.

Dare loro un suffisso dialto', e mappali al blocco alfabetico iniziando con'un'.

Questo crea un blocco di slot denominato 'a.high', 'b.high', 'c.high', ecc. Copia e incolla una copia dell'alfabeto minuscolo in questo blocco.

Passaggio 3

Assegna al glifo 'a.high' un instroke che si connette con 'b', 'o', 'v' e 'w'.

Passaggio 4

Questo produce un'alternativa appropriata "a" da usare dopo un "b", "o", "v" o "w", ma non fa nulla a meno che il font non sappia quando usarlo. Per dire al font di sostituire "a.high", dobbiamo creare una ricerca di font (Elemento > Informazioni sul carattere > Ricerche > Aggiungi ricerca). Fatelo a Sostituzione singola ricerca, ma non impostare alcuna funzione. Senza un set di funzionalità, questa ricerca servirà come elenco di glifi accoppiati per altre ricerche da utilizzare.

Quindi aggiungere un sottotabella alla ricerca Utilizzare il Predefinito con suffisso pulsante per popolare automaticamente la lista con abbinamenti basati sui nomi degli glifi. Se il pulsante non funziona, salva il font, chiudi Fontforge, riaprilo e riprova.

Passaggio 5

Aggiungi un'altra ricerca, questa a Sostituzione concatenata contestuale consultare. Assegna il Calt caratteristica ad esso, che "attiva" la ricerca nel carattere quando viene utilizzato per digitare il testo.

Aggiungi un sottotabella e, in esso, crea due classi, una con 'b', 'o', 'v', 'w' e forme alte, e l'altra con tutte le altre lettere non nella prima classe. 

All'inizio di ogni lista, inserisci 'void' o 'void2', perché per qualche motivo, Fontforge leggerà solo a partire dal secondo glifo in ogni classe. Per la regola di corrispondenza, digitare il nome della prima classe, una pipe, il nome della seconda classe e la ricerca "highlink" in @ <> form (è possibile utilizzare il Aggiungi ricerca menu).

Cosa sta succedendo qui? Il Sostituzione concatenata la ricerca passa attraverso ogni lettera che scrivi e guarda se è membro di Classe 1 ('b' e amici). Se è seguito da un membro di Classe 2 (tutte le altre lettere), apparirà nel highlinks ricerca e sostituisci il glifo con il glifo alternativo associato elencato in highlinks. In questo modo, [B] [un] diventa [B] [a.High] quando digitato.

Passaggio 6

Poiché le classi devono essere disgiunte, ciò non riesce se si dispone di più di una "b" o società in una riga. Di ciò teniamo conto creando una seconda sottotabella, con una classe contenente "b", "o", "v", "w" e le loro forme alte. La regola di corrispondenza avrà la stessa classe due volte e la seconda avrà la ricerca highlink applicata. Questo sottotabella cercherà "b" seguito da altre "b" (o altre lettere in quella classe) ed eseguirà le stesse sostituzioni.

Dovresti avere due sottotitoli nel Calt ricerca ora.

Passaggio 7

Una volta "OK" dal pannello Informazioni sul font, dovresti essere in grado di vedere la ricerca in azione nella finestra Metriche.

Con la finestra Metriche come ausilio visivo, converti il ​​resto delle lettere nel blocco alto in modo che abbia un instroke alto.

Gli high join dovrebbero connettersi senza problemi nella finestra Metrics.

6. Polacco stilistico

A questo punto, il carattere è tecnicamente diventato un corsivo vero, dal momento che il font automaticamente legherà qualsiasi combinazione di lettere digitata. Ma ha ancora un modo per farlo Guarda meglio.

Passo 1

In alto nella lista dei problemi da appianare c'è il collegamento tra lettere dell'altezza-x e lettere ascendenti come "h", "k" e "t". Come puoi vedere, i join possono sembrare un po 'strani.

Dobbiamo risolvere questo problema creando un altro gruppo di lettere alternative, da sostituire quando si presentano prima di una lettera crescente. Assegna un nome a questi glifi alti, tranne dare loro il suffisso .ripido.

Crea un'altra ricerca non strutturata, con un sottotitolo pieno di abbinamenti di glifi regolari e ripidi.

Passo 2

Sarà inoltre necessario creare versioni alternative dei glifi 'h', 'k' e 't', per collegarsi con glifi ripidi (con instrokes ripidi). Probabilmente è più semplice aggiungere tre slot di glifi e nominarli h.insteep, k.insteep, e t.insteep tramite la Elemento > Glifo Info finestra. Potresti anche voler creare altre tre copie di questi glifi per le istanze quando più di una "h" si verifica in una riga, anche se sembra che questa sia attualmente non funzionale.

Certo, dai loro il loro sottotitolo.

Passaggio 3

Quindi, entriamo nel Calt ricerca e aggiungi una terza sottotabella per impostare le nostre regole di concatenamento. In una classe, metti 'h', 'k' e 't', e nell'altra metti il ​​resto dell'alfabeto, eccetto per 'h', 'k' e 't', perché le classi devono essere disarticolare; e la 'b', 'o', 'v' e 'w', che, come lettere alte, non possono avere ripercussioni dirette. 

La seconda classe (lettere regolari) va prima, e ottiene il steeplinks ricerca applicata ad esso. La prima classe ottiene il insteeplinks ricerca applicata ad esso. Ciò significa che se il font produce una combinazione come [un] [h], il [un] verrà sostituito con [a.steep], come specificato nella sottotabella steeplinks, e il [h] viene sostituito con [h.insteep], in base al sottotetto Questo produce la coppia abbinata [a.steep] [h.insteep].

Passaggio 4

Quindi entriamo e effettivamente modifichiamo glifi alternativi per avere link ripidi. Sarà utile creare una terza serie di linee guida qui. Puoi saltare "h", "k", e "t", e "b", "o", "v" e "w", poiché non possono fornire link ripidi sotto la nostra attuale programmazione.

Come prima, la finestra Metriche ti aiuta a vedere come funziona il carattere e ti aiuta a progettare collegamenti fluidi.

Questo dovrebbe produrre collegamenti regolari nella maggior parte dei casi. Fallirà se ci sono più lettere ascendenti in una riga: in teoria è possibile creare una quarta sottotabella in Calt per sostituire le stesse lettere ascendenti sostituite, anche se per qualche ragione questo non funziona. Il font tornerà al vecchio, meno liscio, ma ancora connesso linkage. 

Fallirà anche in combinazioni come "bat", con una lettera alta combinata con una lettera ripida, ancora una volta, in teoria, puoi programmare un sottotitolo che sostituirà le lettere alte con gli alternati che sono entrambi alti e ripida, ma ancora una volta, nella mia esperienza questo non funziona. 

Il meglio che puoi fare, tuttavia, è assicurarsi che la sottostruttura del collegamento ripido sia elencata sotto i sottotitoli dei collegamenti alti quando elencati in Calt; questo meccanismo di fallback fa in modo che i primi due sottotabella possano svolgere le loro funzioni più importanti rispetto al terzo in caso di conflitto.

Passaggio 5

Un altro problema importante può essere risolto: coppie di clash come "ti" e "th".

Il modo più semplice per risolvere questo problema è creare legature-sostituzioni personalizzate per queste coppie di lettere problematiche. Ho creato sei legature - una legatura "ti" e una "legatura", oltre a varianti alte e ripide (ricordati di aggiungerle alle liste di ricerca).

Passaggio 6

Le legature devono essere programmate in un carattere con a Sostituzione della legatura ricerca, che dovresti aggiungere all'elenco di ricerca del tuo carattere. Contrassegnalo dlig (legatura discrezionale). Da Calt è più importante del dlig ricerca, assicurati Calt è elencato per primo nell'elenco di ricerca per dare la priorità se c'è un conflitto.

La sostituzione della legatura è più semplice della sostituzione contestuale: basta creare un sottotitolo al suo interno per enumerare le legature e le coppie di lettere che sostituiscono. Perché dlig ha effetto dopo Calt ha fatto la sua cosa, i glifi di origine dovrebbero essere quelli sostituiti da Calt.

Dovresti essere in grado di vedere le legature in azione nella finestra Metriche.

Passaggio 7

Questo copre le basi di come creare un carattere corsivo. Un font completo conterrà molti altri glifi, inclusi accenti, simboli, capitelli e altri. Alcuni di questi glifi dovranno essere integrati nella programmazione del collegamento aggiungendo i loro nomi ai vari sottotitoli di ricerca.

Una parola di avvertimento per quando si va ad esportare il proprio font come un vero e proprio file di font (.ttf, .otf) File > Genera font. Poco della programmazione che abbiamo aggiunto al font verrà salvata nel file di font esportato a meno che tu non controlli il OpenType scatola nel Opzioni finestra. Ci sono alcune altre cose di pulizia che dovresti eseguire prima di esportare il tuo carattere tipografico standard nel tipo digitale:

  1. Rimuovi tutte le sovrapposizioni (seleziona tutti glifi con Control-A, Elemento > Sovrapposizione> Rimuovi sovrapposizioni).
  2. Arrotonda tutte le coordinate ai numeri interi (seleziona tutti glifi, Elemento > Il giro > Int).
  3. Realizza i contorni esterni in senso orario (seleziona tutti glifi, Elemento > Direzione corretta).

Congratulazioni, hai finito!

Ora sai come progettare un tipo veramente corsivo, tipo che funziona semplicemente quando lo usi in un'app. Questo tipo di carattere non è sempre necessario: le scritte a mano non devono essere dimenticate! Ma è certamente una cosa utile e divertente da avere, e le possibilità con la programmazione OpenType sono infinite. Felice font-making!

Il font usato come esempio nella seconda parte di questo tutorial è In Screaming Colour, un font in corsivo che ho progettato su cui è possibile trovare dafont.com.