<?xml version="1.0" encoding="UTF-8"?>
<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>For what IT worths &#187; typography</title>
	<atom:link href="http://www.forwhatitworths.com/posts/category/typography/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.forwhatitworths.com</link>
	<description>taking I.T. personally</description>
	<lastBuildDate>Thu, 20 May 2010 23:30:38 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Making of the logo font</title>
		<link>http://www.forwhatitworths.com/posts/2007/10/making-of-the-logo-font/</link>
		<comments>http://www.forwhatitworths.com/posts/2007/10/making-of-the-logo-font/#comments</comments>
		<pubDate>Sun, 14 Oct 2007 11:02:25 +0000</pubDate>
		<dc:creator>tamasdecsi</dc:creator>
				<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://www.forwhatitworths.com/posts/2007/10/making-of-the-logo-font/</guid>
		<description><![CDATA[This year the Helvetica typeface is celebrating its 50th anniversary, so everyone is talking about fonts. Not that I&#8217;m about to propose a replacement for Helvetica, or anything such, still I&#8217;ve created my very first font, and therefore I&#8217;ve wrote this post about it.
Although my blog logo is still just scraped, it&#8217;s time to write [...]]]></description>
			<content:encoded><![CDATA[<p>This year the Helvetica typeface is celebrating its <a href="http://www.helveticafilm.com/">50th anniversary</a>, so everyone is talking about fonts. Not that I&#8217;m about to propose a replacement for Helvetica, or anything such, still I&#8217;ve created my very first font, and therefore I&#8217;ve wrote this post about it.</p>
<p>Although my blog logo is still just scraped, it&#8217;s time to write about the making of the font used there. I felt spending a couple of hours creating the font makes things learned worth sharing.</p>
<p>I named this font <strong>ArcNBrick</strong> mostly because of the basic concept behind its glyph shapes, where everything is built up of &#8211; surprise &#8211; arcs and bricks.</p>
<p>The tool I&#8217;ve chosen to build the font was <a href="http://fontforge.sourceforge.net/">FontForge</a>, a cross-platform, open source application designed for the very purpose of creating fonts of different types.</p>
<p><img src="http://files.forwhatitworths.com/letter_o.gif" alt="Creating letter o in FontForge" align="right" hspace="5" vspace="5" /><br />
Let&#8217;s take a quick tour of how I&#8217;ve started building a font with FontForge. First of all, the concept behind my font allowed me to work without any pre-drawn, scanned helper images, even though FontForge supports those. Let&#8217;s discuss the basics of drawing glyphs, then.</p>
<ul>
<li>All paths are built up of curve, tangent, and corner points. Curve points are marked with a circle, tangent points with a triangle, and corner points with a rectangle.</li>
<li>Control points (marked with x) help you to shape the curves as desired.</li>
<li>Outer boundary paths should be drawn clockwise, while inner boundaries counter-clockwise</li>
</ul>
<p>After learning these very few basic rules from the <a href="http://fontforge.sourceforge.net/editexample.html">tutorial</a>, I was very soon up to speed in drawing the glyphs for all the letters. In order to accelerate the process and also preserving design consistency, I used cheap transformation tricks to create glyphs from one another. For example the letter <strong>b</strong> is a perfect candidate to create letters <strong>d</strong>, <strong>p</strong>, and <strong>q</strong>.</p>
<p>So, drawing letter <strong>d</strong> consisted of the following operations: <em>select all</em> on letter <strong>b</strong>, <em>copy</em>, <em>paste</em> to letter <strong>d</strong>, then <em>element: transformations: transform: flip horizontally</em>, and finally <em>element: correct direction</em>. Drawing letter <strong>p</strong> wasn&#8217;t much harder: <em>select all</em> on letter <strong>b</strong>, <em>copy</em>, <em>paste</em> to letter <strong>p</strong>, then at <em>element: transformations: transform:</em> first <em>flip vertically</em> then <em>move y by -200</em>, and finally <em>element: correct direction</em>. That was it. Very soon, all letters took shape, so I&#8217;ve built the TrueType version to give it a go.</p>
<p><img src="http://files.forwhatitworths.com/arcnbrick-sample.jpg" alt="ArcNBrick font sample" /></p>
<p>As you can see, the result is nothing useful for everyday use, yet, you might find it appealing for short, emphasized labels used in logos, for example. Should this be the case, feel free to download and use my <a href="http://files.forwhatitworths.com/ArcNBrick.ttf">ArcNBrick.ttf</a>. Make sure to leave a comment here on where and how this font was particularly useful for you, I&#8217;d be happy to receive feedback!</p>
<p>I need to confess that I haven&#8217;t tackled any of the issues that would make a font professional, such as hinting, accents, proper encodings, to name a few, but by this time you&#8217;ve already guessed that I am by no means a typographer. Yet it was fun building a unique font from scratch and seeing it working in a word processor. Some day I might even try building some wingdings fonts too, who knows&#8230;</p>

<span class="slashdigglicious">
<a href="http://slashdot.org/bookmark.pl?url=http%3A%2F%2Fwww.forwhatitworths.com%2Fposts%2F2007%2F10%2Fmaking-of-the-logo-font%2F&amp;title=Making+of+the+logo+font" title="Slashdot It!"><img src="http://slashdot.org/favicon.ico" height="16" width="16" alt="[Slashdot]" /></a>
<a href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.forwhatitworths.com%2Fposts%2F2007%2F10%2Fmaking-of-the-logo-font%2F&amp;title=Making+of+the+logo+font" title="Digg This Story"><img src="http://digg.com/favicon.ico" width="16" height="16" alt="[Digg]" /></a>
<a href="http://reddit.com/submit?url=http%3A%2F%2Fwww.forwhatitworths.com%2Fposts%2F2007%2F10%2Fmaking-of-the-logo-font%2F&amp;title=Making+of+the+logo+font" title="Reddit"><img src="http://reddit.com/favicon.ico" width="16" height="16" alt="[Reddit]" /></a>
<a href="http://del.icio.us/post?url=http%3A%2F%2Fwww.forwhatitworths.com%2Fposts%2F2007%2F10%2Fmaking-of-the-logo-font%2F&amp;title=Making+of+the+logo+font" title="Save to del.icio.us" onclick="window.open('http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url=http%3A%2F%2Fwww.forwhatitworths.com%2Fposts%2F2007%2F10%2Fmaking-of-the-logo-font%2F&amp;title=Making+of+the+logo+font', 'delicious', 'toolbar=no,width=700,height=400'); return false;"><img src="http://images.del.icio.us/static/img/delicious.small.gif" width="16" height="16" alt="[del.icio.us]" /></a>
<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.forwhatitworths.com%2Fposts%2F2007%2F10%2Fmaking-of-the-logo-font%2F" title="Share on Facebook"><img src="http://www.facebook.com/favicon.ico" width="16" height="16" alt="[Facebook]" /></a>
<a href="http://technorati.com/faves?add=http%3A%2F%2Fwww.forwhatitworths.com%2Fposts%2F2007%2F10%2Fmaking-of-the-logo-font%2F" title="Add to my Technorati Favorites"><img src="http://technorati.com/favicon.ico" width="16" height="16" alt="[Technorati]" /></a>
<a href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http%3A%2F%2Fwww.forwhatitworths.com%2Fposts%2F2007%2F10%2Fmaking-of-the-logo-font%2F&amp;title=Making+of+the+logo+font" title="Save to Google Bookmarks"><img src="http://www.google.com/favicon.ico" width="16" height="16" alt="[Google]" /></a>
<a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.forwhatitworths.com%2Fposts%2F2007%2F10%2Fmaking-of-the-logo-font%2F&amp;title=Making+of+the+logo+font" title="Stumble it!"><img src="http://www.stumbleupon.com/favicon.ico" width="16" height="16" alt="[StumbleUpon]" /></a>
</span>]]></content:encoded>
			<wfw:commentRss>http://www.forwhatitworths.com/posts/2007/10/making-of-the-logo-font/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
