Actoid Mediendesign   Actoid Mediendesign
Home | News | Map | Links | ©   Philosophie | Design | Farbe | Kitsch | Aufgaben | Leistungen | Zen & Design
Farbe und Licht
Auge und Sehen | TV
Farb- und Sehtests
Farbmetrik | Farbadjektive
Farbkarte BGR | RGB
Farboptimierung | Farbtexte
Goethes Farben | Farbtherapie
Farbgeschichte
Farbentwurfstechnik
Farbmixer | Farbpicker
 

Farbtexte und TextfarbenFarbkomprimierung
Lesbar oder nicht - immer wieder gibt es bei Farbkombinationen von Text und Hintergrund unterschiedliche Meinungen, was zumutbar ist und was nicht.

Hier ein Farbpicker zur Überprüfung von einigen Textkontrasten.

     
     

Entwurfskriterien
Toter Baum
Elektronische Texte
Systematische Kombinationen
Sinnvolle Farbgebung

  Die Entwicklungsgeschichte der "Schwarze Kunst” von der Innovation des Johannes Gutenberg bis zur heutigen Technologie, die von jedermann eingesetzt werden kann, hat die Welt geprägt, wie keine andere technologische Entwicklung der Menschheit.

Die Technologie der elektronisch gestalteten Texte hat sich sich ebenso rasch durchgesetzt und in der Welt ausbreitete wie einstmals die Innovation des Johannes Gutenberg vor einem halben Jahrtausend. Erst durch diese Breitenwirkung konnte sich das gesamte Potential dieser beiden Innovation entfalten.

Unsere Texttabellen zeigen Kombinationen der Grundfarben und helfen eine erste Vorauswahl zu treffen.

     
Entwurfskriterien  

Nicht von ungefähr wird gedruckter Text in der überwiegenden Zahl der Fälle schwarz auf weiß präsentiert. Text, der mit schwarzer Druckfarbe oder schwarzem Toner auf weißem Papier gedruckt wird, ist leicht lesbar und auch über längere Zeiträume nicht ermüdend. Bei Farbdokumenten ist es daher sehr oft von Vorteil, schwarzen Text vor weißem Hintergrund zu setzen und die Farben auf grafische Gestaltungselemente und Überschriften zu beschränken.

Farbiger Text kann einer Site ein gewisses Flair verleihen. Zu vermeiden sind Kombination primärer Komplementärfarben als Text- und als Hintergrundfarbe: Sie sind sehr schwer lesbar, und machen auf den Betrachter einen verwirrenden Eindruck und ermüdenden beim lesen. Dies gilt in besonderem Maß für die Farbkombinationen Rot/Cyan und Rot/Blau. Farbiger Text ist umso besser lesbar, je höher der Unterschied in der Helligkeit zur Hintergrundfarbe ist. So ist zum Beispiel ein dunkelblauer Text vor hell-beigem Hintergrund sehr gut lesbar. Außerdem sollte man es vermeiden, innerhalb eines Textflusses mehrere Farben zu verwenden. Dies erschwert das Lesen des Texts und gibt der Site ein unruhiges Aussehen.

Das Hervorheben von Wörtern durch eine bestimmte, einzelne Farbe ist hingegen ein probates Mittel, die Aufmerksamkeit des Lesers auf bestimmte Textteile zu lenken.

Man muss sich genau davon überzeugen, bis zu welcher Schriftgröße farbiger Text noch gut lesbar ist.

Top

   
Texte der Marke "Toter Baum"

  Texte kennen wir vor allem in den Farben Schwarz auf Weiß, wie sie seit Jahrhunderten in Büchern, Zeitungen und Zeitschriften abgedruckt werden. Die Farbwahl kommt nicht von Ungefähr: Druckerschwärze war als einfach herzustellendes Naturprodukt in großen Mengen verfügbar und daher billig. Das Papier, ebenfalls ein Naturprodukt, war aber nicht reinweiß, sondern durch zufällige Beimengungen abgetönt. Das Ganze also ein "Toter Baum" in Reinkultur: das Papier aus den Zellulosefasern des Holzes und die Druckerschwärze aus Kienruß mit Ölen und Harzen vermischt.

Die farbige Gestaltung von Druckwerken gab es bereits unter Gutenberg. Illustratoren und Kolumnisten fügten per Hand farbige Überschriften, Initialen usw. in die wertvollen Druckseiten ein, um die gedruckten Bücher den Handschriften anzugleichen.

Im Übrigen werden Texte der Marke "Toter Baum" bis heute von Experten erfasst und von ihnen bis zur Veröffentlichung betreut, können aber dann nicht mehr geändert werden: "Was liegt das pickt".

Ganz anders bei elektronischen Texten, diese können auch von Dilettanten erfasst und veröffentlicht werden und das Internet ist übervoll von diesen Werken. Außerdem können elektronische Texte immer wieder umgeschrieben, neu strukturiert und vom Layout her verändert werden können.

Top

   
Elektronische Texte
 
Kann man's ordentlich lesen oder nicht, das ist hier die Frage.
Zu kleine Schriften sind ebenso schlecht

wie diese zu bunt-scheckigen Textteile.
Oder Textteile
mit merkwürdig un-abgestimmten Layouts.
TEXTE IN BLOCK-BUCHSTABEN STÖREN SCHRIFTBILD und Lesbarkeit.
 

Bei elektronisch dargestellten Texten gibt es kaum technische Einschränkung hinsichtlich Gestaltung und Farbgebung. Die Texte mit ihren Farben, Schriftarten und -größen sind der Mechanik und Chemie weitgehend entwachsen und gehorchen nur mehr der Optik. Insgesamt gibt es die unglaubliche Anzahl von 3x1014 Kombinationsmöglichkeiten der RGB Farben mit den Schriftarten, aber nur wenige Dutzend davon liefern brauchbare Ergebnisse. 

Die Lesbarkeit von Zeichenfolgen hängt stark von den Kontrasten der Zeichen und dem Hintergrund ab. Häufig veränderte Textfarben, wechselnde Schriftgrößen, verschiedene Schriftarten oder gar blinkende Texte lassen den Leser bald entnervt aufgeben.

Der kundige Mediendesigner hat das Ziel ein einheitliches Schriftbild zu gestalten und auf bestimmte Elemente im Text aufmerksam zu machen. Der Erstling dagegen versucht verschiedenste Spielereien in seine Gestaltung einzubeziehen, um zu erproben was er bisher über Webdesign gelernt hat. Im Ergebnis macht es aber einen Riesenunterschied ob man einen Text lesbar gestaltet oder Farben und Formen der Texte ausprobiert.

Technisch kann praktisch jede Schriftgröße verwendet werden, doch ist eine Mindestgröße erforderlich. Winzige Schriftchen auf so genannten Designerhomepages machen zwar ein stimmiges Bild, sind aber oft absolut unleserlich.

Wie bei Zeitungen und Zeitschriften darf der Text nicht über die gesamte Bildschirmbreite laufen, sondern sollte in Spaltenbreiten mit etwa 60 Zeichen dargestellt werden. (Im hier vorliegenden Layout passen etwa 80 Zeichen in eine Zeile.)

Besonders bei exotischen Schriftarten ist Vorsicht geboten, denn diese werden nur bei Benutzern dargestellt, auf derem Rechner (zufällig) der passende Font installiert ist.

Das Attribut Unterstreichen im Text muss für Links reserviert bleiben, sonst entstehen so genannte Scheinlinks, die den Leser verwirren statt informieren.

Inzwischen sind fast alle elektronischen Texte in Form Hypertexten ausgeführt und daher nur auf dem Computer "lebensfähig". Beim Ausdrucken verlieren diese Texte ihre Interaktivität für immer.

Top

   
Systematische Kombinationen   Farbtexte und Textfarben I 

Eine systematische Kombination der RGB-Hauptfarben als Hintergrund- und Textfarbe sehen Sie hier:

 

 
Hintergrund Textbeispiele Textbeispiele Textbeispiele
Schwarz Schwarzer Text Weißer Text Grauer Text
Roter Text Gelber Text Mittelgrauer Text
Grüner Text Cyan Text Mittelgrauer Text
Blauer Text Magenta Text Hellgrauer Text
Weiss Schwarzer Text Weißer Text Grauer Text
Roter Text Gelber Text Mittelgrauer Text
Grüner Text Cyan Text Mittelgrauer Text
Blauer Text Magenta Text Hellgrauer Text
Rot Schwarzer Text Weißer Text Grauer Text
Roter Text Gelber Text Mittelgrauer Text
Grüner Text Cyan Text Mittelgrauer Text
Blauer Text Magenta Text Hellgrauer Text
Orange Schwarzer Text Weißer Text Grauer Text
Roter Text Gelber Text Mittelgrauer Text
Grüner Text Cyan Text Mittelgrauer Text
Blauer Text Magenta Text Hellgrauer Text
Gelb Schwarzer Text Weißer Text Grauer Text
Roter Text Gelber Text Mittelgrauer Text
Grüner Text Cyan Text Mittelgrauer Text
Blauer Text Magenta Text Hellgrauer Text
Grün Schwarzer Text Weißer Text Grauer Text
Roter Text Gelber Text Mittelgrauer Text
Grüner Text Cyan Text Mittelgrauer Text
Blauer Text Magenta Text Hellgrauer Text
Blau Schwarzer Text Weißer Text Grauer Text
Roter Text Gelber Text Mittelgrauer Text
Grüner Text Cyan Text Mittelgrauer Text
Blauer Text Magenta Text Hellgrauer Text
Magenta Schwarzer Text Weißer Text Grauer Text
Roter Text Gelber Text Mittelgrauer Text
Grüner Text Cyan Text Mittelgrauer Text
Blauer Text Magenta Text Hellgrauer Text

Top

   
Sinnvolle Farbgebung   Farbtexte und Textfarben II

Prinzipiell befriedigend lesbare Kombinationen von Hintergrund- und Textfarbe sehen Sie hier:

 

Farbbeispiel: Schwarzer Text auf weißem Hintergrund

Farbbeispiel: Roter Text auf weißem Hintergrund

Farbbeispiel: Blauer auf weißem Hintergrund

Farbbeispiel: Grüner Text auf weißem Hintergrund

Farbbeispiel: Brauner Text auf weißem Hintergrund

Farbbeispiel: Weißer Text auf schwarzem Hintergrund

Farbbeispiel: Gelber Text auf schwarzem Hintergrund

Farbbeispiel: Weißer Text auf blauem Hintergrund

Farbbeispiel: Gelber Text auf blauem Hintergrund

Farbbeispiel: Weißer Text auf rotem Hintergrund
Farbbeispiel: Gelber Text auf rotem Hintergrund
Farbbeispiel: Weißer Text auf grünem Hintergrund
Farbbeispiel: Gelber Text auf grünem Hintergrund

Farbbeispiel: Schwarzer Text auf gelben Hintergrund

Farbbeispiel: Blauer Text auf gelbem Hintergrund

Farbbeispiel: Weißer Text auf braunem Hintergrund
Farbbeispiel: Gelber Text auf braunem Hintergrund

Top

   
     
Eine Initiative von Actoid   Top | Home | ©