Schrift: Difference between revisions

From Medien Wiki
m (Reverted edits by Schriftartenio (talk) to last revision by Max)
 
(81 intermediate revisions by 8 users not shown)
Line 1: Line 1:
== Textarten und Lesemotivation ==
Adrian Frutiger unterscheidet drei grundsätzliche Textarten, die eine sehr unterschiedliche Lesemotivation mit sich bringen (AFG 107ff):
* Handschriftliche Texte (schlecht lesbar aber hohe Lesemotivation, da privater Inhalt)
* Zweckschriften (z.B. Brief vom Finanzamt; mittel lesbar aber gehobene Lesemotivation, da persönlich relevanter Inhalt)
* Typografische Textschriften (z.B. Zeitung, Buch; gut lesbar aber evtl. niedrige Lesemotivation, da unpersönlicher Inhalt)
== Terminologie ==
== Terminologie ==
[[Image:229px-Bleiletter.svg.png|thumb|upright=1.5|Aufbau einer Bleisatz-Letter. Mit diesem Bild ist ein Geviert definiert durch ''c'' und ''d''. Image from [http://commons.wikimedia.org/wiki/Image:Bleiletter.svg?uselang=de Wikimedia].
[[Image:229px-Bleiletter.svg.png|thumb|upright=1.5|Aufbau einer Bleisatz-Letter. Mit diesem Bild ist ein Geviert definiert durch ''c'' und ''d''. Image from [http://commons.wikimedia.org/wiki/Image:Bleiletter.svg?uselang=de Wikimedia].
Line 21: Line 27:
d Kegelstärke/ Kegelhöhe
d Kegelstärke/ Kegelhöhe
|}]]
|}]]
[[Image:Zeilenabstand-Durchschuss.jpg|right|thumb|300px|Durschschuss und Zeilenhöhe]]


 
=== Schrifttypen===
'''Schrifttypen:'''
* [[wikipedia:de:Antiqua|Antiqua]]
* [http://de.wikipedia.org/wiki/Antiqua Antiqua]
** [[wikipedia:de:Venezianische Renaissance-Antiqua|Venezianische Renaissance-Antiqua]]
** [http://de.wikipedia.org/wiki/Venezianische_Renaissance-Antiqua Venezianische Renaissance-Antiqua]
** [[wikipedia:de:Französische Renaissance-Antiqua|Französische Renaissance-Antiqua]]
** [http://de.wikipedia.org/wiki/Französische_Renaissance-Antiqua Französische Renaissance-Antiqua]
** [[wikipedia:de:Barock-Antiqua|Barock-Antiqua]]
** [http://de.wikipedia.org/wiki/Barock-Antiqua Barock-Antiqua]
** [[wikipedia:de:Klassizistische Antiqua|Klassizistische Antiqua]]
** [http://de.wikipedia.org/wiki/Klassizistische_Antiqua Klassizistische Antiqua]
** Serifenbetonte Linear-Antiqua ([[wikipedia:de:Egyptienne|Egyptienne]])
** Serifenbetonte Linear-Antiqua ([http://de.wikipedia.org/wiki/Egyptienne Egyptienne])
** Serifenlose Linear-Antiqua (auch Sans-Serif oder [[wikipedia:de:Grotesk (Schrift)| Grotesk]])
** Serifenlose Linear-Antiqua (auch Sans-Serif oder [http://de.wikipedia.org/wiki/Grotesk_(Schrift) Grotesk])
* Handschriften
* Handschriften
* Gebrochene
* Gebrochene
* Fremde / Nicht-lateinische
* Fremde / Nicht-lateinische


 
=== Fach- bzw. Typografische Begriffe===
'''Fachbegriffe:'''
* MAJUSKEL (Großbuchstabe), minuskel (Kleinbuchstabe)
* Versalie (Majuskel)
* Versalie:Ein Großbuchstabe
* Kapitälchen
* Kapitälchen: Buchstaben, so groß wie Kleinbuchstabe in der Form von Großbuchstabe. Die automatisch erzeugten Kapitälchen passen in der Strichstärke nicht zu den anderen Buchstaben der Schrift; echte Kapitälchen sind ein eigener Schriftschnitt!
* Minuskel
* Punze (siehe Bild)
* Punze
* Serife:Endstriche an Buchstaben in Schriften wie Garamond oder Times
* Serife (Sans-, Slab-Serif)
* Sans-Serif:Groteskschrift/ohne Serifen (sans=ohne)
* Slab-Serif:Dicke, oft blockartige Serifen (Beispiel-Font:[http://en.wikipedia.org/wiki/Rockwell_%28typeface%29 Rockwell])
* Ober- / Unterlänge, Mittellänge
* Ober- / Unterlänge, Mittellänge
* Dickte (Monospaced)
* Dickte (Breite des Kegels, s. Grafik Abmessung ''c'')
* Schriftfamilie oder -Sippe, Schnitt (echte und falsche Schnitte)
* Schriftfamilie oder -Sippe, Schnitt (echte und falsche Schnitte)
* Ligaturen
* Ligaturen (Zusammengezogene Zeichen: ß, fi, œ, æ ...)
* Flatter-, Blocksatz, links- & rechtsbündig, zentriert  
* Flatter-, Blocksatz, links- & rechtsbündig, zentriert  
* Zeilenfall
* Zeilenfall
* Zeilenumbruch
* Zeilenumbruch, erzwungener Zeilenumbruch
* Absatz
* Absatz
* Tabulator
* Tabulator
* Laufweite (Unterschneiden, Sperren)
* Laufweite:Abstand zwischen den Buchstaben (Unterschneiden, S p e r r e n)
* Durchschuss, Zeilenhöhe
* Wortabstand
* Wortabstand
* Zeilenbreite
* Zeilenbreite
* Durchschuss, Zeilenhöhe
* Zeilenhöhe
* [http://de.wikipedia.org/wiki/Geviert_(Typografie) Geviert] (Em), Fleisch
* Durchschuss (Raum zw. Unter- und Oberlängen)
* [[wikipedia:de:Geviert (Typografie)|Geviert]] (Em), Fleisch
** s. Grafik: d im Rechteck ergibt 1 Geviert.
** Üblich auch 3/4, 1/2 oder 1/4 Geviert, vgl. Trenn- und Gedankenstrich!
* Brotschrift
* Brotschrift
* Hurenkind / Schusterjunge / Leiche / Deppenapostroph
* Hurenkind / Schusterjunge  
 
** Hurenkind: Letzte Zeile auf neuer Seite/Spalte
 
** Schusterjunge: Neue Zeile auf letzter Seite/Spalte
'''Weitere Informationen:'''
** ''„Ein Hurenkind weiß nicht wo es herkommt, ein Schusterjunge nicht wo er hingeht“''
* [http://www.typografie.info/typowiki/index.php?title=Kategorie:TypoGlossar typografie.info]
* Leiche (verloren gegangene Zeichen)
* [http://de.wikipedia.org/wiki/Geschichte_der_Typografie Die Geschichte der Typografie]
* Gasse (Weißraum in Spalte, untereinander)
 
* Zwiebelfisch (Zeichen in falscher Schriftart)
* Blindfisch (Falsch abgelegter Letter wird aus Versehen gesetzt)
* [[wikipedia:de:Apostrophitis|Apostrophitis]], auch [http://www.deppenapostroph.de Deppenapostroph] oder Idiotenapostroph (''Bahnhof's Gaststätte'' — siehe auch: [http://www.spiegel.de/kultur/zwiebelfisch/0,1518,283897,00.html Zwiebelfisch auf Spiegel Online])


[[Image:Juliane_Bragulla_Farbwirkung.png|right|thumb|200px|Übung GC174 von Juliane Bragulla: [[Media:farbwirkung.pdf]]]]
=== Weitere Informationen ===
* [http://www.typografie.info/typowiki/index.php?title=Kategorie:TypoGlossar typografie.info] Das TypoWiki!
* [[wikipedia:de:Geschichte der Typografie|Die Geschichte der Typografie]]
* [http://www.designtagebuch.de/anatomie-der-buchstaben-das-poster/#more-4971 Anatomie der Schrift] - freies DIN A1 Typo-Poster


'''Regeln:'''
=== Regeln ===
[[File:Juliane Bragulla Farbwirkung.png|thumb|200px|Übung zum Farbkontrast von Juliane Bragulla]]
[[File:Schriften Bäcker Rose.jpg|thumb|200px|Schriftenchaos]]
[[File:Museo Elche Spanien.jpg|thumb|200px|S steht auf dem Kopf]]
* Lesbarkeit!
* Lesbarkeit!
* Keine Schrift verzerren (quetschen/stauchen)!
* Abstände zwischen den Buchstaben eines Wortes ausgleichen (Spationierung)
* Mindestens sieben Wortzwischenräume für den Blocksatz!
* Mindestens sieben Wortzwischenräume für den Blocksatz!
* Headline und Aufzählungen nie im Blocksatz!
* Headline und Aufzählungen nie im Blocksatz!
Line 75: Line 94:
* Zeilenabstand immer größer als der Wortabstand!
* Zeilenabstand immer größer als der Wortabstand!
* Nicht mehr als drei Trennstriche!
* Nicht mehr als drei Trennstriche!
* Kein [[wikipedia:de:Plenk|Leerzeichen vor einem Satzzeichen]] (Ausnahme: im Französischen)
* Ein Trenn- oder Bindestrich ist kein Gedankenstrich!
* Ein Trenn- oder Bindestrich ist kein Gedankenstrich!
 
* Keine Zoll (Inch) Zeichen anstelle von [[Typographische Anführungszeichen|Anführungszeichen]] verwenden!
 
** Anführungszeichen sind je nach Sprache unterschiedlich (z.B. “english”, „deutsch“, »deutsch«, « français » wobei nicht die Sprache in den Anführungszeichen maßgeblich ist, sondern jene um die Anführungszeichen herum)
 
* Buchstaben nicht auf den Kopf stellen (Aufpassen beim S, siehe Foto)
<br clear="all"/>
<br clear="all"/>


==Schrift-Klassifizierung nach DIN 16518==
==Schrift-Klassifizierung nach DIN 16518==
[[Image:VenezianischeRenaissance.png|right|thumb|200px|Venezianische Renaissance Antiqua]]
[[Image:VenezianischeRenaissance.png|thumb|200px|Venezianische Renaissance Antiqua]]
'''Venezianische Renaissance-Antiqua'''
'''Venezianische Renaissance-Antiqua'''
* ca. 1400-1485, z.B. Jenson, Centaur, Schneidler Mediaeval, ...
* ca. 1400-1485, z.B. Jenson, Centaur, Schneidler Mediaeval, ...
Line 88: Line 108:
* Abgerundete Serifenenden
* Abgerundete Serifenenden
* Geneigte Schattenachse
* Geneigte Schattenachse
* Schrägstellung des Querstrichs des kleinen "e"
* Schrägstellung des Querstrichs des kleinen „e“


<br clear="all"/>
<br clear="all"/>
[[Image:FranzRenaissance.png|right|thumb|200px|Französische Renaissance Antiqua]]
[[Image:FranzRenaissance.png|thumb|200px|Französische Renaissance Antiqua]]
'''Französische Renaissance-Antiqua'''
'''Französische Renaissance-Antiqua'''
* ca. 1485-1600, z.B. Garamond, Bembo, Minion, Stone Serif, Warnock, ...
* ca. 1485-1600, z.B. Garamond, Bembo, Minion, Stone Serif, Warnock, ...
Line 98: Line 118:
* Geneigte Schattenachse
* Geneigte Schattenachse
* Gleichmäßige Buchstabenformen
* Gleichmäßige Buchstabenformen
* Querstrich des "e" nun fast waagrecht
* Querstrich des „e“ nun fast waagrecht
* Charakteristischer Kursivschnitt
* Charakteristischer Kursivschnitt
* Hervorragende Leseeigenschaften, oft in Romanen und längeren Lesetexten eingesetzt
* Hervorragende Leseeigenschaften, oft in Romanen und längeren Lesetexten eingesetzt


<br clear="all"/>
<br clear="all"/>
[[Image:BarockAntiqua.png|right|thumb|200px|Barock Antiqua]]
[[Image:BarockAntiqua.png|thumb|200px|Barock Antiqua]]
'''Barock-Antiqua'''
'''Barock-Antiqua'''
* ca. 1600-1760, z.B. Janson, VanDijk, Caslon, Baskerville, Times, ...
* ca. 1600-1760, z.B. Janson, VanDijk, Caslon, Baskerville, Times, ...
Line 109: Line 129:
* Eckigere Serifenenden, fast keine Rundung mehr; flache, fast ebene Serifen
* Eckigere Serifenenden, fast keine Rundung mehr; flache, fast ebene Serifen
* Beinahe senkrechte Schattenachse
* Beinahe senkrechte Schattenachse
* Waagrechter "e"-Strich
* Waagrechter „e“-Strich
* "Übergangs-Antiqua", auch ''"Vorklassizistische"'' Antiqua genannt
* „Übergangs-Antiqua“, auch ''"Vorklassizistische"'' Antiqua genannt


<br clear="all"/>
<br clear="all"/>
[[Image:KlassizistischeAntiqua.png|right|thumb|200px|Klassizistische Antiqua]]
[[Image:KlassizistischeAntiqua.png|thumb|200px|Klassizistische Antiqua]]
'''Klassizistische Antiqua'''
'''Klassizistische Antiqua'''
* ca. 1760-1830, z.B. Bodoni, Didot, Walbaum, ...
* ca. 1760-1830, z.B. Bodoni, Didot, Walbaum, ...
Line 122: Line 142:


<br clear="all"/>
<br clear="all"/>
[[Image:SerifenbetontLinear.png|right|thumb|200px|Serifenbetonte Linear-Antiqua]]
[[Image:SerifenbetontLinear.png|thumb|200px|Serifenbetonte Linear-Antiqua]]
'''Serifenbetonte Linear-Antiqua'''
'''Serifenbetonte Linear-Antiqua'''
* auch "Egyptienne", "Slab-Serif" oder "Square-Serif" genannt
* auch „Egyptienne“, „Slab-Serif“ oder „Square-Serif“ genannt
* ca. 1830-1890, z.B. Officina, Clarendon, Rockwell, "Typewriter", ...
* ca. 1830-1890, z.B. Officina, Clarendon, Rockwell, „Typewriter“, ...
* Gleichmäßige Strichstärken der Auf- und Abstriche
* Gleichmäßige Strichstärken der Auf- und Abstriche
* Betonte Serifen, wenig Kontrast zwischen Serife und Type
* Betonte Serifen, wenig Kontrast zwischen Serife und Type


<br clear="all"/>
<br clear="all"/>
[[Image:SerifenlosLinear.png|right|thumb|200px|Serifenlose Linear-Antiqua]]
[[Image:SerifenlosLinear.png|thumb|200px|Serifenlose Linear-Antiqua]]
'''Serifenlose Linear-Antiqua'''
'''Serifenlose Linear-Antiqua'''
* auch "Grotesk", "Sans-Serif" genannt
* auch „Grotesk“, „Sans-Serif“ genannt
* seit ca. 1830, z.B. Helvetica, Caslon, Bauhaus (1925), Futura (1928), Univers, Gill Sans, ...
* seit ca. 1830, z.B. Helvetica, Caslon, Bauhaus (1925), Futura (1928), Univers, Gill Sans, ...
* Serifenlos
* Serifenlos
Line 138: Line 158:


<br clear="all"/>
<br clear="all"/>
[[Image:AntiquaVarianten_Te.png|thumb|200px|Antiqua-Varianten]]
'''Antiqua-Varianten'''
'''Antiqua-Varianten'''
* z.B.:
* z.B.:
Line 146: Line 167:
* um 1980: Chicago (Mac OS)
* um 1980: Chicago (Mac OS)
* um 1990: Blur, Arcadia...
* um 1990: Blur, Arcadia...
[[Image:AntiquaVarianten.png|thumb|left|200px]]


 
<br clear="all"/>
'''Handschriftliche Antiqua'''
[[Image:Handschriftliche.png|thumb|200px|Handschriftliche Antiqua]]
'''Handschriftliche Antiqua & Schreibschriften'''
* laut DIN eingeordnet in Gruppe VIII Schreibschriften und Gruppe IX Handschrifen
* vgl. auch Lesemotivation
* vgl. auch Lesemotivation


 
<br clear="all"/>
[[Image:Gebrochene.png|thumb|200px|Gebrochene Schriften (Fraktur)]]
'''Gebrochene Schriften'''
'''Gebrochene Schriften'''
* Fraktur
* Fraktur


 
<br clear="all"/>
[[Image:Fremde.png|thumb|200px|Fremde Schriften Hier: Japanisch]]
'''Fremde Schriften'''
'''Fremde Schriften'''
* z.B. Chinesisch, Arabisch, Indisch, Kyrillisch, Griechisch, Hebräisch...
* z.B. Chinesisch, Arabisch, Indisch, Kyrillisch, Griechisch, Hebräisch...


<br clear="all"/>
Im Rahmen eines Unternehmensweiten Erscheinungsbildes spielt die Hausschrift eine wichtige Rolle.<br>
Beim [[Bauhaus-Universität Corporate Design]] ist es die Linotype ''Syntax''. Eine kostenfreie Alternative zus Syntax ist die [https://fonts.google.com/specimen/Merriweather+Sans Merriweather Sans].
==Schrift im Computer==
=== Vector-Fonts ===
Schriftarten werden in der Regel in einem vektorbasierten Format gespeichert.<br> Dadurch können sie ohne Qualitätsverlust auf jede Schriftgröße skaliert werden.
* OpenType (.otf) aktuelles Format, unterstützt Ligaturen
* TrueType Font (.ttf)
* PostScript Fonts (.pfm/.pfb) altes Format, durch ttf abgelöst
* Webfonts (''Web Open Font Format'')
=== Raster-Fonts ===
Um auf einem rasterbasierten Display Schrift setzen zu können, werden die [http://de.wikipedia.org/wiki/Glyphe Glyphen] in Pixelgrafiken verwandelt.
* VLW (Processing)
=== Segment-Fonts ===
Raster- oder Segment-Schriftarten kommen in Segment-Anzeigen zum Einsatz wie man sie z.B. von Taschenrechnern kennt.
Ein Beispiel ist das Letter-Spirit Projekt von Douglas Hofstadter.
Es versucht mit Methoden der [[KI|Künstlichen Intelligenz]] Segment-Fonts zu generieren, bei denen alle Buchstaben einer Schrift den selben Geist atmen.
=== Metafonts ===
[[Image:METAFONT-logo.png|thumb|200px|Metafont Logo]]
Metafonts beschreiben eine ganze Familie von Schriftarten (Also verschiedene [http://de.wikipedia.org/wiki/Schriftschnitt Schnitte] einer Schrift)
* Sie gehen auf des Computer-Wissenschaftler Donald Knuth zurück
* Sie haben mit Verbreitung des Textsatzsystems [[TeX]] vor allem in wissenschaftlichen Publikationen Einzug erhalten.
* Der Populärste Metafont ist der Von Don Knuth entworfene ''Computer Modern''.
== Resourcen ==
=== Schriften Verstehen ===
==== Allgemeines ====
* [http://infotype.de/ InfoType App]
* [http://www.typografie.info typografie.info]
* [http://typefacts.com Typefacts – Typografie verstehen]
* [http://type.method.ac Spationierungsspiel]
* [http://practicaltypography.com Practical Typografie]
* [http://www.buchstabenmuseum.de Buchstabenmuseum]
==== Schriften im Web ====
* [http://webtypobuch.de/lesen #webtypobuch] – kostenloses Buch über Typografie im Web
* [http://www.designtagebuch.de/die-gefuehlte-lesbarkeit/ Designtagebuch: Die gefühlte Lesbarkeit] - unbedingt lesenswerter Artikel
* [http://webtypography.net webtypography.net]
* [http://webtypographyforthelonely.com/ webtypographyforthelonely.com] - Typographie mit SVG, TrueType, Canvas und neuen JS-Animationsbibliotheken
* [http://webdesign.crissov.de/Typographie Typographie für Webautoren] - etwas trocken aber wichtig
* [http://ie.microsoft.com/testdrive/Graphics/opentype/Default.html OTF Features im Web] nur IE 10 oder Firefox
* [http://www.apple.com/html5/showcase/typography/ HTML5 Typo Showcase] von Apple (für Webkit-Browser)
==== Schriften Erkennen ====
* [http://new.myfonts.com/WhatTheFont What The Font?]
* [http://www.identifont.com identifont]
* [http://www.adobe.com/type/fontfinder Adobe Fontfinder]
* [http://fount.artequalswork.com Webschriften identifizieren]
=== Exotische Schriften ===
[[Image:Noto-Sans-Egyptian-Hieroglyphs-unhinted.png|thumb|200px|Ägyptische Hieroglyphen aus dem freien [https://www.google.com/get/noto/ Noto Sans Font] ]]
[[Image:Visible_Speech.jpg|thumb|200px|[[wikipedia:Visible Speech|Visible Speech]]<br>Eine konstruierte Schrift]]
==== Ferne Länder und vergangene Zeiten ====
* [[wikipedia:de:Schriften der Welt|Schriften der Welt]]
* [http://www.linotype.com/de/6729/nichtlateinischeschriften.html Nichtlateinische Schriften]
* [[wikipedia:de:Unicode|Unicode]]
* [https://www.google.com/get/noto/ Noto Sans]
* [[wikipedia:de:Ägyptische_Hieroglyphen|Hieroglyphen]]
* [[wikipedia:de:Maya-Schrift|Maya-Schrift]]
==== Fantasie-Schriften ====
* [[wikipedia:Constructed script|Konstruierte Schriften]]
* [[wikipedia:Visible Speech|Visible Speech]]
* [[wikipedia:de:Tengwar und Certar|Tengwar und Certar]]
* [http://freetengwar.sourceforge.net|Free Tengwar Font Project]
* [http://tengwar.art.pl/tengwar/fonty.php Tengwar Schrift-Sammlung]
==== Besondere Schriften ====
* [[wikipedia:de:Notensatz|Notensatz]]
* [[wikipedia:de:Morsezeichen|Morsealphabet]]
* [[wikipedia:de:Winkeralphabet|Winkeralphabet]]
* [[wikipedia:de:Blindenschrift|Blindenschrift]]
* [http://www.signwriting.org Sign Writing]
==== Netz-Kultur ====
* [[wikipedia:Emoji|Emoji]] auf Wikipedia
* [http://apps.timwhitlock.info/emoji/tables/unicode Emoji-Tabellen für's Web]
* [http://www.emojidick.com/ Emoji Dick]
* [[wikipedia:de:Emoticon|Emoticons]]
=== Computer-Schriften ===
[[Image:Metaflop-Screenshot.png|thumb|200px|[http://www.metaflop.com/modulator METAFLOP]<br> Parametrische Schriften im Browser]]
[[Image:Martin-Schneider-Turing-Font.jpg|thumb|200px|Gewachsene Schrift<br>[https://www.flickr.com/photos/bitcraft/sets/72157630252521632/ Ein Turing-Pattern Font]]]
==== Minimalistische Schrift ====
* [[wikipedia:de:Segmentanzeige|Segmentanzeige]]
* [http://ertdfgcvb.com/novoline/ Novoline] Segment-Schrift Animation
==== Parametrische Schrift ====
* [[wikipedia:de:METAFONT|METAFONT]] und das [[google:METAFONT book|METAFONT Buch]] von Don Knuth
* [http://www.metaflop.com/modulator Metaflop] Online Metafont Editor
* [http://metapolator.com Metapolator] Online Parametric Font Editor
* [http://laikafont.ch/ Laikafont]
* [http://www.kalliculator.com/ Kalliculator]
* [http://www.haagseletters.nl/ Haagsletters]
==== Gewachsene Schrift ====
* [http://www.cogsci.indiana.edu/farg/mcgrawg/lspirit.html Letter Spirit] von Doug Hofstadter
* [http://www.danieldavis.com/parametric-typography/ Parametric Typography] von Daniel Davis
* [http://www.creativeapplications.net/processing/generative-typography-processing-tutorial/ Generative Typography] von Amnon Owed
* [http://www.onformative.com/work/growing-data/ Growing-Data] von Cedrik Kiefer (onformative)
* [https://www.flickr.com/photos/toxi/sets/72157604724789091/ Reaction-Diffusion Font] von Karsten Schmidt (toxi)
* [https://www.flickr.com/photos/bitcraft/sets/72157630252521632/ Turing-McCabe Font] von Martin Schneider
* [http://www.standardabweichung.de/design/projekte/html5/design-font-chemical-munich Interaktive Turing-Patterns] von Daniel Kühnlein
==== Bewegte Schrift ====
* [http://vimeo.com/channels/kinetictypography Kinetische Typografie] Video Channel
* [http://www.anitype.com/ Anitype] Animierte Zeichen mit Javascript
* [http://jschr.github.io/textillate/ Textillate] Schriftanimation mit CSS
* [http://www.standardabweichung.de/design/projekte/html5/design-font-fractalism Font Fractalism] von Daniel Kühnlein
==== Werkzeuge ====
* [http://www.ricardmarxer.com/geomerative/ Geomerative] für Processing
* [http://andreaskoller.com/Fontastic Fontastic] für Processing
* [http://toxiclibs.org/2010/02/simutils-grayscott/ Simutils GrayScott] für Processing
* [http://contextfreeart.org/ Context-Free Art] Software<br>Beispiel: [http://www.contextfreeart.org/gallery/view.php?id=1042 Gras-Schrift] von Gui Gui
=== Schriften Finden ===


* [http://www.1001fonts.com 1001 Fonts] Kategorien und Suchkriterien zum finden von Schriften in einem bestimmten stil. Freie als auch komerzielle.


==== Freie Schriften ====
Schriften unter [http://de.wikipedia.org/wiki/Freie_Software freien und Opensource]-Lizenzen. Diese können daher für private und kommerzielle Projekte verwendet, weitergegeben und sogar durch euch erweitert und angepasst werden.
* [[wikipedia:Liberation fonts|Liberation Fonts]]
* [http://openfontlibrary.org Open Font Library]
* [http://www.gnu.org/software/freefont/ GNU FreeFont]
* [http://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface Mozilla Fira] Font von Erik Spiekermann für das Firefox OS
* [http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_fonts SIL International] Open Font License
* [http://font.ubuntu.com Ubuntu Font]
* [http://vollkorn-typeface.com Vollkorn] von Bauhaus Alumnus Friedrich Althausen
* [http://typo3.org/about/the-brand/style-guide/the-typo3-font Share (typo3 font)]
* [https://github.com/adobe/source-sans-pro Adobe Source Code Pro]
* [http://yanone.de/typedesign/kaffeesatz Kaffesatz font]
* [http://yanone.de/typedesign/tagesschrift Tagesschrift] made with the help of Bauhaus students ;)
* [http://www.google.com/webfonts Google webfonts] ([http://www.google.com/fonts/#AboutPlace:about sind alle Open Source])
* [http://cariblogger.com/freebies-11-fresh-open-source-fonts-from-the-league-of-movable-type 11 Open Source Fonts]
* [https://www.theleagueofmoveabletype.com The League of Movable Type]
* [https://github.com/christiannaths/Redacted-Font Redacted Font. Eine alternative zu Blindtext]
==== Kostenlose Schriften ====
Bitte die Lizenz-Bedingungen beachten:<br>
Meist ist die private Nutzung der Schriften kostenlos, nicht aber die kommerzielle Nutzung!
* [http://www.fontsquirrel.com/ fontsquirrel.com] - Commercial Use Free Fonts
* [http://www.thefreesite.com/Free_Fonts Free Fonts von thefreesite.com]
* [http://www.free-fonts.com Free Fonts.com]
* [http://www.dafont.com dafont]
* [http://browse.deviantart.com/resources/fonts/#order=9 deviantART]
==== Font Shops ====
* [http://www.fontshop.de/Schriften/fontfamilylisting.htm Fontshop]
* [http://new.myfonts.com myfonts.com]
==== Font Foundries ====
* [http://www.exljbris.com exljbris Font Foundry] einige Schnitte sind kostenlos
* [http://www.smeltery.net SMeltery] einige Schriften sind kostenlos
* [http://fontfabric.com Fontfabric] einige Schriften sind kostenlos
* [http://www.houseind.com House Industries]
* [http://www.linotype.com Linotype]
* [http://www.optimo.ch Optimo]
* [https://ourtype.com ourType]
* [http://www.rosettatype.com Rosetta]
* [http://www.underware.nl Underware]
* [https://klim.co.nz Klim]
* [http://arstype.angusrshamal.com/typefaces Arstype]
* [http://www.jblt.co Jean-Baptiste Levée Typography]
* [http://www.virusfonts.com Virusfonts]
* [http://www.typography.com Hoefler & Frere-Jones]
* [http://www.adobe.com/type Adobe]
* [http://www.emigre.com/fonts.php Emigre]


<!-- Template -->
<!-- Template -->
{{Template:Bauhaus-Vorkurs}}
{{Template:Bauhaus-Vorkurs}}
[[Category:Schrift]]
[[Category:Typo]]
[[Category:Schrift]]
[[Category:Typo]]

Latest revision as of 20:03, 27 March 2023

Textarten und Lesemotivation

Adrian Frutiger unterscheidet drei grundsätzliche Textarten, die eine sehr unterschiedliche Lesemotivation mit sich bringen (AFG 107ff):

  • Handschriftliche Texte (schlecht lesbar aber hohe Lesemotivation, da privater Inhalt)
  • Zweckschriften (z.B. Brief vom Finanzamt; mittel lesbar aber gehobene Lesemotivation, da persönlich relevanter Inhalt)
  • Typografische Textschriften (z.B. Zeitung, Buch; gut lesbar aber evtl. niedrige Lesemotivation, da unpersönlicher Inhalt)

Terminologie

Aufbau einer Bleisatz-Letter. Mit diesem Bild ist ein Geviert definiert durch c und d. Image from Wikimedia.
Details Abmessungen
1. Punze
2. Schriftbild
3. Fleisch
4. Konus
5. Achselfläche
6. Kegel
7. Signatur
8. Gießrille
 a Kopf
b Schulterhöhe
a+b Schrifthöhe
c Dickte
d Kegelstärke/ Kegelhöhe
Durschschuss und Zeilenhöhe

Schrifttypen

Fach- bzw. Typografische Begriffe

  • MAJUSKEL (Großbuchstabe), minuskel (Kleinbuchstabe)
  • Versalie:Ein Großbuchstabe
  • Kapitälchen: Buchstaben, so groß wie Kleinbuchstabe in der Form von Großbuchstabe. Die automatisch erzeugten Kapitälchen passen in der Strichstärke nicht zu den anderen Buchstaben der Schrift; echte Kapitälchen sind ein eigener Schriftschnitt!
  • Punze (siehe Bild)
  • Serife:Endstriche an Buchstaben in Schriften wie Garamond oder Times
  • Sans-Serif:Groteskschrift/ohne Serifen (sans=ohne)
  • Slab-Serif:Dicke, oft blockartige Serifen (Beispiel-Font:Rockwell)
  • Ober- / Unterlänge, Mittellänge
  • Dickte (Breite des Kegels, s. Grafik Abmessung c)
  • Schriftfamilie oder -Sippe, Schnitt (echte und falsche Schnitte)
  • Ligaturen (Zusammengezogene Zeichen: ß, fi, œ, æ ...)
  • Flatter-, Blocksatz, links- & rechtsbündig, zentriert
  • Zeilenfall
  • Zeilenumbruch, erzwungener Zeilenumbruch
  • Absatz
  • Tabulator
  • Laufweite:Abstand zwischen den Buchstaben (Unterschneiden, S p e r r e n)
  • Wortabstand
  • Zeilenbreite
  • Zeilenhöhe
  • Durchschuss (Raum zw. Unter- und Oberlängen)
  • Geviert (Em), Fleisch
    • s. Grafik: d im Rechteck ergibt 1 Geviert.
    • Üblich auch 3/4, 1/2 oder 1/4 Geviert, vgl. Trenn- und Gedankenstrich!
  • Brotschrift
  • Hurenkind / Schusterjunge
    • Hurenkind: Letzte Zeile auf neuer Seite/Spalte
    • Schusterjunge: Neue Zeile auf letzter Seite/Spalte
    • „Ein Hurenkind weiß nicht wo es herkommt, ein Schusterjunge nicht wo er hingeht“
  • Leiche (verloren gegangene Zeichen)
  • Gasse (Weißraum in Spalte, untereinander)
  • Zwiebelfisch (Zeichen in falscher Schriftart)
  • Blindfisch (Falsch abgelegter Letter wird aus Versehen gesetzt)
  • Apostrophitis, auch Deppenapostroph oder Idiotenapostroph (Bahnhof's Gaststätte — siehe auch: Zwiebelfisch auf Spiegel Online)

Weitere Informationen

Regeln

Übung zum Farbkontrast von Juliane Bragulla
Schriftenchaos
S steht auf dem Kopf
  • Lesbarkeit!
  • Keine Schrift verzerren (quetschen/stauchen)!
  • Abstände zwischen den Buchstaben eines Wortes ausgleichen (Spationierung)
  • Mindestens sieben Wortzwischenräume für den Blocksatz!
  • Headline und Aufzählungen nie im Blocksatz!
  • Nie mehr als drei Schriftarten!
  • Zeilenabstand immer größer als der Wortabstand!
  • Nicht mehr als drei Trennstriche!
  • Kein Leerzeichen vor einem Satzzeichen (Ausnahme: im Französischen)
  • Ein Trenn- oder Bindestrich ist kein Gedankenstrich!
  • Keine Zoll (Inch) Zeichen anstelle von Anführungszeichen verwenden!
    • Anführungszeichen sind je nach Sprache unterschiedlich (z.B. “english”, „deutsch“, »deutsch«, « français » wobei nicht die Sprache in den Anführungszeichen maßgeblich ist, sondern jene um die Anführungszeichen herum)
  • Buchstaben nicht auf den Kopf stellen (Aufpassen beim S, siehe Foto)


Schrift-Klassifizierung nach DIN 16518

Venezianische Renaissance Antiqua

Venezianische Renaissance-Antiqua

  • ca. 1400-1485, z.B. Jenson, Centaur, Schneidler Mediaeval, ...
  • Schreibfeder: relativ geringe Strichstärkenunterschiede
  • Abgerundete Serifenenden
  • Geneigte Schattenachse
  • Schrägstellung des Querstrichs des kleinen „e“


Französische Renaissance Antiqua

Französische Renaissance-Antiqua

  • ca. 1485-1600, z.B. Garamond, Bembo, Minion, Stone Serif, Warnock, ...
  • Schreibfeder: geringe Strichstärkenunterschiede
  • Abgerundete Serifenenden, etwas spitzer als die Venezianische
  • Geneigte Schattenachse
  • Gleichmäßige Buchstabenformen
  • Querstrich des „e“ nun fast waagrecht
  • Charakteristischer Kursivschnitt
  • Hervorragende Leseeigenschaften, oft in Romanen und längeren Lesetexten eingesetzt


Barock Antiqua

Barock-Antiqua

  • ca. 1600-1760, z.B. Janson, VanDijk, Caslon, Baskerville, Times, ...
  • Gedrehte und verkantete Breitfeder: größerer Kontrast zwischen Grund- und Haarstrichen
  • Eckigere Serifenenden, fast keine Rundung mehr; flache, fast ebene Serifen
  • Beinahe senkrechte Schattenachse
  • Waagrechter „e“-Strich
  • „Übergangs-Antiqua“, auch "Vorklassizistische" Antiqua genannt


Klassizistische Antiqua

Klassizistische Antiqua

  • ca. 1760-1830, z.B. Bodoni, Didot, Walbaum, ...
  • Spitzfeder: extremer Strichstärkenunterschied
  • Sehr dünne, haarfeine Serifen
  • Senkrechte Schattenachse, vertikale Orientierung
  • Problematisch im Zeitungsdruck


Serifenbetonte Linear-Antiqua

Serifenbetonte Linear-Antiqua

  • auch „Egyptienne“, „Slab-Serif“ oder „Square-Serif“ genannt
  • ca. 1830-1890, z.B. Officina, Clarendon, Rockwell, „Typewriter“, ...
  • Gleichmäßige Strichstärken der Auf- und Abstriche
  • Betonte Serifen, wenig Kontrast zwischen Serife und Type


Serifenlose Linear-Antiqua

Serifenlose Linear-Antiqua

  • auch „Grotesk“, „Sans-Serif“ genannt
  • seit ca. 1830, z.B. Helvetica, Caslon, Bauhaus (1925), Futura (1928), Univers, Gill Sans, ...
  • Serifenlos



Antiqua-Varianten

Antiqua-Varianten

  • z.B.:
  • um 1900: Eckmann... (Jugendstil)
  • um 1930: Broadway... (Art Déco)
  • um 1950/60: Bank Gothic, Alternate Gothic, Trump Grothic, Dom, Antique Olive...
  • um 1970: Avant Garde, Souvenir, Tiffany...
  • um 1980: Chicago (Mac OS)
  • um 1990: Blur, Arcadia...
AntiquaVarianten.png


Handschriftliche Antiqua

Handschriftliche Antiqua & Schreibschriften

  • laut DIN eingeordnet in Gruppe VIII Schreibschriften und Gruppe IX Handschrifen
  • vgl. auch Lesemotivation


Gebrochene Schriften (Fraktur)

Gebrochene Schriften

  • Fraktur


Fremde Schriften Hier: Japanisch

Fremde Schriften

  • z.B. Chinesisch, Arabisch, Indisch, Kyrillisch, Griechisch, Hebräisch...


Im Rahmen eines Unternehmensweiten Erscheinungsbildes spielt die Hausschrift eine wichtige Rolle.
Beim Bauhaus-Universität Corporate Design ist es die Linotype Syntax. Eine kostenfreie Alternative zus Syntax ist die Merriweather Sans.

Schrift im Computer

Vector-Fonts

Schriftarten werden in der Regel in einem vektorbasierten Format gespeichert.
Dadurch können sie ohne Qualitätsverlust auf jede Schriftgröße skaliert werden.

  • OpenType (.otf) aktuelles Format, unterstützt Ligaturen
  • TrueType Font (.ttf)
  • PostScript Fonts (.pfm/.pfb) altes Format, durch ttf abgelöst
  • Webfonts (Web Open Font Format)

Raster-Fonts

Um auf einem rasterbasierten Display Schrift setzen zu können, werden die Glyphen in Pixelgrafiken verwandelt.

  • VLW (Processing)

Segment-Fonts

Raster- oder Segment-Schriftarten kommen in Segment-Anzeigen zum Einsatz wie man sie z.B. von Taschenrechnern kennt.

Ein Beispiel ist das Letter-Spirit Projekt von Douglas Hofstadter. Es versucht mit Methoden der Künstlichen Intelligenz Segment-Fonts zu generieren, bei denen alle Buchstaben einer Schrift den selben Geist atmen.

Metafonts

Metafont Logo

Metafonts beschreiben eine ganze Familie von Schriftarten (Also verschiedene Schnitte einer Schrift)

  • Sie gehen auf des Computer-Wissenschaftler Donald Knuth zurück
  • Sie haben mit Verbreitung des Textsatzsystems TeX vor allem in wissenschaftlichen Publikationen Einzug erhalten.
  • Der Populärste Metafont ist der Von Don Knuth entworfene Computer Modern.

Resourcen

Schriften Verstehen

Allgemeines

Schriften im Web

Schriften Erkennen

Exotische Schriften

Ägyptische Hieroglyphen aus dem freien Noto Sans Font
Visible Speech
Eine konstruierte Schrift

Ferne Länder und vergangene Zeiten

Fantasie-Schriften

Besondere Schriften

Netz-Kultur


Computer-Schriften

METAFLOP
Parametrische Schriften im Browser
Gewachsene Schrift
Ein Turing-Pattern Font

Minimalistische Schrift

Parametrische Schrift

Gewachsene Schrift

Bewegte Schrift

Werkzeuge

Schriften Finden

  • 1001 Fonts Kategorien und Suchkriterien zum finden von Schriften in einem bestimmten stil. Freie als auch komerzielle.

Freie Schriften

Schriften unter freien und Opensource-Lizenzen. Diese können daher für private und kommerzielle Projekte verwendet, weitergegeben und sogar durch euch erweitert und angepasst werden.

Kostenlose Schriften

Bitte die Lizenz-Bedingungen beachten:
Meist ist die private Nutzung der Schriften kostenlos, nicht aber die kommerzielle Nutzung!

Font Shops

Font Foundries


Diese Seite ist Teil der Werkmodule Bauhaus-Vorkurs, Grundlagen der Mediengestaltung und Generative Bauhaus von Michael Markert für Interface Design an der Bauhaus-Universität Weimar.

Retrieved from "https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=Schrift&oldid=135262"