-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
324 lines (323 loc) · 12.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
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
<!DOCTYPE html>
<html lang="de">
<head>
<title>Typografie</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typografie-Ressourcen" />
<link rel="shortcut icon" href="./img/typography.ico" type="image/x-icon" />
<link rel="stylesheet" href="./styles.css" />
<script src="./hidden.js" defer></script>
</head>
<body id="smoothScroll">
<header>
<nav>
<ul>
<li>
<a href="#schriftarten">Schriftarten wählen</a>
</li>
<li>
<a href="#mitText">Mit Text arbeiten</a>
</li>
<li>
<a href="#webSchriftarten">Web-Schriftarten</a>
</li>
<li>
<a href="#ausLiebe">Aus Liebe zur Schrift</a>
</li>
</ul>
</nav>
</header>
<main>
<h1>Typografie-Ressourcen</h1>
<section>
<article>
<h2 id="schriftarten">
Schriftarten wählen und verwenden
</h2>
<a
href="https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style"
>The Elements of Typographic Style</a
>
<br /><br />
<p class="tooltip">
von
<a
href="https://en.wikipedia.org/wiki/Robert_Bringhurst"
target="_blank"
>
<span class="author__name">Robert Bringhurst</span>
</a>
<span class="tooltiptext">
<img src="img/Robert_Bringhurst_2016.jpg" alt="Minibild" />
<a
href="https://en.wikipedia.org/wiki/Robert_Bringhurst"
target="_blank"
>
<button>zu Wikipedia</button>
</a>
</span>
</p>
<p>
Oft als "Die Bibel des Typografen" bezeichnet, behandelt Kapitel 6
von <span class="bold">The Elements of Typographic Style</span> das
Thema Schriftarten wählen und kombinieren. Bringhurst erinnert uns
daran, "Schriften zu wählen, die die endgültigen
Bildschirmbedingungen überleben und wenn möglich gedeihen" und
"Schriften zu wählen, die sowohl der Aufgabe als auch dem Thema
gerecht werden". Er rät uns, "mit einer einzigen typografischen
Familie zu beginnen", aber wenn es an der Zeit ist, Schriftarten zu
kombinieren, "die Schrift optisch mehr als mathematisch
auszugleichen.
</p>
</article>
<article>
<a href="http://nicewebtype.com/">Nice Web Type</a>
<br /><br />
<p class="tooltip">
von
<a href="https://de.wikipedia.org/wiki/Tim_Brown_(Designer)">
<span class="author__name">Tim Brown</span>
</a>
<span class="tooltiptext">
<img src="img/Tim_Brown.png" alt="Minibild" />
<a
href="https://de.wikipedia.org/wiki/Tim_Brown_(Designer)"
target="_blank"
>
<button>zu Wikipedia</button>
</a>
</span>
</p>
<p>
<span class="bold">Nice Web Type</span> findet eine Balance zwischen
typografischer Kunstfertigkeit und technischem Know-how. Im
"fonts"-Abschnitt der Seite schreibt Brown: "Du hast es vielleicht
bemerkt, es gibt viele Schriftarten zur Auswahl. Hier findest du
diejenigen, die ich bevorzuge, und meine Gründe.
</p>
</article>
<article>
<a href="https://betterwebtype.com/">Better Web Type</a>
<br /><br />
<p class="tooltip">
von
<a href="https://matejlatin.com/" target="_blank">
<span class="author__name">Matej Latin</span>
</a>
<span class="tooltiptext matej">
<img src="img/matej-latin.jpg" alt="Minibild" />
<a href="https://matejlatin.com/" target="_blank">
<button>zu Homepage</button>
</a>
</span>
</p>
<p>
Ein <span class="bold">Web-Typografie-Buch</span> für Webdesigner
und Webentwickler, das mit Spickzetteln, Beispiel-Design-Dateien für
Designer und Beispiel-Quellcode für Entwickler kommt.
</p>
</article>
<article>
<h3 id="mitText">
Mit Text auf der Seite arbeiten
</h3>
<a
href="https://www.amazon.com/Designing-Type-5th-Essential-Typography/dp/0823014134"
>Designing With Type</a
>
<br /><br />
<p class="tooltip">
von
<a
href="https://www.designingwithtype.com/5/home.php"
target="_blank"
>
<span class="author__name">James Craig</span>
</a>
<span class="tooltiptext">
<img src="img/james_craig.jpg" alt="Minibild" />
<a
href="https://www.designingwithtype.com/5/home.php"
target="_blank"
>
<button>zu AMAZON</button>
</a>
</span>
</p>
<p>
Ein klassisches Buch über die Verwendung von Typografie, um das
Lesen zu maximieren, ist
<span class="bold">Designing with Type</span> nun in der fünften
Auflage. Die dazugehörige Webseite hat einige schöne Beispiele
dafür, wie man mit Textschrift gestaltet, wie man mit
Display-Schrift (Überschriften) gestaltet und wie man Farbe
einsetzt.
</p>
</article>
<article>
<a
href="https://www.amazon.com/Type-Primer-2nd-John-Kane/dp/0205066445"
>A Type Primer</a
>
<br /><br />
<p class="tooltip">
von
<a
href="https://www.amazon.com/-/de/stores/author/B0034P1RUA"
target="_blank"
>
<span class="author__name">John Kane</span>
</a>
<span class="tooltiptext">
<img src="img/john_kane.jpg" alt="Minibild" />
<a
href="https://www.amazon.com/-/de/stores/author/B0034P1RUA"
target="_blank"
>
<button>zu AMAZON</button>
</a>
</span>
</p>
<p>
Ein Buch für Anfänger in der Typografie,
<span class="bold">A Type Primer</span> enthält Kapitel über das
Arbeiten mit Text, das Organisieren von Text und das Erstellen eines
Rastersystems.
</p>
</article>
<article>
<h3 id="webSchriftarten">
Aktuell bleiben mit Web-Schriftarten
</h3>
<a href="https://alistapart.com/">A List Apart Magazine</a>
<p>von verschiedenen Autoren</p>
<p>
Von ihrer Webseite: "Für Leute, die Websites erstellen"
<span class="bold">A List Apart Magazine</span> erforscht das
Design, die Entwicklung und die Bedeutung von Webinhalten, mit einem
besonderen Schwerpunkt auf Webstandards und Best Practices. Themen
sind: Code, Inhalt, Kultur, Design (einschließlich Typografie),
Mobil, Prozess und Benutzerwissenschaft.
</p>
</article>
<article>
<h3 id="ausLiebe">Aus Liebe zur Schrift</h3>
<a
href="https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style"
>The Elements of Typographic Style</a
>
<br /><br />
<p class="tooltip">
von
<a
href="https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style"
target="_blank"
>
<span class="author__name">Robert Bringhurst</span>
</a>
<span class="tooltiptext">
<img
src="img/The_Elements_of_Typographic_Style.jpg"
alt="Minibild"
/>
<a
href="https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style"
target="_blank"
>
<button>zu Wikipedia</button>
</a>
</span>
</p>
<p>
Obwohl er selbst kein Typograf ist, ist Bringhurst ein Dichter, der
Ideen liebt und eine Liebe für die Buchstaben und Wörter hat, die
dazu dienen, Ideen sichtbar zu machen.
<span class="bold">The Elements of Typographic Style</span> lehrt
die Grundlagen, das geschriebene Wort zu ehren und zu respektieren -
durch das Auswählen und Kombinieren von Schriftarten; das Streben
nach Rhythmus, Proportion und Harmonie; und das Gestalten von
typografischen Seiten.
</p>
</article>
<article>
<a href="https://fonts.ilovetypography.com/">I Love Typography</a>
<br /><br />
<p class="tooltip">
von
<a
href="https://www.wbg-wissenverbindet.de/autoren/john-boardley/"
target="_blank"
>
<span class="author__name">John Boardley</span>
</a>
<span class="tooltiptext">
<img src="img/CONT_WAU_U0014502_0001.jpg" alt="Minibild" />
<a
href="https://www.wbg-wissenverbindet.de/autoren/john-boardley/"
target="_blank"
>
<button>zu HERDER.DE</button>
</a>
</span>
</p>
<p>
Von der Webseite: <span class="bold">I love Typography</span> (ILT)
wurde am 7. August 2007 geboren. Es existiert weil ich eine
Leidenschaft für Typografie, Schriftgestaltung und Schriftzug habe
und für die Worte, die aus diesen Disziplinen entstehen. Als Kind
wunderte ich mich, warum die Lehrerin uns bat, den Buchstaben a als
o mit einem Schwanz zu zeichnen, wenn in meinen Büchern die a's
einen zusätzlichen Bogen oben hatten. Diese Seite soll das Thema
zugänglicher machen, die Typografie für die Massen näher bringen,
wenn man so will. Es ist fast unmöglich, sich eine Welt ohne Schrift
vorzustellen, aber gleichzeitig nehmen die meisten von uns die
Schrift aufgrund ihrer Allgegenwärtigkeit als selbstverständlich
hin. Also schau genauer hin.
</p>
</article>
<article>
<a
href="https://www.amazon.com/Love-Joy-about-Letters-Lettering/dp/B0006AYYFG"
>Love and Joy About Letters</a
>
<br /><br />
<p class="tooltip">
von
<a href="https://de.wikipedia.org/wiki/Ben_Shahn" target="_blank"
><span class="author__name"
>Ben Shahn & Jersey Homesteads</span
></a
>
<span class="tooltiptext">
<img class="monti" src="img/Paolo_Monti.jpg" alt="Minibild" />
<a href="https://de.wikipedia.org/wiki/Ben_Shahn" target="_blank">
<button>zu Wikipedia</button>
</a>
</span>
</p>
<p>
Ben Shahn war ein Wandmaler, Fotograf und Grafiker, dessen Arbeit
oft Schriftzüge enthielt. Als er 14 war, wurde er bei einem
Lithografen in die Lehre geschickt.
<span class="bold">In Love and Joy About Letters</span>
schreibt er: "Ich entdeckte das römische Alphabet in all seiner
Eleganz und seiner strengen Würde, und ich verliebte mich wieder in
Buchstaben... Buchstaben sind Mengen, und Räume sind Mengen, und nur
das Auge und die Hand können sie messen. Wie im Ohr und in den
Empfindungen des Dichters Klänge und Silben und Pausen Mengen sind,
so sind in beiden Fällen das Ausbalancieren und Vorwärtsbewegen
dieser Mengen nur eine Frage von Geschick und Gefühl und Kunst.
</p>
</article>
</section>
</main>
<footer>
<a href="#smoothScroll" class="tooltip__scroll">
<img src="./img/to-top.ico" alt="Nach Oben scrollen" />
<span class="tooltiptext__scroll">Nach Oben scrollen</span>
</a>
</footer>
<script src="./hidden.js"></script>
</body>
</html>