Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

82 lines (65 sloc) 4.523 kb
<!doctype html>
<!--
320 and Up boilerplate extension
Author: Andy Clarke (http://about.me/malarkey)
Author: Keith Clark (http://twitter.com/keithclarkcouk)
URL: http://stuffandnonsense.co.uk/projects/320andup/
License: http://creativecommons.org/licenses/MIT/
-->
<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Sans-serif type readability reference | Fashionably Flexible Responsive Web Design</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio[controls],canvas,video{display:inline-block;*display:inline;*zoom:1;}
html{overflow-y:scroll;background:#fff;font-size:62.5%;}
body { padding : 22px; font-size:16px;font-size:1.6rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#282828;background-color:transparent; }
h2 { margin-bottom : .75em; font-weight : bold; font-size : 36px; }
div { margin-bottom : 1.5em; padding-bottom : 1.5em; border-bottom : 1px solid #ccc;
}
p { margin-bottom : 22px; line-height : 1.5; }
h3 { margin-bottom : 22px; font-weight : bold; }
p.caption { display : inline-block; padding : 6px; font-size : 12px; text-transform : uppercase; background-color : #ccc; }
</style>
</head>
<body>
<h2>Sans-serif type readability reference </h2>
<div>
<p style="font-size:12px">When a new medium borrows from an existing one, some of what it borrows makes sense, but much of the borrowing is thoughtless, &#8220;ritual&#8221;, and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don&#8217;t make sense.</p>
<p class="caption">12px</p>
</div>
<div>
<p style="font-size:14px">When a new medium borrows from an existing one, some of what it borrows makes sense, but much of the borrowing is thoughtless, &#8220;ritual&#8221;, and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don&#8217;t make sense.</p>
<p class="caption">14px</p>
</div>
<div>
<p style="font-size:16px">When a new medium borrows from an existing one, some of what it borrows makes sense, but much of the borrowing is thoughtless, &#8220;ritual&#8221;, and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don&#8217;t make sense.</p>
<p class="caption">16px</p>
</div>
<h2>Heading word wrap reference</h2>
<div><h3 style="font-size:16px">When a new medium borrows from an existing one</h3><p class="caption">16px</p></div>
<div><h3 style="font-size:18px">When a new medium borrows from an existing one</h3><p class="caption">18px</p></div>
<div><h3 style="font-size:21px">When a new medium borrows from an existing one</h3><p class="caption">21px</p></div>
<div><h3 style="font-size:24px">When a new medium borrows from an existing one</h3><p class="caption">24px</p></div>
<div><h3 style="font-size:36px">When a new medium borrows from an existing one</h3><p class="caption">36px</p></div>
<div><h3 style="font-size:48px">When a new medium borrows from an existing one</h3><p class="caption">48px</p></div>
<h2>Small type size reference</h2>
<div><p style="font-size:10px">Small type size reference</p><p class="caption">10px</p></div>
<div><p style="font-size:11px">Small type size reference</p><p class="caption">11px</p></div>
<div><p style="font-size:12px">Small type size reference</p><p class="caption">12px</p></div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.