Share
Die offensichtlichste typografische Frage in den Händen eines Designers lautet möglicherweise: "Welche Schriftarten sollte ich verwenden?" Die zweite Frage, die selten die Aufmerksamkeit bekommt, die sie erhalten sollte, lautet: "Welche Größe sollte ich meinen Typ festlegen?" Die Einrichtung einer modularen Skala ist der beste Weg, um die typografische Größe zu bestimmen. Sie kann tatsächlich dazu beitragen, Maße und Proportionen über das gesamte Seitenlayout zu bestimmen.
Während dieser Sitzung haben wir uns die Hierarchie angesehen. wie die Größe und andere Faktoren die visuelle Beziehung typografischer Elemente beeinflussen können. Wir haben uns kürzlich auch mit dem vertikalen Rhythmus, der visuellen Konsistenz von Abständen und Elementen auf einer Seite befasst. Dann haben wir das Problem, ein Grundlinienraster zu setzen, das mit dem Aufbau eines vertikalen Rhythmus zusammenhängt. Wir haben sogar darüber gesprochen, ems als Maßeinheit zu verwenden, zweimal in der Tat. Alle diese Aspekte der Typografie sind durch die grundlegende Präsenz von Größe, Wie genau entscheiden Sie also, wie groß Ihre typografischen Elemente sein sollen??
Der Begriff Modular Scale bezieht sich auf eine Reihe harmonischer Werte. Da jeder Wert eine Skala ist, ist dies ein Faktor der anderen und es könnte ungefähr so aussehen:
Wenn Sie diese Skala auf einige grundlegende typografische CSS anwenden, können wir Folgendes erhalten:
h1 Schriftgröße: 36px h2 Schriftgröße: 24px h3 Schriftgröße: 18px h4 Schriftgröße: 14px p Schriftgröße: 11px klein Schriftgröße: 9px
Sie können diese Werte als Teil der klassischen modularen Skala erkennen, die Robert Bringhust in Die Elemente des typografischen Stils veranschaulicht.
Eine modulare Waage ist wie eine musikalische Waage eine Reihe harmonischer Proportionen.
Robert Bringhurst
Wenn Sie sich an diese Skala halten und Ihre verschiedenen typografischen Kleinigkeiten auf die angezeigten Werte setzen, erhalten sie eine inhärente Schönheit. Proportionen, die seit Jahrhunderten für typografische Gestalter.
Das stimmt, Jahrhunderte.
Tatsächlich waren die Ursprünge der Erstellung einer typografischen Skala ebenso aus praktischen Gründen wie aus ästhetischen Gründen. In den berauschenden Tagen des Gießereisatzes war jede Buchstabenform als Metallblock (Sortierung) gegossen worden, und es war unpraktisch, zu teuer, ganze Zeichensätze jeder Schrift zu erstellen und aufzubewahren Größen.
Schriftsetzer haben sich daher im Laufe der Zeit auf eine nutzbare Größenordnung festgelegt, die harmonisch zusammenarbeitete.
Lassen Sie uns eine einfache Waage einrichten, die in unseren eigenen Projekten verwendet werden kann.
Wir müssen irgendwo anfangen, also beginnen wir mit einer signifikanten Basisnummer. unsere Basisschriftgröße. Ich habe die Gewohnheit, mit dem zu beginnen, was der Browser als Standard vorschreibt, also verwenden wir 16px als Basis. Tim Brown empfiehlt, mit der Schriftgröße zu beginnen, bei der Ihre Schrift am deutlichsten angezeigt wird - meistens sind dies 16px für Schriftarten, die für das Web gedacht sind.
(Sorry, das war das einzige Zitat, an das ich denken konnte Verhältnis.)
Nun müssen wir ein Verhältnis festlegen, einen Wert, mit dem wir unseren Basiswert exponentiell multiplizieren und dividieren. Dieses Verhältnis kann beliebig sein. Wenn Sie eine Skala haben, die bestimmte Schönheit in Ihren Augen hält, ist das in Ordnung.
Sie könnten beispielsweise den goldenen Abschnitt 1: 1.61803398875 wählen. Dieses Verhältnis hat seine Wurzeln im Gewebe der Welt um uns herum und wird seit jeher von Designern und Architekten genutzt, um ästhetische Harmonie zu strukturieren.
Um zu verdeutlichen, was einfach vor sich geht, verwenden wir 1: 2 (das Musical unter Ihnen, was übrigens nicht ich ist, wird dies als Oktave erkennen). Beginnend mit 16 erhalten wir Folgendes:
16 * 2 = 32 32 * 2 = 64 64 * 2 = 128
Und das kann exponentiell weitergehen. Um unsere Skala nach unten festzulegen, teilen wir:
16/2 = 8 8/2 = 4 4/2 = 2
Dies gibt uns die Anfänge unserer Skala:
die wir auf unser einfaches typografisches CSS anwenden können:
h1 Schriftgröße: 256px h2 Schriftgröße: 128px h3 Schriftgröße: 64px h4 Schriftgröße: 32px p Schriftgröße: 16px klein Schriftgröße: 8px
Tolle Arbeit bisher!
Diese Skala ist ziemlich extrem. Es funktioniert, aber für Messungen auf einer Webseite ist es ziemlich unnachgiebig. Um uns mehr Flexibilität zu gewähren, geben wir uns mehr Optionen, indem wir der Skala eine zweite Dimension hinzufügen. Dieser Prozess wurde von Tim Brown in seinem A List Apart-Artikel "More Meaningful Typography" beschrieben.
Wähle eine andere Nummer. Eine beliebige Anzahl, sofern dies für Ihr Design von Bedeutung ist. Wir haben bereits 16 verwendet, da es sich hierbei um unsere Basisschriftgröße handelt. Machen Sie sich also ein Kompliment, indem Sie 95 hinzufügen, die Breite einer einzelnen Spalte, die ich in diesem fiktiven Layout mit einer Breite von 1.140 Pixeln verwenden werde.
Spitze: Es kann viele Aspekte Ihres Designs geben, die von Bedeutung sind. Maße und Abmessungen, die im gesamten Layout mitschwingen. Experimentieren Sie mit den von Ihnen gewählten Werten. Vielleicht sind Sie überrascht, welche Proportionen verwendet werden Gefühl Recht.Bei Anwendung des Verhältnisses von 1: 2 bis 95 erhalten wir die folgende Skala:
11,875 / 2 = 5,938 23,75 / 2 = 11,875 47,5 / 2 = 23,75 / 95/2 = 47,5 / 95 * 1 = 95/95 * 2 = 190, 190 * 2 = 380, 380 * 2 = 760
Wir haben also jetzt zwei Skalen, die beide auf demselben Verhältnis basieren und daher recht gut miteinander koexistieren:
In der Tat können wir sie kombinieren, um uns eine Skala wie folgt zu geben:
760.000 512.000 380.000 256.000 190.000 128.000 95.000 64.000 47.500 32.000 23.750 16.000 11.875 8.000 5.938 4.000 2.969 2.000 1.485
Dies füllt die Lücken für uns und lässt unsere Waage weitaus vollständiger wirken.
Wir haben bereits erwähnt, wie wir unsere Skala auf grundlegende typografische Elemente anwenden können. Aktualisieren wir das also.
h1 Schriftgröße: 64px h2 Schriftgröße: 47,5px h3 Schriftgröße: 32px h4 Schriftgröße: 23,75px p Schriftgröße: 16px klein Schriftgröße: 8px
Da gehen wir, nicht ganz so intensiv. Unsere Skala kann sich auch für andere typografische Merkmale eignen, wie z. B. die Zeilenhöhe und damit das gesamte Grundlinienraster:
p Schriftgröße: 16px; Zeilenhöhe: 23,75px; Marge: 0 0 16px 0;
Wir können dies alles verbessern, indem wir auch die ems verwenden und die Beziehungen und Proportionen ordentlich gestalten:
Körper Schriftgröße: 100%; p font-size: 1em; Zeilenhöhe: 1.484; Marge: 0 0 1em 0;
Wenn Sie an diesem Punkt mit den Berechnungen zu kämpfen haben, besuchen Sie die modulare Skala von Tim Brown. Sein Rechner berechnet automatisch die Pixel- und Em-Werte für Sie.
Hier sehen Sie, wie unsere Skalierung in Bezug auf Ems (also relativ zur Basisschriftgröße) aussieht:
64 47,5 32 23,75 16 11,875 8 5,938 4 2,969 2 1,484 1 0,742 0,5 0,371 0,25 0,186 0,125 0,093
Nachdem wir uns mit den grundlegenden Typelementen unserer Seite beschäftigt haben, lenken wir unsere Aufmerksamkeit auf eine Struktur. Ein einfacher Stapel von zwölf Spalten ist einfach zu gestalten:
.Spalte-1 Breite: 95px; * .spalte-2 Breite: 190px; * .spalte-3 Breite: 285px; .spalte-4 Breite: 380px; * .spalte-5 Breite: 475px; Spalte 6 Breite: 570px; Spalte 7 Breite: 665px; Spalte 8 Breite: 760px; * .column-9 width: 855px; Spalte 10 Breite: 950px; Spalte-11 Breite: 1045px; Spalte 12 Breite: 1140px; / * in einem Fluidnetz würden diese in% -Werte umgerechnet * /
Die mit einem Sternchen gekennzeichneten Werte erkennen Sie an unserer modularen Skala.
Jede Säule muss auch schwimmen, und um die Dachrinnen zu formen, können wir jedem von 1em (16px, das auch in unserer Skala enthalten ist) eine Auffüllung hinzufügen.
/ * ein natürliches Box-Layout-Modell auf alle Elemente anwenden * / *, *: before, *: after -moz-box-size: border-box; -webkit-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box; .column float: left; Polsterung: 0 1em;
Sehr schnell haben wir die Grundlagen für ein solides Raster plus Typografie geschaffen, die alle auf einer harmonischen Skala basieren.
Die Kombination von Rastern mit Typografie kann ein komplexes Geschäft sein. Die Berechnung der Harmonie kann manchmal sehr unintuitiv erscheinen! Wenn Sie jedoch mit einigen grundlegenden Grundlagen begonnen haben, können Sie feststellen, dass Sie eine Webseite nicht ohne Bedeutung für die Beziehungen auf Ihren Seiten gestalten können.
Was wir bisher gemacht haben, ist ein guter Anfang, aber es gibt noch viel zu tun und viel Feinabstimmung. Das Grundlinienraster kann zum Beispiel von diesem Punkt aus etwas komplizierter sein, daher werden einige der Anfangswerte möglicherweise nicht funktionieren. Außerdem möchten wir wahrscheinlich, dass unser Raster flexibel ist, so dass die Spalten die ursprünglich verwendeten festen Werte nicht beibehalten. Aus diesem Grund können Sie feststellen, dass unsere horizontalen Werte nicht immer mit unseren vertikalen Messungen funktionieren.
Es gibt etablierte Skalen und Gitter, die sich im Laufe der Jahrhunderte bewährt haben. Warum versuchen Sie nicht, einige davon auf Ihre eigene Arbeit anzuwenden? Haben Sie jemals eine bewusst modulare Skala für Ihre Arbeit angewendet? Wenn nicht, wie entscheiden Sie sich für Ihre typografische Größenbestimmung? Gibt es spezifische Probleme, auf die Sie mit Waagen stoßen? Lass uns deine Gedanken in den Kommentaren hören!
Accentsconagua