forked from davgit/type-scale
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
406 lines (406 loc) · 19.1 KB
/
index.html
File metadata and controls
406 lines (406 loc) · 19.1 KB
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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
<!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, text, type, size, typography, typographic, typeface, rem, rems, em, ems, px, scale, calculate, calculator, webfont, edit, update, modular scale, preview' name='keywords'>
<meta content='#c9e2d6' name='theme-color'>
<link href='style.css' media='all' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Poppins:400,500' rel='stylesheet' type='text/css'>
<link class='webfont_url' rel='stylesheet' type='text/css'>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/b149446982.js'></script>
<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>
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/b375fb3236e4f37fa0ddc2c65/dfba41eed6b25cccaa86263f3.js");</script>
<style class='js_style_weight' type='text/css'></style>
<style class='js_style_body_font' type='text/css'></style>
<style class='js_style_body_weight' type='text/css'></style>
<style class='js_style_line_height' type='text/css'></style>
<style class='js_style_background_color' type='text/css'></style>
<style class='js_style_font_color' type='text/css'></style>
</head>
<body>
<div class='container stage'>
<div class='table_layout'>
<div class='table_row'>
<div class='sidebar border_right'>
<form>
<div class='field'>
<label>Base Size</label>
<input class='base_size' style='max-width:4rem;' type='text'>
<span class='text_muted text_monospace'>
px (<span class="base_em"></span>)
</span>
</div>
<div class='cols cols_fields'>
<div class='js_scale_div'>
<div class='field'>
<label>Scale</label>
<select class='js_font_scale'>
<option value='1.067'>1.067 – Minor Second</option>
<option value='1.125'>1.125 – Major Second</option>
<option value='1.200'>1.200 – Minor Third</option>
<option value='1.250'>1.250 – Major Third</option>
<option value='1.333'>1.333 – Perfect Fourth</option>
<option value='1.414'>1.414 – Augmented Fourth</option>
<option value='1.500'>1.500 – Perfect Fifth</option>
<option value='1.618'>1.618 – Golden Ratio</option>
<option value='custom'>Custom >></option>
</select>
</div>
</div>
<div class='js_custom_scale_div hide'>
<div class='field'>
<label>Value</label>
<input class='js_font_scale_custom' type='text'>
</div>
</div>
</div>
<div class='cols cols_fields'>
<div class='col_two_thirds'>
<div class='field'>
<label>
<a class='remove_border_bottom' href='https://fonts.google.com/' tabindex='-1' target='_blank'>
Google Fonts
<span class='fal fa-fw fa-external-link'></span>
</a>
</label>
<select class='js_font'></select>
</div>
</div>
<div class='col_one_third'>
<div class='field'>
<label>Weight</label>
<select class='js_weight'></select>
</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'>
<ul class='inline_list text_small text_light'>
<li>
<a class='remove_border_bottom' href='/'>
<span class='fal fa-fw fa-times-circle'></span>
Reset All
</a>
</li>
<li>
<a class='js_permalink remove_border_bottom' href='#'>
<span class='fal fa-fw fa-bookmark'></span>
Save for Later
</a>
</li>
</ul>
</div>
<div class='field'>
<input class='js_permalink_field field_permalink hide' type='text'>
</div>
<div class='js_param_url hide'>https://type-scale.com/?size=<span class='js_param_size'>16</span>&scale=<span class='js_param_scale'>1.250</span>&text=<span class='js_param_text'>A Visual Type Scale</span>&font=<span class='js_param_font'>Poppins</span>&fontweight=<span class='js_param_weight'>400</span>&bodyfont=<span class='js_param_body_font'>Poppins</span>&bodyfontweight=<span class='js_param_body_weight'>400</span>&lineheight=<span class='js_param_line_height'>1.75</span>&backgroundcolor=<span class='js_param_background_color'>%23ffffff</span>&fontcolor=<span class='js_param_font_color'>%23000000</span>&preview=false</div>
</form>
<div class='break_medium'></div>
<div class='break_medium'>
<p class='font_bold'>
<span class='text_light'>
<span class='fal fa-lightbulb-on'></span>
eBook coming soon
</span>
<br>
<span class='font_large'>Easy steps <br class="media_xs_hide">to great typography</span>
</p>
<!-- Begin Mailchimp Signup Form -->
<link href="https://cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<form action="https://type-scale.us7.list-manage.com/subscribe/post?u=b375fb3236e4f37fa0ddc2c65&id=5bc0ef7596" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<p><input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Enter your email to be notified" required></p>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_b375fb3236e4f37fa0ddc2c65_5bc0ef7596" tabindex="-1" value=""></div>
<div class="clear" style="display:block;"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn_green" style="width:100%;"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<div class='main_content'>
<div class='scale table_padded'>
<div class='js_scale_add_high_section table_row'>
<div class='table_cell text_light text_right media_xs_text_center'>
<a class='js_scale_add_high remove_border_bottom' href='#'>
<span class='fal fa-lg fa-plus-circle'></span>
</a>
</div>
<div class='table_cell'></div>
</div>
<div class='js_scale_section_high table_row'>
<div class='table_cell text_right media_xs_text_left cell_collapse'>
<span class='scale_high_label text_muted text_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 media_xs_text_left cell_collapse'>
<span class='scale_high_label text_muted text_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 media_xs_text_left cell_collapse'>
<span class='scale_high_label text_muted text_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 media_xs_text_left cell_collapse'>
<span class='scale_high_label text_muted text_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 media_xs_text_left cell_collapse'>
<span class='scale_high_label text_muted text_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='scale_base_size table_row'>
<div class='table_cell text_right media_xs_text_left cell_collapse'>
<span class='scale_high_label text_muted text_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 media_xs_text_left cell_collapse'>
<span class='scale_low_label text_muted text_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 media_xs_text_left cell_collapse'>
<span class='scale_low_label text_muted text_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='js_scale_section_low table_row'>
<div class='table_cell text_right media_xs_text_left cell_collapse'>
<span class='scale_low_label text_muted text_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='js_scale_add_low_section table_row'>
<div class='table_cell text_light text_right media_xs_text_center'>
<a class='js_scale_add_low remove_border_bottom' href='#'>
<span class='fal fa-lg fa-plus-circle'></span>
</a>
</div>
<div class='table_cell'></div>
</div>
</div>
<hr class='media_xs_hide'>
<div class='break_medium media_xs_show'></div>
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CKYIV2JW&placement=typescalecom" id="_carbonads_js"></script>
<form action='https://codepen.io/pen/define' method='POST' target='_blank'>
<div class='flex'>
<button class='codepen_btn break_small ml_order_2' onClick='ga('send', 'event', 'external-link', 'click', 'codepen-edit');' type='submit'>
<span class='fab fa-fw fa-codepen text_light'></span>
Edit on CodePen
</button>
<a class='js_css_button btn break_small' data-toggle='.js_generated_css' href='#' onClick='ga('send', 'event', 'toggle', 'click', 'css-button');'>
<span class='fal fa-fw fa-chevron-down text_light js_css_button_icon'></span>
Grab the CSS
</a>
<input class='codepen_json' name='data' type='hidden'>
</div>
</form>
<div class='js_generated_css hide'>
<pre class='codepen_able' contenteditable='true' data-type='css' onClick='ga('send', 'event', 'select', 'click', 'css-code');'><code>@import url('<span class="js_css_webfont_url">https://fonts.googleapis.com/css?family=Poppins:400</span>');

html {font-size: <span class="js_css_font_size"></span>%;} /*<span class="js_css_font_size_px"></span>px*/

body {
 background: <span class="js_css_background_color">white</span>;
 font-family: <span class="js_css_body_font_family">'Poppins', sans-serif;</span>
 font-weight: <span class="js_css_body_weight">400</span>;
 line-height: <span class='js_css_line_height'>1.75</span>;
 color: <span class="js_css_color">#000000</span>;
}

p {margin-bottom: 1rem;}

h1, h2, h3, h4, h5 {
 margin: 3rem 0 1.38rem;<span class="js_css_font_headers"></span>
 font-family: <span class="js_css_font_family">'Poppins', sans-serif;</span>
 font-weight: <span class="js_css_weight">400</span>;
 line-height: 1.3;
}

h1 {
 margin-top: 0;
 font-size: <span class="js_css_header_size"></span>rem;
}

h2 {font-size: <span class="js_css_header_size"></span>rem;}

h3 {font-size: <span class="js_css_header_size"></span>rem;}

h4 {font-size: <span class="js_css_header_size"></span>rem;}

h5 {font-size: <span class="js_css_header_size"></span>rem;}

small, .text_small {font-size: <span class="js_css_small_size"></span>rem;}
</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class='content container'>
<div class='table_layout stage_footer'>
<div class='table_row'>
<div class='sidebar text_right media_xs_hide'>
<ul class='inline_list'>
<li>
<a class='remove_border_bottom' href='https://j.eremy.net/'>
<span class='fal fa-globe fa-lg'></span>
</a>
</li>
<li>
<a class='remove_border_bottom' href='https://twitter.com/jeremybchurch'>
<span class='fab fa-twitter fa-lg'></span>
</a>
</li>
<li>
<a class='remove_border_bottom' href='https://github.com/jeremychurch/type-scale'>
<span class='fab fa-github fa-lg'></span>
</a>
</li>
</ul>
</div>
<div class='main_content'>
A type tool by
<ul class='inline_list'>
<li>
<a href='https://twitter.com/jeremybchurch'>Jeremy Church</a>
</li>
</ul>
</div>
</div>
</div>
<div class='table_layout'>
<div class='table_row'>
<div class='sidebar media_xs_hide'> </div>
<div class='main_content'>
<div class='content_width font_medium break_large'>
<h2>How to Use</h2>
<p><strong>Small scales</strong> (less than 1.2) are subtle and good for both mobile and desktop apps, or the mobile version of a responsive site.</p>
<p><strong>Medium scales</strong> (1.15–1.333) have a clear hierarchy, and help to organize sections with subheadings. A medium scale is versatile and works well for a wide variety of desktop sites, including blogs and marketing sites.</p>
<p><strong>Large scales</strong> (1.333 or greater) may be challenging to implement effectively, but could work well for portfolios, agencies, some marketing sites, or avant-garde works.</p>
<h2>REM vs. EM Values</h2>
<p>The em value is the same as the rem value displayed above. Both units are scalable. The only difference between the two is that em is proportionate to its nearest parent that has a font-size, whereas rem is always relative to the <html> font-size. You can read more about these units from an article I wrote on the subject, <a href='https://j.eremy.net/confused-about-rem-and-em/'>Confused About REM and EM?</a></p>
<h2>Additional Resources</h2>
<ul>
<li><a href='http://pxtoem.com/'>pxtoem.com - PX to EM conversion made simple</a></li>
<li><a href='https://www.fontsquirrel.com/'>fontsquirrel.com - Free fonts & webfont generator</a></li>
<li><a href='https://j.eremy.net/confused-about-rem-and-em/'>Confused About REM and EM?</a></li>
</ul>
<h2>Background</h2>
<p>Tim Brown’s <a href="https://www.modularscale.com/">Modular Scale</a> site raised awareness about type scales, helped to improve typography on the web, and it was the inspiration for this project.</p>
</div>
<div class='break_small'>
<ul class='inline_list'>
<li>
<a class='remove_border_bottom' href='https://j.eremy.net/'>
<span class='fal fa-globe fa-2x'></span>
</a>
</li>
<li>
<a class='remove_border_bottom' href='https://twitter.com/jeremybchurch'>
<span class='fab fa-twitter fa-2x'></span>
</a>
</li>
<li>
<a class='remove_border_bottom' href='https://github.com/jeremychurch/type-scale'>
<span class='fab fa-github fa-2x'></span>
</a>
</li>
</ul>
</div>
<p class='text_small'>
© Copyright 2013–<span class="js_current_year"></span> <a href="https://j.eremy.net/">Jeremy Church</a>. <br class="media_xs_show">Project available on <a href="https://github.com/jeremychurch/type-scale">GitHub</a>.
</p>
</div>
</div>
</div>
</div>
<div class='article_preview'>
<div class='article_preview_button js_article_preview_button' onClick='ga('send', 'event', 'toggle', 'click', 'article-preview');'>
<span class='fal fa-chevron-left fa-lg fa-fw js_article_preview_button_icon'></span>
</div>
<div class='article_preview_inner'>
<div class='break_small'>
<form>
<div class='cols cols_fields'>
<div class='col_two_thirds'>
<div class='field'>
<label>Body Font</label>
<select class='js_body_font'>
<option selected='true' value='body_font_default'>– Same as Headings –</option>
</select>
</div>
</div>
<div class='col_one_third'>
<div class='field'>
<label>Body Weight</label>
<select class='js_body_weight'></select>
</div>
</div>
</div>
<div class='cols cols_fields'>
<div class='col_one_third'>
<div class='field'>
<label>Line Height</label>
<input class='js_line_height' type='text' value='1.75'>
</div>
</div>
<div class='col_one_third'>
<div class='field'>
<label>Background</label>
<div class='field_color'>
<input class='js_bg_color' type='text' value='white'>
<input class='js_bg_color_picker' tabindex='-1' type='color' value='#ffffff'>
</div>
</div>
</div>
<div class='col_one_third'>
<div class='field'>
<label>Font Color</label>
<div class='field_color'>
<input class='js_font_color' type='text' value='#000000'>
<input class='js_font_color_picker' tabindex='-1' type='color' value='#000000'>
</div>
</div>
</div>
</div>
</form>
</div>
<div class='article_container'>
<div class='article_content' contenteditable='true'>
<h1 class='article_header'>A Crash Course in Web Design</h1>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<h2 class='article_header'>A Crash Course in Web Design</h2>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<h3 class='article_header'>A Crash Course in Web Design</h3>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<h4 class='article_header'>A Crash Course in Web Design</h4>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<h5 class='article_header'>A Crash Course in Web Design</h5>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<p class='text_small'>— Excerpt from A Voyage to Arcturus, by David Lindsay.</p>
</div>
</div>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='script.min.js'></script>
</body>
</html>