This repository has been archived by the owner on May 3, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
/
sans-serif-helvetica.html
82 lines (65 loc) · 4.42 KB
/
sans-serif-helvetica.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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, “ritual”, and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don’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, “ritual”, and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don’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, “ritual”, and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don’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>