Cum se proiectează și se construiește un font funcțional cursiv

Ce veți crea

Tipul cursiv a fost odată un oximoron, dar tehnologia OpenType modernă ne permite acum să creăm fonturi adevărate cursive cu formulare de formă care să se comporte în funcție de contextul lor, la fel ca și literele cursive adevărate, într-o oarecare măsură. 

În acest tutorial veți învăța cum să creați un cursiv design, să îl traduceți în contururi bezier valabile și să îl curățați, să-l împachetați într-un font și să codificați regulile OpenType care își programează comportamentul cursiv.

1. Aveți nevoie de un font?

Acest lucru poate părea o întrebare ciudată, dar astăzi, din ce în ce mai mulți designeri folosesc fonturi. Cuvantul "font"Literalmente înseamnă" sursă distribuită ", referindu-se la blocurile de metal care făceau odată o tipografie. Aceste blocuri au fost făcute din metal foarte incredibil, destinate să supraviețuiască sute de mii de prese sau mai târziu, pentru a servi ca matrițe, care au pus în mod repetat copii ale scrisorilor sale în sulițe metalice mai moi pentru tipărirea tipărită.

Cu aceasta există o implicație că fonturile sunt destinate folosirii grele și repetitive. Designerii de tip scufundă o mulțime de lucruri într-un font pentru a se asigura că funcționează cât mai bine posibil în orice dat de setare. 

Astfel, dacă aveți nevoie doar de un cuvânt decorativ, nu are sens să proiectați (sau să cumpărați în prezent) un întreg font. Probabil că este mai bine să îți scrii cuvintele sau cuvintele și să le imporți în designul tău. Dar dacă, probabil, aveți nevoie de mai multe rubrici diferite sau doriți să setați un pasaj deosebit de lung în acel tip de text sau doriți un design care să poată tipări orice altceva ce vreți, atunci un font este calea de urmat.

2. Crearea designului

Desenele tip sunt adesea rezultatul unor accidente fericite. De multe ori aș putea să scriu ceva scris pe hârtie, care arată foarte bine și asta se va transforma în inspirație pentru o întreagă poveste. De exemplu, aici au fost câteva titluri pe care le-am scris pentru unele teme de fizică / stat despre care am crezut că ar putea face un tip frumos de scris.

Cuvânt de sfat: dacă încercați să scrieți un eșantion, adesea este util să scrieți pe hârtie de rețea pentru a vă putea păstra scrisorile - și pentru a scana culturile - frumoase și drepte.


Acestea au fost scrise cu un stilou de caligrafie. Poți să cumperi niște pixuri caligrafice foarte fiabile pentru mai puțin de 10 dolari de la producători ca Sheaffer.

Va trebui să le scanați în imagini pentru a vectoriza desenele. Dacă nu aveți un scaner (ca mine), poți pur și simplu să faci o imagine dintr-un unghi ortogonal și să o folosești. Ambele scanări de mai sus au fost făcute cu o cameră iPhone. Calitatea imaginii nu trebuie să fie grozavă - trebuie să vă îngrijorați doar pentru a evita distorsiunea geometrică.

3. Urmărirea literelor în FontForge

Pentru a crea fontul în sine, veți avea nevoie de un program de editare a fontului. Există câteva opțiuni scumpe costisitoare, dar o aplicație excelentă, FontForge, este gratuită și open source. Vom folosi FontForge în acest tutorial. Asigurați-vă că setați-l să utilizeze numai coordonatele întregi (Fişier > Preferințe > Editarea > SnapToInt).

Pasul 1

Primul lucru pe care trebuie să-l facem este să importăm scanarea în zona de desen FontForge. Faceți acest lucru dând clic pe o fereastră de editare a glifului și mergeți la Fişier > Import.

Apoi, vă asigurați că vă aflați în fundal strat, utilizați instrumentele de deplasare și scalare pentru a poziționa și a mări imaginea de referință. În scop demonstrativ, voi începe cu litera "r" din acest eșantion, astfel încât să centrați "r" în mijlocul cadrului glif, chiar pe linia de bază.

Pasul 2

Începem prin desenarea joncțiunii în care începe instrochea scrisorii.

Apoi plantezi Punctele HV-curbe la toate minusurile și maximele conturului literei. Utilizarea punctelor de curbă HV ajută la ancorarea punctelor importante de-a lungul conturului literelor și, de asemenea, împiedică durerile de cap fără sfârșit, cu puncte extreme care lipsesc pe drum. Deocamdată este bine dacă se intersectează calea.

Apoi, copiați punctele instroke și deplasați-le drept orizontal peste pentru a forma punctele de întoarcere. Este foarte important ca coordonatele y ale celor două seturi de puncte să rămână aceleași.

Apoi termina conturul glifului.

Pasul 3

Reglați mânerele Bezier ale punctelor curbe pentru a se potrivi mai bine cu conturul glifului.

Puteți vedea o previzualizare completă a glifului în ecranul principal Font.

Pasul 4

Acum putem aborda următorul glif, în acest caz, un "i". Începeți prin rotirea "r" prin stabilirea lățimii avansului deasupra marginii sale.

Urmărim ghimbul cu aceleași tehnici pe care le obișnuisem să facem "r", având grijă să facem joncțiunea între interstițiu și i.

Va trebui să trageți la înălțimea corectă muchia "i", astfel încât să alinieze instrumentele tuturor celorlalte litere, astfel încât poate fi extrem de util să creați linii directoare Fontforge care să marcheze înălțimile asamblărilor. Creați linii directoare prin glisarea în jos de la rigla de sus în fereastra glifului. Asigurați-vă că liniile directoare sunt rotunjite la coordonatele întregi.

Apoi trageți restul glifului.

Pasul 5

Acest "i" a fost desenat în spațiul glif "r"; trebuie să-l mutăm în propriul slot pentru glif. Selectați conturul (și punctul) făcând dublu clic pe căi și tăiați-le și inserați-le în slotul "i". Setați lățimea avansului setând toate lățimile laterale egale cu 0 (Valori > Setați ambele lagăre). Deplasați imaginea de fundal, dacă este necesar.

Puteți vedea în continuare literele una lângă alta, tastând-le în listă de cuvinte cutie. Acest lucru este extrem de util atunci când se fac fonturi cursive pentru a vă asigura că îmbinările sunt netede și line up.

Pasul 6

Aici am urmărirea literei "l" din eșantion. Poate fi mai ușor să copiați o literă existentă (în acest caz, un punctless "i") și să mutați punctele pentru a se potrivi cu noua literă, deși toată lumea are propriul mod de scanare a traseelor ​​de mână.

Sistemul punctelor de legare a VS uneori se descompune, deoarece poate fi imposibil să se urmărească anumite curbe folosind doar punctele HV.

În acest caz, ar putea fi necesar să introduceți puncte suplimentare de curbă de-a lungul splinei.

Semnul de mână este rareori perfect, dar fonturile trebuie să fie (unul din dezavantajele utilizării fonturilor). Asta înseamnă că, pentru a evita combinațiile problematice, scrisorile, în special instrările și stricările lor, trebuie să fie oarecum standardizate. În cazul "l", înseamnă că se coboară coada astfel încât să stea pe linia de bază.

Pasul 7

Iată o urmărire a literei "c". După cum puteți vedea, am făcut câteva modificări de la versiunea scrisă pentru a face să joace bine cu alte litere. Fereastra de valori poate fi foarte util pentru a testa corzile literelor.

4. Derivarea restului alfabetului

Eșantionul de litere nu va conține, probabil, fiecare literă din alfabet. De fapt, uneori puteți obține rezultate mai bune obținând scrisori din scrisorile pe care le-ați desenat deja. De exemplu, un script "a" este foarte similar cu un "ci".

Am creat acel "a" menționat anterior doar prin alunecarea împreună a "c" și a "i" în eșantion.

Fiecare scrisoare pe care o creați va produce mai multe litere. De exemplu, "a" dă naștere la "d".

"D" nu este singura literă care vine de la "a". Poți de asemenea să deduceți "q", "u", "i" (dacă ați început cu un "a" în loc de "i"), "n", "m", " și mai multe de la "a". Există nenumărate moduri în care puteți obține un alfabet începând cu câteva eșantioane. O modalitate este prezentată mai jos, începând cu literele "s", "a", "c", "e", "l", "o" și ".

Iată un exemplu de font pe care l-am făcut cu toate cele 26 de litere.

5. Asamblarea unui font funcțional

În acest moment, fontul conține un alfabet complet, dar abia funcționează ca un font, deoarece literele lucrează împreună la nivelul cel mai de bază. Următoarea parte a acestui tutorial se va concentra pe crearea alternativelor necesare și programarea fontului pentru a conecta literele într-un script cursiv plăcut.

Pasul 1

Scrisorile "b", "o", "v" și "w" vor avea aproape sigur margini care se termină mai sus decât celelalte litere. Faceți tot ce este mai bun pentru a standardiza aceste patru litere, așa cum ați făcut cu literele normale.

Pasul 2

Dacă apare una dintre aceste patru litere, scrisoarea după aceasta nu se va lega, deoarece instrochea va fi mai mică decât cea a scrisorii anterioare. Trebuie să creăm un set de glife alternative cu instraciuni de nivel înalt care să poată fi conectate cu "b", "o", "v" și "w". Faceți acest lucru adăugând mai întâi 26 sloturi de glif pentru fontul dvs., în Codare > Adăugați sloturi de codificare.

Noile sloturi vor intra în goluri și va trebui să le sortați, mergând la Element > Alte informații > Mass-Glyph Redenumiți.

Dați-le un sufix de "înalt'și să le plasați în blocul de alfabete începând cu'A'.

Acest lucru creează un bloc de sloturi numite "a.high", "b.high", "c.high", etc. Copiați și inserați o copie a alfabetului cu litere mici în acest bloc.

Pasul 3

Dați glifului "a.high" un instrock care se va conecta cu "b", "o", "v" și "w".

Pasul 4

Acest lucru produce un alternativ corespunzător "a" care va fi folosit după "b", "o", "v" sau "w", dar nu face nimic altceva decât dacă font-ul știe când să îl folosească. Pentru a spune fontului să înlocuiască "a.high", trebuie să creați o căutare de fonturi (Element > Font Info > lookups > Adăugați Lookup). Fa-o a Înlocuire singulară căutare, dar nu setați nici o caracteristică la ea. Fără setul de funcții, această căutare va servi ca o listă de glifuri asociate pentru alte căutări de utilizat.

Apoi adăugați a subtable la căutare. Folosește Implicit utilizând Suffix pentru a popula automat lista cu perechi bazate pe numele de glif. Dacă butonul nu funcționează, salvați fontul, închideți Fontforge, redeschideți-l și încercați din nou.

Pasul 5

Adăugați o altă căutare, aia Înlocuirea contextuală a lanțului privește în sus. Atribuiți CALT caracteristică a acesteia, care "activează" căutarea în font atunci când este utilizată pentru a introduce text.

Adăugați un subtip și creați în el două clase - unul cu "b", "o", "v", "w" și forme înalte, iar celălalt cu toate celelalte litere care nu apar în prima clasă. 

La începutul fiecărei liste, inserați "void" sau "void2", deoarece, din anumite motive, Fontforge va citi numai începând cu al doilea glif în fiecare clasă. Pentru regula de potrivire, tastați numele primei clase, o țeavă, numele clasei a doua și căutarea "link-uri highlink" în formularul <<> (puteți utiliza Adăugați Lookup meniul).

Ce se petrece aici? Înlocuirea lanțului căutarea merge de-a lungul fiecărei litere pe care o introduceți și văd dacă vă este membru Clasa 1 ("b" și prietenii). Dacă este urmat de un membru al Clasa 2 (toate celelalte litere), va arăta în highlinks căutați și înlocuiți acel glif cu gheața alternativă asociată listată în highlinks. În acest fel, [b] [A] devine [b] [o mare] când ați tastat.

Pasul 6

Deoarece clasele trebuie să fie disjuncte, acest lucru nu reușește dacă aveți mai mult de un "b" sau o companie la rând. Considerăm acest lucru creând un al doilea subtip, cu o clasă care conține "b", "o", "v", "w" și formele lor înalte. Norma de potrivire va avea de două ori aceeași clasă, iar cea de-a doua va avea caută linkuri highlink. Acest subtip va căuta "b" urmat de alte "b" (sau alte litere din clasa respectivă) și va efectua aceleași substituții.

Ar trebui să aveți două subtabile în CALT căutați acum.

Pasul 7

Odată ce ați ieșit din panoul Informații despre fonturi, ar trebui să vedeți căutarea în acțiune în fereastra Metric.

Cu fereastra Metrici ca ajutor vizual, convertiți restul literelor din blocul înalt pentru a avea instroze mari.

Adunările înalte trebuie să se conecteze fără probleme în fereastra Metrics.

6. Polonez stilist

În acest moment, fontul a devenit din punct de vedere tehnic un cursiv adevărat, deoarece fontul va lega automat orice combinație de litere pe care o tastați. Dar mai are încă un fel de a merge să o facă uite mai bine.

Pasul 1

Ridicată pe lista problemelor de netezit este legătura dintre literele de înălțime x și literele ascendente precum 'h', 'k' și 't'. După cum puteți vedea, legăturile pot părea puțin ciudate.

Trebuie să rezolvăm acest lucru creând un alt set de litere alternative, care trebuie înlocuite atunci când apar înainte de o scrisoare ascendentă. Denumiți-le ca glifele înalte, cu excepția cazului în care le dați sufixul .abrupt.

Creați o altă căutare neperforată, cu un subtimp umplut cu perechi de glifuri regulate și abrupte.

Pasul 2

Va trebui, de asemenea, să creați versiuni alternative ale ghilimelor "h", "k" și "t", pentru a vă conecta cu glifele abrupte (având instroze abrupte). Este probabil cel mai ușor să adăugați trei sloturi de glif și să le numiți h.insteep, k.insteep, și t.insteep prin Element > Glyph Info fereastră. S-ar putea să doriți, de asemenea, să faceți alte trei copii ale acestor glifuri pentru situațiile în care mai mult de un "h" apare într-un rând, deși se pare că acest lucru este în prezent nefuncțional.

Bineînțeles, dați-i propria lor subtilitate.

Pasul 3

Apoi, intrăm în CALT căutare și adăugați un al treilea subtable pentru a stabili regulile noastre de înlănțuire. Într-o clasă, puneți "h", "k" și "t", iar în cealaltă puneți restul alfabetului, cu excepția "h", "k" și "t" disjuncte; și "b", "o", "v" și "w", care, în calitate de litere mari, nu pot avea pierderi abrupte. 

Clasa a doua (literele regulate) merge mai întâi și primește steeplinks căutarea a fost aplicată. Prima clasă primește insteeplinks căutarea a fost aplicată. Aceasta inseamna ca daca fontul produce o combinatie ca [A] [h], [A] va fi înlocuit cu [a.steep], așa cum se specifică în subtimpurile steeplinks, și [h] se înlocuiește cu [h.insteep], conform insteplinks subtabile. Aceasta produce perechea potrivită [a.steep] [h.insteep].

Pasul 4

Apoi intrăm și modificăm de fapt glifele alternative pentru a avea legături strânse. Va fi util să creați un al treilea set de linii directoare aici. Puteți sări peste "h", "k", și "t", și "b", "o", "v" și "w", deoarece nu pot furniza legături strânse.

Ca și înainte, fereastra Metric vă ajută să vedeți cum funcționează fontul și vă ajută să creați linkuri netede.

Acest lucru ar trebui să producă legături netede în majoritatea cazurilor. Se va eșua dacă există mai multe litere ascendente într-un rând - în teorie puteți crea un al patrulea subtip în CALT pentru a înlocui literele ascunse substituibile, deși, din orice motiv, acest lucru nu funcționează. Fontul va reveni la legătura veche, mai puțin uniformă, dar încă conectată. 

De asemenea, va eșua în combinații precum "lilieci", cu o literă înaltă combinată cu o scrisoare abruptă - din nou, în teorie, puteți programa un subtimp care ar înlocui literele mari cu alternante care sunt atât de mari și dar din nou, din experiența mea, acest lucru nu funcționează. 

Cel mai bun lucru pe care îl puteți face, totuși, este să vă asigurați că subtipul de legătură abruptă este enumerat de mai jos legăturile subtitrate cu linkuri mari atunci când sunt listate în CALT; acest mecanism de rezervă asigură faptul că primele două sub-tabele își pot îndeplini funcțiile mai importante față de cel de-al treilea în cazul apariției unui conflict.

Pasul 5

O altă problemă importantă poate fi perechile fixe, cum ar fi "ti" și "th".

Cea mai ușoară cale de a rezolva acest lucru este de a crea ligaturi-înlocuiri personalizate pentru aceste perechi de scrisori problematice. Am creat șase ligaturi - ligatură și ligatură, plus variante înalte și abrupte (nu uitați să le adăugați la listele de căutare).

Pasul 6

Ligatura trebuie să fie programată într-un font cu a Ligature Substituția căutare, pe care ar trebui să o adăugați la lista de căutare a fonturilor. Arătați-i dlig (ligaturarea discreționară). De cand CALT este mai important decât dlig căutați, asigurați-vă CALT este listat primul în lista de căutare pentru a acorda prioritate dacă există un conflict.

Înlocuirea ligaturii este mai simplă decât substituția contextuală - tocmai creați un subtip în el pentru a enumera ligaturile și perechile de litere pe care le înlocuiesc. pentru că dlig intră în vigoare după CALT a făcut-o, glifurile sursă ar trebui să fie cele înlocuite CALT.

Ar trebui să puteți vedea ligările în acțiune în fereastra Metrics.

Pasul 7

Aceasta acoperă elementele de bază ale modului de creare a unui font cursiv. Un font complet va conține mult mai multe galefe, inclusiv accente, simboluri, capitale și altele. Unele dintre aceste glifuri vor trebui integrate în programarea de link-uri prin adăugarea numelor lor la diferitele subtabile de căutare.

Un cuvânt de avertizare pentru momentul în care faceți exportul fontului ca fișier de fișier real (.ttf, .otf) prin Fişier > Generați Fonturi. Puține dintre programele pe care le-am adăugat la font vor fi salvate în fișierul de fonturi exportat dacă nu verificați OpenType cutie în Opțiuni fereastră. Există câteva alte lucruri de menaj pe care ar trebui să le executați înainte de a vă exporta tipul de text care sunt standard în tip digital:

  1. Eliminați toate suprapuneri (selectați toate glifurile cu Control-A, Element > Suprapunere> Eliminați suprapunerea).
  2. Rotiți toate coordonatele la numere întregi (selectați toate glifele, Element > Rundă > Pentru Int).
  3. Asigurați-vă că contururile exterioare sunt executate în sensul acelor de ceasornic (selectați toate glifele, Element > Direcția corectă).

Felicitări, sunteți gata!

Acum știți cum să proiectați un tip cu adevărat cursiv, tip care funcționează pur și simplu când îl utilizați într-o aplicație. Un astfel de font nu este întotdeauna necesar - literele de mână nu trebuie uitate! Dar este cu siguranță un lucru util și distractiv de a avea în jur, iar posibilitățile cu programarea OpenType sunt nesfârșite. Felicitări fericite!

Fontul utilizat ca exemplu în a doua jumătate a acestui tutorial este În culoarea Screaming, un font cursiv pe care l-am conceput și pe care îl pot găsi dafont.com.