Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
336 lines (335 sloc) 19.8 KB
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta content='width=device-width' name='viewport'>
<title>Type Scale - A Visual Calculator</title>
<meta content='Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.' name='description'>
<meta content='font, size, typography, typographic, typeface, em, ems, px, scale, calculate, calculator, webfont, edit, update, modular scale, preview' name='keywords'>
<link href='style.css' media='all' rel='stylesheet'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic|Libre+Baskerville:400' rel='stylesheet' type='text/css'>
<link class='webfont_url' rel='stylesheet' type='text/css'>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-409712-10', 'type-scale.com');
ga('send', 'pageview');
</script>
<style class='style_weight' type='text/css'></style>
<style class='style_font_headers' type='text/css'></style>
<style class='style_weight_headers' type='text/css'></style>
<style class='style_background_color' type='text/css'></style>
<style class='style_font_color' type='text/css'></style>
</head>
<body>
<div class='container stage'>
<div class='cols'>
<div class='col_side'>
<form>
<div class='box'>
<div class='field'>
<label>Base Size</label>
<input class='base_size' style='max-width:4em;' type='text'>
<span class='text_muted'>
px = <span class="base_em"></span>em
</span>
</div>
<div class='cols cols_fields'>
<div class='col_two_thirds'>
<div class='field'>
<label>Scale</label>
<select class='font_scale'>
<option value='1.067'>1.067 &mdash; Minor Second</option>
<option value='1.125'>1.125 &mdash; Major Second</option>
<option value='1.200'>1.200 &mdash; Minor Third</option>
<option value='1.250'>1.250 &mdash; Major Third</option>
<option value='1.333'>1.333 &mdash; Perfect Fourth</option>
<option selected='true' value='1.414'>1.414 &mdash; Augmented Fourth</option>
<option value='1.500'>1.500 &mdash; Perfect Fifth</option>
<option value='1.618'>1.618 &mdash; Golden Ratio</option>
<option disabled='true'>&mdash;&mdash;</option>
<option value='custom'>Custom &nbsp; &nbsp; &gt;&gt;</option>
</select>
</div>
</div>
<div class='col_one_third'>
<div class='field font_scale_custom hide'>
<label>Value</label>
<input type='text'>
</div>
</div>
</div>
<div class='field'>
<label>Preview Text</label>
<input class='preview_text' type='text' value='A Visual Type Scale'>
</div>
<div class='field'>
<div class='table_layout'>
<div class='table_cell'>
<label>Google Fonts</label>
</div>
<div class='table_cell text_right'>
<a class='font_small' href='http://www.google.com/fonts/' tabindex='-1' target='_blank'>Find Font</a>
</div>
</div>
<input class='web_font' type='text' value='Libre+Baskerville'>
</div>
<div class='cols cols_fields'>
<div class='col_two_thirds'>
<div class='field'>
<label>Font Family</label>
<input class='web_font_name' type='text' value="'Libre Baskerville', serif">
</div>
</div>
<div class='col_one_third'>
<div class='field'>
<label>Weight</label>
<input class='i_weight' type='text' value='400'>
</div>
</div>
</div>
<div class='field'>
<label>Permalink</label>
<div class='font_small overflow_gradient'>
<a class='param_url'>
http://type-scale.com/?size=<span class="param_size">16</span>&amp;scale=<span class="param_scale">1.414</span>&amp;text=<span class="param_text">A Visual Type Scale</span>&amp;webfont=<span class="param_font">Libre+Baskerville</span>&amp;font-family=<span class="param_css">'Libre Baskerville', serif</span>&amp;font-weight=<span class="param_weight">400</span>&amp;font-family-headers=<span class="param_font_headers"></span>&amp;font-weight-headers=<span class="param_weight_headers">inherit</span>&amp;background-color=<span class="param_background_color">white</span>&amp;font-color=<span class="param_font_color">%23333</span>
</a>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="http://cdn.adpacks.com/adpacks.js?legacyid=1291994&zoneid=1408&key=0539c68d8c24c7e870a450d4e50e9e0e&serve=C6SIVKV&placement=typescalecom&circle=design" id="_adpacks_js"></script>
</div>
<div class='col_main' style='overflow:hidden;'>
<div class='table_padded'>
<div class='table_row'>
<div class='table_cell text_right cell_collapse'>
<span class='scale_high_label text_muted font_small'></span>
</div>
<div class='table_cell scale_webfont'>
<h1>
<span class='scale_high scale_preview_text'>A Visual Type Scale</span>
</h1>
</div>
</div>
<div class='table_row'>
<div class='table_cell text_right cell_collapse'>
<span class='scale_high_label text_muted font_small'></span>
</div>
<div class='table_cell scale_webfont'>
<span class='scale_high scale_preview_text'>A Visual Type Scale</span>
</div>
</div>
<div class='table_row'>
<div class='table_cell text_right cell_collapse'>
<span class='scale_high_label text_muted font_small'></span>
</div>
<div class='table_cell scale_webfont'>
<span class='scale_high scale_preview_text'>A Visual Type Scale</span>
</div>
</div>
<div class='table_row'>
<div class='table_cell text_right cell_collapse'>
<span class='scale_high_label text_muted font_small'></span>
</div>
<div class='table_cell scale_webfont'>
<span class='scale_high scale_preview_text'>A Visual Type Scale</span>
</div>
</div>
<div class='table_row scale_base_size'>
<div class='table_cell text_right cell_collapse'>
<span class='scale_high_label text_muted font_small'></span>
</div>
<div class='table_cell scale_webfont'>
<span class='scale_high scale_preview_text'>A Visual Type Scale</span>
</div>
</div>
<div class='table_row'>
<div class='table_cell text_right cell_collapse'>
<span class='scale_low_label text_muted font_small'></span>
</div>
<div class='table_cell scale_webfont'>
<span class='scale_low scale_preview_text'>A Visual Type Scale</span>
</div>
</div>
<div class='table_row'>
<div class='table_cell text_right cell_collapse'>
<span class='scale_low_label text_muted font_small'></span>
</div>
<div class='table_cell scale_webfont'>
<span class='scale_low scale_preview_text'>A Visual Type Scale</span>
</div>
</div>
<div class='table_row'>
<div class='table_cell text_right cell_collapse'>
<span class='scale_low_label text_muted font_small'></span>
</div>
<div class='table_cell scale_webfont'>
<span class='scale_low scale_preview_text'>A Visual Type Scale</span>
</div>
</div>
</div>
<hr>
<form action='http://codepen.io/pen/define' method='POST' target='_blank'>
<a class='btn font_small expand_down' data-toggle='.js_generated_css' href='#' onClick="ga('send', 'event', 'toggle', 'click', 'css-button');">
<span class='fa fa-fw fa-chevron-down'></span>
Grab the CSS
</a>
&nbsp;
<input class='codepen_json' name='data' type='hidden'>
<input class='codepen_btn font_small' onClick="ga('send', 'event', 'external-link', 'click', 'codepen-edit');" type='submit' value='Edit on CodePen'>
</form>
<div class='js_generated_css hide'>
<div class='break_small'></div>
<div class='box content_width'>
<pre class='codepen_able font_small' contenteditable='true' data-type='css' onClick="document.execCommand('selectAll',false,null); ga('send', 'event', 'select', 'click', 'css-code');"><code>html {font-size: <span class="css_font_size"></span>em;}&#x000A;&#x000A;body {&#x000A; background-color: <span class="css_background_color">white</span>;&#x000A; font-family: <span class="css_font_family">'Libre Baskerville', serif</span>;&#x000A; font-weight: <span class="css_weight">400</span>;&#x000A; line-height: 1.45;&#x000A; color: <span class="css_color">#333</span>;&#x000A;}&#x000A;&#x000A;p {margin-bottom: 1.3em;}&#x000A;&#x000A;h1, h2, h3, h4 {&#x000A; margin: 1.414em 0 0.5em;<span class="css_font_headers"></span>&#x000A; font-weight: <span class="css_weight_headers">inherit</span>;&#x000A; line-height: 1.2;&#x000A;}&#x000A;&#x000A;h1 {&#x000A; margin-top: 0;&#x000A; font-size: <span class="css_header_size"></span>em;&#x000A;}&#x000A;&#x000A;h2 {font-size: <span class="css_header_size"></span>em;}&#x000A;&#x000A;h3 {font-size: <span class="css_header_size"></span>em;}&#x000A;&#x000A;h4 {font-size: <span class="css_header_size"></span>em;}&#x000A;&#x000A;small, .font_small {font-size: <span class="css_small_size"></span>em;}&#x000A;</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class='content container'>
<div class='cols stage_footer'>
<div class='col_side text_right media_xs_hide'>
<ul class='inline_list'>
<li>
<a class='remove_border_bottom' href='https://twitter.com/jeremybchurch'>
<span class='fa fa-twitter fa-lg'></span>
</a>
</li>
<li>
<a class='remove_border_bottom' href='http://j.eremy.net/'>
<span class='fa fa-globe fa-lg'></span>
</a>
</li>
<li>
<a class='remove_border_bottom' href='https://github.com/jeremychurch/type-scale'>
<span class='fa fa-github-alt fa-lg'></span>
</a>
</li>
</ul>
</div>
<div class='col_main'>
A type tool by
<ul class='inline_list'>
<li>
<a href='https://twitter.com/jeremybchurch'>Jeremy Church</a>
</li>
</ul>
</div>
</div>
<div class='cols'>
<div class='col_side media_xs_hide'>&nbsp;</div>
<div class='col_main'>
<div class='content_width font_medium break_large'>
<div class="addthis_toolbox addthis_default_style">
<a class="remove_border_bottom addthis_button_tweet"></a>
<a class="remove_border_bottom addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="remove_border_bottom addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-5285205508e46c17"></script>
<h2>How to Use</h2>
<p>I like to enter the base font size of my body content. Then I select from the surrounding values for headers and small copy.</p>
<p>There are no rules. Just experiment and have fun. Try using the values for line-height, margins or whatever, and see what works.</p>
<h2>Background</h2>
<p>Most people are familiar with Tim Brown&rsquo;s <a href="http://modularscale.com/">Modular Scale</a> calculator. The site has raised awareness about scale and helped to improve typography on the web. It&rsquo;s also the inspiration for this project.</p>
<p>The <em>Modular Scale</em> site has been a great reference over the years, but sometimes it&rsquo;s difficult to choose the proper scale without a visual reference. I hope to bridge that gap with <em>Type Scale</em>.</p>
<h2>Updates</h2>
<p>I&rsquo;d like to keep this project current and useful to the community. Please direct ideas and feedback to me on <a href="https://twitter.com/jeremybchurch">Twitter</a> or the <a href="http://j.eremy.net/contact">contact page</a> on my site.</p>
</div>
<div class='break_small'>
<ul class='inline_list'>
<li>
<a class='remove_border_bottom' href='https://twitter.com/jeremybchurch'>
<span class='fa fa-twitter fa-2x'></span>
</a>
</li>
<li>
<a class='remove_border_bottom' href='http://j.eremy.net/'>
<span class='fa fa-globe fa-2x'></span>
</a>
</li>
<li>
<a class='remove_border_bottom' href='https://github.com/jeremychurch/type-scale'>
<span class='fa fa-github-alt fa-2x'></span>
</a>
</li>
</ul>
</div>
<p class='font_small'>
Created by <a href="http://j.eremy.net/">Jeremy Church</a>
<br>
Project available on <a href="https://github.com/jeremychurch/type-scale">Github</a>. Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a>.
</p>
</div>
</div>
</div>
<div class='article_preview'>
<div class='article_preview_button fa fa-chevron-left fa-lg fa-fw' onClick="ga('send', 'event', 'toggle', 'click', 'article-preview');"></div>
<div class='article_preview_inner'>
<a class='btn font_small expand_down more_options_button' data-toggle='.js_article_options' href='#' onClick="ga('send', 'event', 'toggle', 'click', 'article-options');">
<span class='fa fa-fw fa-chevron-down'></span>
More Options
</a>
<div class='js_article_options hide'>
<div class='break_medium'></div>
<form>
<div class='cols cols_fields'>
<div class='col_two_thirds'>
<div class='field'>
<label>Header Font Family</label>
<input class='font_family_headers' type='text'>
</div>
</div>
<div class='col_one_third'>
<div class='field'>
<label>Weight</label>
<input class='i_weight_headers' type='text' value='inherit'>
</div>
</div>
</div>
<div class='cols cols_fields'>
<div class='col_half'>
<div class='field'>
<label>Background Color</label>
<input class='background_color' type='text' value='white'>
</div>
</div>
<div class='col_half'>
<div class='field'>
<label>Font Color</label>
<input class='font_color' type='text' value='#333'>
</div>
</div>
</div>
</form>
</div>
<hr>
<div class='article_container'>
<div class='article_content'>
<h1 class='article_header'>One Morning, When Gregor Samsa Woke</h1>
<p>From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. &ldquo;What&rsquo;s happened to me?&rdquo; he thought. It wasn&rsquo;t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
<h2 class='article_header'>One Morning, When Gregor Samsa Woke</h2>
<p>From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. &ldquo;What&rsquo;s happened to me?&rdquo; he thought. It wasn&rsquo;t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
<h3 class='article_header'>One Morning, When Gregor Samsa Woke</h3>
<p>From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. &ldquo;What&rsquo;s happened to me?&rdquo; he thought. It wasn&rsquo;t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
<h4 class='article_header'>One Morning, When Gregor Samsa Woke</h4>
<p>From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. &ldquo;What&rsquo;s happened to me?&rdquo; he thought. It wasn&rsquo;t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
<p class='font_small text_muted'>
<em>&mdash; Excerpt from The Metamorphosis, by Franz Kafka.</em>
</p>
</div>
</div>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src='script.min.js'></script>
</body>
</html>