Größentyp mit Lucas-Sequenzen

Die Beziehung zwischen Text und dem Rest einer Seite ist eines der Schlüsselmerkmale jedes Designs. Rhythmus, Betonung und Ton sind ohne korrekt skalierten Typ beeinträchtigt. Allerdings ist die Auswahl der Textgrößen oft eine mühsame und frustrierende Erfahrung, da es keinen standardisierten Ausgangspunkt gibt, der uns darüber informiert. Aus diesem Grund greifen Webdesigner häufig auf die von Anwendungen angebotenen Standardoptionen zurück – 8pt, 10pt, 12pt, 14pt, 18pt – aus Mangel an einer besseren Lösung. Die bessere Lösung besteht darin, die Schriftgrößen nicht nach individueller Laune, sondern nach einem vorgegebenen System festzulegen. Ein System, das einfach zu verwenden, praktisch im Web zu implementieren und vor allem flexibel genug ist, um Designern die volle Bandbreite an Ausdrucksmöglichkeiten zu bieten. Stichwort: die Lucas-Sequenz.

Lucas-Sequenzen

Die Fibonacci-Folge – erstmals im Westen im 13. Jahrhundert von Leonardo Fibonacci aufgezeichnet – ist die folgende Menge von ganzen Zahlen: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987… ad infinitum Die Folge wurde vom bedeutenden französischen Mathematiker François Édouard Lucas aus dem 19. Jahrhundert nach Fibonacci benannt, der selbst eine ähnliche Folge erstellte, die er als Lucas-Zahlen bezeichnete: 2, 1 , 3, 4, 7, 11, 18, 29, 47, 76, 123, 199, 322, 521, 843… bis ins Unendliche Die Fibonacci-Folge und die Lucas-Zahlen sind beide spezifische Variationen der generischen Lucas-Folge. Lucas-Folgen und ganzzahlige Folgen im Allgemeinen waren für zahlreiche erfahrene Mathematiker Gegenstand lebenslanger Studien, daher fassen wir das Konzept wie folgt zusammen:

  1. Jede gegebene Zahl in der Folge ist die Summe der beiden vorhergehenden Zahlen, wie in dieser Formel beschrieben: n = n-1 + n-2
  2. Die ersten beiden Zahlen in der Folge – sogenannte Startnummern – werden willkürlich ausgewählt.

Warum eine Lucas-Sequenz zum Festlegen des Typs verwenden?

Lucas-Folgen, insbesondere in Form der Fibonacci-Folge, stehen in enger Beziehung zum Goldenen Schnitt, der sich in der Natur in Muscheln, Spinnennetzen, Wolkenformationen und zahlreichen anderen Naturwundern wiederholt. Es gibt starke Hinweise darauf, dass alles, was wir optisch ansprechend finden, auf die Beziehung dieser Form zum Goldenen Schnitt zurückzuführen ist. Noch wichtiger ist, dass Lucas Sequences uns einen skalierbaren Rahmen für die Satzgestaltung bietet, der sowohl anmutig als auch rhythmisch ist.

Bestimmung unserer ersten Samenzahl

Es gibt viele Debatten über die richtige Textgröße für eine Website. 12 Pixel sind immer noch am häufigsten, aber es ist nicht ungewöhnlich, dass man auch Größen zwischen 10 Pixel und 16 Pixel sieht. Dies ist im Wesentlichen darauf zurückzuführen, dass man nicht versteht, was Schriftmaße tatsächlich bedeuten. Seltsamerweise gibt es für diejenigen von uns, die an Standardisierung gewöhnt sind – oder zumindest Standardisierungsbestrebungen anstreben – kein Standardmaß für die Schriftgestaltung; Zwei verschiedene Schriftdesigner, die genau das gleiche Design in eine Schriftproduktionssoftware zeichnen, zeichnen es wahrscheinlich in unterschiedlichen Größen. Es überrascht nicht, dass die Unterschiede zwischen verschiedenen Schriftarten allzu häufig sind.

Die Antwort auf die Frage, wo man anfangen soll, ist ärgerlich einfach; Unsere Standardtextgröße ist 1em, was bedeutet, dass unsere erste Startnummer 1 ist. Die Verwendung von 1em als Ausgangspunkt bietet eine Reihe wichtiger Vorteile: Als relative Maßeinheit eignet sich ein Em gut für responsives Design. Durch die Verwendung von ems und Vielfachen von ems können wir die Größe unseres gesamten Schemas ändern, indem wir die Grundschriftgröße ändern. Schließlich passt es konzeptionell gut zu unserer Lucas-Folge und wird uns an die genaue ganzzahlige Folge erinnern, wenn wir den Entwurf später noch einmal überdenken müssen. Es ist grundsätzlich nichts Falsches daran, Prozentsätze anstelle von Ems oder sogar Pixeln oder Punkten zu verwenden, aber das Em ist höchstwahrscheinlich die Zukunft des Webdesigns, also können wir uns genauso gut daran gewöhnen.

Bestimmung unserer zweiten Samenzahl

Zur Bestimmung unserer zweiten Samenzahl stehen uns zahlreiche Strategien zur Verfügung. Einige Designer haben eine bestimmte Vorliebe und würden sich für 1,2em oder ähnliches entscheiden. Andere Designer, die die Mystik des Goldenen Schnitts genießen, würden vielleicht gerne 1,618em verwenden. Eine praktischere Lösung besteht darin, die zweite Startnummer anhand der Zeilenhöhe des Fließtexts zu bestimmen. Da die Zeilenhöhe jedoch normalerweise durch die Länge der Zeile bestimmt wird und die Zeilenlänge durch ein Raster bestimmt wird, eignet sie sich besser für den Druck oder für nicht responsives Webdesign. Weil wir in die Zukunft blicken und die Zukunft reaktionsfähig ist, wird es für uns nicht funktionieren. Übrig bleibt uns, teils durch einen Eliminierungsprozess, teils aufgrund seiner Angemessenheit, die x-Höhe des Typs. Oder genauer gesagt, das Verhältnis der x-Höhe zum Rest der Glyphe. Ein Merkmal guten Designs ist die Wiederholung von Schlüsselelementen. Die Übertragung der Proportionen der Schrift auf die gesamte Seite ist eine großartige Gelegenheit, sowohl die Arbeit des Schriftgestalters zu würdigen als auch unserem Design etwas vom Charakter der Schrift zu verleihen.

Finden unserer x-Höhe

Um die x-Höhe Ihrer Schriftart zu ermitteln, müssen wir etwas wie Photoshop oder Illustrator öffnen und Text hinzufügen, der eine Oberlänge (z. B. „d“) und den Buchstaben „x“ enthält. Wenn Sie einen Bitmap-Editor wie Photoshop verwenden, stellen Sie den Text so groß wie möglich ein, um sicherzustellen, dass Sie ein genaues Ergebnis erhalten. In diesen Beispielen habe ich die Schriftart auf 500pt eingestellt, um sie messen zu können. Als nächstes messen Sie die Höhe von der Oberlänge bis zur Grundlinie und die Höhe von der Oberkante des x bis zur Grundlinie.

Lesen:  Die 9 wichtigsten Trends in der Dentalbranche im Jahr 2024

Wenn Sie das Glück haben, Zugriff auf eine gute Schriftdesign-Software zu haben, können Sie natürlich einfach die von Ihnen verwendete Schriftdatei öffnen und die X-Höhe und Oberlängenhöhe ablesen.

Teilen Sie nun die x-Höhe durch die Oberlängenhöhe, um die x-Höhe als Prozentsatz des Ganzen zu ermitteln: x-Höhe / Oberlängenhöhe * 100 = zweite Startnummer. Im Fall der Schriftart im Beispiel (Museo Slab) Das Ergebnis ist: 253 / 353 = 0,71671388 oder 0,716em. Warum messen wir nicht von der Oberkante der Oberlänge bis zur Unterkante der Unterlänge? Weil Zeichen in der Regel nicht sowohl eine Ober- als auch eine Unterlänge haben (eine gelegentliche Ausnahme ist der Buchstabe „f“) und daher die Beziehungen innerhalb der Formen, aus denen sich das Schriftdesign zusammensetzt, auf der Beziehung zwischen der x-Höhe und einem längeren Stiel basieren. Es ist möglich, stattdessen die Unterlänge zu messen, aber da die Versalhöhe (die Höhe der Großbuchstaben) normalerweise sehr nahe an der Oberlänge liegt, bevorzuge ich das. Wenn Sie feststellen, dass Sie eine Schriftart mit einer dominanteren Qualität verwenden – zum Beispiel dem Kontrast in der Dicke verschiedener Striche – möchten Sie möglicherweise diesen Wert anstelle des Verhältnisses von Oberlänge zu x-Höhe verwenden. Die Entscheidung, wie Sie zu Ihrer zweiten Startzahl gelangen, ist eine der wichtigsten Designentscheidungen, die Sie treffen müssen, aber es ist nichts, worüber Sie sich den Kopf zerbrechen müssen; Wenn Sie möchten, wählen Sie eine Zahl aus dem Hut und machen Sie weiter, denn die guten Dinge kommen noch. Es ist erwähnenswert, dass Sie eine Zahl erhalten, die größer als eins ist, wenn Sie die Gleichung umdrehen und die Oberlängenhöhe durch die x-Höhe dividieren. In diesem Fall wird Ihre Sequenz steiler und etwas dramatischer.

Erstellen unserer Sequenz

Wir haben also unsere beiden Startzahlen: 1em und 0,716em und wir haben die Formel n = n-1 + n-2: 1 + 0,716 = 1,716
0,716 + 1,716 = 2,432
1,716 + 2,432 = 4,148
usw. Was zu folgender Reihenfolge führt: 1, 0,716, 1,716, 2,432, 4,148, 6,58, 10,728, 17,308, 28,036… bis ins Unendliche

Der Designteil

Bisher haben wir uns durch einige grundlegende, aber nützliche Mathematikarbeiten gekämpft und sind zu einer Sequenz gelangt, die uns einen Größenbereich von 1em bis 28,036em und bei Bedarf darüber hinaus bietet. Wir können diese Werte nun nacheinander als Schriftgrößen verwenden, um ein gut proportioniertes Schriftschema zu erstellen:

Lesen:  20 Pet-Startups mit vielversprechender Zukunft

Sie werden feststellen, dass wir mit p auf 0,716 und h4 auf 1 beginnen, obwohl dies sequentiell nicht korrekt ist. Der Grund dafür ist, dass h4 hierarchisch wichtiger ist als p. Unsere Lucas-Sequenz darf nicht die Hierarchie auf der Seite vorschreiben, sondern die Skalenbeziehungen verschiedener Elemente. Nur Ihr Inhalt kann die Hierarchie bestimmen. Da wir in unserer Sequenz nicht auf aufeinanderfolgende Werte beschränkt sind und frei wählen können, welche ganzen Zahlen wir verwenden, erreichen wir Rhythmus und Struktur immer mit derselben Sequenz. Auch wenn wir es sehr dramatisch angehen:

Genau die gleiche Lucas-Sequenz kann auch verwendet werden, um ein zurückhaltenderes, sachlicheres Schema zu erstellen:

Der Kern dieses Systems besteht darin, dass die Größenverhältnisse erhalten bleiben, die Hierarchie verhältnismäßig ist, dem Designer jedoch eine große Vielfalt zur Verfügung steht. Hier müssen Sie Ihr Geld verdienen: indem Sie die Größen auf der Skala auswählen, um Hierarchie und Betonung zu schaffen.

Flexibilität

Häufig wird die Schriftgröße nicht nur durch die Betonung bestimmt: Wenn es um ein Publikum mit Sehschwierigkeiten geht, treten Probleme bei der Zugänglichkeit auf; Die schiere Menge an Inhalten kann zu Einschränkungen führen. Möglicherweise müssen wir bei der Gestaltung eines fließenden Layouts im wahrsten Sinne des Wortes flexibel sein. Glücklicherweise bewältigt CSS diese Situation problemlos. Da wir für unsere Größen Ems verwenden, können wir unseren Typ mit unserer Lucas-Sequenz einrichten und dann das Ganze skalieren, indem wir eine Standardgröße für das Body-Tag festlegen, den Rhythmus unseres Designs beibehalten, aber die tatsächlichen Werte erhöhen oder verringern.

Beachten Sie in diesem Bild, dass die Größen p, h2 und h1 gleich bleiben und alle aus unserer Sequenz stammen. Es ist die Variation der Schriftgröße des Body-Tags (0,8 em links und 1,4 em rechts), die kaskadiert nach unten führt und völlig unterschiedliche Ergebnisse erzeugt.

Endlich

So abhängig dieses System auch von der zugrunde liegenden Mathematik ist, ist es wichtig zu erkennen, dass Design nicht auf eine Reihe von Gleichungen reduziert werden kann. Diese Methode zur Größenbestimmung von Schriften gibt Ihnen eine Struktur, mit der Sie arbeiten können, und hilft Ihnen, gut proportionierte Schriftschemata zu erstellen. Es liegt jedoch an Ihnen als Designer, das System als Werkzeug und nicht als Krücke zu verwenden. Die Noten und Tonleitern in der Musik, sogar im Jazz, können auf eine Reihe von Gleichungen reduziert werden, die ihre Beziehung beschreiben, aber es braucht jemanden wie John Coltrane, um diese Beziehungen zum Leben zu erwecken.

Aktuelle Artikel:

Empfohlen