-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
335 lines (323 loc) · 15.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Link -->
<link rel="stylesheet" type="text/css" href="tentips.css">
<link rel="icon" href="fav.png" type="image/png">
<link href='https://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!-- Title -->
<title>Top Ten Typography Tips</title>
</head>
<body>
<div class="content">
<header class="header">
<h1 class="display primary-heading">Top Ten Typography Tips</h1>
</header>
<main class="main">
<section>
<h2 class="tip tip-1 display">
Size And Line Heights
</h2>
<p class="tip-details">
It will not matter how beautiful things look if it’s all just too tiny and clumped together to read.
</p>
<p class="tip-details">
Optimal <code>font-size</code> ranges between 14 and 24 pixels on the web while optimal <code>line-height</code> lies between 120% and 145%. Headings and body text should also be respectful of various screen sizes.
</p>
<div>
<h3 class="reference">Resources:</h3>
<ul>
<li class="ref-item">
<a href="http://zellwk.com/blog/responsive-typography/">Everything Zell Liew knows about responsive typography</a>
</li>
<li class="ref-item">
<a href="http://typecast.com/blog/a-more-modern-scale-for-web-typography">A look at scaling typography on the web by Jason Pamental</a>
</li>
<li class="ref-item">
<a href="https://ia.net/know-how/responsive-typography-the-basics">The basics of responsive typography</a>
</li>
<li class="ref-item">
<a href="http://stackoverflow.com/questions/20695333/why-does-unitless-line-height-behave-differently-from-percentage-or-em-in-this-e/20818206#20818206">Why unitless <code>line-height</code> values are preferred</a>
</li>
</ul>
</div>
</section>
<section>
<h2 class="tip tip-2 display">
Use Hanging Quotes
</h2>
<p class="tip-details">
Avoid having opening quotation marks that are vertically flush with a block of text. Instead, hang the quotes in the margin so the text can line up properly. Without hanging quotes the text becomes interrupted and messes with balance.
</p>
<p class="tip-details">
Take a look at the resources below to see the positive impact hanging punctuation can have on legibility.
</p>
<div>
<h3 class="reference">Resources:</h3>
<ul>
<li class="ref-item">
<a href="http://webdesign.tutsplus.com/articles/getting-the-hang-of-hanging-punctuation--cms-19890">A primer on hanging punctuation on Tuts+</a>
</li>
<li class="ref-item">
<a href="https://css-tricks.com/almanac/properties/h/hanging-punctuation/">CSS for hanging punctuation on CSS-Tricks</a>
</li>
</ul>
</div>
</section>
<section>
<h2 class="tip tip-3 display">
Refrain From Exclamation Points
</h2>
<p class="tip-details">
They are usually unnecessary and lose their impact quickly.
</p>
</section>
<section>
<h2 class="tip tip-4 display">
Selecting Typefaces
</h2>
<p class="tip-details">
When selecting a typeface always focus on the body text first. Be sure to keep brand objectives in mind, read and understand the copy, and have a good sense of what feelings the site or product is aiming to foster.
</p>
<p class="tip-details">
Different typefaces have different jobs, different intentions. Knowing a bit about these intentions helps better understand how to use it. For example, there are typefaces that are solely meant to be for display and would perform very poorly as a body copy font.
</p>
<p class="tip-details">
Each style has limitations, however. When context changes, such as different copy or an altered layout, a new typeface may be needed.
</p>
<div>
<h3 class="reference">Resources:</h3>
<ul>
<li class="ref-item">
<a href="http://fonts.greatsimple.io/">2017 Trendy Google Fonts Combos PDF</a>
</li>
<li class="ref-item">
<a href="http://katydecorah.com/font-library/">Katy Decorah’s font library for tagging and organizing Google Fonts</a>
</li>
<li class="ref-item">
<a href="https://typekit.files.wordpress.com/2016/04/combiningtypefaces.pdf">An entire pocket guide on combining typefaces by Tim Brown</a>
</li>
<li class="ref-item">
<a href="http://www.justmytype.co/">A collection of font pairings from Typekit and H&FJ</a>
</li>
<li class="ref-item">
<a href="http://typespiration.com/">Font combinations with color palettes from Typespiration</a>
</li>
<li class="ref-item">
<a href="http://femmebot.github.io/google-type/">Hand picked Google Font pairings</a>
</li>
<li class="ref-item">
<a href="https://blog.prototypr.io/10-fresh-google-fonts-pairings-that-work-perfectly-together-cc61c91672a4#.ax23oiq7k">Ten additional Google Font pairings from Shillington Education</a>
</li>
<li class="ref-item">
<a href="http://fontpair.co/">Even more Google Font pairings by Mills Digital</a>
</li>
<li class="ref-item">
<a href="http://fontsinuse.com/">A collection of fonts in use for inspiration</a>
</li>
</ul>
</div>
</section>
<section>
<h2 class="tip tip-5 display">
Hierarchy
</h2>
<p class="tip-details">
Make sure your heading levels are visually ranked by their importance through the use of different colors and sizes. Also, be mindful that elements near each other visually will communicate a relationship between them.
</p>
<div>
<h3 class="reference">Resources:</h3>
<ul>
<li class="ref-item">
<a href="http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84">Quick guide to understanding visual hierarchy on Tuts+</a>
</li>
<li class="ref-item">
<a href="https://en.wikipedia.org/wiki/Principles_of_grouping">Law of Proximity</a>
</li>
</ul>
</div>
</section>
<section>
<h2 class="tip tip-6 display">
Punctuation And Composition
</h2>
<p class="tip-details">
Be sure to know the difference between hyphens ( - ), en dashes ( – ), and em dashes ( — ) and what types of situations warrant their use. Hyphens are used at the end of lines when a word breaks and for multipart words, while en dashes are used to indicate ranges of values. Em dashes are especially lovely and used to make a break between parts of a sentence.
</p>
<p class="tip-details">
While straight, or dumb, quotes ( '' ) are the default quotation marks on keyboards they are rarely the correct ones for the job. Get to know curly, or smart, quotes ( “ ) and how to use them.
</p>
<p class="tip-details">
Last but not least, <strong>never</strong> use two spaces between sentences.
</p>
<div>
<h3 class="reference">Resources:</h3>
<ul>
<li class="ref-item">
<a href="http://typefacts.com/keyboard-shortcuts">A list of keyboard shortcuts</a>
</li>
<li class="ref-item">
<a href="http://www.typogui.de/">A useful little guide to mastering typography by Benedikt Lehnert</a>
</li>
<li class="ref-item">
<a href="http://practicaltypography.com/straight-and-curly-quotes.html">Straight versus curly quotes by Matthew Butterick</a>
</li>
<li class="ref-item">
<a href="http://stylemanual.org/">A punctuation and style guide by Andy Taylor</a>
</li>
<li class="ref-item">
<a href="http://practicaltypography.com/one-space-between-sentences.html">One space between sentences</a>
</li>
<li class="ref-item">
<a href="http://quotesandaccents.com/">Dumb quotes, smart quotes, and dashes by Jessica Hische</a>
</li>
</ul>
</div>
</section>
<section>
<h2 class="tip tip-7 display">
Spacing
</h2>
<p class="tip-details">
Make sure all instances of vertical spacing throughout a page are consistent by setting a <code>line-height</code> as a baseline and then using multiples of this value.
</p>
<p class="tip-details">
Be sure to use generous amounts of white space, or negative space, around elements to enhance readability, comprehension, and instill a feeling of calmness.
</p>
<div>
<h3 class="reference">Resources:</h3>
<ul>
<li class="ref-item">
<a href="http://zellwk.com/blog/why-vertical-rhythms/">The what and how of vertical rhythm by Zell Liew</a>
</li>
<li class="ref-item">
<a href="http://www.uxmatters.com/mt/archives/2006/05/developing-the-invisible.php">The importance of whitespace as told by Luke Wroblewski</a>
</li>
<li class="ref-item">
<a href="http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space">Short post on why whitespace is crucial in design on UX Myths</a>
</li>
</ul>
</div>
</section>
<section>
<h2 class="tip tip-8 display">
Using Emphasis
</h2>
<p class="tip-details">
Use bold or italic for emphasis, not exclamation points and underlines. Be sure to not overuse either of these and only for short bits of text.
</p>
<p class="tip-details">
With a serif font italic is great for light emphasis while bold is better suited for heavy emphasis. For sans-serif bold will be a more prominent choice.
</p>
<div>
<h3 class="reference">Resources:</h3>
<ul>
<li class="ref-item">
<a href="http://practicaltypography.com/">When to use bold <strong>or</strong> italic by Matthew Butterick</a>
</li>
</ul>
</div>
</section>
<section>
<h2 class="tip tip-9 display">
Contrast
</h2>
<p class="tip-details">
When text appears as if it’s vibrating and causes eye discomfort the contrast between the foreground and background colors is poor. Always use a contrast checker to make sure color selections pass web accessibility standards.
</p>
<div>
<h3 class="reference">Resources:</h3>
<ul>
<li class="ref-item">
<a href="http://webaim.org/resources/contrastchecker/">A color contrast checker</a>
</li>
</ul>
</div>
</section>
<section>
<h2 class="tip tip-10 display">
You Are Not On Your Own
</h2>
<p class="tip-details">
Embrace the experience, expertise, and tools of others as much as possible. It will help you avoid becoming overwhelmed and ensure you are following best practices along the way.
</p>
<div>
<h3 class="reference">Resources:</h3>
<ul>
<li class="ref-item">
<a href="https://typeanything.io/">Get help with your font settings with Type Anything</a>
</li>
<li class="ref-item">
<a href="http://type-scale.com/">A type scale by Jeremy Church</a>
</li>
<li class="ref-item">
<a href="https://sassline.com/">Set text to a baseline grid with Sass and rems with Sassline</a>
</li>
<li class="ref-item">
<a href="http://www.gridlover.net/">Establish a typography system with Gridlover</a>
</li>
<li class="ref-item">
<a href="http://typeplate.com/">Typeplate, a typographic starter kit</a>
</li>
<li class="ref-item">
<a href="http://www.modularscale.com/">Get the right hierarchy in place with Modular Scale</a>
</li>
</ul>
</div>
</section>
<section>
<h2 class="tip tip-0 display">
</h2>
<div>
<ul>
<li class="ref-item">
<a href="http://typeconnection.com/">Game about pairing typefaces</a>
</li>
<li class="ref-item">
<a href="http://ti.arc.nasa.gov/m/profile/adegani/Flight-Deck_Documentation.pdf">NASA report on Flight Deck Documentation</a>
</li>
<li class="ref-item">
<a href="https://www.amazon.com/Book-No-Pictures-B-J-Novak/dp/0803741715/ref=sr_1_1?ie=UTF8&qid=1468254609&sr=8-1&keywords=the+book+with+no+pictures">A children’s book by B.J. Novak</a>
</li>
<li class="ref-item">
<a href="https://twitter.com/NWS/status/719623142461857792/photo/1?ref_src=twsrc%5Etfw">This tweet from the National Weather Service</a>
</li>
<li class="ref-item">
<a href="https://viljamis.com/2016/typography-for-user-interfaces/">Article touching on typography for user interfaces and how we read</a>
</li>
<li class="ref-item">
<a href="https://www.typewolf.com/blog/favorite-sites-of-june-2016">Typography details behind the favorite sites of Typewolf for inspiration</a>
</li>
<li class="ref-item">
<a href="https://www.supremo.tv/typeterms/">An animated typography cheat sheet</a>
</li>
<li class="ref-item">
<a href="http://webtypography.net/toc/">Detailed list of web typography rules</a>
</li>
<li class="ref-item">
<a href="http://practice.typekit.com/">Typekit resource for practicing typography skills</a>
</li>
<li class="ref-item">
<a href="https://standards.usa.gov/typography/">Typography section of the Draft U.S. Web Design Standards</a>
</li>
<li class="ref-item">
<a href="https://medium.com/@chiara_aliotta/cheap-wine-in-fancy-glasses-d6b5ea3fb4a#.8734dsuqg">Talk turned blog post on how typography evokes emotion</a>
</li>
</ul>
</div>
</section>
</main>
</div>
<footer>
<small class="by-line">
Tiny reference page by <a href="https://twitter.com/JoniTrythall">Joni Trythall <a href="https://speakerdeck.com/jonibologna/just-enough-typography">with slides</a></a>
</a/>
</small>
</footer>
</body>
</html>