forked from ubuwaits/beautiful-web-type
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
214 lines (195 loc) · 12.4 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
---
layout: default
title: Beautiful web type — the best typefaces from the Google web fonts directory
keyword: index
---
<section class="samples">
<section class="sample" id="title">
<section class="text">
<h1>Beautiful W<span class="kern">eb</span> Type</h1>
<h2>A showcase of the best typefaces from the <a href="http://www.google.com/webfonts#ChoosePlace:select">Google web fonts directory</a>.</h2>
<section class="intro">
<p>There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that
deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory.</p>
<ul>
<li><a href="http://hellohappy.org">Maintained by Chad Mazzola</a></li>
<li><a href="http://github.com/ubuwaits/beautiful-web-type">Watch this repo on github</a></li>
<li><a href="http://twitter.com/ubuwaits">Follow me on twitter</a></li>
</ul>
</section>
</section>
</section>
<section class="sample" id="herzog">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Cardo" title="Cardo">
<h2>“I personally would rather do the existentially essential things in life on foot. If you live in England and your girlfriend is in Sicily, and it is clear you want to marry her, then you should walk to Sicily to propose. For these things travel by car or aeroplane is not the right thing.”</h2>
<h3>—Werner Herzog, <em>Of Walking in Ice</em></h3>
</a>
</section>
</section>
</section>
<section class="sample" id="bringhurst">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Vollkorn" title="Vollkorn">
<h1>“Big type, even huge type, can be beautiful and useful.<br> But poise is usually far more important than size —<br> and poise consists primarily of emptiness.”</h1>
<p>—Robert Bringhurst</p>
</a>
</section>
</section>
<section class="sample" id="nietzsche">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Open+Sans" title="Open Sans">
<h1><span>On the<br></span> Genealogy <span class="kern">of</span> Morals</h1>
</a>
<a href="http://www.google.com/webfonts/specimen/Open+Sans" title="Open Sans">
<h2><span>Friedrich Nietzsche</span></h2>
</a>
<section class="excerpt">
<a href="http://www.google.com/webfonts/specimen/Gentium+Book+Basic" title="Gentium Book Basic">
<p>At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the “bad conscience”: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. I regard the bad conscience as the serious illness that man was bound to contract under the stress of the most fundamental change he ever experienced—that change which occurred when he found himself finally enclosed within the walls of society and of peace. The situation that faced sea animals when they were compelled to become land animals or perish was the same as that which faced these semi-animals, well adapted to the wilderness, to war, to prowling, to adventure: suddenly all their instincts were disvalued and “suspended.” From now on they had to walk on their feet and “bear themselves” whereas hitherto they had been borne by the water: a dreadful heaviness lay upon them. They felt unable to cope with the simplest undertakings; in this new world they no longer possessed their former guides, their regulating, unconscious and infallible drives: they were reduced to thinking, inferring, reckoning, coordinating cause and effect, these unfortunate creatures; they were reduced to their “consciousness,” their weakest and most fallible organ! I believe there has never been such a feeling of misery on earth, such a leaden discomfort and at the same time the old instincts had not suddenly ceased to make their usual demands. Only it was hardly or rarely possible to humor them: as a rule they had to seek new and, as it were, subterranean gratifications.</p>
</a>
</section>
</section>
</section>
<section class="sample" id="tufte">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Vollkorn" title="Vollkorn">
<h1><span>Edward T<span class="kern">u</span>f<span class="kern push">t</span>e</span></h1>
<p><span>“</span>The best graphics are about the useful and important, about life and death, about the universe. Beautiful graphics do not traffic with the trivial.<span>”</span></p>
</a>
</section>
</section>
<section class="sample" id="seneca">
<section class="text">
<div class="body">
<a href="http://www.google.com/webfonts/specimen/Lato" title="Lato">
<p class="title">Lucius Annaeus Seneca<br>60 AD</p>
</a>
<a href="http://www.google.com/webfonts/specimen/Merriweather" title="Merriweather">
<h1>De Beneficiis</h1>
<hr>
<h2>Book I.</h2>
<p>Among the numerous faults of those who pass their lives recklessly and without due reflexion, my good friend Liberalis, I should say that there is hardly any one so hurtful to society as this, that we neither know how to bestow or how to receive a benefit. It follows from this that benefits are badly invested, and become bad debts: in these cases it is too late to complain of their not being returned, for they were thrown away when we bestowed them. Nor need we wonder that while the greatest vices are common, none is more common than ingratitude: for this I see is brought about by various causes. The first of these is, that we do not choose worthy persons upon whom to bestow our bounty, but although when we are about to lend money we first make a careful enquiry into the means and habits of life of our debtor, and avoid sowing seed in a worn-out or unfruitful soil, yet without any discrimination we scatter our benefits at random rather than bestow them. It is hard to say whether it is more dishonourable for the receiver to disown a benefit, or for the giver to demand a return of it: for a benefit is a loan, the repayment of which depends merely upon the good feeling of the debtor. To misuse a benefit like a spendthrift is most shameful, because we do not need our wealth but only our intention to set us free from the obligation of it; for a benefit is repaid by being acknowledged. Yet while they are to blame who do not even show so much gratitude as to acknowledge their debt, we ourselves are to blame no less. We find many men ungrateful, yet we make more men so, because at one time we harshly and reproachfully demand some return for our bounty, at another we are fickle and regret what we have given, at another we are peevish and apt to find fault with trifles. By acting thus we destroy all sense of gratitude, not only after we have given anything, but while we are in the act of giving it. Who has ever thought it enough to be asked for anything in an off-hand manner, or to be asked only once? Who, when he suspected that he was going to be asked for any thing, has not frowned, turned away his face, pretended to be busy, or purposely talked without ceasing, in order not to give his suitor a chance of preferring his request, and avoided by various tricks having to help his friend in his pressing need? and when driven into a corner, has not either put the matter off, that is, given a cowardly refusal, or promised his help ungraciously, with a wry face, and with unkind words, of which he seemed to grudge the utterance.</p>
</a>
</div>
</a>
</section>
</section>
<section class="sample" id="thin">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Lato" title="Lato">
<ul>
<li>Unit<span class="kern">y</span></li>
<li>Rhy<span class="kern">t</span>hm</li>
<li>Bal<span class="kern">a</span>nce</li>
<li>Emph<span class="kern">a</span><span class="kern">s</span>is</li>
<li>Proximit<span class="kern">y</span></li>
<li>Hier<span class="kern">a</span>rchy</li>
</ul>
</a>
</section>
</section>
<section class="sample" id="nabokov">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Playfair+Display" title="Playfair Display">
<h1 class="first">the <br>the</h1>
<h1 class="second">isms go<br>ist dies</h1>
<h1 class="third">art remains.</h1>
<p>Vladimir Nabokov</p>
</a>
</section>
</section>
<section class="sample" id="postnormal">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Oswald" title="Oswald">
<h2>Post——</h2>
<h2>Normal</h2>
<h2>Era</h2>
</a>
<a href="http://www.google.com/webfonts/specimen/PT+Mono" title="PT Mono">
<ol class="normal">
<li>AUTHORITARIAN/CENTRALIZED</li>
<li>OBJECTIVE/IMPARTIAL</li>
<li>HIERARCHY</li>
<li>NUCLEAR</li>
<li>GLOBALISM/GROWTH</li>
<li>NATION/PROVINCE/CITY</li>
<li>BROADCAST</li>
<li>EXPLOITATIVE/UNSUSTAINABLE</li>
<li>DOGMATIC/ORTHODOX</li>
</ol>
<ol class="forward">
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
</ol>
<ol class="post">
<li>EGALITARIAN/DECENTRALIZED</li>
<li>SUBJECTIVE/PARTIAL</li>
<li>NETWORK</li>
<li>NEO-TRIBAL</li>
<li>LOCALISM/STEADY-STATE</li>
<li>LOCALE/WATERSHED/REGION/WORLD</li>
<li>PARTICIPATIVE</li>
<li>RESTORATIVE/SUSTAINABLE</li>
<li>ENIGMATIC/HETERODOX</li>
</ol>
</a>
<p class="source">SOURCE: <a href="http://stoweboyd.com/post/49946797759/how-the-postnormal-era-will-change-everything" target="_blank">Stowe Boyd, How the Postnormal Era Will Change Everything</a></p>
</section>
</section>
<section class="sample" id="slogan">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Gravitas+One" title="Gravitas One">
<h1>Don’t die</h1>
<h1>wondering</h1>
</a>
</section>
</section>
<section class="sample" id="darwin">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Old+Standard+TT" title="Old Standard TT">
<h1 class="small">On</h1>
<h1>the Origin of Species</h1>
<h1 class="small">By means of natural selection</h1>
<h2>By Charles Darwin, M.A.,</h2>
<h3>Fellow of the Royal, Geological, Linnæan, ETC., Societies;<br>Author of ‘Journal of Researches During H.M.S. Beagle’s Voyage Round the World.’</h3>
<h4>The right of Translation is reserved.</h4>
</a>
</section>
</section>
<section class="sample" id="headline">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Abril+Fatface" title="Abril Fatface">
<h1>Meaning &<br>Structure<br>in Design</h1>
</a>
</section>
</section>
<section class="sample" id="camus">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/PT+Sans+Narrow" title="PT Sans Narrow">
<h1>Albert Camus Buried</h1>
</a>
<hr>
<a href="http://www.google.com/webfonts/specimen/PT+Sans" title="PT Sans">
<h2>Simple Ceremony Is Held for French Nobel Prize Author</h2>
</a>
<hr class="bottom">
<a href="http://www.google.com/webfonts/specimen/PT+Serif" title="PT Serif">
<p>PARIS, Jan. 6—Albert Camus, one of France’s ranking writers and winner of a
Nobel Prize for Literature, was buried today in a cemetery not far from the country home
he recently bought in the village of Lourmarin in the south of France.</p>
<p>It was while motoring from Lourmarin to Paris last Monday that the Algerian-born writer
was killed when the car he was in went out of control and crashed into a tree at the side
of a highway, seventy-five miles southeast of Paris.</p>
</a>
</a>
</section>
</section>
</section>