Thursday, 22 June 2023

Creating 100 Fonts In 100 Days

This year is hopefully the year I start taking my hobbies and passions seriously, learning new skills and expanding my portfolio. I wanted to learn something new, and do it for a pro-longed period of time, so hopefully the new skills would stick. Furthermore, I wanted to give myself enough time to understand it and express myself creatively once I have practiced and perfected the method. 

Something I have wanted to try for a long time was to create a font, understanding how to get a font to work and dive deeper into the world of typography with my own bespoke typeface. Being a frequent user of all popular social media platforms, I have seen other creatives for a long time posting their own fonts and typographic designs. Why couldn't I do this, and really commit myself to a project? 

This is where the 100 Fonts In 100 Days came to fruition. 

The day was April 2nd, and I had until July 11th to create 100 fonts. If dividing the fonts by day, I had to create 1 a day to keep myself afloat with the workload. However, given my personal life and other unknown challenges life can sometimes throw your way, I knew this was not always possible, and I may sometimes have to step up the amount I were to produce. 

It is important to note that at the beginning of this project, I did not know how to create a working font. Having studied Graphic Design and designing in my day job, I am familiar with vector drawing software, so knew I would comfortably be able to design and digitise any lettering. With good software skills, I was comfortable in my ability to design fonts going forward, but to create a working one was a different ball game. 

Having completed a vast amount of research, I discovered free font editing software FontForge (not spon) which would allow me to convert svgs and other file formats into a working font. Using FontForge, you are able to design directly into the software, edit existing fonts, control spacing between lettering and a whole host of other features I am sure I have yet to discover and experience for myself. 

Every letter, symbol or punctuation mark typed on a keyboard is known as a glyph. Most widely-used fonts can include 10s of thousands of glyphs, covering upper and lowercase, marks as well as characters used in different languages. On the other hand, many stylised fonts found on free-use font websites can contain anything from the immediate English alphabet to a few hundred. Working on the immediate alphabet is what I would be trying to achieve with these fonts, as they are not intended for use commercially nor widely. Tackling just the English alphabet and perhaps some punctuation marks would be more achievable given the timeframe. I would also have more time on each letter and font, being able to play and experiment with different shapes and styles as I see fit. 

Preparing fonts digitally and by hand

When designing a set of glyphs or whole font, I used methods that were both digital and by hand. To keep my glyphs in proportion in terms of size width and in upper and lower case, I needed to draw each character using guides. Possessing just A4 paper to hand draw out glyphs, I created a grid as seen below which allows you to create 56 glyphs per piece of paper. 



  • Measurements are 7inches across by 28cm down. This is the easiest way I managed to measure using a standard 30cm ruler. 
Creating horizontal lines 3.5cm down until the end, should give you these boxes:



These lines and boxes will act as a guide for your lower and uppercase characters. Although depending on the style you are going form you may not necessarily need to stick to these. Your font could be abstract and not conform to any kind of linear pattern. The choice is yours. 

  • This is what you are going for with your lines. These could be created digitally on a hidden layer, or by hand which is what is the method I used the most. 

It is best to draw your lines vertically and horizontally across the paper, instead of working box by box. Hopefully they are helpful in helping you line up your glyphs. As with doing most things by hand, you may perhaps jolt your hand and the outcome may be slightly off. Don't worry much if lines are slightly off, as characters when digitised can always be edited in Illustrator.

How I created each glyph for a font

Upon sketching my glyphs digitally or by hand, once vectored I created a separate SVG file using Adobe Illustrator's export features. Every individual letter, number or symbol needs to be its own file. The reason I choose to export in an SVG format is because it is supported by FontForge, recommended by other font creators and I was also already familiar with the file type. You do not necessarily need to use Illustrator for this. Any vector image software that allows you to export your work as SVGs should in theory work. 



  • The above image is of font 31 Lucy Goosey. I hand drew each glyph and used Illustrator to vectorise each glyph.
Using hand drawn glyphs you have 2 options: digitally recreate the shapes one by one, or pick up the shapes using Image Trace. Illustrator's Image Trace feature really came in clutch for vectorising chunky glyphs that could be picked up easily by the feature. The trick is to make sure your scan has a high contrast so that the black is more distinguishable against the white on scan. If the pencil marks are picked up, use Illustrator's handy eraser tool or direct selection tool to delete any unwanted nodes/paths.


  • It is also a good idea to create glyphs as a stroke, as this will allow you to explore using Illustrator's default brush options in your fonts. Remember to merge all shapes and outline your stroke once complete

To create each glyph/character as its own file, go to File > New in any software and create an artboard that is small enough to accommodate your letters. You can use the same measurements as the width and height of each glyph box. (25.4mmWx 35mmH)




  • Paste in an upper and lowercase letter to line up glyphs. You can vertically align these so the bottom of each letter meets, and drag to create a guide, like so. You now know where your ascender and descender lines sit. 



  • Now you have your letter where you want it, centralised on the artboard, go ahead and export your letters as SVGs. 


  • These are Illustrators default SVG settings used on export for each SVG

These SVGs are then imported into FontForge and assigned to their appropriate character or glyph. 

I will touch on how I have imported and create fonts in the appropriate softwares, however I will not go into too much depth. There are already existing guides online on how to use FontForge and Glyphter, the two programs I have used. if you would like to see how these work, please research these via Google or Youtube, and many other knowledgable creatives will go into great depth. This is how I learned. 

Using Fontforge - Free Font editing software


  • Creating a new file in Fontforge, it will at first open blank. Yet this is my window once I have imported each Glyph. Double click on a blank box to open that character. 

  • File > Import will bring up the file explorer on windows or Mac. Use the directory to find where you have saved your SVGs. Select the appropriately named character and open this in FontForge. 

  • The letter should open like this, showing all the nodes/paths of your glyph. Use the guides to play around with spacing, base lines etc. Close this window to go back to your glyph set and repeat the process for each letter. 
*Please note, to create the space bar glyph you need to set the spacing on character/glyph number on character 33. No SVG is needed to be imported. 



  • Element > Font Info will allow you to edit the font name, family names or weight name of your created font. There are lots of other things to edit here too, but these are the basics you will be editing in this tab. 


  • Finally File > Generate Fonts will allow you to generate your font in the format of your choosing. You can then install this font and use to your heart's content. Thus concludes a short guide to FontForge. 

Using Glyphter - The SVG Font Machine

Another useful tool instead of FontForge was SVG font site Glyphter. A self proclaimed SVG font-machine  easily allows you to drag and drop your SVG glyphs onto the webpage, automatically spacing each glyph for you. The site provides some customisation options but not as much as FontForge. There are possible more features in the paid version, but in the free version you are able to create fonts with no account in a Truetype format. 


  • Using Glyphter is fairly self-explanatory, once you have drag and dropped all glyphs in place, you name your font in the top left text box and click the red FONT button next to it to download. 

Glyphter was used extensively later on in the project, when creating fonts with few glyphs and spacing that I did not feel needed much work. The online tool is great and can be used to make a quick font, especially for beginners. 

Fonts 1-100



1. Guinea Pig , 2. Arial PiƱata , 3. Disorder , 4. IM CURVY AND I LIKE IT , 5. Molecools , 6. Let's Eloope , 7. Hedgehog , 8. Let's Get Sketchy , 9. Inside D Box , 10. Outside D Box , 11. Loop De Loop , 12. Ripple , 13. Words Grow , 14. Words Bloom , 15. Snake Negative , 16. Snake Positive , 17. Whatever Floats Your Boat , 18. Thingbat 1 , 19. STAY AWAY , 20. Feeling Fonty , 21. Flatpack , 22. Shuttling , 23. Quick Warp , 24. SHOWBIZ BABY , 25. Crimble Crumple , 26. Blade Parade , 27. Satellites , 28. Round Trip , 29. Mosaick , 30. Outside Looking In , 31. Lucy Goosey , 32. Two Right Feet , 33. Poor Man's Scrabble , 34. HANDS OFF , 35. La flick c'est chique , 36. Azure Window , 37. Stars In Your Is , 38. Pointing Is Rude , 39. Funetics , 40. Mini Roo , 41. Stencilio , 42. Copybook , 43. Tipsy Turvy , 44. Pogo Sticks , 45. H Eye J , 46. Act Natural , 47. Impurrfectly Purrfect , 48. Wring A Rosie , 49. New Squeeze , 50. Cloudy , 51. Detective Irregular , 52. Cubey , 53. Let's Twist Again , 54. Charky , 55. Flame Thrower , 56. Museum , 57. Cowlick , 58. So you think I am skinny , 59. Balloon Artist , 60. Skritti , 61. Hattie , 62. Shoeie , 63. HAY NOW , 64. Outerspace , 65. Innerspace , 66. Sweeties , 67. Stone Art , 68. Tearbat , 69. Sticky Sticky Stick Stick , 70. Bunny Ears , 71. Curly Fries , 72. Beady Boi , 73. Shape Up And Ship Out , 74. Interlock , 75. MOOP , 76. Cusp , 77. Thin Lizzie , 78. Sergeant Angle , 79. Street Ghoul , 80. Heart2Heart , 81. Crinkle Cut , 82. Shake It , 83. Shadow Lines , 84. Threading The Needle , 85. Hmm , 86. Soft Serve , 87. Spring In Your Step , 88. High Voltage , 89. Digit All , 90. WrongWay , 91. Warp Town , 92. Pretty Petals , 93. Ziggy , 94. Backcomb , 95. Wobble Wobble , 96. Play Time , 97. Sticky , 98. Rickety , 99. Tissue Paper , 100. Celtic Type

One of the parts I strangely enjoyed about this challenge is naming each font. As you can see from my list of names, I had a preference for puns and pop-culture references in relation to the font. Some fonts are more obvious than others in terms of the reasoning for the name. Out of the 100 names, I did not seem to get stuck on naming any of the fonts. All names came fairly quickly, I guess once I had the overall idea for the font and what it was going to be, this put me in a good headspace to easily name it. 

The Highlights

My top 5 favourite fonts of those created were as follows:

  • No 8. Let's Get Sketchy


This font was the first I had created that I felt was rather easy to make and that also resembled itself exactly as I had pictured the font to be. Drawing back and forth over the letters to create a rough and sketchy effect within the lettering, this was picked up rather well via Illustrator's image trace function. I did not have to do much editing of the lettering at all, once vectored by this feature. The name is a play on words, and I did indeed "get sketchy" with my type. 

  • No 28. Round Trip


I perhaps have a preference for the Round Trip, for similar reasons to Let's Get Sketchy. I wanted the lettering to be constructed with rounded shapes, going for a sketchy style once again. Circling round and round each shape when sketching out the letters, each glyph appears rough and ready with imperfect lineage. The lettering also seems quite playful with the rounded chunky shapes alike that of a balloon. I would later attempt to replicate this balloon like shape in font 58, Balloon Artist.

  • No 31. Lucy Goosey


The lettering for this font tends to take on the form of long thin neck lines and a chunky head, alike that of a goose. Hence the name, Lucy Goosey replicates a goose's form in some respect. The font catches the eye, with a thick weight and rounded ends, consisting of fun curves with almost no straight lines to be seen. 

  • No 66. Sweeties
Picturing the idea of love heart sweets and the lettering included on these I had a similar idea to create a candy/sweet dingbat font. Instead, I adapted on this idea, creating spherical shapes with lettering inside, alike that of a skittle or other rounded confectionery. The alphabet created for this font is rather interesting, with letters such as "O" looking as though it is a piece of liquorice. The glyphs also appear negatively within the circles which is unique to other fonts I had previously completed. 

  • No 79. Street Ghoul
In creating this font I did not have a particular idea in mind. I began to sketch out the first letter A, making the letter end into a point. I repeated this shaping for all other letters as though they were the end of a flame converging into smoke, or a floating ghostlike figure who's body is ending off into a point. The initial result I thought looked similar to that of Graffiti lettering I had recently seen, which could have subconsciously been the inspiration behind my expression. Therefore, combining these two ideas of a street art and a mischievous night creature, I settled on the aptly named Street Ghoul. 


Series I watched during this challenge

  • Superstore

As someone who has worked in retail for several years, the perils of working in this industry and customer interactions are spot on. My favourite character is Dina and the storyline between Jonah and May and the cast as friends was so beautiful and well played out. Working in a store and with the general public is not the best at times, but it is the people you work with that really make it what it is. I think that's what this show is all about. Now one of my comfort series.

  • Emily In Paris

2 words: TEAM ALFIE

  • It’s Always Sunny In Philadelphia

This sitcom is so different from any others I have watched, each episode I find effortlessly hilarious. Having looked back from the first to the latest season and how the story has progressed, none of the main characters are really any further in their lives than before. The main characters are for the most part psychopaths and do not amount to anything, but that is part of the humour of it all. This show is not for everyone, but it is one for me.

  • How I Met Your Father

A long time fan of HIMYM, I thought I would give HIMYF a try. Sophie and Valentina's friendship reminds myself of a close friend of mine. Charlie and Ellen make for some funny scenarios throughout the show also. it is only half way through season 2, so the story is yet to really progress. I eagerly await to see where this series will go.

  • Welcome To Wrexham

Watching Ryan Reynolds and Rob McElhenney own and help run a struggling football team has really opened my mind into the perks and perils of a football career. I was unaware of the technicalities of getting into certain football leagues, how long it would take and just surprised at the overall cost it would be to create a grounds that is up to scratch for Wrexham. I have really enjoyed watching the Wrexham team and community going from strength to strength and look forward to watching them make their way through the leagues.

  • I Think You Should Leave

This programme is an easy watch with short episodes and hilarious skits. The humour in this show is not everyone's cup of tea, but if you enjoy existential humour and satire you will enjoy this show. My favourite sketch thus far has got to be 'Doggy Door'.


Without these series to keep myself entertained during the monotonous file preparation, I would not be where I am today, with 100 fonts and numerous glyphs taking up space on my hard drive. I have watched more new series and TV throughout this challenge than I watched in the entirety of last year.



Statistics

Working fonts completed: 100

Serif fonts completed:12

Sans-serif fonts completed:Over 72*

Dingbat fonts completed:8

Script fonts completed:2

Total glyphs created: 3289

New softwares discovered: 2


*The categorisation of fonts may not be entirely accurate. It is hard to describe and categorise some fonts being they could sit between two categories.


Hours of new TV binged: Approximately 144 hrs, or 6 days. 


I don't think I have ever consumed this much consecutive television in my lifetime.


Times almost given up: Many many times, I don't have a number



Conclusion

Glad that I decided to push through and see the project to a full 100 font library, starting at number 1 even just the first font seemed like such a mammoth task. Once I became comfortable and more confident in my method, making a font did not seem so difficult and I was able to be more experimental with my work. 

I realise the important of setting myself tasks such as these as a designer. Often times if you are pursuing the creative industries as a job, you do not get to experiment and try new things on your own terms. Doing projects like this allows you to learn something new and express yourself freely as a designer. 

Having the ability to create bespoke fonts, after creating 100 I think I will leave it for a little while. I am going to look to use my 5 favourites in my own graphic design projects. Stayed tuned for these projects as and when they come. 

For now, you can find my Instagram @neev.be to keep up with my latest work.



Things I Enjoyed About Design In 2023

As we take another journey around the sun, it's often a time we choose to reflect on our work, the work of  others and what we would lik...