forked from benediktlehnert/typopocketguide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·366 lines (354 loc) · 24.8 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- for Google -->
<meta name="description" content="This little guide is for writers, designer, engineers, students or anyone who just wants to do things right. Mastering the daily typography adventures will help you get your message across more successfully." />
<meta name="keywords" content="typography, guide, " />
<meta name="author" content="Benedikt Lehnert" />
<!-- for Facebook -->
<meta property="og:title" content="A Pocket Guide to Master Every Day’s Typographic Adventures" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.typogui.de/images/oh.png" />
<meta property="og:url" content="http://www.typogui.de" />
<meta property="og:description" content="This little guide is for writers, designer, engineers, students or anyone who just wants to do things right. Mastering the daily typography adventures will help you get your message across more successfully." />
<link rel="stylesheet" href="css/toast.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700,900' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.ico" >
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />
<!-- Place GA code here-->
<title>A Pocket Guide to Master Every Day’s Typographic Adventures</title>
</head>
<body>
<div id="top" class="header">
<div class="social">
<iframe class="fb" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftypogui.de&width&layout=button_count&action=like&show_faces=false&share=true&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.typogui.de" data-via="blehnert">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<!-- Hero -->
<div class="hero">
<h1>A Pocket Guide to Master<br> Every Day’s Typographic Adventures</h1>
</div>
<!-- /Hero -->
<!-- Nav -->
<div>
<ul class="nav">
<li>
<a href="#typography"><img src="images/1.svg" alt="" />Typo—what?</a>
</li>
<li><a href="#fontsvstypefaces"><img src="images/2.svg" alt="" />Fonts vs Typefaces</a></li>
<li><a href="#mixingtypefaces"><img src="images/3.svg" alt="" />Mixing Typefaces</a></li>
<li><a href="#fontsizelineheight"><img src="images/4.svg" alt="" />Font Size &<br> Line Height</a></li>
<li><a href="#apostrophes"><img src="images/5.svg" alt="" />Apostrophes</a></li>
<li><a href="#quotes"><img src="images/6.svg" alt="" />Quotes</a></li>
<li><a href="#dashes"><img src="images/7.svg" alt="" />Dashes</a></li>
<li><a href="#brackets"><img src="images/8.svg" alt="" />Brackets & Co</a></li>
</ul>
</div>
<!-- /Nav -->
</div>
<div class="wrap">
<div class="grids">
<div id="typography" class="grid-12 block">
<div class="illu"><img src="images/1.svg" alt="" /></div>
<h2>Typo—what?</h2>
<p>
Typography is the craft of arranging type with the goal to make language visible. We arrange type multiple times throughout the day; whether we are writing essays, summarizing meeting minutes or creating slides for a presentation. Unfortunately, we usually end up thinking more about <i>what</i> we write than <i>how</i> we write it. And, most importantly, how others will <i>read</i> it.
</p>
<p>
<strong>1. Good typography makes us read</strong><br>
Good typography is utilitarian. It allows the reader to focus on the content, not the formatting. Ideally it is not even noticed because it just makes sense to the reader.
</p>
<p>
<strong>2. Good typography makes us feel</strong><br>
Good typography is emotional. The choice of typeface affects how your content is understood or perceived. Based on its character, the right typeface sets the tone and voice for your text.
</p>
<p>
This little guide is for everyone who comes across these typographic adventures or just want to do things <i>right</i>. Mastering the things mentioned in the short chapters below will help you get your message across more successfully.
</p>
<p>
While I try to outline guidelines for the most common challenges, I encourage you to trust your own judgement when it comes to final decisions. Work out the hierarchy of your content and design it in a way that it’s easy for your readers to follow.
</p>
<p>
I run this site as an ongoing project, so please feel free to contribute on <a href="https://github.com/benediktlehnert/typopocketguide">GitHub</a> or give feedback via <a href="mailto:[email protected]">email</a> or <a href="http://www.twitter.com/blehnert">Twitter</a>. It’s highly appreciated!
</p>
<div class="top"><a class="backtotop" href="#top">Back to Top</a></div>
</div>
<div id="fontsvstypefaces" class="grid-12 block">
<div class="illu"><img src="images/2.svg" alt="" /></div>
<h2>Fonts vs. Typefaces</h2>
<p>
A common misconception is that typefaces and fonts are the same. That’s wrong, but easy to get right. Here are two excellent quotes that explain the difference much better than I can:
</p>
<p>
“The way I relate the difference between typeface and font to my students is by comparing them to songs and MP3s, respectively (or songs and CDs, if you prefer a physical metaphor).” <br><i>— <a href="http://nicksherman.com">Nick Sherman</a>, <a href="http://typographica.org/features/our-favorite-typefaces-of-2007/">typographica.org</a></i>
</p>
<p>
“The physical embodiment of a collection of letters, numbers, symbols, etc. (whether it’s a case of metal pieces or a computer file) is a <i>Font</i>. When referring to the design of the collection (the way it looks) you call it a <i>Typeface</i>.” <br><i>— <a href="http://www.twitter.com/marksimonson">Mark Simonson</a>, <a href="http://www.typophile.com/node/14701#comment-84393">typophile.com</a></i>
</p>
<p>
In other words, we choose and look at <i><span class="green">typefaces</span></i>, just like we listen to songs. <br><i><span class="green">Fonts</span></i> are the digital representation of a typeface that computers use to display our text, just like an mp3 file we use to play a song.
</p>
<div class="top"><a class="backtotop" href="#top">Back to Top</a></div>
</div>
<div id="mixingtypefaces" class="grid-12 block">
<div class="illu"><img src="images/3.svg" alt="" /></div>
<h2>Mixing Typefaces</h2>
<p>
There are a million and one typefaces to choose from. Picking one seems easy, right up to the point where you try to get really creative and mix different typefaces. That’s where things start to get messy. Here are some simple guidelines on how to properly mix typefaces.
</p>
<p>
<strong>1. There’s really no need to mix typefaces!</strong><br>
When you pick the typefaces for your content, make sure it has several different styles (you call them “weights”). You’d be surprised at how beautifully you can structure your content by simply changing the font size and/or weight—just like I’ve done on this site.
</p>
<p>
<strong>2. Sans-serif and serif from the same family</strong><br>
If you still feel the urge to mix typefaces, keep an eye out for typeface families that offer both serif and sans-serif characters (you can call them “twins”). By doing so, you reduce the risk that your type mix looks weird. A great example for such type twins are <a href="https://www.fontfont.com/fonts/meta">FF Meta</a> & <a href="https://www.fontfont.com/fonts/meta-serif">FF Meta Serif</a> by <a href="http://spiekermann.com/en/">Erik Spiekermann</a>.
</p>
<p>
<strong>3. Champions League</strong><br>
Ok, I got it! You really want to mix typefaces. There are different ways to approach this. You can mix typefaces based on contrast, familiarity, extremity, or diversity. The simplest way to start is by mixing two typefaces that show similar characteristics. The typefaces you want to mix should have a similar <a href="http://en.wikipedia.org/wiki/X-height">x-height</a> and the characters should be similar in shape and proportions. As an example you could try using <a href="https://typekit.com/fonts/chaparral-pro">Chaparral Pro</a> and <a href="http://www.google.com/fonts/specimen/Source+Sans+Pro">Source Sans Pro</a>.
</p>
<div class="top"><a class="backtotop" href="#top">Back to Top</a></div>
</div>
<div id="fontsizelineheight" class="grid-12 block">
<div class="illu"><img src="images/4.svg" alt="" /></div>
<h2>Font Size & Line Height </h2>
<p>
Typography should make content easy to read. You want the reader to be able to follow a line and easily make the jump to the next line. The essential factors that influence readability and legibility are font size and line height.
</p>
<p>
Since both are influenced by the x-height of the characters, the length of the line, and the shape of the characters, there is no silver bullet. There are, however, some guiding principles that can help you make the right decisions.
</p>
<p>
<strong>1. Set line height relative to font size</strong><br>
For most text the optimal line height lies somewhere <i><span class="green">between 120% and 145%</span></i> depending on the factors mentioned above. Most apps and CSS let you define values in percent which you should prefer. It makes things easier and saves you the time you’d need to manually calculate.
</p>
<p>
<strong>2. Start with the body text</strong><br>
There’s more body text in your document than anything else. Make sure you start with making it read great. <i><span class="green">For print</span></i>, a comfortable font size is <i><span class="green">9–12 point</span></i>, whereas <i><span class="green">for the screen</span></i> it is between <i><span class="green">14–24 pixels</i>, depending on the typeface you choose. The optimal <i><span class="green">line length</span></i> that is easy to read is <i><span class="green">between 45 and 90 characters</span></i>. For bigger headlines you can usually go for a smaller line height than the percentage of the body text.
</p>
<p>
<strong>3. Every typeface is different</strong><br>
Various typefaces can look and feel quite different, even when they are set at the same font size. In particular, serif typefaces will appear different than sans-serif. Since you want to make it as easy as possible for the reader to both follow the line and jump to the beginning of the next, you’ll want to <i><span class="green">try out several values of both size and line spacing</span></i> to find the best option.
</p>
<div class="top"><a class="backtotop" href="#top">Back to Top</a></div>
</div>
<div id="apostrophes" class="grid-12 block">
<div class="illu"><img src="images/5.svg" alt="" /></div>
<h2>Apostrophes</h2>
<p>The apostrophe is a tiny little character in the shape of a “9” that doesn’t get nearly the attention it deserves. By default, your keyboard produces a so called “Typewriter Apostrophe” and while some applications fix these up—translating ' to ’—many don’t. You shouldn’t settle for that!
</p>
<p>
In the English language, the apostrophe serves two main purposes.</p>
<p>
<strong>1. It marks the omission of one or more letters</strong><br>
The apostrophe indicates that there are characters left out.<br>
<i><span class="green">Don’t</span> or <span class="green">can’t</span></i>
</p>
<p>
<strong>2. It marks a possessive case</strong><br>
The apostrophe is used before an “s” to indicate a relationship.<br>
<i><span class="green">We are playing with Ben’s monster truck.</span></i>
</p>
<p>
To produce the correct apostrophe for your writing when using an application that doesn’t automatically fix up apostrophes for you, you can use the following keyboard shortcut combinations:
</p>
</p>
<div class="grid-12 keys">
<div class="grid-6">
<h6>US Keyboard</h6>
<p>
<span class="key">option</span><span class="key">shift</span><span class="key">]</span><span class="sample">’</span>
</p>
</div>
<div class="grid-6">
<h6>German Keyboard</h6>
<p>
<span class="key">alt</span><span class="key">shift</span><span class="key">#</span><span class="sample">’</span>
</p>
</div>
</div>
<div class="top"><a class="backtotop" href="#top">Back to Top</a></div>
</div>
<div id="quotes" class="grid-12 block">
<div class="illu"><img src="images/6.svg" alt="" /></div>
<h2>Quotes</h2>
<p>
Also known by the term “curly quotes” or “inverted commas”, quotes are used to mark speech or a quotation. Sometimes, they are also used to mark irony.
</p>
<p>
By default, the quotes your keyboard makes are called “dumb quotes”, also known as “straight quotes”. <i><span class="green">Don’t use dumb quotes.</span></i> They’re also not the same as “<a href="http://en.wikipedia.org/wiki/Prime_(symbol)">prime marks</a>” which are used for feet/inches and seconds/minutes. Read more about quotes <a href="http://en.wikipedia.org/wiki/Quotation_mark">on Wikipedia</a>.
</p>
<p>
<strong>Quotes are language specific</strong> and you should use the right quotes for the language you are using. The Germans use „Anführungszeichen“ which start low and end high. « Guillemets » are used in French (usually with a blank before and after), Italian, Greek, and many other languages.
</p>
<p>
<strong>Fun fact</strong><br> The Germans call Guillemets “Gänsefüßchen” which literally means “goose feet”.</i>
</p>
<div class="grid-12 keys">
<div class="grid-6">
<h6>US Keyboard</h6>
<p>
<span class="key">option</span><span class="key">[</span><span class="sample">“</span><br>
<span class="key">option</span><span class="key">shift</span><span class="key">[</span><span class="sample">”</span>
</p>
<p>
<span class="key">option</span><span class="key">]</span><span class="sample">‘</span><br>
<span class="key">option</span><span class="key">shift</span><span class="key">]</span><span class="sample">’</span>
</p>
<p>
<span class="key">option</span><span class="key">\</span><span class="sample">«</span><br>
<span class="key">option</span><span class="key">shift</span><span class="key">\</span><span class="sample">»</span>
</p>
</div>
<div class="grid-6">
<h6>German Keyboard</h6>
<p>
<span class="key">alt</span><span class="key">2</span><span class="sample">“</span><br>
<span class="key">alt</span><span class="key">shift</span><span class="key">2</span><span class="sample">”</span>
</p>
<p>
<span class="key">alt</span><span class="key">#</span><span class="sample">‘</span><br>
<span class="key">alt</span><span class="key">shift</span><span class="key">#</span><span class="sample">’</span>
</p>
<p>
<span class="key">alt</span><span class="key">Q</span><span class="sample">«</span><br>
<span class="key">alt</span><span class="key">shift</span><span class="key">Q</span><span class="sample">»</span>
</p>
<p>
<span class="key">alt</span><span class="key">shift</span><span class="key">W</span><span class="sample">„</span><br>
<span class="key">alt</span><span class="key">2</span><span class="sample">“</span>
</p>
<p>
<span class="key">alt</span><span class="key">S</span><span class="sample">‚</span><br>
<span class="key">alt</span><span class="key">#</span><span class="sample">‘</span>
</p>
</div>
</div>
<div class="top"><a class="backtotop" href="#top">Back to Top</a></div>
</div>
<div id="dashes" class="grid-12 block">
<div class="illu"><img src="images/7.svg" alt="" /></div>
<h2>Dashes</h2>
<p>The hyphen is the character you use most (and often misuse) on your keyboard, but there are several other dashes, including the en-dash, em-dash, and minus. These dashes aren’t the same and each has its own subtle quality. You can find a really detailed article about <a href="http://en.wikipedia.org/wiki/Dash">Dashes on Wikipedia</a>
</p>
<p><strong>Hyphen</strong><br>You know how to type a hyphen and that’s exactly why you use it so often in all the wrong places. The hyphen is used to break single words into parts (like when lines of type break within a word) or to combine separate words into one single words.<br> <i><span class="green">I’m hungry in a get-in-my-belly kind of way.</span></i></p>
<p><strong>En dash</strong><br>The en dash is used in dates to replace “to” or “and”. It can also be used to indicate the relationship between two different words. In German it is also used for a break of thought, with a space before and after the en dash.<br> <i><span class="green">I lived in the United States from 1976–1978.<br>I have a love–hate relationship with San Francisco.</span></i></p>
<p><strong>Em dash</strong><br>The em dash is used for a break of thought that is stronger than a thought within parentheses. It is a break in the sentence in order to create attention or stress a thought. The em dash is uncommon in the German language and most common in American type setting.<br><i><span class="green">I once had to replace 1,000 hyphens in a single document—exhausting.</span></i></p>
<div class="grid-12 keys">
<div class="grid-6">
<h6>US Keyboard</h6>
<p>
<span class="key">-</span><span class="sample">-</span><br>
<span class="key">option</span><span class="key">-</span><span class="sample">–</span><br>
<span class="key">option</span><span class="key">shift</span><span class="key">-</span><span class="sample">—</span><br>
</p>
</div>
<div class="grid-6">
<h6>German Keyboard</h6>
<p>
<span class="key">-</span><span class="sample">-</span><br>
<span class="key">alt</span><span class="key">-</span><span class="sample">–</span><br>
<span class="key">alt</span><span class="key">shift</span><span class="key">-</span><span class="sample">—</span><br>
</p>
</div>
</div>
<div class="top"><a class="backtotop" href="#top">Back to Top</a></div>
</div>
<div id="brackets" class="grid-12 block">
<div class="illu"><img src="images/8.svg" alt="" /></div>
<h2>Parentheses, Brackets & Braces</h2>
<p>Parentheses separate a thought from the regular body text, whereas Brackets indicate changes within a quoted content. Although Braces (also known as “Curly Brackets”) are mostly used in mathematical context, they deserve an honorable mention here, because they are part of almost every programming language. Parentheses, Brackets and Braces usually don’t follow the formatting (e.g. italic) of the text they surround.</p>
<div class="grid-12 keys">
<div class="grid-6">
<h6>US Keyboard</h6>
<p>
<span class="key">shift</span><span class="key">9</span><span class="sample">(</span><br>
<span class="key">shift</span><span class="key">0</span><span class="sample">)</span>
</p>
<p>
<span class="key">[</span><span class="sample">[</span><br>
<span class="key">]</span><span class="sample">]</span>
</p>
<p>
<span class="key">shift</span><span class="key">[</span><span class="sample">{</span><br>
<span class="key">shift</span><span class="key">]</span><span class="sample">}</span><br>
</p>
</div>
<div class="grid-6">
<h6>German Keyboard</h6>
<p>
<span class="key">shift</span><span class="key">8</span><span class="sample">(</span><br>
<span class="key">shift</span><span class="key">9</span><span class="sample">)</span>
</p>
<p>
<span class="key">alt</span><span class="key">5</span><span class="sample">[</span><br>
<span class="key">alt</span><span class="key">6</span><span class="sample">]</span>
</p>
<p>
<span class="key">alt</span><span class="key">8</span><span class="sample">{</span><br>
<span class="key">alt</span><span class="key">9</span><span class="sample">}</span><br>
</p>
</div>
</div>
<div class="top"><a class="backtotop" href="#top">Back to Top</a></div>
</div>
<div id="links" class="grid-12 links">
<h2>Interesting Links & Resources</h2>
<ul>
<li>Dan Eden’s <a href="http://www.justmytype.co">Just My Type</a> illustrates nicely how to mix webfonts</li>
<li>Douglas Bonneville’s <a href="http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/">Best Practices of Combining Typefaces</a></li>
<li>Jessica Hische’s wonderful site <a href="http://quotesandaccents.com">Quotes & Accents</a></li>
<li>Jason Cranford Teague’s overview of <a href="http://jasonspeaking.com/typographic-marks/">Common Typographic Marks</a></li>
<li>Matthew Butterick’s great book <a href="http://practicaltypography.com">Practical Typography</a> </li>
<li>A great collection of typefaces <a href="http://fontsinuse.com">Fonts in Use</a></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div style="text-align: center;">
<a href="http://www.benedikt-lehnert.de"><img class="about" src="images/ben_profile.jpg" alt="Photo Benedikt Lehnert" /></a>
</div>
<p>This is an ongoing project, so please feel free to contribute on <a href="https://github.com/benediktlehnert/typopocketguide">GitHub</a> and give feedback via <a href="mailto:[email protected]">email</a> or <a href="http://www.twitter.com/blehnert">Twitter</a>.<br><span class="light" style="color: #adb7c0;">Typoguide is made by <a href="http://www.benedikt-lehnert.de">Benedikt Lehnert</a>, powered by <a href="http://www.twitter.com/imcatnoone">Cat Noone</a>, based on <a href="https://daneden.me/toast/">Toast</a>, uses <a href="http://www.ffkievit.com">FF Kievit</a>,<br> sponsored by <a href="http://www.fontshop.com">FontShop</a> and <a href="https://www.fontfont.com">FontFont</a>, lovely <a href="http://entypo.com">Entypo Pictos</a> and handcrafted SVG graphics.</span></p>
<div class="socialfooter">
<iframe class="fb" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftypogui.de&width&layout=button_count&action=like&show_faces=false&share=true&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.typogui.de" data-via="blehnert">Twittern</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<p>Made with <span class="entypo">♥</span> in Berlin. ©2013 Benedikt Lehnert</p>
<div class="languageselect">
<select name="mydropdown" class="styled" onChange="document.location = this.value" value="GO">
<option value="index.html">English</option>
<option value="de/index.html">Deutsch</option>
<!-- <option value="fr/index.html">Français</option>
<option value="es/index.html">Español</option>
<option value="dk/index.html">Dansk</option>
<option value="nl/index.html">Dutch</option>
<option value="se/index.html">Swedish</option>-->
</select>
</div>
</div>
<!-- /Footer -->
<!-- Google Analytics -->
<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-46720585-1', 'typogui.de');
ga('send', 'pageview');
</script>
<!-- /Google Analytics -->
<!-- Java Script -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="main.js"></script>
<!-- /Java Script -->
</body>
</html>