A Computational Process to Build Type for the Web
Type matters. It is the voice of the written word. The default font libraries on common personal computers are fairly vast. They include a variety of text-fonts (subtle and practical like helvetica and times) and display-fonts (more expressive and convey meaning even without word association, are to be used sparingly, and include the reader in decoding the message, like papyrus and comic sans).
So, why is this so important to consider? If none of the display font types suit your needs, you can download others for free from places like dafont.com and 1001fonts.com, but borrowing from others is limiting and legally risky. Although, the online world only features about 8% of the world’s existing languages, and being able to create your own font helps immensely if you are working in other alphabets sets. These are some of the many reasons why I think having the ability to build your own type is valuable.
Alright, let us start with a sketch or line work of your type idea on paper. You could also use a drawing tablet in photoshop and skip the next few steps, but I prefer pen and paper. Everybody’s creative processes are very different, trust your instincts when creating your type design.
The design I have made for this demonstration is quite campy and extra, but I am just having fun with this, living my best life. Scan your drawing into photoshop. Isolate the penwork from the paper with the magic wand tool, manipulating the threshold, or selecting a colour range. Clean it up with the lasso, liquify and transform tools to resize and distort the text to make the letterforms more consistent. Select pixels, and fill with solid colour. Save as png, or another lossless file format.
Open this document in Illustrator. Proceed to Object > Image Trace > Make and Expand to vectorize the image. Open a new document as big as your largest character. Use the Lasso tool to isolate a single character, copy and paste into a new document, and save each one as different SVGs.
Alright now you have your new alphabet saved as individual SVG files. To convert these into a .ttf file or to use in html web page code, we can upload the files to icomoon.io. Through this, you can get the html code for the characters and download as a truetype format! There you go! Enjoy your new typeface!
