Seite wählen

typo-info.de

 

Kurs bzw. Glossar zu Typographie, Layout, Schrift …

<p><img src="https://typo-info.de/wp-content/uploads/typo-logo1.gif" alt="Logo" width="226" height="167" class="aligncenter size-full wp-image-155" /></p><!-- [et_pb_line_break_holder] --><style><!-- [et_pb_line_break_holder] --> table, th, td { line-height: 1em; font-size:0.8em;}<!-- [et_pb_line_break_holder] --> .right { text-align: right; }<!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><span style="font-size:0.8em;">Besucher der Site:</span><!-- [et_pb_line_break_holder] --><table><!-- [et_pb_line_break_holder] --><tbody><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --><td class="right"></td><!-- [et_pb_line_break_holder] --><td> gesamt (seit 1998)</td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --><td class="right"></td><!-- [et_pb_line_break_holder] --><td> heute</td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --><td class="right"></td><!-- [et_pb_line_break_holder] --><td> z.Z. online</td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --></tbody><!-- [et_pb_line_break_holder] --></table>

ikons   Schriftgruppenvergleich: Einzelvergleichvor


Für den Vergleich zwei Schriftarten auswählen:

<style type="text/css"><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> /* Größendefinition des Divs, in das die Bilder als Hintergrund geladen werden. Alle Bilder müssen die gleiche Größe haben! */<!-- [et_pb_line_break_holder] --> #fontpicture1{<!-- [et_pb_line_break_holder] --> width: 275px;<!-- [et_pb_line_break_holder] --> height: 98px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #fontpicture2{<!-- [et_pb_line_break_holder] --> width: 275px;<!-- [et_pb_line_break_holder] --> height: 98px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> /* Austausch der Bilder innerhalb des Divs mit der ID #fontpicture1 oder #fontpicture2. */<!-- [et_pb_line_break_holder] --> .picture1 { background-image: url(https://typo-info.de/wp-content/uploads/tq-cap.gif); }<!-- [et_pb_line_break_holder] --> .picture2 { background-image: url(https://typo-info.de/wp-content/uploads/tq-km.gif); }<!-- [et_pb_line_break_holder] --> .picture3 { background-image: url(https://typo-info.de/wp-content/uploads/tq-unz.gif); }<!-- [et_pb_line_break_holder] --> .picture4 { background-image: url(https://typo-info.de/wp-content/uploads/tq-gebr.gif); }<!-- [et_pb_line_break_holder] --> .picture5 { background-image: url(https://typo-info.de/wp-content/uploads/tq-venez.gif); }<!-- [et_pb_line_break_holder] --> .picture6 { background-image: url(https://typo-info.de/wp-content/uploads/tq-franz.gif); }<!-- [et_pb_line_break_holder] --> .picture7 { background-image: url(https://typo-info.de/wp-content/uploads/tq-ba.gif); }<!-- [et_pb_line_break_holder] --> .picture8 { background-image: url(https://typo-info.de/wp-content/uploads/tq-klass.gif); }<!-- [et_pb_line_break_holder] --> .picture9 { background-image: url(https://typo-info.de/wp-content/uploads/tq-ser-bet-rock-vergl.gif); }<!-- [et_pb_line_break_holder] --> .picture10 { background-image: url(https://typo-info.de/wp-content/uploads/tq-ser-los.gif); }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- Einbindung der JQuery-Bibliothek (wenn Sie hier bereits JQuery verwenden, brauchen Sie diese Zeile nicht integrieren. --><!-- [et_pb_line_break_holder] --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><!-- Funktion, die den Status eines jeden Radio-Buttons prüft und bei Veränderung erst die alten CSS-Klassen für das Div #fontpicture entfernt und anschließend die entsprechende neue Klasse ergänzt. Hier können Sie beliebig viele Funktionen und im oberen CSS-Bereich Klassen ergänzen. --> <!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->$( document ).ready(function() {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $("#chk1").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture1"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $("#chk2").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture2"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $("#chk3").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture3"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $("#chk4").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture4"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $("#chk5").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture5"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chk6").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture6"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chk7").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture7"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chk8").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture8"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chk9").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture9"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chk10").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture1").removeClass().addClass("picture10"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chkk1").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture1"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $("#chkk2").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture2"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $("#chkk3").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture3"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $("#chkk4").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture4"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $("#chkk5").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture5"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chkk6").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture6"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chkk7").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture7"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chkk8").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture8"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chkk9").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture9"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $("#chkk10").change(function() {<!-- [et_pb_line_break_holder] --> $("#fontpicture2").removeClass().addClass("picture10"); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --></script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <!-- Innerhalb der nachfolgenden Zeilen muss das Attribut name immer gleich bleiben, die Werte ID immer unterschiedlich und<!-- [et_pb_line_break_holder] -->korrespondierend zur oberen Javascript-Funktion. Wenn Sie eine zweite Spalte ergänzen möchten für den Vergleich, muss in der zweiten Spalte das Attribut name für alle Zeilen dort einheitlich geändert werden. --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><table width="100%"><tr><td width="50%"><!-- [et_pb_line_break_holder] --><div class="size08-lh"><!-- [et_pb_line_break_holder] -->Erste Vergleichsschrift:<div style="clear: both;"></div><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk1" name="chk" value="1"/>Capitalis Monumentalis</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk2" name="chk" value="2"/>Unzial-Schrift</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk3" name="chk" value="3"/>Karolingische Minuskel</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk4" name="chk" value="4"/>Gebrochene Schrift</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk5" name="chk" value="5"/>Venezian. Renaissance-Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk6" name="chk" value="6"/>Französ. Renaissance-Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk7" name="chk" value="7"/>Barock-Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk8" name="chk" value="8"/>Klassiszistische Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk9" name="chk" value="9"/>Serifenbetonte Linear-Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chk10" name="chk" value="10"/>Serifenlose Linear-Antiqua</label><br/><!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --> <div id="fontpicture1"></div><!-- [et_pb_line_break_holder] --></td><!-- [et_pb_line_break_holder] --><td width="50%"><!-- [et_pb_line_break_holder] --><div class="size08-lh"><!-- [et_pb_line_break_holder] -->Zweite Vergleichsschrift:<div style="clear: both;"></div><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk1" name="chkk" value="1"/>Capitalis Monumentalis</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk2" name="chkk" value="2"/>Unzial-Schrift</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk3" name="chkk" value="3"/>Karolingische Minuskel</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk4" name="chkk" value="4"/>Gebrochene Schrift</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk5" name="chkk" value="5"/>Venezian. Renaissance-Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk6" name="chkk" value="6"/>Französ. Renaissance-Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk7" name="chkk" value="7"/>Barock-Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk8" name="chkk" value="8"/>Klassiszistische Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk9" name="chkk" value="9"/>Serifenbetonte Linear-Antiqua</label><br/><!-- [et_pb_line_break_holder] --> <label><input type="radio" id="chkk10" name="chkk" value="10"/>Serifenlose Linear-Antiqua</label><br/><!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --> <div id="fontpicture2"></div><!-- [et_pb_line_break_holder] --></td><!-- [et_pb_line_break_holder] --></td></tr></table><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->
icone   Einführung und Grundlagen
Begriff: Typographie
Begriff: Layout
Desktop Publishing (DTP)
Aufgaben von Typographie und Layout
Gute Lesbarkeit
Schlechte Lesbarkeit
Regeln für Typographie und Layout

iconb   Der einzelne Buchstabe
Versalien und Gemeine
Buchstabenteile
Schriftgrundlinie
Schriftgrad
Geviert
Dickte
Punze
Serife
Strichstärke
Formanteile
Buchstabenproportion
Achsstellung
Buchstabenkonstruktion
Typographische Maßeinheiten

iconbb   Zusammenfügungen von Buchstaben
Laufweite
Proportionalschriften und dicktengleiche Schriften
Unterschneiden
Ligaturen
Langes s und Schluss-s

iconw   Zusammenfügungen von Wörtern, Zeilen etc.
Wortabstand
Zeilenabstand
Absatz
Leerzeilen
Registerhaltigkeit
Typographische Setzfehler
Grauwert
Satzausrichtung
Flattersatz
Blocksatz
Form(en)- oder Figurensatz
Zeilenlänge

iconl   Layout
Satzspiegel
Fußnote
Kolumne
Marginalie
Bogensignatur
Lage
Stege
Einseitiger Satzspiegel
Doppelseitiger Satzspiegel
Stege im Verhältnis 2:3:4:6
Neunerteilung
Diagonalkonstruktion mit variablem Satzspiegel
Diagonalkonstruktion mit festem Satzspiegel
Gutenberg-Bibel
Inkunabel
Gestaltungsraster
Goldener Schnitt
Seitenformate
DIN-Papierformate
Seitenformat und Gestaltungsanlass

icons   Schrift
Schriftfamilie
Schriftschnitt
Auszeichnungsmerkmale
Kapitälchen
Initialen
Grundschrift
Antiqua
Schriftklassifikation
DIN-Schriften
Capitalis Monumentalis
Unzial-Schriften
Karolingische Minuskel
Gebrochene Schriften
Venezianische Renaissance-Antiqua
Französische Renaissance-Antiqua
Barock-Antiqua
Klassizistische Antiqua
Serifenbetonte Linear-Antiqua
Serifenlose Linear-Antiqua
Antiqua-Varianten
Schreibschriften
Kanzlei-Schriften und Kursive
Akzidenzschriften
Plakat-Schriften
Mode- und Zierschriften
Schriftgruppenvergleich: Übersicht
Schriftgruppenvergleich: Einzelvergleich
Entwicklung der Schrift
Schrift und Kultur
Form und Inhalt
Computerschriften
Font
TrueType-, OpenType- und Postscript-Schriften
Bezier-Kurven
Hints

 


Links