-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathabout.html
263 lines (247 loc) · 21.3 KB
/
about.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
<template name="about">
<a href="/"><div class="arrowleftupcorner">SPECIMEN</div></a>
<div class="arrowrightupcorner" style="top: 50px; right: 20px;"><a href="https://github.com/furter/specimen"><p style="font-size: 10px; line-height: 14px">CHECK THE<br>SOURCE CODE ON</p><p style="line-height: 24px">GITHUB</p></a></div>
<div class="arrowup"><a href="#up" style="color: white">↓ UP ↑</a></div>
<div class="arrowrightdowncorner"><a href="/main#overview">OVERVIEW</a></div>
<div class="arrowleftdowncorner"><a href="/main#index">INDEX</a></div>
<div class="content-center">
<a id="up"></a>
<h3 style="font-family: Cabin">SPECIMEN n.</h3>
<div class="description">
<div class="wikipedia-extract">
<b>Specimen</b> may refer to:<br><br>
<ul>
<li>
Sample (material), a limited quantity of something which is intended to be similar to and represent a larger amount of that thing(s).
</li>
</ul>
<h4>Science <a href="https://en.wikipedia.org/w/index.php?title=Specimen&action=edit&editintro=Template:Disambig_editintro" target="_blank">[edit]</a></h4>
<hr>
<ul>
<li>
Biological specimen or biospecimen, a biological laboratory specimen held by a biorepository for research;
</li>
<li>
Laboratory specimen, a biological specimen taken by sampling;
</li>
<li>
Type specimen (mineralogy), a reference sample by which a mineral is defined.
</li>
</ul>
<h4>Printing <a href="https://en.wikipedia.org/w/index.php?title=Specimen&action=edit&editintro=Template:Disambig_editintro" target="_blank">[edit]</a></h4>
<hr>
<ul>
<li>
Specimen banknote, banknotes printed generally in very limited quantities for distribution to central banks to aid in the recognition of banknotes from a country other than their own.
</li>
<li>
Specimen stamp, a postage stamp or postal stationery indicium sent to postmasters and postal administrations so that they are able to identify valid stamps and to avoid forgeries.
</li>
</ul>
<h4>Other <a href="https://en.wikipedia.org/w/index.php?title=Specimen&action=edit&editintro=Template:Disambig_editintro" target="_blank">[edit]</a></h4>
<hr>
<ul>
<li>
Specimen (band), a British band formed in the 1980s.
</li>
<li>
Specimen Products, a Chicago-based manufacturer of custom guitars, tube amplifiers, and audio horn speakers.
</li>
<li>
Specimen Ridge, a ridge along the south rim of the Lamar Valley in Yellowstone National Park, Wyoming, USA.
</li>
</ul>
</div>
From <a href="https://en.wikipedia.org/wiki/Specimen">
Wikipedia, the free encyclopedia</a><br>
<br>
In French a <i>spécimen n. m.</i> is, according to different sources: a sample, an example; a category; a copy of a book given for free for professional or advertising purposes…<br><br>
<p style="padding-left:60px; color: white">TYPE SPECIMEN n.</p><br>
[This article is a stub, it is currently the object of a research and will be modified, see the end of the page]<br>
<br>
In typography, finally, the word specimen refers to a document presenting the visual aspect of a typeface or a collection of typefaces.<br>
In the tradition of printed type, the printed specimens are released by typefoundries or printers to show and promote the quality of their products.
<br><br>
<img src="/Caslon-specimen.jpeg" style="margin-bottom: 10px">
<p style="font-size: 18px; line-height: 22px">Specimen sheet by letter founder William Caslon, <br>in the <a href="http://uwdc.library.wisc.edu/collections/HistSciTech/Cyclopaedia"><i>Cyclopaedia, or, An universal dictionary of arts<br> and sciences</i></a> (1728).</p>
<br>
The form of type specimens has varied over time: single sheets, postcards, posters, books, and since the digital-typesetting, the arrival of Internet and the creation of web fonts, digital and web specimens.<br>
Since the first specimen known (around the 17th century?), these documents usually either display all the letters of the font from A to Z plus the punctuation and other glyphs; use pangrams (sentence containing all the letters of the alphabet), such as “The quick brown fox jumps over the lazy dog”; or use “greeking”: false Greek or Latin texts such as the famous <i>lorem ipsum</i>, derived and altered version from Cicero’s <i>De finibus bonorum et malorum</i>… to be shaped by the typefaces.
<br>
Traditionally, collections of type specimens propose a kind of neutral treatment for every different font: same layout, font size, text, etc. This, in addition to a sense of exhaustivity (the use of pangrams for instance is representative of that tendency) and efficiency (one page per font, or less), is supposed to help comparisons between the fonts. It therefore proposes a very specific, formal, approach to typography, and supposes that you already have a content, naked, that needs to find the perfect shape, the “one”.<br>
The reason why texts in specimens are usually uninteresting or even unreadable is because they aren’t supposed to be “read”, but rather “looked at”. They are models, wearing the type until they are replaced by the “real content” (only with our eyes/imagination when printed on paper, or with help of a software/web applications allowing to edit the specimen’s text on a computer). Like the contestants in a beauty contest, all the typefaces are forced into the same swimming suits before it is announced: “let the most beautiful win!”<br><br>
<p style="padding-left:60px; color: white">WEBFONTS</p><br>
The tendency of contemporary web platforms to separate form from content (in which the content is stored in a database and pushed through a template) aligns perfectly with this aforementioned way of showing typefaces.
We find this approach almost without exception in the foundries’ websites and even more in the web fonts directories, <a href="http://openfontlibrary.org/">Open Font Library</a>, <a href="https://www.google.com/fonts">Google Fonts</a>, to cite two “open source” ones amongst the hundreds existing.<br>
<br><a href="/lazydog" style="border-bottom: 0px transparent"><p style="padding-left:60px; color: white">JUMP TO THE LAZY DOG</p><br>
<img src="/lazy/jump.png" style="margin-left: 130px; margin-top:-100px; margin-bottom:25px; width:800px"></a>
<br>
The only exceptions are a few foundries and designers who make particular efforts to work on the presentation of each font according to each one’s specificities.<br>
These approaches are highlighted in this project, and some of the presentations (visuals, texts, specimens) will be relayed here, as examples and as a tribute.<br><br>
Working on this project, <a href="#me" style="cursor: help">I</a> payed a lot of attention to the informative texts accompanying the font, that tell the user more about its (hi)story.
It is to be found, usually arranged in categories, after:<br><br>
Family (the name of the typeface)<br>
Category (<a href="http://en.wikipedia.org/wiki/Serif">Serif</a>, <a href="http://en.wikipedia.org/wiki/Sans-serif">Sans Serif</a>, …)<br>
Designer<br>
License<br>
Full Language Support<br>
Description / Information<br>
<br>
<a href="#me" style="cursor: help">I</a> initially thought of making a cut-up out of different fonts descriptions texts in web fonts directories to give a sense of that kind of literature, and try to do the most unspecific text ever written. But in fact these texts don’t need to be edited to speak by themselves:<br><br>
<p style="text-align: center; font-size: 30px; line-height: 45px; margin-bottom: 0px; color:white">—</p>
*** is the perfect font for body text and headlines on a website. Its modern style, suited with past characteristics of great typefaces, make it highly readable in any context. The full-circle curves on many characters make *** a great font to blend seamlessly with other fonts while still maintaining it's uniqueness.<br>
Whether to be used for body text or headlines on a web page, *** is the right font for any project.
<p style="text-align: center; font-size: 30px; line-height: 45px; margin-bottom: -8px; color:white">—</p>
<br>
The present site is an attempt to propose a different approach to (choosing a) typeface, than what already exists on the web.<br>
Far from pretending to be neutral or exhaustive, this project rather assumes its partial aspect. Each font will have its own specific treatment, with its own content and shape, all contributing to tell its story. The (hi)story of the font is thus re-placed at the center of the selection and in all the constituant elements of the site (navigation, content, etc).
<br><br>
A recent project, <i>Open Source Font Specimens</i>, by Greyscale Press, inspired <a href="#me" style="cursor: help">me</a> for the present project.<br>
Greyscale Press released the specimen book <a href="http://greyscalepress.com/2013/books/eve-future-specimens-de-fontes-libres/"><i>L’Ève future – Spécimens de fontes libres</i></a>, collection of font specimens for usage in print, with free/libre/open source fonts. Realised during a workshop, this specimen book uses as text samples the whole science-fiction novel <i>L’Ève future</i>, by Auguste de Villiers de L’Isle-Adam, published in 1886 and thus in the public domain.<br>
A great project that made <a href="#me" style="cursor: help">me</a> want to go further in the questionning of the still rigid production and use of specimens today.<br><br>
Even if this approach doesn’t exclusively concern open source typefaces, this project will focus on a selection of open source fonts, for print and/or web use. This choice will be explained further in the <a href="#openfonts">next section</a>.<br>
If any type designer wants its non-open soure font to be part of this project, don’t hesitate to open source it ;)
<br><br><br>
<p style="padding-left:60px; color: white" id="openfonts">OPEN FONTS</p><br>
From <a href="http://openfontlibrary.org/en/guidebook/libre_open_fonts">
http://openfontlibrary.org/</a>
<br><p style="text-align: center; font-size: 30px; line-height: 45px; margin-bottom: 0px; color: white">—</p>
Libre/open fonts are about freedom, not price.<br>
They are fonts you are:<br>
FREE to use for any purpose<br>
FREE to study how they were made<br>
FREE to improve<br>
FREE to redistribute, both exact and improved copies <br>
FREE to embed, subset, bundle and derive from to create any kind of artwork or document<br>
FREE to do all of these things commercially as it is about freedom, not price.
<p id="software" style="text-align: center; font-size: 30px; line-height: 45px; margin-bottom: -8px; color: white">—</p>
<br>
Technically and very basically, open source / free / libre projects are supposed to make their source code (programmatic instructions) public. This comes from the software-related context of creation of these terms.<br>
Legally, the creative status of a font is not so clear, and in a way this is not really the main point of interest of that project. It is however interesting to note that in the US law, fonts are considered as a utilitarian objects and are thus exempt of copyright restrictions. And as computer programs are under copyright, the fonts need to be considered as such to be under the same legal terms. This is taken very seriously by digital type foundries, one just has to look at their license agreements: in these sections, suddenly, the word <i>font</i> is associated with the word <i>software</i>. Which disappears once you get back to other sections, such as the “fonts” pages for instance.<br>
<img src="/License-Emigre.png" style="width: 650px; margin-top: 20px">
<img src="/License-Houseind.png" style="width: 650px; margin-top: 20px">
<img src="/License-fontfont.png" style="width: 650px; margin-top: 20px; margin-bottom: 20px">
<br>
In this context, using the term <i>software</i> means considering the fonts as code, programmatic instructions: basically, coordinates and bézier curves formulas.<br>
Which looks like this : <br><br>
<div style="color: white">
<?xml version="1.0" encoding="UTF-8"?><br>
<glyph name="A" format="1"><br>
<p style="padding-left:20px">
<advance width="720"/><br>
<unicode hex="0041"/><br>
<outline><br></p>
<p style="padding-left:40px">
<contour><br></p>
<p style="padding-left:60px">
<point x="383" y="229" type="move" name="top"/><br></p>
<p style="padding-left:40px">
</contour><br>
<contour><br></p>
<p style="padding-left:60px">
<point x="715" y="0" type="line"/><br>
<point x="715" y="13" type="line"/><br>
<point x="703" y="13" type="line" smooth="yes"/><br>
<point x="645" y="13"/><br>
<point x="609" y="67"/><br>
<point x="588" y="121" type="curve" smooth="yes"/><br>
<point x="369" y="677" type="line"/><br>
<point x="366" y="677" type="line"/><br>
<point x="128" y="150" type="line" smooth="yes"/><br>
<point x="110" y="111"/><br>
<point x="69" y="13"/><br>
<point x="13" y="13" type="curve" smooth="yes"/><br>
<point x="5" y="13" type="line"/><br>
<point x="5" y="0" type="line"/><br>
<point x="226" y="0" type="line"/><br>
<point x="226" y="13" type="line"/><br>
<point x="218" y="13" type="line" smooth="yes"/><br>
<point x="159" y="13"/><br>
<point x="141" y="56"/><br>
<point x="141" y="100" type="curve" smooth="yes"/><br>
<point x="141" y="127"/><br>
<point x="149" y="154"/><br>
<point x="157" y="173" type="curve" smooth="yes"/><br>
<point x="197" y="263" type="line"/><br>
<point x="430" y="263" type="line"/><br>
<point x="442" y="233" type="line" smooth="yes"/><br>
<point x="469" y="164"/><br>
<point x="488" y="111"/><br>
<point x="488" y="74" type="curve" smooth="yes"/><br>
<point x="488" y="34"/><br>
<point x="465" y="13"/><br>
<point x="407" y="13" type="curve" smooth="yes"/><br>
<point x="395" y="13" type="line"/><br>
<point x="395" y="0" type="line"/><br></p>
<p style="padding-left:40px">
</contour><br>
<contour><br></p>
<p style="padding-left:60px">
<point x="322" y="538" type="line"/><br>
<point x="422" y="283" type="line"/><br>
<point x="206" y="283" type="line"/><br></p>
<p style="padding-left:40px">
</contour><br></p>
<p style="padding-left:20px">
</outline><br></p>
</glyph><br><br>
</div>
This is an example of type code: the “A.glif” file (this is letter “A”, in case you didn’t recognize it) from <a href="http://schr.fr/open-baskerville">Open Baskerville</a> font.<br>
Let’s not be afraid of it. If you read it, this code describes the drawing of a classical digital font: built as outlines (the points are coordinates for the contour of the letter).<br>
This method of drawing fonts is “opposed” to that of “stroke fonts”, drawing the skeleton of a font, with a stroke width and axis (kind of brush parameters).<br>
See other kinds of codes <a href="http://i.liketightpants.net/and/drawing-logos">here</a>.
<br><br>
Technically, the code of every typeface is public, as they can all be opened in a font editor software (<a href="http://fontforge.github.io/en-US/">FontForge</a> to cite an open source one) and reveal the position of their points and curves.<br>
But unlike softwares, the interest and originality of a font usually still remains the same: its shape.<br>
Fonts today are hardly ever designed by writing code, they are drawn in visual interfaces, and in the end it is their visual form that is read and used by graphic designers and everybody everyday.<br>It could be interesting to think about ways of designing them with a double interface (see <a href="http://i.liketightpants.net/and/the-most-barebones-online-font-editor-possible">this article</a>), and in a way <a href="https://en.wikipedia.org/wiki/Metafont">Metafont</a> is a first step towards this… but it is another story, to which we will come back in a dedicated specimen page.<br><br>
In his essay <a href="http://www.theartistsinstitute.org/MEDIA/take%20care.pdf"><i>Take Care</i></a>, art critic Anthony Huberman speaks about “thankful” behavior for institutions and curators, inviting them to perform their job in the key of the “I Care” (borrowed to Jan Vervoert’s essay <i>Exhaustion and Exuberance</i>) : paying homage to whom or what they work with, taking the risk of performing both the “I Know” and “I Don’t”.<br>
Open source/free/libre approach makes <a href="#me" style="cursor: help">me</a> feel something similar. There, people are invited to perform in the key of the “I Share”. Sharing one’s work and making it possible for others to appropriate it, enrich it, enabeling a dialogue. And more importantly sharing one’s sources, in the sense of receipes and instructions (code), but also sources in the sense of references and inscription in a (hi)story.
<br>It is about influence, as a positive dynamic of circulation and transmission.
Open source approach emphasizes on the evolution, the history and narrative of projects.<br>
Soon, with <a href="http://i.liketightpants.net/and/how-it-has-come-about-that-code-hosting-site-github-offers-visualisations-of-typeface-development">versioning systems</a> such as Git, we will be able to visualise the evolution of a typeface, from 0.0 to 1.0. and beyond…
<br>
No type design comes completely out of nowhere. In fact, it is more the concept of originality or uniqueness that comes out of nowhere.<br>
Copy, re-interpretation of typefaces has always been part of the history of typography (on this specific question, read <a href="http://ospublish.constantvzw.org/blog/typo/appropriation-and-type-before-and-today"><span style="color: white">→</span> this article…</a>), and still today old metal typefaces need to be translated into digital formats to be used on new mediums.<br><br>
Let’s be thankful to what inspires us.<br><br><br>
<p style="padding-left:300px" id="me">Loraine Furter</p>
<br><br><br><br>
<p style="padding-left:60px; color: white">COLOPHON</p><br>
This website is written and developped by <a href="http://designed.with.meteor.com/by">Loraine Furter</a>, and would not exist without precious encounters and discussions with:<br>
<a href="http://ericschrijver.nl/">Eric Schrijver</a>, <a href="http://osp.constantvzw.org/">OSP — Open Source Publishing</a>, <a href="http://greyscalepress.com/authors/manuel-schmalstieg/">Manuel Schmalstieg</a>, <a href="http://typeandgouda.wordpress.com/">Sébastien Sanfilippo</a>, <a href="http://cataloged.cc/">Charles Mazé</a>…<br>[still in process]<br><br>
With an initial background in graphic design, and more specifically in book design, Loraine Furter has grown more and more interested in the open source approach and simultaneously in web development, enriching her (graphical) practice and vision of creation. Thanks to that “outsider” or crossborder status, she is very sensitive to making bridges between different practices that sometimes have difficulties in understanding each other, because of missing translation devices and the fear that comes with such incomprehensions.
<br><br>
Please, <span id="contact">get in touch</span> for any comment, suggestion or to start a discussion. This project aims to become a collaborative one.<br>
<FORM>
<P>
<TEXTAREA name="content" id="form-content" class="required" placeholder="Hello," required></TEXTAREA><br>
<LABEL for="name">name:</LABEL>
<INPUT type="text" id="form-name" class="required name" required>
<LABEL for="email">email:</LABEL>
<INPUT type="email" id="form-email" class="required email" required> <INPUT type="submit" id="send" value="Send">
</P>
</FORM>
The comments will not be integrated automatically in the site like regular comments, but in different ways according to their nature (note, paragraph or even a new page, with the name of the author). Add an email adress to which I can respond with a proposition of integration in the site with your agreement.
<br><br><br>
<p style="padding-left:60px; color: white">REFERENCES</p><br>
<a href="http://blog.manufacturaindependente.org/">Ricardo Lafuente</a>, <a href="http://ospublish.constantvzw.org/blog/typo/appropriation-and-type-before-and-today"><i>Appropriation and Type – before and today</i></a>, 2008.<br>
<a href="http://ospublish.constantvzw.org/blog/typo/you-need-to-copy-to-understand"><i>You Need to Copy to Understand</i>, interview with Harrisson, OSP-Blog, 2006.</a>
<br><a href="http://openfontlibrary.org/en/guidebook/">
Open Font Library’s Guidebook</a>.<br>
<a href="http://www.oert.org/">OERT – Open Educational Resources for Typography</a>
<br><br><br>
<p style="padding-left:60px; color: white">LAST MODIFICATIONS:</p><br>
<!-- refers to specimen.js -->
<!-- each comments means for each object {} in the collection [] we described in the javascript section -->
<!-- attributed as the property "comments" of the about template object-->
{{#each comments}}
<div class="commit-message">
<div class="date-commit-message">{{ formatDate commit.author.date }}</div>
{{ commit.message }}</div>
<br><br>
{{/each}}
Explore the history of <a href="https://github.com/furter/specimen/blob/master/about.html">this page</a> and of the whole site on:<br>
<a href="https://github.com/furter/specimen">https://github.com/furter/specimen</a>
<br><br>
</div>
</div>
</template>