12,297
edits
m (→Regeln) |
m (Reverted edits by Schriftartenio (talk) to last revision by Max) |
||
(59 intermediate revisions by 6 users not shown) | |||
Line 42: | Line 42: | ||
=== Fach- bzw. Typografische Begriffe=== | === Fach- bzw. Typografische Begriffe=== | ||
* MAJUSKEL, minuskel | * MAJUSKEL (Großbuchstabe), minuskel (Kleinbuchstabe) | ||
* Versalie:Ein Großbuchstabe | * Versalie:Ein Großbuchstabe | ||
* Kapitälchen: Buchstaben, so groß wie | * 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 | * Punze (siehe Bild) | ||
* Serife:Endstriche an Buchstaben in Schriften wie Garamond oder Times | * Serife:Endstriche an Buchstaben in Schriften wie Garamond oder Times | ||
* Sans-Serif:Groteskschrift/ohne Serifen (sans=ohne) | * Sans-Serif:Groteskschrift/ohne Serifen (sans=ohne) | ||
* Slab-Serif:Dicke, oft blockartige Serifen (Beispiel-Font:Rockwell) | * 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 (Breite des Kegels, s. Grafik Abmessung ''c'') | * Dickte (Breite des Kegels, s. Grafik Abmessung ''c'') | ||
Line 78: | Line 78: | ||
=== Weitere Informationen === | === Weitere Informationen === | ||
* [http://www.typografie.info/typowiki/index.php?title=Kategorie:TypoGlossar typografie.info] | * [http://www.typografie.info/typowiki/index.php?title=Kategorie:TypoGlossar typografie.info] Das TypoWiki! | ||
* [[wikipedia:de:Geschichte der Typografie|Die Geschichte der Typografie]] | * [[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 | * [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! | * 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 93: | 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"/> | ||
Line 153: | Line 158: | ||
<br clear="all"/> | <br clear="all"/> | ||
[[Image: | [[Image:AntiquaVarianten_Te.png|thumb|200px|Antiqua-Varianten]] | ||
'''Antiqua-Varianten''' | '''Antiqua-Varianten''' | ||
* z.B.: | * z.B.: | ||
Line 162: | 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"/> | <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://www.typografie.info typografie.info] | ||
=== | * [http://typefacts.com Typefacts – Typografie verstehen] | ||
* [[wikipedia:Liberation fonts]] | * [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://openfontlibrary.org Open Font Library] | ||
* [http://www.gnu.org/software/freefont/ GNU FreeFont] | * [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://scripts.sil.org/cms/scripts/page.php?item_id=OFL_fonts SIL International] Open Font License | ||
* [http://font.ubuntu.com Ubuntu Font] | * [http://font.ubuntu.com Ubuntu Font] | ||
* [http:// | * [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] | * [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 | 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.thefreesite.com/Free_Fonts Free Fonts von thefreesite.com] | ||
* [http://www.free-fonts.com Free Fonts.com] | * [http://www.free-fonts.com Free Fonts.com] | ||
* [http://www.dafont.com dafont] | * [http://www.dafont.com dafont] | ||
* [http://browse.deviantart.com/resources/fonts/#order=9 deviantART] | * [http://browse.deviantart.com/resources/fonts/#order=9 deviantART] | ||
==== Font Shops ==== | |||
=== | |||
* [http://www.fontshop.de/Schriften/fontfamilylisting.htm Fontshop] | * [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.linotype.com Linotype] | ||
* [http:// | * [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: | [[Category:Schrift]] | ||
[[Category:Typo]] | |||
[[Category:Schrift]] | [[Category:Schrift]] | ||
[[Category:Typo]] | [[Category:Typo]] |