Share
Typografie ist ein grundlegendes Element in jedem Design, an dem Sie arbeiten. Der Hauptgrund für das Vorhandensein von Websites besteht in erster Linie darin, Informationen anzuzeigen und diese Informationen von Benutzern zu verwenden, die auf sie stoßen. Eine Website kann viele andere Elemente enthalten, im Kern geht es jedoch um den Inhalt. Dieser Inhalt muss leicht zu lesen, zu verstehen und zu verstehen sein, und eine solide typografische Basis wird nur dazu beitragen.
Der Einstieg in die Typografie ist möglicherweise einer der zugänglicheren Teile des Lerndesigns. Dies liegt daran, wie einfach es ist, den Text zu ändern und mit dem Text herumzuspielen, um sofort Ergebnisse zu erzielen. Die Verfeinerung Ihrer Typografiefähigkeiten, sodass Sie etwas entwerfen können, das gut funktioniert und effektiv ist, für die Benutzer lesbar und nützlich ist, ist jedoch eher eine Herausforderung.
Zunächst erhalten wir einige grundlegende technische Begriffe aus dem Weg. Dies ist nur ein kleiner Überblick über einige der häufigsten Ausdrücke, auf die Sie bei der Arbeit mit Typografie stoßen weitaus umfangreichere Handbücher im Internet oder in Büchern, wenn Sie mehr darüber erfahren möchten.
Dieser erste Begriff ist derjenige, der die meisten Leute auslöst. Schrift beschreibt die entworfenen Letterforms. EIN Schriftart ist das Fahrzeug, das die Schrift enthält. Sie laden ein Font-Paket herunter und installieren es, um eine Schriftart innerhalb Ihres Designs zu verwenden.
Sie können sich sicher vorstellen, dass es zwei Haupttypenklassifizierungen gibt - Serif und Sans Serif. Serif Schriftarten wirken in der Regel etwas klassischer, oft mit kleinen Flicks oder Verzierungen (Serifen), bei denen die Buchstabenformen enden.
Beispiele für Serifenschriften sind Times New Roman, Baskerville und Georgia. Serifenlos Schriften fehlen die Serifenverzierungen, sie wirken eher modern. Beispiele für serifenlose Schriften sind Helvetica, Arial und Futura.
Untersuchen wir kurz die Anatomie einer Buchstabenform.
Der Ascender ist ein beliebiger Teil eines Kleinbuchstabens, der über die x-Höhe des Buchstabens hinausragt. Sie werden mit Buchstaben vertraut sein, die aufsteigende Werte haben, wie b, d, f, h, k, l.
Ein Abstieg ist ein beliebiger Teil eines Kleinbuchstabens, der unter die x-Höhe des Buchstabens reicht. Zum Beispiel g, j, p, q, y.
In einem Brief ist ein Zähler der gekrümmte, geschlossene (oder teilweise geschlossene) negative Raum in einem Brief. Übliche Buchstaben mit Zählern sind b, d, e, o, s.
Wie bereits erwähnt, handelt es sich bei Serifen um die zusätzlichen Extras und Verzierungen, die Sie erkennen können, wenn Sie zwischen serifen- und serifenlosen Schriftarten unterscheiden.
Die Grundlinie ist eine unsichtbare Linie, auf der alle Charaktere sitzen. Diese Grundlinie kann zwischen verschiedenen Schriftarten stark variieren, ist jedoch normalerweise immer innerhalb einer einzelnen Schriftart konsistent.
Die Kappenhöhe ist der Abstand von der Grundlinie bis zum oberen Rand der Großbuchstaben.
Die x-Höhe ist die Höhe des Hauptteils der Kleinbuchstaben (oder zumindest die Höhe des Kleinbuchstaben x, daher der Name). Diese Höhe umfasst nicht die Höhe zusätzlicher Auf- oder Abstiegshilfen.
Eine Glyphe ist ein einzelnes Zeichen in einer Schrift. Dazu gehören alle Symbole oder Buchstaben bis hin zu zusätzlichen Glyphen, die Ihnen möglicherweise zur Verfügung stehen und nicht mit den bekannteren oder verwendeten Symbolen oder Buchstaben übereinstimmen.
… Sie sollten über Folgendes nachdenken:
Wenn Sie mit Typografie arbeiten (und das klingt offensichtlich), sollten Sie die Größe des Textes berücksichtigen, mit dem Sie arbeiten werden.
Bei jedem Design-Trend gibt es auch Trends, wie klein oder groß der Text sein soll. Denken Sie zum Beispiel über das beabsichtigte Publikum nach; Ist Ihr Publikum ein jüngeres oder älteres Publikum, benötigen Sie eine größere Textgröße??
Denken Sie auch darüber nach, wie sich die Textgröße auf das Design Ihrer Website auswirkt. Möchten Sie, dass der Fokus auf die Typografie gerichtet ist, oder haben Sie andere Verzierungen und Designelemente, die Sie einbeziehen möchten, die die Art und Weise beeinflussen können, in der die Typografie im Design sitzt??
Der Kontrast beeinflusst die Lesbarkeit eines Textblocks enorm. Wenn wir über Kontrast sprechen, sollten Sie zwei Punkte beachten.
Erstens möchten Sie sicherstellen, dass der Kontrast zwischen Text und Hintergrund stark genug ist, um wahrnehmbar zu sein. Denken Sie hier über die Barrierefreiheit nach. Gehen Sie zurück zu Farbzugänglichkeit im Design. Dies gilt auch für Ihren Text. Wenn Sie sich nicht sicher sind, ob Ihr Text genügend Kontrast hat oder nicht, sollten Sie ein Hilfsmittel wie das Kontrastverhältnis von Lea Verou verwenden.
Sie müssen auch die von Ihnen getroffenen Schriftarten berücksichtigen. Viele Schriftarten mit sehr dünnen Schriftstärken werden bei bestimmten Größen möglicherweise nicht richtig angezeigt und sind für größere Schriftarten oder Anzeigenschlagzeilen nützlicher. Stellen Sie außerdem sicher, dass die von Ihnen gewählten Schriften oder Schriftarten eine gute Browser- und Betriebssystemunterstützung bieten. Einige Schriftarten und Schriften funktionieren zwar auf einer Plattform gut, sehen aber auf einer anderen sehr schlecht aus.
Wenn Sie mit Typografie arbeiten, möchten Sie, wie bei jedem anderen Teil Ihres Designs, sicherstellen, dass Sie genügend Platz zum Atmen lassen und der Inhalt für sich selbst sprechen kann.
Der Inhalt Ihrer Website ist das zentrale Erlebnis, das Ihren Benutzern geboten werden muss. Abgesehen von anderen Gestaltungselementen alle Benutzer Ja wirklich Muss sehen, ist der Inhalt. Scheuen Sie sich deshalb nicht, dem Inhalt mehr Platz zu geben und zuzulassen, dass Ihr Inhalt mehr spricht.
Negativer Raum ist der Raum oder die Lücken, die um Elemente eines Entwurfs verbleiben. Scheuen Sie sich nicht, diesen negativen Bereich um Ihren Inhalt herum zu lassen.
Vergessen Sie auch nicht den Platz um jeden Teil Ihres Textes. Achten Sie auf eine großzügige Zeilenhöhe, durch die Ihr Text nicht beengt und schwieriger zu lesen ist. Als allgemeine Regel (obwohl Sie gerne damit spielen können) sollte eine Zeilenhöhe von mindestens 140% bis 160% der Textgröße gut funktionieren und eine gute Balance für Ihren Text bieten.
Eine typografische Hierarchie bezieht sich darauf, wie der Inhalt in Ihrem Design angeordnet ist.
Das Erstellen einer guten Inhaltshierarchie beginnt am Anfang, wenn Sie daran arbeiten, eine gute Struktur in Ihrem Inhalt zu erstellen. Die typografische Hierarchie arbeitet dann mit Ihrem Inhalt - von Überschriften über normale Absätze bis hin zu allen Teilen Ihres Inhalts, die Sie hervorheben möchten -, um eine Struktur zu bilden, in der Benutzer leicht navigieren können.
Die Auswirkungen einer Hierarchie auf Ihr Design können enorm sein. Sie sollten Ihre Benutzer auf die Suche nach den gewünschten Inhalten so einfach wie möglich machen. Eine solide Hierarchie wird nur positive Auswirkungen haben.
Sie können eine gute, visuelle, typografische Hierarchie auf verschiedene Weise erstellen, z. B. die Verwendung von Farbe oder unterschiedlichen Textgrößen, um den Inhalt hervorzuheben und zu strukturieren. Alle vorherigen Tipps helfen Ihnen dabei, eine bessere typografische Hierarchie zu erstellen, auch wenn dies in der Praxis immer eine Rolle spielt.
Wir werden Web-Fonts später in dieser Serie ausführlicher besprechen, aber das Folgende sollte ein solides Intro in die Möglichkeiten von Web-Fonts sein.
Heutzutage haben wir das große Glück, dass wir viele Möglichkeiten haben, Webfonts auf unseren Websites zu implementieren. Durch die üblichere Verwendung von Webfonts im Web (die durch eine bessere Unterstützung durchgängiger Browser unterstützt wird) können wir einfallsreicher sein In den typografischen Stilen und Designs können wir unsere Designs berücksichtigen.
Neben der Möglichkeit, Ihre eigenen Schriftarten mit @ font-face zu hosten, stehen Ihnen zahlreiche Online-Dienste zur Verfügung, mit denen Sie online mehr Schriftarten verwenden können. Dazu gehören:
und viele, viele mehr. Sogar Websites wie FontShop oder MyFonts (die früher nur auf den Verkauf von Desktop-Schriftarten beschränkt waren) treten nun auf den Markt der Web-Schriftarten und bieten Ihnen herunterladbare Schriftarten an, die Sie mit der @ font-face-Technik verwenden können.
Nachdem wir uns mit den Grundlagen der Typografie beschäftigt haben, werfen wir im nächsten Artikel einen Blick auf den vertikalen Rhythmus. Vergessen Sie nicht, dass Sie auch in unsere laufende Sitzung The A-Z of Web Typography eintauchen können, um mehr über diese Punkte zu erfahren.
Accentsconagua