<?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>designerZen &#187; Code</title>
	<atom:link href="http://www.designerzen.com/category/portfolio/code/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.designerzen.com</link>
	<description>design and work of zenon olenski</description>
	<lastBuildDate>Mon, 14 Nov 2011 13:57:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Dynamic Typographic Styles</title>
		<link>http://www.designerzen.com/2009/07/dynamic-typographic-styles/</link>
		<comments>http://www.designerzen.com/2009/07/dynamic-typographic-styles/#comments</comments>
		<pubDate>Wed, 29 Jul 2009 19:29:12 +0000</pubDate>
		<dc:creator>designerzen</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Portfolio]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[Typography]]></category>

		<guid isPermaLink="false">http://www.designerzen.com/?p=272</guid>
		<description><![CDATA[Beautifully Balanced CSS for Type After writing about vertical rhythms and using a fixed baseline to set type to fit perfectly  onto a grid,  I thought it fitting to release my Typographic CSS generator &#8211; a super simple script that &#8230; <a href="http://www.designerzen.com/2009/07/dynamic-typographic-styles/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<h4>Beautifully Balanced CSS for Type</h4>
<p>After <a title="Day 010 : Typographic Baselines" href="http://www.designerzen.com/2009/07/day-010-typographic-baselines/">writing about vertical rhythms</a> and using a <strong>fixed baseline</strong> to set type to fit perfectly  onto a grid,  I thought it fitting to release my <strong>Typographic CSS generator</strong> &#8211; a super simple script that creates beautiful, balanced typography that can be dropped straight into your webpage. It&#8217;s job is three fold, firstly, it resets and normalises all styles (<em>negating the use for a reset.css</em>), secondly it sets a <em>cross-browser compatible</em> baseline and adjusts all type to fit accordingly, and thirdly <strong>it kerns text</strong> to make it as readable as possible, especially at the smallest sizes.<span id="more-272"></span><a class="external_link" title="Dynamic Typographic Style Sheet Generator" href="http://www.designerzen.com/web/csstypography/test.php" target="_blank">Try it out for yourself over at the Test Page</a></p>
<p>The <strong>power lies in the different settings you can append to the query line</strong> (<em>adding the options after the <strong>?</strong> in the url by prefixing it with an <strong>&amp;</strong></em>). The easiest and most fun way is to simply <em>play around with the test page </em>above or pick from one of the examples below.</p>
<ol>
<li><a href="http://www.designerzen.com/web/csstypography/test.php?baseline=22&amp;textcol=10,10,100&amp;linkcol=990000&amp;max=96&amp;p=14" target="_blank">Example 01</a> : Red Links, Blue Text (set as individual RGB colours), Maximum font size is 96 points, baseline set at 22 pixels, paragraph set to 14pts</li>
<li><a href="http://www.designerzen.com/web/csstypography/test.php?baseline=22&amp;textcol=0000FF&amp;linkcol=990000&amp;max=96&amp;capitalise=true" target="_blank">Example 01</a> : Red Links, Blue Text, Maximum font size is 96 points, baseline set at 22 pixels, Headlines in Capitals</li>
<li><a href="http://www.designerzen.com/web/csstypography/test.php?baseline=18&amp;textcol=60,60,0&amp;linkcol=ff0000&amp;max=72" target="_blank">Example 01</a> : Red Links, Brown Text (set as individual RGB colours), Maximum font size is 72 points, baseline set at 18 pixels</li>
<li><a href="http://www.designerzen.com/web/csstypography/test.php?baseline=22&amp;capitalise=true&amp;linkcol=0,0,255&amp;max=46&amp;min=4" target="_blank">Example 02</a> : Blue Links, Maximum font size is 46 points, Minimum is 4 points, baseline set at 22 pixels, Headlines are in capitals</li>
<li><a href="http://www.designerzen.com/web/csstypography/test.php?baseline=34&amp;textcol=0,10,0&amp;linkcol=0,255,0&amp;h1=56&amp;p=18" target="_blank">Example 03</a> : Green Links, H1 set as 56 points, p set to 18 points, baseline set at 34 pixels</li>
<li><a href="http://www.designerzen.com/web/csstypography/test.php?h1=100&amp;h2=90&amp;h3=80&amp;h4=40&amp;h5=30&amp;h6=20&amp;blockquote=24&amp;textcol=0,0,110" target="_blank">Example 04</a> : Blue Text, H1 set at 100 points, H2 set at 90 points, H3 set at 80 points, H2 set at 40 points, blockquote set at 24points</li>
<li><a href="http://www.designerzen.com/web/csstypography/test.php?scale=100" target="_blank">Example 05</a> : Double size deafults</li>
<li><a href="http://www.designerzen.com/web/csstypography/test.php?baseline=22&amp;max=36&amp;textcol=5b504c&amp;font=%27helvetica%27&amp;capitalise=true&amp;linkcol=192d6a&amp;hovercol=37acc4&amp;p=14">Example 06</a> : <em>An example site, similar to this one</em>!</li>
</ol>
<p><em>Note : the query sent to the test page is identical to the query sent to the dynamic CSS file.</em></p>
<p>All of the output CSS is <em>w3c valid</em>, cross browser compatible, scales neatly and is commented and laid out readably (unless in deploy mode <img src='http://www.designerzen.com/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> .</p>
<p>You can access the latest version of the source code over at <a title="Google Code Repo for Designerzen" href="http://code.google.com/p/css-dynamic-typographic-php/" target="_blank">Google Code.</a> The source code is released under the <strong>MIT license </strong>so please improve it however you see fit, just let me see your awesome developments once you are done so that we can both benefit.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.designerzen.com/2009/07/dynamic-typographic-styles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

