forked from holantonela-zz/monospaced-fonts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·262 lines (233 loc) · 18 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
<!DOCTYPE html>
<html lang="en">
<!--
__------__
/~ ~\
| //^\\//^\|
/~~\ || o| |o|:~\
| |6 ||___|_|_||:|
\__. / o \/'
| ( O ) antonela.design/mono
/~~~~\ `\ \ /
| |~~\ | ) ~------~`\
/' | | | / ____ /~~~)\
(_/' | | | /' | ( |
| | | \ / __)/ \
\ \ \ \/ /' \ `\
\ \|\ / | |\___|
\ | \____/ | |
/^~> \ _/ |
| | \ \
| | \ \ \
-^-\ \ | )
`\_______/^\______/
-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A(nother) curated list of monospaced fonts</title>
<meta name="description" content="Dystopian books married with the most beautiful monospaced fonts around." />
<meta name="keywords" content="code, fonts, console, monospace, font, webfont" />
<meta name="author" content="Antonela Debiasi" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="canonical" href="https://antonela.design/mono" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="A(nother) curated list of monospaced fonts" />
<meta property="og:description" content="Dystopian books married with the most beautiful monospaced fonts around." />
<meta property="og:url" content="" />
<meta property="og:site_name" content="A(nother) curated list of monospaced fonts" />
<meta property="og:image" content="https://antonela.design/mono/img/share.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Dystopian books married with the most beautiful monospaced fonts around." />
<meta name="twitter:title" content="🐒 A(nother) curated list of monospaced fonts" />
<meta name="twitter:site" content="@holantonela" />
<meta name="twitter:image" content="https://antonela.design/mono/img/share.png" />
<meta name="twitter:creator" content="@holantonela" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Fira+Mono|Source+Code+Pro|Ubuntu+Mono|Space+Mono|Oxygen+Mono|Anonymous+Pro" rel="stylesheet">
</head>
<body>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>🐒</h1>
<p class="lead">A(nother) curated list of <a href="https://en.wikipedia.org/wiki/Monospaced_font" target="_blank">monospaced</a> fonts</p>
</div>
</div>
<!-- NAV by Codrops <3 -->
<section class="section section--nav">
<span class="link-copy"></span>
<nav class="nav nav--xusni">
<span class="js-nav-item nav__item nav__item--current" el-id="#inconsolata"><span class="nav__item-title">Inconsolata</span></span>
<span class="js-nav-item nav__item" el-id="#fira-mono"><span class="nav__item-title">Fira Mono</span></span>
<span class="js-nav-item nav__item" el-id="#source-code-pro"><span class="nav__item-title">Source Code Pro</span></span>
<span class="js-nav-item nav__item" el-id="#ubuntu-mono"><span class="nav__item-title">Ubuntu Mono</span></span>
<span class="js-nav-item nav__item" el-id="#space-mono"><span class="nav__item-title">Space Mono</span></span>
<span class="js-nav-item nav__item" el-id="#monaco"><span class="nav__item-title">Monaco</span></span>
<span class="js-nav-item nav__item" el-id="#andale-mono"><span class="nav__item-title">Andale Mono</span></span>
<span class="js-nav-item nav__item" el-id="#oxygen-mono"><span class="nav__item-title">Oxygen Mono</span></span>
<span class="js-nav-item nav__item" el-id="#anonymous" ><span class="nav__item-title">Anonymous</span></span>
</nav>
</section>
<!-- /.row handpicked <3 mono -->
<div class="row font" id="inconsolata" style="font-family: 'Inconsolata';">
<div class="col-lg-4 zoom">
<span>Aa</span>
<em class="number">#1</em>
</div>
<div class="col-lg-8">
<p class="txt">“For of course,” said Mr. Foster, “in the vast majority of cases, fertility is merely a nuisance. One fertile ovary in twelve hundred–that would really be quite sufficient for our purposes. But we want to have a good choice. And of course one must always have an enormous margin of safety. So we allow as many as thirty per cent of the female embryos to develop normally. The others get a dose of male sex-hormone every twenty-four metres for the rest of the course. Result: they’re decaned as freemartins–structurally quite normal (except,” he had to admit, “that they do have the slightest tendency to grow beards), but sterile. Guaranteed sterile. Which brings us at last,” continued Mr. Foster, “out of the realm of mere slavish imitation of nature into the much more interesting world of human invention.” </p>
<div class="author">
<p><span class="glyphicon glyphicon-book"></span><span>Brave new world by Aldous Huxley</span></p>
<p><span class="glyphicon glyphicon-font"></span><a href="http://levien.com/type/myfonts/inconsolata.html"><span>Inconsolata by Raph Levien</span></a></p>
</div>
</div>
</div>
<div class="row font" id="fira-mono" style="font-family: 'Fira Mono';">
<div class="col-lg-4 zoom">
<span>Aa</span>
<em class="number">#2</em>
</div>
<div class="col-lg-8">
<p class="txt"> "You could buy a cat," Barbour offered. "Cats are cheap; look in your Sidney's catalogue." Rick said quietly, "I don't want a domestic pet. I want what I originally had, a large animal. A sheep or if I can get the money a cow or a steer or what you have; a horse." The bounty from retiring five andys would do it, he realized. A thousand dollars apiece, over and above y salary. Then somewhere I could find, from someone, what I want. Even if the listing in Sidney's Animal & Fowl is in italics. Five thousand dollars — but, he thought, the five andys first have to make their way to Earth from one of the colony planets; I can't control that, I can't make five of them come here, and even if I could there are other bounty hunters with other police agencies throughout the world. The andys would specifically have to take up residence in Northern California, and the senior bounty hunter in this area, Dave Holden, would have to die or retire.</p>
<div class="author">
<p><span class="glyphicon glyphicon-book"></span><span>Do Androids Dream of Electric Sheep? By Phillip K. Dick</span></p>
<p><span class="glyphicon glyphicon-font"></span><a href="https://github.com/mozilla/Fira"><span>Fira Mono by Carrois Apostrophe</span></a></p>
</div>
</div>
</div>
<div class="row font" id="source-code-pro" style="font-family: 'Source Code Pro';">
<div class="col-lg-4 zoom">
<span>Aa</span>
<em class="number">#3</em>
</div>
<div class="col-lg-8">
<p class="txt">Someone somewhere will give me back the old face and the old hands the way they were. Even the smile, he thought, the old burnt-in smile, that's gone. I'm lost without it. The subway fled past him, cream-tile, jet-black, cream-tile, jet-black, numerals and darkness, more darkness and the total adding itself. Once as a child he had sat upon a yellow dune by the sea in the middle of the blue and hot summer day, trying to fill a sieve with sand, because some cruel cousin had said, "Fill this sieve and you'll get a dime!" `And the faster he poured, the faster it sifted through with a hot whispering. His hands were tired, the sand was boiling, the sieve was empty. Seated there in the midst of July, without a sound, he felt the tears move down his cheeks.</p>
<div class="author">
<p><span class="glyphicon glyphicon-book"></span><span>FAHRENHEIT 451 by Ray Bradbury</span></p>
<p><span class="glyphicon glyphicon-font"></span><a href="https://github.com/adobe-fonts/source-code-pro"><span>Source Code Pro by Paul D. Hunt</span></a></p>
</div>
</div>
</div>
<div class="row font" id="ubuntu-mono" style="font-family: 'Ubuntu Mono';">
<div class="col-lg-4 zoom">
<span>Aa</span>
<em class="number">#4</em>
</div>
<div class="col-lg-8">
<p class="txt">To see ourselves as others see us is a most salutary gift. Hardly less important is the capacity to see others as they see themselves. But what if these others belong to a different species and inhabit a radically alien universe? For example, how can the sane get to know what it actually feels like to be mad? Or, short of being born again as a visionary, a medium, or a musical genius, how can we ever visit the worlds which, to Blake, to Swedenborg, to Johann Sebastian Bach, were home?</p>
<div class="author">
<p><span class="glyphicon glyphicon-book"></span><span>The Doors of Perception by Aldous Huxley & Rudolph Schirmer</span></p>
<p><span class="glyphicon glyphicon-font"></span><a href="http://font.ubuntu.com/"><span>Ubuntu Mono by Dalton Maag</span></a></p>
</div>
</div>
</div>
<div class="row font" id="space-mono" style="font-family: 'Space Mono';">
<div class="col-lg-4 zoom">
<span>Aa</span>
<em class="number">#5</em>
</div>
<div class="col-lg-8">
<p class="txt">The other person was a man named O’Brien, a member of the Inner Party and holder of some post so important and remote that Winston had only a dim idea of its nature. A momentary hush passed over the group of people around the chairs as they saw the black overalls of an Inner Party member approaching. O’Brien was a large, burly man with a thick neck and a coarse, humorous, brutal face. In spite of his formidable appearance he had a certain charm of manner. He had a trick of resettling his spectacles on his nose which was curiously disarming — in some indefinable way, curiously civilized. It was a gesture which, if anyone had still thought in such terms, might have recalled an eighteenth-century nobleman offering his snuffbox. </p>
<div class="author">
<p><span class="glyphicon glyphicon-book"></span><span>1984 by George Orwell</span></p>
<p><span class="glyphicon glyphicon-font"></span><a href="https://medium.com/google-design/introducing-space-mono-a-new-monospaced-typeface-by-colophon-foundry-for-google-fonts"><span>Space Mono by Colophon Foundry</span></a></p>
</div>
</div>
</div>
<div class="row font" id="monaco" style="font-family: 'Monaco';">
<div class="col-lg-4 zoom">
<span>Aa</span>
<em class="number">#6</em>
</div>
<div class="col-lg-8">
<p class="txt">Each of the five factions coexisting in a dystopian Chicago, have gone to war because of one woman, Jeanine, to keep the secret of “What is beyond the wall?” Tris’ gift allows her to survive through brain-washings, simulations, and Jeanine’s instinctive nature of wanting to control everything. Tris began her journey the day she turned 16, Choosing Day. That day controlled which faction a person would live in for the rest of their lifetime: Abnegation, Amity, Dauntless, Erudite, or Candor. Tris chose Dauntless.</p>
<div class="author">
<p><span class="glyphicon glyphicon-book"></span><span>Divergent by Veronica Roth</span></p>
<p><span class="glyphicon glyphicon-font"></span><a href="https://github.com/cstrap/monaco-font"><span>Monaco by Apple</span></a></p>
</div>
</div>
</div>
<div class="row font" id="andale-mono" style="font-family: 'Andale Mono';">
<div class="col-lg-4 zoom">
<span>Aa</span>
<em class="number">#7</em>
</div>
<div class="col-lg-8">
<p class="txt">Using the way light cones behave in general relativity, together with the fact that gravity is always attractive, he showed that a star collapsing under its own gravity is trapped in a region whose surface eventually shrinks to zero size. And, since the surface of the region shrinks to zero, so too must its volume. All the matter in the star will be compressed into a region of zero volume, so the density of matter and the curvature of space-time become infinite. In other words, one has a singularity contained within a region of space-time known as a black hole.</p>
<div class="author">
<p><span class="glyphicon glyphicon-book"></span><span>A brief history of time by Stephen Hawking</span></p>
<p><span class="glyphicon glyphicon-font"></span><a href="http://www.microsoft.com/typography/fonts/family.aspx?fid=11"><span>Andale Mono by Microsoft</span></a></p>
</div>
</div>
</div>
<div class="row font" id="oxygen-mono" style="font-family: 'Oxygen Mono';">
<div class="col-lg-4 zoom">
<span>Aa</span>
<em class="number">#8</em>
</div>
<div class="col-lg-8">
<p class="txt">Sam is in an area of the Harvester -- a kind of hatch -- not dissimilar to a garage and known as THE BELLY. Once safely inside Sam closes the door. He is able to breathe in the Belly without his helmet, which he duly removes.Sam steps up to a wall of computers. A light is flashing to indicate one of the pods is filled with Helium3. Sam does his thing, eventually removing a keg-size pod of Helium3. He hauls it over to the Rover and sticks it in a special slot in the equivalent of the Rover's trunk. A new pod -- an empty -- replaces the pod Sam just removed. Sam puts his helmet back on, returns to the Rover, reverses out of the Harvester carefully.</p>
<div class="author">
<p><span class="glyphicon glyphicon-book"></span><span>MOON by Nathan Parker & Duncan Jones</span></p>
<p><span class="glyphicon glyphicon-font"></span><a href="https://github.com/vernnobile/oxygenFont"><span>Oxygen Mono by Vernon Adams</span></a></p>
</div>
</div>
</div>
<div class="row font" id="anonymous" style="font-family: 'Anonymous Pro'; padding-bottom:10%;">
<div class="col-lg-4 zoom">
<span>Aa</span>
<em class="number">#9</em>
</div>
<div class="col-lg-8">
<p class="txt"> The machine gun roars, bullets shredding out through the back of V's cloak as he continues with short deliberate steps until -- The hammer clicks against the pin. The gun is empty.</br>V stands before him. "You see? You cannot kill me. There is no flesh and blood within this cloak to kill. There is only an idea." V smiles. "And ideas are bulletproof." The Leader screams.
</p>
<div class="author">
<p><span class="glyphicon glyphicon-book"></span><span>V FOR VENDETTA by Larry and Andy Wachowski based on the graphic novel by Alan Moore</span></p>
<p><span class="glyphicon glyphicon-font"></span><a href="http://www.marksimonson.com/fonts/view/anonymous-pro"><span>Anonymous by Mark Simonson</span></a></p>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<footer>
<div class="col-lg-5">
<p class="text-left">◕ ‿ ◕</p>
</div>
<div class="col-lg-2">
<a id="share" target="_blank" href="https://twitter.com/intent/tweet?hashtags=monospaced,console,typography,UI&text=%F0%9F%90%92+A%28nother%29+curated+list+of+monospaced+fonts&tw_p=tweetbutton&url=https://antonela.design/mono" class="twitter-share-button">Share on Twitter</a>
</div>
<div class="col-lg-5">
<p class="text-right"><a href="http://antonela.design" target="_blank">antonela.design</a></p>
</div>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scroll to anchor links smoothly THANKS @NicolasJEngler <3 <3 <3 -->
<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/scrollToAnchor.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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-36779912-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>