Hoe een functioneel cursief lettertype te ontwerpen en te construeren

Wat je gaat creëren

Het cursieve type was ooit een oxymoron, maar de moderne OpenType-technologie laat ons nu echte cursieve lettertypen maken met lettervormen die zich gedragen in overeenstemming met hun context, net als echte cursieve letters, tot op zekere hoogte.. 

In deze tutorial leer je hoe je een cursief ontwerp maakt, dit vertaalt in geldige bezieromtrekken en opruimt, het in een lettertype verpakt en de OpenType-regels codeert die het cursieve gedrag programmeren.

1. Heeft u echt een lettertype nodig??

Dit lijkt misschien een vreemde vraag, maar tegenwoordig gebruiken ontwerpers steeds vaker lettertypen. Het woord "doopvont"Betekent letterlijk" gegoten bron ", verwijzend naar de metalen blokken die ooit een lettertype vormden. Deze blokken waren gemaakt van ongelooflijk hard metaal, ontworpen om honderdduizenden persen te overleven, of later, om als mallen te dienen en herhaaldelijk kopieën van de letters te gieten in zachtere metaalslakken voor boekdruk.

Hiermee is er een implicatie dat lettertypen bedoeld zijn voor zwaar, herhaald gebruik. Typeontwerpers verzakken veel werk in een lettertype om ervoor te zorgen dat het zo goed mogelijk functioneert ieder gegeven instelling. 

Als u dus slechts één decoratief woord nodig heeft, is het niet logisch om een ​​volledig lettertype te ontwerpen (of tegenwoordig kopen). Je bent waarschijnlijk beter in staat om je woord of zin met de hand te belettering en het in je ontwerp te importeren. Maar als u misschien meerdere kopjes nodig heeft, of een bijzonder lange passage in dat lettertype wilt instellen, of een ontwerp wilt dat anders kan afdrukken, wat u ook wilt, dan is een lettertype de juiste keuze.

2. Het ontwerp maken

Typedesigns zijn vaak het resultaat van gelukkige ongelukken. Vaak schrijf ik terloops iets op papier dat er echt goed uitziet, en dat wordt een inspiratie voor een heel lettertype. Hier zijn bijvoorbeeld enkele kopjes die ik heb geschreven voor een natuurkundig / stat huiswerk waarvan ik dacht dat het een mooi lettertype zou kunnen zijn.

Woord van advies: als u een voorbeeld probeert te schrijven, is het vaak handig om op ronder papier te schrijven, zodat u uw brieven kunt behouden - en gewassen kunt scannen - mooi en recht.


Deze werden geschreven met een breed-nibbelde kalligrafiepen. Je kunt een aantal zeer goedkope kalligrafische vulpennen kopen voor minder dan $ 10 bij fabrikanten als Sheaffer.

Je moet ze in afbeeldingen scannen om de ontwerpen te vectoriseren. Als je geen scanner hebt (zoals ik), kun je eenvoudig een foto nemen vanuit een orthogonale hoek en die gebruiken. Beide bovenstaande scans zijn gemaakt met een iPhone-camera. De beeldkwaliteit hoeft niet geweldig te zijn - u hoeft zich alleen bezig te houden met het vermijden van geometrische vervorming.

3. Traceren van de letters in FontForge

Om het lettertype zelf te maken, hebt u een programma voor het bewerken van lettertypen nodig. Er zijn verschillende verschrikkelijk dure opties, maar een geweldige app, FontForge, is gratis en open source. We zullen FontForge gebruiken in deze tutorial. Zorg ervoor dat je het instelt op alleen integer coördinaten (het dossier > voorkeuren > editing > SnapToInt).

Stap 1

Het eerste wat we moeten doen is de scan importeren in het FontForge-tekengebied. Doe dit door in een glyph-bewerkingsvenster te klikken en naar te gaan het dossier > Importeren.

Zorg er dan voor dat u zich in de Achtergrond laag, gebruik de verplaatsings- en schaalhulpmiddelen om het referentiebeeld te positioneren en te vergroten. Voor demonstratiedoeleinden begin ik met de letter 'r' in dit voorbeeld, dus centreer de 'r' in het midden van het glyph-frame, precies op de basislijn.

Stap 2

We beginnen met het tekenen van de kruising waar het instroke van de brief begint.

Dan planten we HV-curvepunten bij alle minima en maxima van de contour van de letter. Het gebruik van HV-curvepunten helpt om belangrijke punten langs de contour van de letter te verankeren en hindert eindeloze hoofdpijn met ontbrekende extrema-punten op de weg. Voor nu is het prima als het pad zichzelf snijdt.

Kopieer vervolgens de instroke punten en schuif ze horizontaal over elkaar om de uitslagpunten te vormen. Het is erg belangrijk dat de y-coördinaten van de twee sets punten hetzelfde blijven.

Maak dan een eind door de glyph te schetsen.

Stap 3

Pas de bézier-handgrepen van de curvepunten aan om beter overeen te komen met de contouren van de glyph.

U kunt een ingevuld voorbeeld van de glyph zien in de hoofdletterweergave.

Stap 4

Nu kunnen we de volgende glyph aanpakken, in dit geval een 'ik'. Begin door van de 'r' af te ronden door de voortgangsbreedte bovenop de uitslagrand in te stellen.

We traceren de glyph met dezelfde technieken die we gebruikten om de 'r' te doen, en zorgden ervoor dat de kruising tussen de uitslag van de r's en de i's instroke soepel verliep.

U moet de uitslag van de 'i' op de juiste hoogte tekenen, zodat deze de aanslagen van alle andere letters uitlijnt, dus het kan enorm nuttig zijn om Fontforge-richtlijnen te maken die de hoogtes van de joins markeren. Maak richtlijnen door vanuit de bovenste liniaal in het glyphvenster naar beneden te slepen. Zorg ervoor dat de richtlijnen zijn afgerond op gehele coördinaten.

Teken vervolgens de rest van de glyph.

Stap 5

Deze 'ik' werd getekend in de 'r' glyph-ruimte; we moeten het naar zijn eigen glyph-slot verplaatsen. Selecteer de contour (en punt) door op de paden te dubbelklikken en knip en plak ze in de 'i'-glyphsleuf. Stel de breedte van het voorschot in door alle zijborden gelijk te stellen aan 0 (metriek > Stel beide lagers in). Verschuif de achtergrondafbeelding indien nodig.

U kunt de letters nog steeds naast elkaar zien door ze in te typen woordenlijst doos. Dit is uiterst handig bij het maken van cursieve lettertypen om ervoor te zorgen dat joins soepel zijn en in een rij staan.

Stap 6

Hier volg ik de letter 'l' uit het voorbeeld. Het kan gemakkelijker zijn om een ​​bestaande letter (in dit geval een dotloze 'i') te kopiëren en de punten te verplaatsen naar de nieuwe letter, hoewel iedereen zijn eigen manier van hand tracing-scans heeft.

Het HV-bounding-box-pointsysteem valt soms uit, omdat het onmogelijk kan zijn om bepaalde curves te traceren met alleen HV-punten.

In dit geval kan het nodig zijn om extra curvepunten langs de spline in te voegen.

Handgeschreven letters zijn zelden perfect, maar lettertypen moeten dat wel zijn (een van de nadelen van het gebruik van lettertypen). Dat betekent dat om problematische combinaties te vermijden, de letters, vooral hun aanslagen en uitslagen, enigszins gestandaardiseerd moeten zijn. In het geval van de 'l' betekent dit dat de staart wordt verlaagd zodat deze op de basislijn zit.

Stap 7

Hier volgt een tracering van de letter 'c'. Zoals je kunt zien, heb ik een paar wijzigingen aangebracht in de geschreven versie om deze goed met andere letters te laten spelen. De Gegevensvenster kan erg handig zijn om reeksen letters te testen.

4. Afleiden van de rest van het alfabet

Uw beletteringsvoorbeeld bevat waarschijnlijk niet elke letter in het alfabet. In feite kun je soms betere resultaten behalen door letters te ontlenen aan letters die je al hebt getekend. Een script 'a' lijkt bijvoorbeeld veel op een 'ci'.

Ik heb de eerder genoemde 'a' gemaakt door alleen een 'c' en een 'i' in de sample bij elkaar te drukken.

Elke letter die je maakt zal meer letters opleveren. De 'a' bijvoorbeeld geeft aanleiding tot de 'd'.

De 'd' is niet de enige letter die van 'a' komt. Je kunt ook de 'q', 'u', 'i' afleiden (als je begon met een 'a' in plaats van een 'i'), 'n', 'm', 'p', 'h', en nog een aantal meer van 'a'. Er zijn ontelbare manieren om een ​​alfabet af te leiden, beginnend met een paar voorbeeldbrieven. Een manier wordt hieronder getoond, beginnend met een 's', 'a', 'c', 'e', ​​'l', 'o' en 'r'.

Hier is een voorbeeld van een lettertype dat ik met alle 26 letters heb gemaakt.

5. Een functioneel lettertype samenstellen

Op dit punt bevat het lettertype een volledig alfabet, maar werkt het nauwelijks als een lettertype, omdat de letters alleen op het meest eenvoudige niveau samenwerken. Het volgende deel van deze tutorial zal zich richten op het creëren van noodzakelijke alternatieven en het programmeren van het lettertype om de letters in een aangenaam cursief schrift te verbinden.

Stap 1

Uw letters 'b', 'o', 'v' en 'w' zullen bijna zeker uitslagen hebben die hoger eindigen dan de andere letters. Doe je best om deze vier letters te standaardiseren zoals je deed met de normale letters.

Stap 2

Als een van deze vier letters voorkomt, wordt de letter ernaast niet gekoppeld, omdat het instrumke lager is dan de uitslag van de vorige letter. We moeten een set alternatieve glyphs maken met hoge instrokes die kunnen aansluiten op de 'b', 'o', 'v' en 'w'. Doe dit door eerst 26 glyph-slots toe te voegen aan uw lettertype, in codering > Coderingssleuven toevoegen.

De nieuwe slots worden als lege velden ingevoerd en u moet ze sorteren door naar Element > Andere informatie > Mass Glyph Hernoemen.

Geef ze een achtervoegsel van 'hoog', en wijs ze toe aan het alfabetblok beginnend met'een'.

Dit creëert een blok met slots genaamd 'a.high', 'b.high', 'c.high', etc. Kopieer en plak een kopie van het kleine letteralfabet in dit blok.

Stap 3

Geef de 'a.high'-glyph een instroke die zou aansluiten op de' b ',' o ',' v 'en' w '.

Stap 4

Dit produceert een geschikte alternatieve 'a' om te gebruiken na een 'b', 'o', 'v' of 'w', maar het doet niets, tenzij het lettertype weet wanneer het moet worden gebruikt. Om het lettertype te laten vervangen door de 'a.high', moeten we een font lookup maken (Element > Font Info > lookups > Lookup toevoegen). Maak het een Enkele vervanging opzoeken, maar geen functies instellen. Zonder een functieset fungeert deze lookup als een lijst met gepaarde glyphs die door andere lookups kunnen worden gebruikt.

Voeg vervolgens een toe subtabel naar de lookup. Gebruik de Standaard met behulp van Suffix om de lijst automatisch te vullen met paringen op basis van de glyph-namen. Als de knop niet werkt, sla je het lettertype op, sluit Fontforge af, open je het opnieuw en probeer je het opnieuw.

Stap 5

Voeg nog een zoekopdracht toe, deze a Contextuele ketenvervanging opzoeken. Wijs toe CALt functie die de lookup in het lettertype "activeert" wanneer het wordt gebruikt om tekst te typen.

Voeg een subtabel toe en maak daarin twee klassen - een met 'b', 'o', 'v', 'w' en hoge vormen, en de andere met alle andere letters niet in de eerste klas. 

Voeg aan het begin van elke lijst 'void' of 'void2' in, want om wat voor reden dan ook, zal Fontforge alleen lezen vanaf de tweede glyph in elke klas. Typ voor de overeenkomende regel de naam van uw eerste klas, een pipe, de naam van de tweede klasse en de opzoeking "highlinks" in het formulier @ <> (u kunt de Lookup toevoegen menu).

Wat is hier aan de hand? De Chaining Substitution opzoeken gaat door elke letter die je typt en kijkt of deze een lid is Klas 1 ('b' en vrienden). Als het wordt gevolgd door een lid van Klasse 2 (alle andere letters), het zal in de highlinks opzoeken en vervangen door die glyph met de bijbehorende alternatieve glyph highlinks. Op deze manier, [b] [een] wordt [b] [a.High] wanneer getypt.

Stap 6

Omdat klassen gescheiden moeten zijn, mislukt dit als u meer dan één 'b' of bedrijf op een rij hebt. We verklaren dit door een tweede subtabel te maken, met één klasse die de 'b', 'o', 'v', 'w' en hun hoge vormen bevat. De overeenkomende regel heeft dezelfde klasse twee keer en de tweede heeft een lookup voor hoge links. Deze subtabel zal zoeken naar 'b's gevolgd door andere' b's (of andere letters in die klasse) en dezelfde substituties uitvoeren.

U zou twee subtabels moeten hebben in de CALt zoek nu.

Stap 7

Zodra u uit het venster met lettertype-informatie 'OK' komt, zou u de opzoekactie in actie in het venster Gegevens moeten zien.

Met het Metrics-venster als een visueel hulpmiddel, converteer de rest van de letters in het hoge blok naar hoge inslagen.

De hoge joins moeten soepel in het venster Metrics worden verbonden.

6. Stilistisch Pools

Op dit punt is het lettertype technisch een echte cursieve geworden, omdat het lettertype automatisch elke lettercombinatie die u typt, zal afbakenen. Maar er moet nog een manier zijn om het te maken kijken beter.

Stap 1

Hoog op de lijst met problemen om af te vlakken staat de link tussen x-height letters en oplopende letters zoals 'h', 'k' en 't'. Zoals u kunt zien, kunnen de joins een beetje raar lijken.

We moeten dit oplossen door een andere reeks brieven te maken, die moet worden vervangen wanneer ze voorkomen vóór een oplopende brief. Geef deze een naam zoals de hoge glyphs, maar geef ze het achtervoegsel .steil.

Maak nog een niet-gedekte lookup, met een subtabel gevuld met paringen van regelmatige en steile hiërogliefen.

Stap 2

Je zult ook alternatieve versies van de 'h', 'k' en 't' glyphs moeten maken om aan te sluiten bij de steile hiërogliefen (met steile haartjes). Het is waarschijnlijk het gemakkelijkst om drie glyph-slots toe te voegen en deze een naam te geven h.insteep, k.insteep, en t.insteep door het Element > Glyph Info venster. Misschien wilt u ook nog drie exemplaren van deze glyphs maken voor gevallen waarin meer dan één 'h' achter elkaar voorkomt, hoewel het lijkt alsof dit momenteel niet functioneel is.

Geef ze natuurlijk hun eigen subtabel.

Stap 3

Vervolgens gaan we naar de CALt opzoeken en een derde subtabel eraan toevoegen om onze kettingregels in te stellen. In een klasse zet je de 'h', 'k' en 't', en in de andere zet je de rest van het alfabet, behalve 'h', 'k' en 't', omdat klassen moeten zijn disjuncte; en de 'b', 'o', 'v' en 'w', die, als hoge letters, geen steile uitwerkingen kunnen hebben. 

De tweede klas (gewone letters) gaat eerst en krijgt de steeplinks lookup toegepast. De eerste klas krijgt de insteeplinks lookup toegepast. Dit betekent dat als het lettertype een combinatie oplevert zoals [een] [h], de [een] wordt vervangen door [a.steep], zoals gespecificeerd in de subtitels steeplinks, en de [h] wordt vervangen door [h.insteep], volgens subtitels van insteeplinks. Dit levert het gematchte paar [a.steep] [h.insteep].

Stap 4

Dan gaan we naar binnen en eigenlijk veranderen de alternatieve glyphs om steile links te hebben. Het is handig om hier een derde set richtlijnen te maken. U kunt de 'h', 'k' en 't' en de 'b', 'o', 'v' en 'w' overslaan, omdat ze geen steile links kunnen bieden onder onze huidige programmering.

Zoals eerder helpt het venster Metrics u te zien hoe het lettertype werkt en helpt het u bij het ontwerpen van soepele koppelingen.

Dit zou in de meeste gevallen een soepele koppeling moeten opleveren. Het zal mislukken als er meerdere oplopende letters in een rij zijn - in theorie kun je een vierde subtabel maken in CALt om gesubstitueerde oplopende letters zelf te vervangen, hoewel dit om welke reden dan ook niet werkt. Het lettertype zal terugvallen op de oude, minder vloeiende, maar nog steeds verbonden koppeling. 

Het zal ook falen in combinaties zoals 'vleermuis', met een hoge letter in combinatie met een steile letter - nogmaals, in theorie kun je een subtabel programmeren die hoge letters vervangt door alternatieve letters die beide hoog zijn en steil, maar nogmaals, in mijn ervaring werkt dit niet. 

Het beste wat u kunt doen, is echter om ervoor te zorgen dat de subtiele subtiele koppeling wordt vermeld beneden de subtabellen met de hoge links wanneer deze worden weergegeven in CALt; dit fallback-mechanisme zorgt ervoor dat de eerste twee subtabellen hun belangrijkste functies over de derde kunnen uitvoeren, mocht zich een conflict voordoen.

Stap 5

Een nog belangrijker probleem kunnen fixed-clashing-paren zijn zoals 'ti' en 'th'.

De eenvoudigste manier om dit op te lossen is om te maken ligaturen-aangepaste vervangingen voor deze problematische letterparen. Ik heb zes ligaturen gemaakt - een 'ti' ligatuur en een 'th' ligatuur, plus hoge en steile varianten (vergeet niet om ze toe te voegen aan de opzoeklijsten).

Stap 6

Ligaturen moeten in een lettertype worden geprogrammeerd met een Ligatuurvervanging opzoeken, die u moet toevoegen aan de opzoeklijst van uw lettertype. Markeer het dlig (discretionaire ligatuur). Sinds CALt is belangrijker dan de dlig kijk, zorg ervoor CALt wordt als eerste vermeld in de opzoeklijst om prioriteit te geven als er een conflict is.

Ligatuurvervanging is eenvoudiger dan contextuele vervanging - u maakt er gewoon een subtabel in om de ligaturen en de letterparen die ze vervangen op te sommen. Omdat dlig wordt van kracht na CALt heeft zijn ding gedaan, zouden de bron glyphs degenen moeten zijn die door worden vervangen CALt.

U zou de ligaturen in actie in het venster Metrieken moeten kunnen zien.

Stap 7

Dit behandelt de basisprincipes van het maken van een cursief lettertype. Een volledig lettertype bevat heel wat andere glyphs, inclusief accenten, symbolen, hoofdletters en andere. Sommige van deze glyphs moeten worden geïntegreerd in de link-programmering door hun namen toe te voegen aan de verschillende opzoektabellen.

Een waarschuwing voor wanneer u uw lettertype gaat exporteren als een echt lettertypebestand (.ttf, .otf) door het dossier > Genereer lettertypen. Weinig van de programmering die we aan het lettertype hebben toegevoegd, wordt opgeslagen in het geëxporteerde lettertypebestand, tenzij u het selectievakje aanvinkt Open type vak in de opties venster. Er zijn een paar andere huishoudelijke zaken die u moet uitvoeren voordat u uw lettertype exporteert die standaard in digitaal type is:

  1. Verwijder alle overlappingen (selecteer alle glyphs met Controle-A, Element > Overlap> Verwijder overlapping).
  2. Rond alle coördinaten naar gehele getallen (selecteer alle glyphs, Element > Ronde > Naar Int).
  3. Maak de buitencontouren met de klok mee (selecteer alle glyphs, Element > Juiste richting).

Gefeliciteerd, je bent klaar!

Je weet nu hoe je echt cursief type moet ontwerpen, type dat gewoon werkt als je het in een app gebruikt. Zo'n lettertype is niet altijd nodig - handschrift mag niet worden vergeten! Maar het is zeker een handig en leuk ding om rond te hebben, en de mogelijkheden met OpenType-programmering zijn eindeloos. Veel plezier met het maken van lettertypen!

Het lettertype dat als voorbeeld wordt gebruikt in de tweede helft van deze tutorial is In Screaming Color, een cursief lettertype dat ik heb ontworpen en dat te vinden is op dafont.com.