Skip to content
Browse files

First upload

  • Loading branch information...
0 parents commit 6eb87cfb1e8a946461858a915257fed1944454c0 Andy Clarke committed
Showing with 164 additions and 0 deletions.
  1. +82 −0 sans-serif-helvetica.html
  2. +82 −0 serif-georgia.html
82 sans-serif-helvetica.html
@@ -0,0 +1,82 @@
+<!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>
82 serif-georgia.html
@@ -0,0 +1,82 @@
+<!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>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:Georgia,"Times New Roman",Times,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>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>

0 comments on commit 6eb87cf

Please sign in to comment.
Something went wrong with that request. Please try again.