Wednesday, June 16, 2021

How to Design and Construct a Functional Cursive Font

How to Design and Construct a Functional Cursive Font
Final product imageFinal product imageFinal product image
What You'll Be Creating

Cursive type was once an oxymoron, but modern OpenType technology now lets us create true cursive fonts with letterforms that behave according to their context, just like true cursive lettering, to some degree. 

How to Create Your Own Cursive Handwriting Font

Here are some quick tips on creating your own beautiful cursive font from scratch:

  • Do a simple warm-up before starting. Take a couple of minutes and draw the sticks and circles to get used to the materials. It will help you relax and write beautiful letters. 
  • Relax and take your time. Ignore the emotion and just breathe. This will help to cope with handshaking.
  • Select a letter style. Look at the options on the Internet, learn the spelling of letters. It will help you to make a really beautiful and professional-looking font.
  • Try different materials. Ballpoint pen, pen, and ink, felt-tip pen—everyone has their perfect tool, so choose your own.
  • Relax and enjoy the process! 

If you're looking for a shortcut, download some free cursive fonts from Envato Elements. There are a lot of creative options that can add some flair and style to your work.

Rossegenia Font Download CursiveRossegenia Font Download CursiveRossegenia Font Download Cursive
You can find handwriting cursive calligraphy fonts like Rossegenia on Envato Elements.

You can also check out this list of beautifully designed cursive fonts that are ready for you to download:

Now, it's time for you to create your own cursive handwriting font. Let's get started!

1. Do You Really Need a Font?

This may seem like a strange question to ask, but more and more these days, designers overuse fonts. The word “font” literally means “cast source”, referring to the metal blocks that once made up a typeface. These blocks were made of incredibly hard metal, designed to survive hundreds of thousands of presses, or later on, to serve as molds repeatedly casting copies of its letters into softer metal slugs for letterpress printing.

With this, there is an implication that fonts are meant for heavy, repetitive use. Type designers sink a great deal of work into a font to ensure that it functions as well as possible in any given setting. 

Thus, if you only need one decorative word, it does not make sense to design (or nowadays buy) an entire font. You're probably better off hand-lettering your word or phrase and importing it into your design. But if you need multiple different headings or want to set a particularly long passage in that typeface, or want a design that can otherwise print whatever the heck you want it to, then a font is the way to go.

2. Creating the Design

Type designs are often the result of happy accidents. Often I might casually letter something on paper that looks really good, and that will turn into inspiration for an entire typeface. For example, here were some headings I wrote for some physics/stat homework that I thought might make a nice typeface.

case closedcase closedcase closed

Word of advice: if you're trying to letter a sample, it’s often helpful to letter on grid paper so you can keep your letters—and scan crops—nice and straight.

electricityelectricityelectricity

These were written with a broad-nibbed calligraphy pen. You can buy some very inexpensive calligraphic fountain pens for less than $10 from manufacturers like Sheaffer.

You will have to scan them into images in order to vectorize the designs. If you don’t have a scanner (like me), you can simply take a picture from an orthogonal angle and use that. Both of the above scans were made with an iPhone camera. The image quality does not have to be great—you only need concern yourself with avoiding geometric distortion.

3. Tracing the Letters in FontForge

To create the font itself, you will need a font editing program. Several horrendously expensive options exist, but one great app, FontForge, is free and open source. We'll be using FontForge in this tutorial. Make sure you set it to use only integer coordinates (File > Preferences > Editing > SnapToInt).

Step 1

The first thing we have to do is import the scan into the FontForge drawing area. Do this by clicking into a glyph edit window and going to File > Import.

Importing background imageImporting background imageImporting background image

Then, making sure you're in the Background layer, use the move and scale tools to position and size the reference image. For demonstration purposes, I'll start with the letter ‘r’ in this sample, so center the ‘r’ in the middle of the glyph frame, right on the baseline.

positioning background imagepositioning background imagepositioning background image

Step 2

We start by drawing the junction where the letter’s instroke begins.

drawing junctiondrawing junctiondrawing junction

Then we plant HV-curve points at all the minima and maxima of the letter’s contour. Using HV-curve points helps anchor into place important points along the letter contour, and also forestalls endless headaches with missing extrema points down the road. For now it’s fine if the path intersects itself.

tracing r contourtracing r contourtracing r contour
adding minimum pointadding minimum pointadding minimum point

Then copy the instroke points and shift them straight horizontally over to form the outstroke points. It's very important that the y-coordinates of the two sets of points remain the same.

Drawing the outstrokeDrawing the outstrokeDrawing the outstroke

Then finish outlining the glyph.

outlining routlining routlining r

Step 3

Adjust the bézier handles of the curve points to better match the contour of the glyph.

Fitting contour to referenceFitting contour to referenceFitting contour to reference

You can see a filled preview of the glyph in the main Font view.

r previewr previewr preview

Step 4

Now we can tackle the next glyph, in this case an ‘i’. Start by roping off the ‘r’ by setting its advance width on top of its outstroke edge.

setting advance widthsetting advance widthsetting advance width

We trace the glyph with the same techniques we used to do the ‘r’, taking care to make the junction between the ‘r’s outstroke and the ‘i’s instroke smooth.

tracing itracing itracing i

You will need to draw the outstroke of the ‘i’ at the correct height, so that it lines up the instrokes of all the other letters, so it can be enormously helpful to create Fontforge guidelines marking out the heights of the joins. Create guidelines by dragging down from the top ruler in the glyph window. Make sure the guidelines are rounded to integer coordinates.

setting guidelinessetting guidelinessetting guidelines

Then just draw the rest of the glyph.

drawing the i continueddrawing the i continueddrawing the i continued
i previewi previewi preview

Step 5

This ‘i’ was drawn in the ‘r’ glyph space; we need to move it to its own glyph slot. Select the contour (and dot) by double clicking the paths, and cut and paste them into the ‘i’ glyph slot. Set the advance width by setting all sidebearings equal to 0 (Metrics > Set Both Bearings). Shift the background image if needed.

separating the r and iseparating the r and iseparating the r and i

You can still see the letters side by side by typing them in the wordlist box. This is extremely useful when making cursive fonts to make sure the joins are smooth and line up.

wordlist featurewordlist featurewordlist feature

Step 6

Here I am tracing the letter ‘l’ from the sample. It can be easier to copy an existing letter (in this case, a dotless ‘i’) and move the points to match the new letter, though everyone has their own way of hand-tracing scans.

tracing the ltracing the ltracing the l

The HV-bounding-box-points system sometimes breaks down, as it can be impossible to trace certain curves using just HV points.

poorly fitted splinepoorly fitted splinepoorly fitted spline

In this case, it may be necessary to insert additional curve points along the spline.

extra curve pointsextra curve pointsextra curve points

Hand lettering is rarely perfect, but fonts do have to be (one of the disadvantages of using fonts). That means that in order to avoid problematic combinations, the letters, especially their instrokes and outstrokes, have to be somewhat standardized. In the case of the ‘l’, that means lowering the tail so that it sits on the baseline.

standardizing lstandardizing lstandardizing l

Step 7

Here is a tracing of the letter ‘c’. As you can see, I made a few changes from the written version to make it play well with other letters. The Metrics Window can be very useful to test strings of letters.

Metrics Window previewMetrics Window previewMetrics Window preview

4. Deriving the Rest of the Alphabet

Your lettering sample will probably not contain every letter in the alphabet. In fact, you can sometimes get better results deriving letters from letters you’ve already drawn. For example, a script ‘a’ is very similar to a ‘ci’.

Making the aMaking the aMaking the a

I created the aforementioned ‘a’ just by squishing together a ‘c’ and an ‘i’ in the sample.

compressing acompressing acompressing a

Each letter you create will beget more letters. The ‘a’, for example, gives rise to the ‘d’.

Making the d from the aMaking the d from the aMaking the d from the a

The ‘d’ is not the only letter that comes from ‘a’. You can also conceivably derive the ‘q’, ‘u’, ‘i’ (if you started with an ‘a’ instead of an ‘i’), ‘n’, ‘m’, ‘p’, ‘h’, and several more from ‘a’. There are countless ways you can derive an alphabet starting with a few sample letters. One way is shown below, starting with an ‘s’, ‘a’, ‘c’, ‘e’, ‘l’, ‘o’, and ‘r’.

One possible derivation treeOne possible derivation treeOne possible derivation tree

Here is an example of a font I made with all 26 letters.

26 letters26 letters26 letters

5. Assembling a Functional Font

At this point, the font contains a full alphabet, but barely works as a font, since the letters only work together at the most basic level. The next part of this tutorial will focus on creating necessary alternates and programming the font to link up the letters in a pleasing cursive script.

Step 1

Your letters ‘b’, ‘o’, ‘v’, and ‘w’ will almost certainly have outstrokes that terminate higher up than the other letters. Do your best to standardize these four letters just as you did with the normal letters.

high lettershigh lettershigh letters

Step 2

If one of those four letters occurs, the letter after it won't link up because its instroke will be lower than the previous letter’s outstroke. We need to create a set of alternate glyphs with high instrokes that can link up with the ‘b’, ‘o’, ‘v’, and ‘w’. Do this by first adding 26 glyph slots to your font, in Encoding > Add Encoding Slots.

adding encoding slotsadding encoding slotsadding encoding slots

The new slots will enter as blanks, and you will need to sort them by going to Element > Other Info > Mass Glyph Rename.

naming glyphsnaming glyphsnaming glyphs

Give them a suffix of ‘high’, and map them to the alphabet block starting with ‘a’.

naming glyphs continuednaming glyphs continuednaming glyphs continued

This creates a block of slots named ‘a.high’, ‘b.high’, ‘c.high’, etc. Copy and paste a copy of the lowercase alphabet into this block.

filling slotsfilling slotsfilling slots

Step 3

Give the ‘a.high’ glyph an instroke that would connect with the ‘b’, ‘o’, ‘v’, and ‘w’.

modified a glyphmodified a glyphmodified a glyph

Step 4

This produces an appropriate alternate ‘a’ to be used after a ‘b’, ‘o’, ‘v’, or ‘w’, but it does nothing unless the font knows when to use it. To tell the font to substitute the ‘a.high’, we have to create a font lookup (Element > Font Info > Lookups > Add Lookup). Make it a Single Substitution lookup, but don’t set any features to it. Without a feature set, this lookup will serve as a list of paired glyphs for other lookups to use.

creating lookupcreating lookupcreating lookup

Then add a subtable to the lookup. Use the Default Using Suffix button to automatically populate the list with pairings based on the glyph names. If the button doesn’t work, save your font, close out Fontforge, reopen it, and try again.

creating a lookup subtablecreating a lookup subtablecreating a lookup subtable

Step 5

Add another lookup, this one a Contextual Chaining Substitution lookup. Assign the calt feature to it, which “activates” the lookup in the font when it's used to type text.

creating calt tablecreating calt tablecreating calt table

Add a subtable, and in it, create two classes—one with ‘b’, ‘o’, ‘v’, ‘w’, and high forms, and the other with all other letters not in the first class. 

At the beginning of each list, insert ‘void’ or ‘void2’, because for some reason, Fontforge will only read starting from the second glyph in each class. For the matching rule, type the name of your first class, a pipe, the name of the second class, and the “highlinks” lookup in @<> form (you can use the Add Lookup menu).

What’s going on here? The Chaining Substitution lookup goes along through each letter you type and looks to see if it’s a member of Class 1 (‘b’ and friends). If it’s followed by a member of Class 2 (all other letters), it will look in the highlinks lookup, and replace that glyph with the associated alternate glyph listed in highlinks. In this way, [b][a] becomes [b][a.high] when typed.

creating calt rulescreating calt rulescreating calt rules

Step 6

Because classes have to be disjoint, this fails if you have more than one ‘b’ or company in a row. We account for this by creating a second subtable, with one class containing the ‘b’, ‘o’, ‘v’, ‘w’, and their high forms. The matching rule will have the same class twice, and the second has highlinks lookup applied. This subtable will look for ‘b’s followed by other ‘b’s (or other letters in that class) and perform the same substitutions.

creating backup calt rulescreating backup calt rulescreating backup calt rules

You should have two subtables in the calt lookup now.

two calt rulestwo calt rulestwo calt rules

Step 7

Once you ‘OK’ out of the Font Information panel, you should be able to see the lookup in action in the Metrics Window.

testing the fonttesting the fonttesting the font

With the Metrics Window as a visual aid, convert the rest of the letters in the high block to having high instrokes.

designing high-instroke lettersdesigning high-instroke lettersdesigning high-instroke letters

The high joins should connect smoothly in the Metrics Window.

testing the fonttesting the fonttesting the font

6. Stylistic Polish

At this point, the font has technically become a true cursive, since the font will automatically ligate any letter combination you type. But it still has some way to go to make it look better.

Step 1

High up on the list of problems to smooth out is the link between x-height letters and ascending letters like ‘h’, ‘k’, and ‘t’. As you can see, the joins can look a little awkward.

lumpy joinslumpy joinslumpy joins

We have to fix this by creating another alternate set of letters, to be substituted in when they occur before an ascending letter. Name these like the high glyphs, except give them the suffix .steep.

alternate steep glyphsalternate steep glyphsalternate steep glyphs

Create another unfeatured lookup, with a subtable filled with pairings of regular and steep glyphs.

creating steep lookup and subtablecreating steep lookup and subtablecreating steep lookup and subtable

Step 2

You will also need to create alternate versions of the ‘h’, ‘k’, and ‘t’ glyphs, to link up with the steep glyphs (having steep instrokes). It's probably easiest to add three glyph slots and name them h.insteep, k.insteep, and t.insteep through the Element > Glyph Info window. You might also want to make another three copies of these glyphs for instances when more than one ‘h’ occurs in a row, though it seems this is currently nonfunctional.

steep h k and tsteep h k and tsteep h k and t

Of course, give them their own subtable.

h k and t subtableh k and t subtableh k and t subtable

Step 3

Next, we go into the calt lookup and add a third subtable to it to set up our chaining rules. In one class, put the ‘h’, ‘k’, and ‘t’, and in the other put the rest of the alphabet, except for the ‘h’, ‘k’, and ‘t’, because classes must be disjoint; and the ‘b’, ‘o’, ‘v’, and ‘w’, which, as high letters, cannot have steep outstrokes. 

The second class (regular letters) goes first, and gets the steeplinks lookup applied to it. The first class gets the insteeplinks lookup applied to it. This means that if the font produces a combination like [a][h], the [a] will get replaced with [a.steep], as specified in the steeplinks subtable, and the [h] gets replaced with [h.insteep], according to the insteeplinks subtable. This produces the matched pair [a.steep][h.insteep].

steep link rulessteep link rulessteep link rules

Step 4

Then we go in and actually modify the alternate glyphs to have steep links. It will be useful to create a third set of guidelines here. You can skip the ‘h’, ‘k’, and ‘t’, and the ‘b’, ‘o’, ‘v’, and ‘w’, since they can’t provide steep links under our current programming.

designing steep glyphsdesigning steep glyphsdesigning steep glyphs

As before, the Metrics Window helps you see how the font functions, and helps you design smooth links.

designing steep link glyphs continueddesigning steep link glyphs continueddesigning steep link glyphs continued

This should produce smooth linkages in most cases. It will fail if there are multiple ascending letters in a row—in theory you can create a fourth subtable in calt to substitute substituted ascending letters themselves, although for whatever reason this doesn’t work. The font will fall back to the old, less smooth, but still connected linkage. 

It will also fail in combinations like ‘bat’, with a high letter combined with a steep letter—again, in theory, you can program a subtable that would replace high letters with alternates that are both high and steep, but again, in my experience this does not work. 

The best you can do, however, is to make sure the steep linkage subtable is listed below the high links subtables when listed in calt; this fallback mechanism makes sure that the first two subtables can perform their more important functions over the third should a conflict arise.

testing the fonttesting the fonttesting the font

Step 5

One more important problem can be fixed—clashing pairs like ‘ti’ and ‘th’.

clashing ti and thclashing ti and thclashing ti and th

The easiest way to fix this is to create ligatures—custom replacements for these problematic letter pairs. I created six ligatures—a ‘ti’ ligature and a ‘th’ ligature, plus high and steep variants (remember to add them to the lookup lists).

ligaturesligaturesligatures

Step 6

Ligatures need to be programmed into a font with a Ligature Substitution lookup, which you should add to your font’s lookup list. Flag it dlig (discretionary ligature). Since calt is more important than the dlig lookup, make sure calt is listed first in the lookup list to give it priority if there’s a conflict.

ligature lookupligature lookupligature lookup

Ligature substitution is simpler than contextual substitution—you just create a subtable within it to enumerate the ligatures and the letter pairs they replace. Because dlig takes effect after calt has done its thing, the source glyphs should be the ones substituted by calt.

ligature rulesligature rulesligature rules

You should be able to see the ligatures in action in the Metrics Window.

testing ligaturestesting ligaturestesting ligatures

Step 7

This covers the basics of how to create a cursive font. A complete font will contain a great deal many other glyphs, including accents, symbols, capitals, and others. Some of these glyphs will need to be integrated into the link programming by adding their names to the various lookup subtables.

glyph tableglyph tableglyph table

A word of warning for when you go to export your font as an actual font file (.ttf, .otf) through File > Generate Fonts. Little of the programming we added to the font will be saved in the exported font file unless you check the OpenType box in the Options window. There are a few other housekeeping things you should run before exporting your typeface that are standard in digital type:

  1. Remove all overlaps (select all glyphs with Control-A, Element > Overlap > Remove Overlap).
  2. Round all coordinates to integers (select all glyphs, Element > Round > To Int).
  3. Make outer contours run clockwise (select all glyphs, Element > Correct Direction).
saving a fontsaving a fontsaving a font

Congratulations, You’re Done!

You now know how to design truly cursive type, type that simply works when you use it in an app. Such a font is not always necessary—hand lettering mustn’t be forgotten! But it's certainly a useful and fun thing to have around, and the possibilities with OpenType programming are endless. Happy font-making!

using the font in Inkscapeusing the font in Inkscapeusing the font in Inkscape

The font used as an example in the second half of this tutorial is In Screaming Color, a cursive font I designed which can be found on dafont.com.

Fonts on Envato Elements

Making your own hand-made cursive type is a very interesting process but it takes time. If you want to save time, take one of our ready-to-use fonts from Envato Elements. Browse the list below, or find even more suggestions here:

Tiffanky Monoline Cursive Font (OTF, TTF)

Tiffanky is a fancy cursive script font that can fit all of your stationery projects. This classic monoline font makes use of custom cursive letters that have a natural, handwritten feel.

Tiffanky Monoline Fancy Cursive Script FontTiffanky Monoline Fancy Cursive Script FontTiffanky Monoline Fancy Cursive Script Font

Honey Peach Script Font (Cute Handwriting Cursive) (OTF, TTF)

Cursive calligraphy writing fonts don't come much better than Honey Peach. The cute script comes with brilliant aesthetic glyphs. Unlike other handwriting cursive calligraphy fonts, this one is dedicated to the artist's cat. It doesn't get much cuter than that!

Honey Peach Fancy Cursive Script FontHoney Peach Fancy Cursive Script FontHoney Peach Fancy Cursive Script Font

Rossegenia Cursive Script Font (OTF, TTF, WOFF)

The brilliant Rossegenia is a display font download with cursive script lettering. Its modern style lends itself to just about any creative project you put your mind to. Whether you're making totes or flyers for a promotion, you can use Rossegenia.

Rossegenia Best Cursive Signature FontRossegenia Best Cursive Signature FontRossegenia Best Cursive Signature Font

Olivia Sand Typeface & Flowers Set (OTF, WOFF, PNG)

Olivia Sand is one of the best cursive signature fonts available. This cursive script contains classy, handmade lettering. The download also contains 21 PNG files that include watercolor flowers. This fancy cursive script font was designed with wedding and event invitations in mind.

Olivia Sand Best Cursive Signature FontOlivia Sand Best Cursive Signature FontOlivia Sand Best Cursive Signature Font

Cursive Brush Script (OTF, TTF)

Sleek and elegant, this fancy cursive script font will add gloss to your design. This font mimics handwriting and is perfect for invitations, social media post design, and packaging design.

Cursive Brush Script With Custom Cursive LettersCursive Brush Script With Custom Cursive LettersCursive Brush Script With Custom Cursive Letters

Quenyland: Fancy Cursive Script Font (OTF, TTF)

Calligraphy style cursive script with multilingual support is great for business cards, quotes, greeting cards, and branding materials. It's an easy-to-use fancy cursive script font that imitates handwriting.

Quenyland - Fancy Cursive Script FontQuenyland - Fancy Cursive Script FontQuenyland - Fancy Cursive Script Font

Pinttamuh (OTF, TTF)

A handwritten font made with an authentic brush, Pinttamuh will add some audacity to your designs. As a bold accent, this font is perfect for many different projects like a logo, poster, quotes, letter, greeting card, branding, and more.

Pinttamuh Font Download CursivePinttamuh Font Download CursivePinttamuh Font Download Cursive

Briella (OTF, TTF)

This cursive hand-lettering typeface is ideal for feminine designs. Imitating handwriting, Briella is ideal for:

  • wedding invites
  • birthday cards
  • greetings
  • posters

and tons more. If you want the best cursive signature font for your typeface library, Briella definitely makes the cut.

Briella Font Download CursiveBriella Font Download CursiveBriella Font Download Cursive

Herdrey (OTF, TTF)

Modern and dynamic, the calligraphic cursive font Herdrey is perfect for fresh and contemporary style designs. Use the custom cursive letters for branding, stationery design, blog design, invitations, and advertising. 

Herdrey Best Cursive Signature FontHerdrey Best Cursive Signature FontHerdrey Best Cursive Signature Font

Dignity Monoline Cursive Script Font (OTF, TTF)

This monoline cursive font has OpenType features and a lot of ligatures included. Also, you'll get a goodie bag with ornaments, back swashes, and dingbats. The package contains lowercase, uppercase, punctuations, and different ligatures. This font download with cursive letters is a great choice for different types of designs!

Dignity Monoline Cursive Script FontDignity Monoline Cursive Script FontDignity Monoline Cursive Script Font

Daniela Script (OTF, TTF)

This modern and sleek handwritten cursive font can be used for various projects such as invitations, T-shirts, and more. Daniela Script is also great for logos. The package contains 370+ glyphs and 184 alternate characters, including initial and terminal letters, alternates, ligatures, and multiple language support. Try it if you're after cute handwriting cursive calligraphy fonts.

Daniela Fancy Cursive Script FontDaniela Fancy Cursive Script FontDaniela Fancy Cursive Script Font

Jane Bugg (OTF, TTF)

Jane Bugg is a neat and cursive brush typeface that fits many types of feminine and elegant design work such as invitations, posters, custom cards, signatures, branding work, and so on. The quirky lettering makes Jane Bugg one of the more fun cursive calligraphy writing fonts.

Jane Bugg Custom Cursive Letters FontJane Bugg Custom Cursive Letters FontJane Bugg Custom Cursive Letters Font

Shattera (OTF, TTF)

Shattera is a modern calligraphic handwritten font imitating ink pens. Light and natural, this font will add some spontaneity to your project. Shattera is perfect for quotes, logos, blog headers, posters, branding, fashion, apparel, stationery, and more. If you don't have the time to create your own cursive handwriting font, download Shattera.

Shattera Custom Cursive Letters FontShattera Custom Cursive Letters FontShattera Custom Cursive Letters Font

Carosello (OTF, TTF)

Are you in love with 1950s script? So is Carosello. This font comes with custom cursive letters that pay tribute to the classic style. It was also created with a real permanent marker to nail the imperfections that come with a handwritten script. When you find cursive calligraphy writing fonts with that level of detail, it's always worth trying out.

Carosello Font Download CursiveCarosello Font Download CursiveCarosello Font Download Cursive

Butterscotch Calligraphy Cursive Font (OTF, TTF)

The fun Butterscotch wraps up our list of handwriting cursive calligraphy fonts. It features thin lettering and elegant ligatures. This font download comes with custom cursive letters, punctuation, numerals, and multilingual glyphs.

Butterscotch Cursive Calligraphy Writing FontsButterscotch Cursive Calligraphy Writing FontsButterscotch Cursive Calligraphy Writing Fonts

Further Develop Your Creative Skills

Want to improve your font-making? Here are some great tutorials and courses for your further practice.


No comments:

Post a Comment