<?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>Luke Loeffler &#187; typography</title>
	<atom:link href="http://lukeloeffler.com/tag/typography/feed/" rel="self" type="application/rss+xml" />
	<link>http://lukeloeffler.com</link>
	<description></description>
	<lastBuildDate>Mon, 14 May 2012 04:57:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Text on a Curve</title>
		<link>http://lukeloeffler.com/2009/text-on-a-curve/</link>
		<comments>http://lukeloeffler.com/2009/text-on-a-curve/#comments</comments>
		<pubDate>Tue, 01 Sep 2009 22:57:03 +0000</pubDate>
		<dc:creator>luke</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://lukeloeffler.com/?p=383</guid>
		<description><![CDATA[I&#8217;m researching methods to render text along a path, like you can easily do in Illustrator. Unfortunately, it&#8217;s not so simple in Processing (unless someone knows of a library that does this). You can find a demo and the source here. Click four times to set the curve points and handles. Move the mouse left [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m researching methods to render text along a path, like you can easily do in Illustrator. Unfortunately, it&#8217;s not so simple in Processing (unless someone knows of a library that does this).</p>
<p><a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/09/Screen-shot-2009-09-01-at-5.57.37-PM.png"><img class="alignnone size-medium wp-image-392" title="Screen shot 2009-09-01 at 5.57.37 PM" src="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/09/Screen-shot-2009-09-01-at-5.57.37-PM-360x157.png" alt="Screen shot 2009-09-01 at 5.57.37 PM" width="360" height="157" /></a></p>
<p>You can find a demo and the source <a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/09/growing_text_tree.html">here</a>. Click four times to set the curve points and handles. Move the mouse left and right to alter the curve tightness.</p>
<p>In a nutshell, the algorithm computes the approximate length of the line segment by chopping it into smaller segments and computing the linear distance between points.  Once the length of the segment is known in pixels, <em>textWidth()</em> is called to obtain the width in pixels of each character. This width divided by the length of the curve determines the percentage of the curve the character occupies. Once this is know, the amount to increment the variable <em>t</em> in the parametric <em>curvePoint(&#8230;)</em> function is known. From here, we can find the starting point, determine the tangent, and draw the letter.</p>
<p>All straightforward, right? For whatever reason, though, the kerning is severely off under certain conditions. When there is a slight curve in the line segment, it seems to be balanced. When the curve tightness is altered and becomes very flat, or very curved, the letters become overly spaced out at one end, and overly compressed at the other.  Does anyone have any suggestions as to why this is happening?</p>
]]></content:encoded>
			<wfw:commentRss>http://lukeloeffler.com/2009/text-on-a-curve/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Singlespeed Software</title>
		<link>http://lukeloeffler.com/2009/sss-logo/</link>
		<comments>http://lukeloeffler.com/2009/sss-logo/#comments</comments>
		<pubDate>Mon, 29 Jun 2009 21:41:09 +0000</pubDate>
		<dc:creator>luke</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[graphic]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://lukeloeffler.com/blog/?p=31</guid>
		<description><![CDATA[I created this logo for a friend&#8217;s new software company, which was named after single-speed bicycles, elegant machines with only one cog in the rear. The main idea came almost immediately: rotate the letter S three times to create a cog. Ultimately, the typeface Mercury was used due to its sharp serifs which looked more [...]]]></description>
			<content:encoded><![CDATA[<p>I created this logo for a friend&#8217;s new software company, which was named after single-speed bicycles, elegant machines with only one cog in the rear. The main idea came almost immediately: rotate the letter <em>S</em> three times to create a cog. Ultimately, the typeface <em>Mercury</em> was used due to its sharp serifs which looked more tooth-like.</p>
<p><a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/06/sss-02.png"><img class="alignnone size-full wp-image-167" title="sss-02" src="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/06/sss-02.png" alt="sss-02" width="333" height="68" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://lukeloeffler.com/2009/sss-logo/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

