forked from femmebot/google-type
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (191 loc) · 18.5 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.ico">
<title>Google Web Fonts Typographic Project</title>
<!-- Google web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Fauna+One|Oleo+Script|Fugaz+One|Monda|Unica+One|Alegreya:400italic,400|Abril+Fatface|Vollkorn' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Astronomer" -->
<link href='http://fonts.googleapis.com/css?family=Megrim|Roboto+Slab:300' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The River" -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800|Gentium+Basic:400' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Crow and the Pitcher" -->
<link href='http://fonts.googleapis.com/css?family=Questrial|Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Fox and the Grapes" -->
<link href='http://fonts.googleapis.com/css?family=Ovo|Muli:300' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Moon and Her Mother: Anon03" -->
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|Vast+Shadow|Oswald:300|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Prophet" -->
<link href='http://fonts.googleapis.com/css?family=Neuton:300' rel='stylesheet' type='text/css'>
<!-- Typography Project stylesheet -->
<link href="css/google-type.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="container section-intro">
<h1>
<span class="small">Hand-Picked Tales <i>from</i></span>
<em>Æsop’s Fables</em>
<span class="small"><i>with</i> Hand-Picked Type <i>from</i></span>
<em>Google Fonts</em>
</h1>
<div class="divider"></div>
<p>
There are over <span class="strike">640</span> 650 <a href="https://www.google.com/fonts" target="_blank">Google web fonts</a> available for free. Problem is, pairing typefaces isn’t easy. And, many of the fonts in Google’s library don’t work well when applied to typical webpage (desktop) layouts. Part of the <a href="http://25x52.com" target="_blank">25x52</a> initiative, this collaborative, ongoing project helps provide typographic inspiration for using Google’s web fonts for web applications.
</p>
<div class="divider"></div>
<p>
All passages are from the <a href="http://www.gutenberg.org/ebooks/11339" target="_blank">Project Gutenberg</a> transcript of Æsop’s Fables. All photographic images are from <a href="http://unsplash.com" target="_blank">Unsplash.com</a>. If you’d like to contribute to this project, please <a href="https://twitter.com/femmebot" target="_blank">send me a tweet</a> or simply <a href="https://github.com/femmebot/google-type" target="_blank">fork it on Github</a>.
</p>
<div class="divider"></div>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Playfair+Display" target="_blank">Playfair Display</a>, <a href="http://www.google.com/fonts/specimen/Abril+Fatface" target="_blank">Abril Fatface</a>, <a href="http://www.google.com/fonts/specimen/Alegreya" target="_blank">Alegreya</a></div>
</div>
</div>
<div class="container-fluid section-gnat-bull" id="femmebot">
<div class="container">
<a href="https://twitter.com/femmebot" class="avatar" target="_blank" title="femmebot"><img src="https://pbs.twimg.com/profile_images/1779775150/bitty-icon.gif" alt="femmebot"></a>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Playfair+Display" target="_blank">Playfair Display</a>, <a href="http://www.google.com/fonts/specimen/Fauna+One" target="_blank">Fauna One</a></div>
<h2>The Gnat<br>& the Bull</h2>
<p>A Gnat alighted on one of the horns of a Bull, and remained sitting there for a considerable time. When it had rested sufficiently and was about to fly away, it said to the Bull, “Do you mind if I go now?” The Bull merely raised his eyes and remarked, without interest, “It’s all one to me; I didn’t notice when you came, and I shan’t know when you go away.”</p>
<p>We may often be of more consequence in our own eyes than in the eyes of our neighbours.</p>
</div>
</div>
<div class="container-fluid section-two-bags">
<div class="container">
<h2>Th<i>e</i> Two Ba<i>g</i>s</h2>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Fugaz+One" target="_blank">Fugaz One</a>, <a href="http://www.google.com/fonts/specimen/Oleo+Script" target="_blank">Oleo Script</a>, <a href="http://www.google.com/fonts/specimen/Monda" target="_blank">Monda Regular</a></div>
<p>Every man carries Two Bags about with him, one in front and one behind, and both are packed full of faults. The Bag in front contains his neighbours’ faults, the one behind his own. Hence it is that men do not see their own faults, but never fail to see those of others.</p>
</div>
</div>
<div class="container-fluid section-oak">
<div class="container">
<div class="caption"><a href="http://www.google.com/fonts/specimen/Unica+One" target="_blank">Unica One</a>, <a href="http://www.google.com/fonts/specimen/Vollkorn" target="_blank">Vollkorn</a></div>
<!-- Oak Leaf -->
<div class="oak-leaf">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="130px" viewBox="0 0 90 130" enable-background="new 0 0 90 130" xml:space="preserve">
<g>
<path fill="#9E9EA0" d="M80.07,60.508c0,0.48-0.281,0.921-0.84,1.32c-2.562,0.401-6.36,0.6-11.4,0.6c-2.481,0-5.381,1.68-8.7,5.04
c-3.321,3.36-4.98,6.281-4.98,8.76c0,2.321,0.57,3.48,1.71,3.48c4.562-3.36,8.064-5.04,10.509-5.04c0.733,0,1.101,0.201,1.101,0.6
c0,0.48-0.188,1.28-0.562,2.4c-0.375,1.121-0.561,2.081-0.561,2.88c0,0.081-0.707,0.701-2.121,1.86
c-1.414,1.161-2.286,2.76-2.617,4.8c-0.334,2.04-0.499,4.661-0.499,7.86c0,5.679,1.12,10.119,3.36,13.32
c2.4,3.439,6.28,5.88,11.64,7.32c-0.24,0.48-0.6,1.159-1.08,2.04c-2.24-0.96-4.721-2.682-7.44-5.16
c-2.241-2.081-4.481-4.161-6.72-6.24c-0.642-0.561-3.401-2.121-8.28-4.68c-4.56-2.321-6.881-3.64-6.96-3.96
c1.68-1.279,2.52-2.28,2.52-3c0-1.359-0.72-2.04-2.16-2.04c-1.041,0-2.621,0.72-4.74,2.16c-2.121,1.44-3.621,2.16-4.5,2.16
c-0.881,0-1.281-0.679-1.2-2.04c-1.361-0.799-3.041-1.519-5.04-2.16l-0.48-0.96c0-1.44,2.88-2.859,8.64-4.26
c5.76-1.399,8.64-3.18,8.64-5.34c0-0.559-0.12-1.12-0.36-1.68c-1.76-5.04-5.121-8.439-10.08-10.2
c-2.241-0.798-6.48-1.398-12.72-1.8c-4.56-0.319-7.121-1.279-7.68-2.88c0-0.96,1.219-1.939,3.66-2.94c2.439-1,3.66-1.78,3.66-2.34
c0-0.799-1.32-2.1-3.96-3.9c-2.64-1.8-3.96-2.779-3.96-2.94c0-0.24,0.259-0.58,0.78-1.02c0.52-0.439,0.78-0.9,0.78-1.38
c-1.361-2.08-2.04-3.559-2.04-4.44c0-1.519,0.6-2.28,1.8-2.28c0.799,0,1.999,0.6,3.6,1.8c1.92,1.361,3.079,2.121,3.48,2.28
l0.12-0.12l0.96,0.84c0.399-0.079,0.858-0.379,1.38-0.9c0.52-0.519,0.979-0.78,1.38-0.78c1.12,0,3,1.961,5.64,5.88
c2.64,3.921,4.92,5.88,6.84,5.88c0.96,0,1.44-0.96,1.44-2.88c0-4.639-1.08-8.839-3.24-12.6c-1.281-2.239-3.281-4.8-6-7.68
c-2.082-2.16-3.12-3.6-3.12-4.32c0-0.72,0.559-1.159,1.68-1.32c1.119-0.159,1.68-0.438,1.68-0.84c0-1.12-0.341-2.68-1.02-4.68
c-0.681-1.999-1.02-3.52-1.02-4.56c0-1.599,0.879-2.4,2.64-2.4c1.839,0,3.759,1.94,5.76,5.82c1.999,3.881,3.639,5.82,4.92,5.82
c0.799-1.359,1.26-4.08,1.38-8.16c0.12-4.08,0.699-6.679,1.74-7.8c0.318,0.081,0.858,0.621,1.62,1.62
c0.759,1.001,1.339,1.5,1.74,1.5c0.48,0,1.719-1.039,3.72-3.12c0.72,0,1.44,0.469,2.16,1.406c0.72,0.937,1.12,1.815,1.2,2.63
c-1.361,3.424-2.04,6.075-2.04,7.95l0.6,0.733c0.559,0,1.999-0.979,4.32-2.94c2.319-1.959,4.119-2.94,5.4-2.94
c0.399,0,0.84,0.161,1.32,0.48v0.48c0,1.121-0.641,2.681-1.92,4.68c-1.28,2-1.92,3.48-1.92,4.44c0,0.72,0.439,1.34,1.32,1.86
c0.879,0.521,1.32,0.941,1.32,1.26c0,0.561-1.241,1.841-3.72,3.84c-3.041,2.48-5.28,4.641-6.72,6.48c-2.4,3.12-3.6,6.321-3.6,9.6
c0,0.641,0.52,0.96,1.56,0.96c3.679,0,9.12-5.359,16.32-16.08l0.48-0.36c0.559,1.121,1.56,1.68,3,1.68c0.72,0,1.719-0.259,3-0.78
c1.279-0.52,2.2-0.819,2.76-0.9l0.6,0.6c0,0.48-0.32,1.4-0.96,2.76c-0.641,1.361-0.96,2.48-0.96,3.36
c0,0.321,0.139,0.801,0.42,1.44c0.28,0.642,0.42,1.122,0.42,1.44c0,1.041-0.881,2.021-2.64,2.94c-1.761,0.92-2.64,1.74-2.64,2.46
c0,1.041,1.08,2.34,3.24,3.9C78.99,58.648,80.07,59.789,80.07,60.508z"/>
</g>
</svg>
</div>
<h2>The Oak and The Reeds</h2>
<p>An Oak that grew on the bank of a river was uprooted by a severe gale of wind, and thrown across the stream. It fell among some Reeds growing by the water, and said to them, “How is it that you, who are so frail and slender, have managed to weather the storm, whereas I, with all my strength, have been torn up by the roots and hurled into the river?” “You were stubborn,” came the reply, “and fought against the storm, which proved stronger than you: but we bow and yield to every breeze, and thus the gale passed harmlessly over our heads.”</p>
</div>
</div>
<div class="container-fluid section-astronomer" id="mattraoul">
<div class="container">
<a href="https://twitter.com/mattraoul" class="avatar" target="_blank" title="mattRaoul"><img src="https://pbs.twimg.com/profile_images/478609969873694720/uUpF7y15.jpeg" alt="mattraoul"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Megrim" target="_blank">Megrim</a>, <a href="https://www.google.com/fonts/specimen/Roboto" target="_blank">Roboto Slab</a></div>
<h2>The Astronomer</h2>
<p>There was once an Astronomer whose habit it was to go out at night and observe the stars. One night, as he was walking about outside the town gates, gazing up absorbed into the sky and not looking where he was going, he fell into a dry well. As he lay there groaning, some one passing by heard him, and, coming to the edge of the well, looked down and, on learning what had happened, said, “If you really mean to say that you were looking so hard at the sky that you didn’t even see where your feet were carrying you along the ground, it appears to me that you deserve all you’ve got.”</p>
<div class="stars"></div>
</div>
</div>
<div class="container-fluid section-rivers" id="bengold">
<div class="container">
<a href="https://twitter.com/bengold" class="avatar" target="_blank" title="bengold"><img src="https://pbs.twimg.com/profile_images/378800000543768602/eb31bc1bc59f940c73c0a907e9ad774a_400x400.png" alt="bengold"></a>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Open+Sans" target="_blank">Open Sans</a>, <a href="http://www.google.com/fonts/specimen/Gentium+Basic" target="_blank">Gentium Basic</a></div>
<h2>The Rivers and the Sea</h2>
<p>Once upon a time all the Rivers combined to protest against the action of the Sea in making their waters salt. “When we come to you,” said they to the Sea, “we are sweet and drinkable: but when once we have mingled with you, our waters become as briny and unpalatable as your own.” The Sea replied shortly, “Keep away from me and you’ll remain sweet.”</p>
</div>
</div>
<div class="container-fluid section-crow-pitcher" id="michaelryap">
<div class="container">
<h2><span>The Crow and the Pitcher</span></h2>
<p class="drop-p">A thirsty Crow found a Pitcher with some water in it, but so little was there that, try as she might, she could not reach it with her beak, and it seemed as though she would die of thirst within sight of the remedy.</p>
<p>At last she hit upon a clever plan. She began dropping pebbles into the Pitcher, and with each pebble the water rose a little higher until at last it reached the brim, and the knowing bird was enabled to quench her thirst.</p>
<em>Necessity is the mother of invention.</em>
<ul>
<li class="label">Types in Use</li>
<li><a href="https://www.google.com/fonts/specimen/Old+Standard+TT">Old Standard TT</a></li>
<li><a href="https://www.google.com/fonts/specimen/Questrial">Questrial</a></li>
</ul>
<hr />
<ul>
<li class="label">Set By</li>
<li><a href="https://twitter.com/michaelryap">@michaelryap</a></li>
</ul>
</div>
</div>
<div class="container-fluid section-the-fox-and-the-grapes" id="twahlin">
<div class="container">
<a href="https://twitter.com/twahlin" class="avatar" target="_blank" title="twahlin"><img src="https://pbs.twimg.com/profile_images/496783257283735552/OU3adCmn_400x400.jpeg" alt="twahlin"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Ovo" target="_blank">Ovo</a>, <a href="https://www.google.com/fonts/specimen/Muli" target="_blank">Muli</a></div>
<h2>The Fox & the Grapes</h2>
<p>A hungry Fox saw some fine bunches of Grapes hanging from a vine that was trained along a high trellis, and did his best to reach them by jumping as high as he could into the air. But it was all in vain, for they were just out of reach: so he gave up trying, and walked away with an air of dignity and unconcern, remarking, “I thought those Grapes were ripe, but I see now they are quite sour.”</p>
<div id="grapes" class="shake grapes"></div>
</div>
</div>
<div class="container-fluid section-prophet" id="amotion">
<div class="container">
<div class="background"></div>
<a href="https://twitter.com/amotion" class="avatar" target="_blank" title="amotion"><img src="https://pbs.twimg.com/profile_images/488874753373904896/7oBb25l4_400x400.png" alt="amotion"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Neuton" target="_blank">Neuton</a></div>
<div class="col">
<h2>The Prophet</h2>
<p>A Prophet sat in the market-place and told the fortunes of all who cared to engage his services. Suddenly there came running up one who told him that his house had been broken into by thieves, and that they had made off with everything they could lay hands on. He was up in a moment, and rushed off, tearing his hair and calling down curses on the miscreants. The bystanders were much amused, and one of them said, “ Our friend professes to know what is going to happen to others, but it seems he’s not clever enough to perceive what’s in store for himself.”</p>
</div>
</div>
</div>
<div class="container-fluid section-moon-mother" id="anon-03">
<div class="container">
<div class="caption">
<a href="https://www.google.com/fonts/specimen/Vast+Shadow" target="_blank">Vast Shadow</a>,
<a href="https://www.google.com/fonts/specimen/Oswald" target="_blank">Oswald</a>,
<a href="https://www.google.com/fonts/specimen/Playfair+Display" target="_blank">Playfair Display</a>,
<a href="https://www.google.com/fonts/specimen/Playfair+Display+SC" target="_blank">Playfair Display SC</a>
</div>
<h2>The Moon<span>And</span>Her Mother</h2>
<p>
<span class="black-ital">The Moon</span>
<span class="ital">once begged her Mother</span>
<span class="small-cap">to make her a gown. “How can I?” replied she; </span>
<span class="reg">“there’s no fitting your figure. </span>
<span class="bold-ital">At one time you’re a New Moon,</span>
<span class="bold">and at another you’re a <strong>Full Moon</strong>; and between whiles </span>
<span class="black">you’re neither one nor the other.”</span>
</p>
</div>
</div>
<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/scripts.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-51931-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>