<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="/assets/rss.xsl" type="text/xsl"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
>
<channel>
	<title>Sacha Chua - tag - fonts</title>
	<atom:link href="https://sachachua.com/blog/tag/fonts/feed/index.xml" rel="self" type="application/rss+xml" />
	<atom:link href="https://sachachua.com/blog/tag/fonts" rel="alternate" type="text/html" />
	<link>https://sachachua.com/blog/tag/fonts/feed/index.xml</link>
	<description>Emacs, sketches, and life</description>
	<lastBuildDate>Tue, 22 Oct 2024 12:03:51 GMT</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>daily</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>11ty</generator>
  <item>
		<title>Python+FontForge+Org: I made a font based on my handwriting!</title>
		<link>https://sachachua.com/blog/2020/06/pythonfontforgeorg-i-made-a-font-based-on-my-handwriting/</link>
		<dc:creator><![CDATA[Sacha Chua]]></dc:creator>
		<pubDate>Fri, 05 Jun 2020 04:20:00 GMT</pubDate>
    <category>emacs</category>
<category>geek</category>
<category>org</category>
		<guid isPermaLink="false">https://sachachua.com/blog/?p=29568</guid>
		<description><![CDATA[
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<p>I wanted to make a font based on my handwriting using only free software. It turns out that FontForge can be scripted with Python. I know just a little about Python and even less about typography, but I managed to hack together something that worked for me. If you're reading this on my blog at <a href="https://sachachua.com/blog/">https://sachachua.com/blog/</a> , you'll probably see the new font being used on the blog post titles. Whee!</p>
<p><a href="https://sachachua.com/blog/wp-content/uploads/2020/06/Screenshot_2020-06-04_23-49-38.png"><img loading="lazy" class="alignnone size-thumbnail wp-image-29569" src="https://sachachua.com/blog/wp-content/uploads/2020/06/Screenshot_2020-06-04_23-49-38-280x52.png" alt="" width="280" height="52" srcset="https://sachachua.com/blog/wp-content/uploads/2020/06/Screenshot_2020-06-04_23-49-38-280x52.png 280w, https://sachachua.com/blog/wp-content/uploads/2020/06/Screenshot_2020-06-04_23-49-38.png 635w" sizes="(max-width: 280px) 100vw, 280px"></a></p>
<p>My rough notes are at <a href="https://github.com/sachac/sachac-hand/">https://github.com/sachac/sachac-hand/</a>&nbsp;. I wanted to write it as a literate program using Org Babel blocks. It's not really fully reproducible yet, but it might be a handy starting point. The basic workflow was:</p>
<ol class="org-ol">
<li>Generate a template using other fonts as the base.</li>
<li>Import the template into Medibang Paint on my phone and draw letters on a different layer. (I almost forgot the letter <code>q</code>, so I had to add it at the last minute.)</li>
<li>Export just the layer with my writing.</li>
<li>Cut the image into separate glyphs using Python and autotrace each one.</li>
<li>Import each glyph into FontForge as an SVG and a PNG.</li>
<li>Set the left side and right side bearing, overriding as needed based on a table.</li>
<li>Figure out kerning classes.</li>
<li>Hand-tweak the contours and kerning.</li>
<li>Use <code>sfnt2woff</code> to export the web font file for use on my blog, and modify the stylesheet to include it.</li>
</ol>
<p>I really liked being able to specify kerning classes through an Org Mode table like this:</p>
<table border="2" frame="hsides" rules="groups" cellspacing="0" cellpadding="6"><colgroup> <col class="org-left"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> </colgroup>
<tbody>
<tr>
<td class="org-left">&nbsp;</td>
<td class="org-right">None</td>
<td class="org-right">o,a,c,e,d,g,q,w</td>
<td class="org-right">f,t,x,v,y,z</td>
<td class="org-right">h,b,l,i,k</td>
<td class="org-right">j</td>
<td class="org-right">m,n,p,r,u</td>
<td class="org-right">s</td>
<td class="org-right">T</td>
<td class="org-right">zero</td>
</tr>
<tr>
<td class="org-left">None</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
</tr>
<tr>
<td class="org-left">f</td>
<td class="org-right">0</td>
<td class="org-right">-102</td>
<td class="org-right">-61</td>
<td class="org-right">-30</td>
<td class="org-right">0</td>
<td class="org-right">-60</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">-70</td>
</tr>
<tr>
<td class="org-left">t</td>
<td class="org-right">0</td>
<td class="org-right">-70</td>
<td class="org-right">-41</td>
<td class="org-right">-25</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">-10</td>
</tr>
<tr>
<td class="org-left">r</td>
<td class="org-right">0</td>
<td class="org-right">-82</td>
<td class="org-right">-41</td>
<td class="org-right">-25</td>
<td class="org-right">0</td>
<td class="org-right">-20</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">29</td>
</tr>
<tr>
<td class="org-left">k</td>
<td class="org-right">0</td>
<td class="org-right">-50</td>
<td class="org-right">-81</td>
<td class="org-right">-20</td>
<td class="org-right">0</td>
<td class="org-right">-20</td>
<td class="org-right">-48</td>
<td class="org-right">-120</td>
<td class="org-right">-79</td>
</tr>
<tr>
<td class="org-left">l</td>
<td class="org-right">0</td>
<td class="org-right">-41</td>
<td class="org-right">-50</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">-52</td>
</tr>
<tr>
<td class="org-left">v</td>
<td class="org-right">0</td>
<td class="org-right">-40</td>
<td class="org-right">-35</td>
<td class="org-right">-30</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">30</td>
</tr>
<tr>
<td class="org-left">b,o,p</td>
<td class="org-right">0</td>
<td class="org-right">-20</td>
<td class="org-right">-80</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">43</td>
</tr>
<tr>
<td class="org-left">a</td>
<td class="org-right">0</td>
<td class="org-right">-23</td>
<td class="org-right">-60</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">7</td>
</tr>
<tr>
<td class="org-left">W</td>
<td class="org-right">0</td>
<td class="org-right">-40</td>
<td class="org-right">-30</td>
<td class="org-right">-20</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">17</td>
</tr>
<tr>
<td class="org-left">T</td>
<td class="org-right">0</td>
<td class="org-right">-190</td>
<td class="org-right">-120</td>
<td class="org-right">-60</td>
<td class="org-right">0</td>
<td class="org-right">-130</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-188</td>
</tr>
<tr>
<td class="org-left">F</td>
<td class="org-right">0</td>
<td class="org-right">-100</td>
<td class="org-right">-90</td>
<td class="org-right">-60</td>
<td class="org-right">0</td>
<td class="org-right">-70</td>
<td class="org-right">-100</td>
<td class="org-right">-40</td>
<td class="org-right">-166</td>
</tr>
<tr>
<td class="org-left">two</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-53</td>
</tr>
</tbody>
</table>
<p>I had a hard time defining classes using the FontForge interface because I occasionally ended up clearing my glyph selection, so it was great being able to just edit my columns and rows.</p>
<p>Clearly my kerning is still very rough–no actual values for j, for example–but it's a start. Also, I can probably figure out how to combine this with character pair kerning and have two tables for easier tweaking.</p>
<p>A- insisted on tracing my handwriting template a few times, so I might actually be able to go through the same process to convert her handwriting into a font. Whee!</p>
</div></div>
]]></description>
		</item>
	</channel>
</rss>