Lucas-Folgen in der Typographie

Ein Artikel von .
Sonnenblume mit Fibonacci Spiralen

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.

Verwandte Beiträge:

6 Antworten auf Lucas-Folgen in der Typographie

  1. Neil Montana sagt:

    Fibonacci Fibonacci Fibonacci … ich will es einfach den ganzen Tag sagen, denn es hat wirklich mit sovielen Dingen im Leben zu tun!!!

    Danke, ich habe viel über die Fibonacci Sequenz gelernt und über die Kraft des Lebens und weiter habe ich mich mit Da Vinics Arbeiten beschäftigt um zu verstehen wie ich das alles mit meinen Designs kombinieren kann. Jetzt hab ich es.

    Danke

  2. C3p°23 sagt:

    … C3p°23 bewertete diesen Artikel als hilfreich … ^^

  3. David Carson sagt:

    By itself it might seem like the Fibonacci sequence
    has everything to do with mathematics and nothing
    to do with design. It is just numbers, isn’t it?

    Like the Golden mean, the Fibonacci sequence is
    mathematically fascinating but aesthetically, its
    complexities are of minor practical importance.

  4. Harald Lesch sagt:

    Sieht gut aus! Bitte mehr davon.

  5. Dr No sagt:

    Sehr gut. Vielen Dank für den tollen Artikel!

  6. Marina sagt:

    Den Begriff Fibonacci habe ich schonmal vor Jahren aufgeschnappt. Habe nie verstanden, was diese Lucas Folgen mit Typografie zu tun haben. Danke für den informativen Artikel. Werde mal ein paar Versuche machen und später berichten.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>