August 28, 2012

Sonnenblume mit Fibonacci-Spiralen

Harmonisches Schriftbild mit Fibonacci- und Lucas-Zahlen

Rhythmus, Klang und Betonung in der Schriftgestaltung

Die Beziehungen zwischen unterschiedlichen Textelementen stellen eine Charakteristik jedes typographischen Designs dar. Durch verschiedene Größen werden einzelne Elemente hervorgehoben und voneinander getrennt. Durch die Mischung und Verhältnismäßigkeiten entsteht ein Gesamtbild.

Unter den einzelnen Elementen entsteht ein Rhythmus, eine Betonung und ein gemeinsamer Klang. Die korrekte Schrift-Strukturierung stellt dabei einen Glücksfall dar, wenn man über keinen Anhaltspunkt bei der Designentwicklung verfügt.

Schriften ausgewogen und ansprechend zu gestalten erfordert viel Aufwand, Feingespür und Erfahrung. Viele Webdesigner fallen an diesem Punkt zurück ins Print-Design und wählen die typischen Standardschriftgrößen, welche Sie aus ihrer Layoutsoftware gewöhnt sind: 8pt, 10pt, 12pt, 14pt, 18pt, 24pt usw.

Praktikabel, leicht und flexibel

Eine weitaus bessere typografische Möglichkeit besteht allerdings darin, Texte nicht länger einzeln festzulegen. Stattdessen werden Sie gemeinsam in einem Größenverhältnis zueinander bestimmt. Dies funktioniert am besten über ein mathematisches Verfahren, das in der Praxis sehr einfach anzuwenden ist.

Das Verfahren ist so flexibel, dass eine Vielzahl an Wiedergabemedien unterstützt wird, ohne dass für jedes neue Smartphone, aktuelle Konsolengenerationen oder mögliche Google-Brillen extra Aufwand entsteht. Das Verfahren stellt Webdesignern zahlreiche Ausdrucksmöglichkeiten zur Verfügung.

Was sind Lucas-Zahlenfolgen?

  • Eine Lucas-Zahlenfolge ist eine Reihe von ganzen Zahlen, bei denen jede Folgezahl (ab der dritten) die Summe der beiden vorhergehenden Zahlen ist.

Etwas ausführlicher: Was sind Fibonacci-Folgen?

Leonardo Fibonacci
Leonardo Fibonacci

Die Fibonacci Zahlenfolgen sind benannt nach Leonardo Fibonacci, der damit im Jahre 1202 mathematisch das Wachstum einer Kaninchenpopulation beschrieb.

  • Eine Fibonacci Zahlenfolge ist eine unendliche Folge von ganzen Zahlen, bei der sich die jeweils folgende Zahl durch Addition ihrer beiden vorherigen Zahlen ergibt:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987 usw … bis zur Unendlichkeit

  • Der französische Mathematiker François Édouard Lucas, entwickelte eine ähnliche Zahlenfolge. Er benannte die Fibonacci-Zahlenfolge nach Leonardo Fibonacci, die er in ein Verhältnis zur Lucas-Zahlenfolge setzte:

2, 1, 3, 4, 7, 11, 18, 29, 47, 76, 123, 199, 322, 521, 843 usw … bis zur Unendlichkeit

  • Die Fibonacci-Zahlenfolge und die Lucas-Nummern sind beide spezifische Varianten der allgemeinen Lucas-Zahlenfolge.

Fibonacci und der Goldene Schnitt

Ein Kachelmuster aus Quadraten, deren Kantenlängen der Fibonacci-Folge entsprechen.
Ein Kachelmuster aus Quadraten, deren Kantenlängen
der Fibonacci-Folge entsprechen.

Der Mathematiker und Naturphilosoph Johannes Kepler stellte fest, dass sich der Quotient zweier aufeinander folgender Fibonacci-Zahlen dem Goldenen Schnitt annähert. Viele Pflanzen weisen in der Anordnung ihrer Blätter und anderer Teile Spiralen auf, deren Anzahl und Anordnung durch Fibonacci-Zahlen gegeben sind.

Hintergrund: Die rationalen Zahlen, die den zugrunde liegenden Goldenen Schnitt am besten approximieren, sind Brüche von aufeinanderfolgenden Fibonacci-Zahlen.

Ananas mit Fibonacci Spirale
Ananas mit Fibonacci Spirale
Tannenzapfen mit Fibonacci-Struktur
Tannenzapfen mit Fibonacci-Struktur
Silberdistel mit Fibonacci-Spirale
Silberdistel mit Fibonacci-Spirale

Wachstum nach dem Goldenen Schnitt

Sonnenblume mit Fibonacci-Spiralen
Sonnenblume mit Fibonacci-Spiralen

Die Spiralen werden daher von Pflanzenelementen gebildet, deren Platznummern sich durch die Fibonacci-Zahl im Nenner unterscheiden und damit fast in die gleiche Richtung weisen.

Der Versatz der Blätter um das irrationale Verhältnis des goldenen Winkels sorgt dafür, dass nie Perioden auftauchen, wie es z. B. bei 1/4 der Fall wäre (0° 90° 180° 270° | 0° 90° usw.).

Dadurch wird der ungünstige Fall vermieden, dass ein Blatt genau senkrecht über dem anderen steht und sich so die jeweils übereinanderstehenden Blätter maximalen Schatten machen.

Der goldene Winkel
Der goldene Winkel

Viele weitere Pflanzen, Muscheln, Spinnweben, Wolkengebilde und weitere Naturwunder folgen in ihrem Wachstum dem Goldenen Schnitt. Daher stellten das Studium und die Erforschung von Lucas-Zahlenfolgen für viele bedeutende Mathematiker ein wichtiges Lebensziel dar.

„Die in schönen Dingen eine schöne Bedeutung entdecken, sind die Kultivierten. Für sie besteht Hoffnung.”

Oscar Wilde (1854-1900), irischer Schriftsteller

Zusammenfassend kann über Lucas-Zahlenfolgen festgehalten werden:

  1. Jede Nummer innerhalb der Zahlenfolge ist die Summe der zwei vorhergehenden Nummern: Formel: n = n-1 + n-2
  2. Die ersten beiden Nummern innerhalb der Zahlenfolge können beliebig festgelegt werden.

Lucas-Folgen für ästhetische Typographie einsetzen

Weshalb bietet es sich an, Lucas-Folgen als Grundlage zum Festlegen von Schriftgrößen zu verwenden?

Lucas-Zahlenfolgen, insbesondere in Form der Fibonacci-Zahlenfolge beruhen auf den Gesetzmäßigkeiten des Goldenen Schnitts. Der Goldenen Schnitt gilt als ein Grundmuster für Ästhetik. Er findet sich sowohl in den Kunstwerken der großen alten Meister vergangener Epochen als auch bei herausragenden Künstlern unserer Zeit wieder.

Dies ist ein Beleg dafür, dass alles was wir als sichtbar attraktiv wahrnehmen mit dieser natürlichen Beziehung, die im Goldenen Schnitt beschrieben ist, zusammenhängt. Zusätzlich stellen Lucas Zahlenfolgen ein skalierbares Bezugssystem dar, um Schrift anmutig und rhythmisch zu setzen.

Festlegen der ersten Lucas-Zahl

Unter Webdesignern gibt es keine einheitliche Meinung über die richtige Schriftgröße für den Content einer Website. Die meisten Websites verwenden für den Content-Bereich wahrscheinlich 12 Pixel. Relativ häufig findet man auf Websites aber auch ganz andere Größen. Schriftgrößen zwischen 10 und 16 Pixel sind nichts Ungewöhnliches.

Diese Größen-Angaben beruhen in erster Linie auf dem Mangel an Verständnis dafür, was Schriftgröße im Web tatsächlich bedeutet. Für viele, die sich gerade an die Verwendung von Pixel oder Punkt gewöhnt haben mag das vielleicht verwirrend klingen. Jeder Anwender hätte wahrscheinlich gerne einen Standard, um zu wissen wie groß beispielsweise 10 Pixel sind.

Die Zukunft der typographischen Maßeinheit

Zwei verschiedene Grafikdesigner entwerfen exakt das selbe Design und verwenden eine 10 Pixel Schrift. Trotzdem erhalten sie unterschiedliche Zeilenhöhen. Es gibt keinen allgemeingültigen Standard, da sich durch die reine Vielfalt aller einsetzbaren Schriften viel zu viele Schriften in ihrer Ober- und Unterlänge unterscheiden. Ein Beispiel:

Buchstabengrößen verschiedener Schriften
Buchstabengrößen verschiedener Schriften

Wie sollen wir also sinnvollerweise die erste Zahl unserer Zahlenfolge festlegen? Die Antwort ist sehr einfach: Unsere Standardgröße ist 1 „em”. ( em entspricht im Druckwesen der Breite eines Gevierts (engl. quad)) Durch die Verwendung von 1em erreichen wir eine Reihe von Vorteilen:

  • em ist eine relative Maßeinheit und dadurch gut geeignet für ein ansprechendes Design
  • Verschiedene Elemente, die mit „em” ausgezeichnet werden lassen sich durch eine Änderung der Basisgröße als komplettes Schema ändern.
  • Durch Lucas Zahlenfolgen werden wir daran erinnert ganze Zahlen zu verwenden, wenn wir das Design zu einem späteren Zeitpunkt anpassen.

Aufgrund dieser Vorteile stellt die Maßeinheit „em” die Zukunft der Webdesign Typographie dar.

Ermittlung der zweiten Lucasreihen-Zahl

Die Entscheidung darüber, wie wir die zweite Zahl unserer Lucas Reihe wählen ist die Schlüssel-Entscheidung, für ein stimmiges typografisches Erscheinungsbild.

Um die zweite Zahl festzulegen, gibt es nun mehrere Ansätze. Einige Designer haben bereits bestimmte typografische Vorstellungen und würden vielleicht 1.2 em als zweite Zahl festlegen. Da der Goldene Schnitt in etwa 1.618 em entspräche, wählen andere Typographen grundsätzlich dieses Maß als zweite Zahl.

Eine andere Möglichkeit besteht darin, den Zeilendurchschuss des Content-Textes zu ermitteln. (Wobei der Zeilendurchschuss häufig von der Gesamtzeilenlänge und die Zeilenlänge vom Gestaltungsraster bestimmt wird)

Die schönste Variante

Die schönste Möglichkeit, welche ich auch in diesem Beispiel verwende, stellt die Orientierung an der x-Höhe einer Schrift dar. (das ist der Abstand von der Grundlinie zur Oberkante der Minuskeln (Kleinbuchstabenhöhe).

Schön bei dieser Variante ist, dass durch die Orientierung an der x-Höhe eine Beziehung zur gesamten Schrift hergestellt wird. Eine Charakteristik von gutem Design ist auch die Wiederholung von Schlüssel-Elementen. Durch die Orientierung an den charakteristischen Schriftproportionen wird also eine Verbindung zur gesamten Schriftart geschaffen.

Eine gute Möglichkeit, die großartige Arbeit des Schriftgestalters zu bestätigen, sich inspirieren zu lassen und das eigene Design mit dem besonderen Etwas des jeweiligen Schriftcharakters hervorzuheben.

Die richtige Kleinbuchstabenhöhe finden

Die x-Höhe bestimmen
Die x-Höhe bestimmen

Um die richtige x-Höhe der jeweils verwendeten Schrift herauszufinden öffnet man entweder seine Schriftgestaltungssoftware und liest die Höhen einfach ab, oder man geht den manuellen Weg, indem man in Photoshop, InDesign oder Illustrator einen Text einfügt, der mindestens eine Oberlänge beinhaltet. z.B. die Buchstaben „d“ und „x”.

Die x-Höhe

  • Als Erstes wird die Höhe von der Grundlinie zur Höhe des Großbuchstabens („D”) gemessen.
  • Anschließend messen wir die Höhe der Grundlinie zur Oberkante vom Kleinbuchstaben „x”
  • Als nächstes wird die Höhe des Kleinbuchstaben durch die Höhe des Großbuchstabens geteilt, um das Größenverhältnis der x-Höhe als Prozentwert zu erhalten.
Die x-Höhe
Die x-Höhe

x-Höhe / Großbuchstaben-Höhe * 100 = zweite Lucasreihen Nummer

Die Schrift im Beispiel ist Adobe Garamond. Das Resultat unserer Berechnung lautet:

23 / 32 = 0.71875 em oder auf zwei Stellen hinter dem Komma gekürzt: 0.719 em

Wenn Sie die Zahlen falsch berechnet haben und etwa die Höhe der Unterlänge durch die x-Höhe teilen erhalten Sie eine Zahl > 1. Das Ergebnis wird damit noch dramatischer. Weicht aber von unserem eigentlichen Ziel ab, ein gut ausgewogenes Gleichgewicht der Schriftgrößen herzustellen.

Berechnen der Lucas-Folge

Unsere beiden Lucas-Zahlen lauten: 1em und 0.716em

Jetzt können wir einfach die allgemeine Lucasfolgen-Formel anwenden: n-1 + n-2:

In unserem Beispiel:

1 + 0.719 = 1.719
0.719 + 1.719 = 2.438
1.719 + 2.438 = 4.157
usw.

Beispiele für die Anwendung von Lucas-Zahlenfolgen in der Typographie

Als Ergebnis erhalten wir die folgende Zahlenreihe:

1, 0.719, 1.719, 2.438, 4.157, 6.595, 10.752, 17.347, 28.099, 45,446 usw … bis hin zur Unendlichkeit

Wir haben somit eine Zahlenreihe erhalten von 1em bis hin zu 45.446em und natürlich noch viel weiter, falls wir dies wünschen. Die errechneten Werte können wir nun darstellen. Als Ergebnis erhalten wir ein schön proportioniertes Schriftgrößenschema:

Fibonacci Folgen in der Typographie einsetzen

Obwohl wir eingangs unsere hierarchisch niedrigste Überschrift <h4> auf 1em gesetzt haben setzen wir in diesem Beispiel ausnahmsweise den <p> – Tag auf 0.716 und den Tag <h4> auf 1. Streng nach der Lucas-Reihenfolge betrachtet wäre dies eigentlich falsch. Wir haben uns in diesem Beispiel dafür entschieden, weil laut Syntax-Hierarchie <h4> weitaus wichtiger gewertet wird als das Element <p>. Die Lucas-Folge gibt uns einen Hinweis zu ästhetischen Skalierungs-Verhältnissen der verschiedenen Elemente zueinander.

Die Hierarchie kann allerdings nur der Inhalt bestimmen. Also unser eigentliches Thema, das dem Text als Anlass zugrundeliegt.

Da wir nicht darauf angewiesen sind, fortlaufende Werte für unsere Zahlenreihe zu nehmen, sind wir in der Lage, frei zu wählen, welche ganze Zahl wir einsetzen wollen. Mit dem beschriebenen Vorgehen nach der Lucas-Zahlenreihe erreichen wir immer einen schönen Rhythmus und eine ästhetische Ordnung. Selbst dann, wenn wir einen dramatischeren Versuch wagen:

Eine spannungsgeladene Variation unserer Lucas-Folge

Dramatischere Textordnung
Dramatischere Textordnung

Die gleiche Lucas Zahlenreihe kann allerdings auch verwendet werden um eine reserviert zurückgenommene und geschäftsmäßigere Darstellung zu erreichen:

Eine Corporate-Variation unserer Lucas-Folge

Corporate-Typographie
Corporate-Typographie

Das Grundprinzip der Lucas-Zahlenreihen bei der Festlegung von typografischen Werten besteht darin, die verschiedenen typografischen Maßstäbe miteinander in Bezug zu setzen. Die Abbildung der Text-Bausteine innerhalb der verschiedenen Proportionen sind durch einen gemeinsamen Nenner geregelt, ohne den Grafiker, Webdesigner oder Typographen einzuschränken. Ganz im Gegenteil.

Durch den Einsatz von Lucas-Zahlenfolgen erhalten wir die Möglichkeit einer gemeinsamen Ordnung und der gezielten Betonung. Und genau darum geht uns doch bei unserem Design.

Flexibilität durch saubere Planung

Die Verwendung von „em” als Einheit für die Schriftgrößen macht unser Design flexibel. Wir können es später beliebig und mit geringem Umfang ändern, erweitern oder anpassen.

Typographie im Web
Typographie im Web

Fällt Ihnen in diesem Bild auf, dass die Größen von <p>, <h2> und <h1> gleich sind und derselben Zahlenfolge entstammen? Es sind nur zwei verschiedene Varianten mit unterschiedlichen Schriftgrößen im Body-Tag (0.8 em auf der linken Seite und 1.4 em auf der rechten).

Die Eigenschaft der Basisgröße vererbt sich jeweils weiter. Heraus kommen zwei komplett unterschiedliche Ergebnisse.

Lucas-Folgen in der Typographie

Mein Fazit

Als Designer habe ich die Vorteile der Lucas Zahlenfolgen schätzen gelernt. Wobei ich ihre Anwendung in der Typographie selbst erst vor nicht allzu langer Zeit bei einem Freund aus Amerika kennengelernt habe.

An dieser Stelle erscheint es mir allerdings wichtig festzuhalten, dass Grafikdesign nicht auf simple Formeln reduziert werden kann. Man erhält kein gutes Design, indem man eine Reihe von Gleichungen aufstellt, Formeln anwendet oder Regeln befolgt. Zu einer ästhetischen Gestaltung gehört deutlich mehr: Wissen, Gefühl, Gespür und Erfahrung.

Die Methodik der Schriftgrößenfestlegung nach den Lucas- Zahlenfolgen gibt einen Hinweis, mit dem man weiterarbeiten, kann aber nicht muss. Die beschriebene Vorgehensweise kann helfen, gute und ausgewogene Schriftverhältnisse anzulegen, aber letztlich geht es um den Designer, der die Entscheidungen trifft und das System wie ein Werkzeug anwendet. Dabei wünsche ich viel Erfolg.

Eine Animation, welche den Blütenkelch einer Sonnenblume zeigt, deren Aufbau in die natürliche Geometrie einer Fibonacci-Spirale überblendet.
Sonnenblume mit Fibonacci-Spiralen

Über den Autoren

Stephan Bender

Meine Aufgabe besteht darin Qualität zu visualisieren und die Kommunikation von Menschen und Marken zu verbessern, damit die Botschaften so geschärft werden, dass sie bei der Zielgruppe einen optimalen Eindruck hinterlassen kann.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Weitere Artikel:

Subscribe now to get the latest updates!