forked from mrmrs/qstns
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
222 lines (216 loc) · 11.2 KB
/
index.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Promises to Users
</title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/i.css">
</head>
<body class="f-20 near-black pm pl-m pl-l">
<header class="mw-800 mbl center">
<h1 class="sansserif f1 f1-m f1-l uppercase bold kerning-s">Promises to Users</h1>
<p class="serif lh-cp">
People use the internet to consume information, and more often than not that
just means reading words on a screen. Too many websites make this harder than it
should be. Let's fix that. If we deliver on the following promises to users, the
internet will be a much better place.
</p>
</header>
<main class="mbx">
<article class="mw-800 mbl center">
<header>
<dt class="sansserif f2 f2-l uppercase bold kerning-s bt-gray-ns ptx-ns">Font-Size</dt>
<dd class="serif f4 f3-l lh-cp mln mts">
Font-size is the size of the font measured in px, rem, or em. We promise users
text will be large enough to read easily.
</dd>
<p class="serif f2 f2-l lh-cp italic b-emph b-emph-ns">
Your main copy should be a minimum of 16px.
</p>
</header>
<section>
<h1 class="sansserif f4 f4-l uppercase kerning-s">This is Good</h1>
<p class="serif lh-cp mbm">
This font is set to 20px, and you can easily read it. If it's larger, there aren't
any downsides: everyone will be able to consume your content.
</p>
<h1 class="sansserif f4 f4-l uppercase kerning-s">This is Bad</h1>
<p class="serif f6 lh-cp mbm">
This font is set to 14px. The main goal of your website is to get people to
consume your content or perform some action, and it'll be difficult for
them to do so if they can't read your text.
</p>
</section>
<section>
<h1 class="sansserif f4 f4-l uppercase kerning-s">Additional Reading</h1>
<ul class="ul-plain pln">
<li><a href="http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/" title="smashing magazine font-size article" class="serif tawny text-plain a-uline underline-ns dib of-h rel pbs">Smashing Magazine</a></li>
</ul>
</section>
</article>
<article class="mbl">
<header class="mw-800 center">
<dl>
<dt class="sansserif f2 f2-l uppercase bold kerning-s bt-gray-ns ptx-ns">Measure</dt>
<dd class="serif f4 f3-l lh-cp mln mts">
Measure is the length of a line of text. We promise users to not strain their
eyes by making them read across the entire page.
</dd>
</dl>
<p class="serif f2 f2-l lh-cp italic b-emph b-emph-ns">
For a single-column design measure should lie between 40 & 80 characters.
</p>
</header>
<section>
<h1 class="sansserif f4 f4-l uppercase kerning-s mw-800 center">This is Good</h1>
<p class="serif lh-cp mbm mw-800 center">
This paragraph is set to a max-width of 800px which is roughly 75 characters per
line (except when viewed on screens smaller than 800px wide). At the beginning
of every new line the reader is focused, but this focus gradually wears off over
the duration of the line which is why good measure increases readability.
</p>
<h1 class="sansserif f4 f4-l uppercase kerning-s">This is Bad</h1>
<p class="serif lh-cp ws-nowrap ws-norm-ns mbm">
Measure can create unity and harmony within a design, but a long measure disrupts
the rhythm. If a line of text is too long the user’s eye will have a hard time
focusing on the text. This is because too much energy is spent keeping the horizontal
line in sight over a long distance. Furthermore it can be difficult to continue
from the correct line in large blocks of text.
</p>
</section>
<section class="mw-800 center">
<h1 class="sansserif f4 f4-l uppercase kerning-s">Additional Reading</h1>
<ul class="ul-plain pln">
<li>
<a href="http://en.wikipedia.org/wiki/Measure_(typography)" title="Measure (typography) - Wikipedia, the free encyclopedia" class="serif tawny text-plain a-uline underline-ns dib of-h rel pbs">Measure Wikipedia</a>
</li>
</ul>
</section>
</article>
<article class="mw-800 mbl center">
<header class="mw-800 center">
<dl>
<dt class="sansserif f2 f2-l uppercase bold kerning-s bt-gray-ns ptx-ns">Leading</dt>
<dd class="serif f4 f3-l lh-cp mln mts">
Leading is the distance between baselines of text. We promise users the distance
will be set appropriately so large blocks of text will be easy to read.
</dd>
</dl>
<p class="serif f2 f2-l lh-cp italic b-emph b-emph-ns">
Titles should be set at a line-height of 1.3. Copy should be set to a line-height of 1.5.
</p>
</header>
<section>
<h1 class="sansserif f4 f4-l uppercase kerning-s">This is Good</h1>
<h2 class="sansserif f2 f2-l lh-title">
Here's a Multi-Line Title that has just Enough Breathing Room in Between the Lines
</h2>
<p class="serif lh-cp mbm">
This paragraph has a line-height of 1.5 which equals 30px (1.5 times its own font-size of 20px).
The lines have enough breathing space for the user to feel relaxed but not too much where the
lines feel disconnected.
</p>
<h1 class="sansserif f4 f4-l uppercase kerning-s">This is Bad</h1>
<h2 class="sansserif f2 f2-l lh-2">
Here's a Multi-Line Title that is More Difficult to Read because it has Too Much
Space in Between the Lines
</h2>
<p class="serif lh-1 mbm">
This paragraph has a line-height of 1 which isn't much smaller than the default line-height of most browsers. Lines too narrowly
set impair reading speed because the upper and lower line are both taken in by the eye at the same time. Also, descenders and
ascenders collide—like the bottom of 'g' and top of 'l'—which makes the block of text feel cramped.
</p>
</section>
<section>
<h1 class="sansserif f4 f4-l uppercase kerning-s">Additional Reading</h1>
<ul class="ul-plain pln">
<li>
<a href="http://en.wikipedia.org/wiki/Leading" title="Leading - Wikipedia, the free encyclopedia" class="serif tawny text-plain a-uline underline-ns dib of-h rel pbs">Leading Wikipedia</a>
</li>
</ul>
</section>
</article>
<article class="mw-800 mbl center">
<header>
<dt class="sansserif f2 f2-l uppercase bold kerning-s bt-gray-ns ptx-ns">Text Contrast</dt>
<dd class="serif f4 f3-l lh-cp mln mts">
Text contrast is the ratio of the luminance of the text color to that of its
background. We promise users the ratio will be high enough to see text regardless
of vision impairments.
</dd>
<p class="serif f2 f2-l lh-cp italic b-emph b-emph-ns">
The minimum contrast between main copy and its background should have a ratio of 4.5:1.
</p>
</header>
<section>
<h1 class="sansserif f4 f4-l uppercase kerning-s">This is Good</h1>
<p class="serif lh-cp mbm">
This text is #000 on a white background which has the maximum text contrast ratio
of 21:1. Contrast is measured in a formula that gives a ratio ranging from no contrast, 1:1
to maximum contrast, 21:1.
</p>
<h1 class="sansserif f4 f4-l uppercase kerning-s">This is Bad</h1>
<p class="serif gray-medium lh-cp mbm">
This text is #999999 on a white background which has a text contrast ratio of
2.8:1. You may be able to read this but people with color blindness or vision
impairments, as well as people browsing under less than ideal circumstances
such as bad monitors or window reflections might find it more difficult.
</p>
</section>
<section>
<h1 class="sansserif f4 f4-l uppercase kerning-s">Additional Reading</h1>
<ul class="ul-plain pln">
<li>
<a href="http://www.msfw.com/accessibility/tools/contrastratiocalculator.aspx" title="MSF&W Accessibility Tools: Contrast Ratio Calculator" class="serif tawny text-plain a-uline underline-ns dib of-h rel pbs">Contrast Ratio Calculator</a>
</li>
</ul>
</section>
</article>
<article class="mw-800 mbl center">
<header>
<dt class="sansserif f2 f2-l uppercase bold kerning-s bt-gray-ns ptx-ns">Responsive Images</dt>
<dd class="serif f4 f3-l lh-cp mln mts">
Responsive Images fit to the width of any viewport. We promise users images will
never bleed off the screen regardless of screen width.
</dd>
<p class="serif f2 f2-l lh-cp italic b-emph b-emph-ns">
Images should be set to max-width:100%.
</p>
</header>
<section>
<h1 class="sansserif f4 f4-l uppercase kerning-s">This is Good</h1>
<div class="mw-400 mbm">
<p class="serif lh-cp">Screen Width: 400px</p>
<img src="http://1funny.com/wp-content/uploads/2012/07/cute-panda-cub.jpg" alt="cute panda" class="mw-full">
</div>
<h1 class="sansserif f4 f4-l uppercase kerning-s">This is Bad</h1>
<p class="serif lh-cp">Screen Width: 400px</p>
<div class="mw-400 of-hid-ns mbm">
<img src="http://1funny.com/wp-content/uploads/2012/07/cute-panda-cub.jpg" alt="cute panda">
</div>
</section>
<section>
<h1 class="sansserif f4 f4-l uppercase kerning-s">Additional Reading</h1>
<ul class="ul-plain pln">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" title="max-width - CSS | MDN" class="serif tawny text-plain a-uline underline-ns dib of-h rel pbs">MDN Max-Width Property</a></li>
</ul>
</section>
</article>
<article class="mw-800 center">
<h1 class="sansserif f2 f2-l uppercase bold kerning-s bt-gray-ns ptx-ns">Conclusion</h1>
<p class="serif lh-cp">
This is in no way an exhaustive list but it's a good start. These promises
are clear and easy to implement. If we consistently deliver on them, we'll
make a big impact in making the internet better.
</p>
</article>
</main>
<footer class="bt-solid-gray gray-medium tac serif lh-cp">
<p>Made by <a href="https://github.com/donnieberg/promises" title="Github repo" class="serif near-black text-plain a-uline underline-ns dib of-h rel pbs mbnegative">Some Folks</a></p>
</footer>
</body>
</html>