So with this in mind (and a day off from work), I set myself a challenge\u2026<\/p>\n
Create an entirely new font, from scratch, and submit it to Google Fonts in under 24\u00a0hours.<\/span><\/p>\n I had a couple of letters already sketched out in an old notebook. I wanted to create a tall, sans-serif, display font that could be used in posters, or large scale artwork. In my early days at Men\u2019s Health, I would have to use fonts like \u2018Tungsten\u2019 or \u2018Heron<\/a>\u2019, which were terrible for chunks of body copy, but amazing when used in headlines, or for promotional material (which was my main job there). This was the style I set out to create.<\/p>\n (Very) rough sketches. Ugh.<\/p><\/div>\n I went straight to Adobe Illustrator with the two or three letter styles I had sketched out. I set up five grid lines on my artboard, one each for the descender line, baseline, x-height, cap height and ascender line. I then decided on a width for the capital letters, and from there, the thickness of the stem (e.g. the width of the letter I<\/em>).<\/p>\n I did a lot<\/em> of research on letter proportions and ratios, and actually measured some existing fonts, working out how the lowercase letters should relate to the caps. From here, I made some rules:<\/p>\n The rules, illustrated.<\/p><\/div>\n <\/p>\n From here I created the letters O<\/em> and B<\/em> first. I made a decision that any letters that would usually have curves, would have a rounded corner instead. Most letters would be a tall block shape, but with letters like O<\/em>, B<\/em> and D<\/em>, the edges with curves would have rounded corners.<\/p>\n The outside corner would have a 12mm radius, and the inside had 6mm. With these rules agreed, plus a height for my crossbar (across the letter H<\/em>) I started churning out my capital letters.<\/p>\n <\/p>\n My font was very simple, but with one defining \u2018flourish\u2019, if you will. Any aperture, which is the opening in a letter, like the cut in the letter C<\/em>, or the end of any arc, like the curved end of the letter J<\/em>, would be cut at an angle. The hardest letters here were G<\/em> and K<\/em>.<\/p>\n With the CAPS completed, I moved on to the lowercase letters. This was undoubtedly harder, but with my rules agreed upon, it was just a case of churning through them. I used a lot more of my \u2018flourishes\u2019 here, especially at the end of the ascenders and descenders. The letters f<\/em>, g<\/em>, a<\/em> and e<\/em> were the trickiest, as they were completely new styles.<\/p>\n <\/p>\n I was now moving on to some of the extra glyphs, like the question mark and exclamation mark. My pace picked up, and before bed I had managed to work up around 35 of them.<\/p>\n In the morning, I completed the numbers 0 to 9 pretty quickly, and then began to actually create the font file.<\/p>\n This was completely new territory. Ian Barnard<\/strong><\/a>, a calligrapher pal on twitter (with my surname), recommended a program called Glyphs<\/a>, which you can download for a free 30-day trial.<\/p>\n I downloaded Glyphs Mini and watched a couple of tutorial videos, then realised I\u2019d set up my illustrator file completely wrong. So I had to paste each character in manually and scale it up to match the guides in the app.<\/p>\n <\/p>\n With my characters in place, I went about spacing and kerning the letters. This part was incredibly time consuming. There are a series of keyboard shortcuts in this app which you absolutely must<\/em> master before setting out on this. And before starting the kerning process, you have to get your letter spacing as close as possible to how you want the file to look.<\/p>\n Apparently as a rule of thumb, measure the width of the counter of the letter O<\/em> (the hole in the middle) and divide that by three. That is the spacing distance you should start with on the left and right side of your letters.<\/p>\n With the spacing set up (accounting for wider letters like M<\/em> and W<\/em>) I started kerning. This was a massively painstaking process. I visited this website<\/a>, and pasted in their example kerning text.<\/p>\n Using the keyboard shortcuts (use this tutorial<\/a>) I plodded through and adjusted kerning groups for every single distance that didn\u2019t look right to me. The obvious ones are between V<\/em> and A<\/em>, but there are so many letter pairings within that example copy that I wouldn\u2019t have thought of.<\/p>\n Once complete, I converted the kerning text to all caps and did the whole thing again, to pair the capital letters.<\/p>\n <\/p>\n I exported my font and converted it to a\u00a0.ttf file ready to submit to Google. With quite a few glyphs still missing (like square brackets and copyright symbols), I was certain that it wouldn\u2019t be accepted. I also didn\u2019t have time to include the multitudes of accents required for full language support.<\/p>\n It\u2019s not the greatest of fonts, but it wasn\u2019t bad for my very first go. And considering I had to teach myself how to use the Glyphs software from scratch, and it was completed in a single day, I was pretty proud!<\/p>\n Odibee Sans<\/strong><\/p>\n \u2026pronounced \u201coh-dee-bee\u201d. My very own \u2018One Day Build\u2019 (ODB).<\/p>\n <\/p>\n I submitted Odibee Sans to the Google Fonts team back in May 2017, and as it stands the font is still in their pipeline to be added<\/a>. The team quite rightly suggested that I should spend some additional time on the font to refine the design (although they admitted that this was against the spirit of the project).<\/p>\n With this in mind I spent an additional day on the font. I have since added all the extra glyphs (I think) required for extended latin support. I also made some major changes to around 30 of the glyphs, including new styles for the letters (caps) S, B, R, and lower case s, c, y, a, e, r, f, t, p, q and j, as well as a couple of number tweaks.<\/p>\n <\/p>\n On top of this, there are now more than 1500 kerning pairs, which has made a massive improvement to the typeface.<\/p>\n And I made a website! odibeesans.com<\/strong><\/a><\/p>\n The site was also<\/em> made in a day using Adobe Muse. More on this here.<\/a><\/p>\n <\/p>\n Thanks for reading! I\u2019d love to read about any projects you may have tackled in one day. It\u2019s quite an effective technique, if you can spare the time (God bless the freelance lifestyle)!<\/p>\n This article was originally published on James' Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" One Day\u00a0Builds I\u2019m a huge fan of Adam Savage\u2019s One Day Builds. At the beginning of the day he starts with a pile of materials, and ends up holding something that he once coveted (this one is my favourite). So with this in mind (and a day off from work), I set myself a challenge\u2026 Create an entirely new font,… Read More ￫<\/a><\/p>\n","protected":false},"author":207,"featured_media":14318,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-14317","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/0sJh3QBQvT5TdyOYw.jpg\")
1pm, Wednesday<\/h2>\n
\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/0CsyLjG0oz72sV1iu.jpg\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/0aHc1Y71gf3fTAQby.jpg\" "\\"\\"")
<\/a><\/p>\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/0wR-Irp2JjsRodxFx.jpg\" "\\"\\"")
<\/a><\/p>\n9pm, Wednesday<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/09SaukpmtQ7NaqUDn.jpg\" "\\"\\"")
<\/a><\/p>\nThursday morning<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/0OHQf-OAqjoc2b5lr.jpg\" "\\"\\"")
<\/a><\/p>\n10am, Thursday<\/h2>\n
11am Thursday<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/0-pkVEwiAwkIhQqYn.jpg\" "\\"\\"")
<\/a><\/p>\n12:59pm Thursday<\/h2>\n
The name?<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/0YljtcQNyZw5txM_N.png\" "\\"\\"")
<\/a><\/p>\nAfterword<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/1aB54lG7eUzw3ekVntcpAlQ.gif\" "\\"\\"")
<\/a><\/p>\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/1lOHI8-joZgZR6A2VBK2kkg.png\" "\\"\\"")
<\/a><\/p>\n