Schlüsselfaktoren der responsiven Web-Typografie

7

Es heißt „Beurteile ein Buch niemals nach seinem Einband”, aber Untersuchungen zeigen, dass ein Online-Benutzer 50 Millisekunden braucht, um zu entscheiden, ob er auf Ihrer Website bleiben soll oder nicht.

Eine weitere Studie von Stanford, die die Glaubwürdigkeit des Internets untersuchte, ergab, dass 75 % der Benutzer zugeben, dass sie ihr Urteil über die Glaubwürdigkeit eines Unternehmens auf der Grundlage des Designs ihrer Website fällen. Großartige Web-Typografie ist das Tor zu mehr Geschäftsanfragen und anschließenden Conversions.

Es versteht sich von selbst, dass Informationen ansprechend und wirkungsvoll dargestellt werden müssen. Das Problem ist jedoch, dass es eine große Vielfalt an mobilen Geräten gibt und die Typografie daher für alle diese Plattformen geeignet sein muss.

Wie nutzen wir also die Webtypografie am besten?

1 Die vernünftige Verwendung von Schriftarten stellt sicher, dass die Typografie ansprechend und dennoch effektiv ist

Seit der Einführung der Font Face-Funktion begrüßten Webdesigner die Freiheit, verschiedene Schriftarten in ihren Designs zu verwenden. Dies stand in krassem Gegensatz zu der früheren Ära, als nur websichere Farben verwendet wurden.

Da ihnen viele Schriftarten zur Verfügung stehen, müssen Designer wissen, wie sie richtig verwendet werden. Responsive Webdesign wird von den meisten Websites verwendet und hat dem Spiel mit Typografie, die jetzt für verschiedene Arten von Geräten und entsprechenden Bildschirmgrößen gestaltet wird, Grenzen gesetzt. Daher müssen Webdesigner vorsichtig sein, wenn sie mehrere Schriftarten in einem responsiven Webdesign-System kombinieren. Verwenden Sie nicht zu viele Schriftarten für eine Website. Behalten Sie es lieber bei einem Satz von drei. Es sorgt für ein saubereres und effektiveres Webdesign. Vermeiden Sie gleichzeitig die Verwendung sehr beliebter Schriftarten, da dies Ihrer Seite möglicherweise keinen Vorteil gegenüber anderen verschafft.

Fallstudie: Checkout vox.com. Diese Seite kombiniert mühelos zwei Sans-Serif-Schriftarten. Sie verwenden Balto für alle ihre Schlagzeilen, Alright Sans für den Haupttext, abgesehen von Harriet, die intern über die Website verteilt ist. Das resultierende Erscheinungsbild ist sauber und elegant.

Im Gegenteil, sieh dir die Angelfire-Site an. Diese Seite enthält mehrere Schriftarten und sieht schäbig und unprofessionell aus.

2 Markieren Sie Ihre Schlagzeilen

Studien zur Web-Typografie haben gezeigt, dass die Typografie einer Website ihre Schlagzeilen hervorhebt. Dies führt dazu, dass Ihre Webbesucher mehr Zeit auf Ihrer Website verbringen. Um dies zu erreichen, verwenden Sie Glyphen und Ligaturen, um Ihren Überschriften ein einzigartiges Aussehen zu verleihen.

Ligaturen sind Buchstaben, die scheinbar miteinander verbunden sind. Beispielsweise werden die Buchstaben f und i, die den ersten Teil des Wortes Fisch bilden, in einer Schrift zu „fi” zusammengefügt. Sie können Ligaturen einfach über die Schriftart-Funktionseinstellungen Ihres Browsers hinzufügen oder indem Sie mit den Funktionen „Textwiedergabe – Lesbarkeit optimieren” arbeiten. Firefox hat bereits Standardligaturen. Die Verwendung einer bestimmten Kombination von Ligaturen in bestimmten Schriftarten kann Ihrem Webdesign Schönheit und Stil verleihen. Ligaturen können in den Menüs Text, Type oder Open Type der Seitenlayout-Software ein- oder ausgeschaltet werden. Die Software sorgt für das automatische Einfügen von Ligaturen dort, wo die zugehörigen Buchstaben zusammenkommen.

Fallstudie: Besuchen Sie diese Website und Sie können leicht sehen, wie elegant ihre Ligaturen aussehen. Diese wunderschön gestalteten Überschriften würden, wenn sie zu Ihrer Website hinzugefügt werden, definitiv ihr Erscheinungsbild verbessern und Ihren Zuschauern ein besseres Benutzererlebnis bieten.

3 Bringen Sie Ihre Website dazu, mit ihrem Publikum zu sprechen, indem Sie Schriftarten in verschiedenen Größen und Farben angemessen verwenden

Wie aus der obigen Abbildung ersichtlich, müssen wir die Schriftarten auswählen, die sowohl auf mobilen Bildschirmen als auch auf Desktop-Bildschirmen deutlich gelesen und gesehen werden können. Der Stil, in dem Schriftarten auf Printmedien angezeigt werden, unterscheidet sich von dem, wie sie auf digitalen Medien angezeigt werden. Wir müssen die Schriftfamilie, den Stil und die Wirkung verstehen. Die Spezifikationen für Webfonts sind in den CSS-Spezifikationen des W3C angegeben, die angeben, dass Serif, Sans-Serif, Monospace, Fantasy und Cursive Schriftfamilien sind.

Zweitens wählen Sie die Schriftart entsprechend dem Thema oder der Kategorie Ihrer Website aus. Dadurch wird sichergestellt, dass Ihre Webseite Ihre Zielgruppe anspricht und das gewünschte Ergebnis erzielt. Serifenschriften können auch verwendet werden, um die Lesbarkeit des Textes zu erhöhen, was zusätzlich dazu beiträgt, die Wirkung der Stimme zu schärfen. Das Problem dabei ist, dass dieses Attribut von Serif auf Bildschirmen mit hoher Auflösung gut funktioniert, aber auf Bildschirmen mit niedrigerer Auflösung zu unerwünschten Ergebnissen führen kann. Es ist ratsam, für kurze Überschriften kunstvolle Schriftarten zu verwenden, während für den Fließtext eher zurückhaltende Schriftarten verwendet werden.

4 Das Modulieren des Takts ist wichtig für responsive Typografie

Die Zeilenlänge einer Webseite muss moduliert werden. Die Modulation des Takts oder der Zeilenlänge einer Schriftart trägt zur Reaktionsfähigkeit der Typografie bei. Responsive Designs umfassen reaktionsschnelle Änderungen der Schriftarten gemäß den Anforderungen unterschiedlicher Bildschirmgrößen. Daher ist dies ein Muss.

Der Begriff „Maß” oder „Zeilenlänge” steht im Zusammenhang mit der Lesbarkeit oder wie Menschen einen Text im Internet lesen. Das Erhöhen oder Verringern der Zeilenlänge der Schriftart ist eine Möglichkeit, responsive Webtypografie zu erzeugen. Die ideale Zeilenlänge oder das Maß liegt zwischen 45 und 75 Zeichen pro Zeile pro Druck oder Webseite, einschließlich Leerzeichen und Satzzeichen. Dies kann auf 45-85 Zeichen pro Zeile erweitert werden. Dies wurde aus Untersuchungen über die Art und Weise, wie Menschen Text lesen, und ihre entsprechenden Augenbewegungen abgeleitet. Auf dieser Grundlage empfehlen einige Experten linksbündigen Text als geeignet für Webinhalte, da die Lesebewegungen der Augen einer horizontalen Richtung von links nach rechts folgen.

Fallstudie: Die Website- Suite beschränkt die Zeichen pro Zeile auf nur etwa 75 Zeichen. Wie Sie sehen können, sieht es elegant aus und kann das Interesse der Zuschauer beim Lesen wecken.

Die Website gatesnfences hingegen hat mindestens 120 Zeichen pro Zeile. Als Ergebnis sieht es geschmacklos aus und würde einen davon abhalten, den Inhalt zu lesen.

5 Die Verwendung unterschiedlicher Schriftgrößen verbessert die Lesbarkeit bei unterschiedlichen Entfernungen vom Bildschirm. Dies ist eine Voraussetzung für responsive Typografie.

Wählen Sie die Schriftgröße, die sicherstellt, dass die Schriftart sichtbar und lesbar ist. Dies muss möglicherweise mit Kompromissen beim „idealen Maß” einhergehen, was für Designer etwas schwierig sein kann. Der knifflige Teil ist, dass die „ideale Maßnahme” entweder eine Verringerung der Schriftgröße oder eine Vergrößerung der Schriftgröße ist, was den Text unleserlich machen kann. Unterm Strich soll der Inhalt für den Betrachter angenehm lesbar sein. Daher ist eines der Schlüsselelemente der responsiven Typografie, sicherzustellen, dass unterschiedliche Schriftgrößen für unterschiedliche Leseentfernungen verwendet werden. Es gibt eine Methode zur Berechnung der Schriftgröße, die bei unterschiedlichen Leseabständen wahrgenommen wird, und Größenrechner sind verfügbar, um dies zu bewerkstelligen.

Fallstudie: Sehen Sie sich die Website moonbase an. Dies ist eine Website, die Kunden hilft, ihre Websites zu entwerfen und ihre Unternehmen zu brandmarken. Der Text in der Mitte des Bildes sticht hervor und vermittelt die Bedeutung dessen, worum es auf der Website geht. Wir können es nur auf einen Blick sehen. Dies erregt die Aufmerksamkeit eines Benutzers und veranlasst ihn, den Rest der Website durchzugehen, der in einer Standardschriftgröße geschrieben ist.

6 Responsive Typografie erfordert, dass Webbrowser verschiedene Schriftarten unterstützen können

Wenn Sie Websites mit bestimmten benutzerdefinierten Schriftarten gestalten, müssen Sie sicherstellen, dass der Browser das Laden und Anzeigen dieser Schriftarten unterstützt. Selbst wenn Ihr Code fehlerfrei und klar ist, können Browser-Inkompatibilitätsprobleme Ihren Bemühungen entgegenwirken. Sie müssen auch prüfen, ob das Format, in dem Ihre Schriftdateien gespeichert sind, mit der Schriftart kompatibel ist, die Sie auf der Webseite verwenden möchten. Inkompatibilitätsprobleme können das Laden Ihrer Schriftarten und damit die Anzeige Ihrer Webseiten beeinträchtigen.

Fallstudie: Aus dem oben Gesagten können wir ableiten, dass wir entweder Standardschriften oder „Font Stacks” verwenden müssen. Der erste Schritt ist das „Font-Testing”, um herauszufinden, ob die Schriftart „websicher” ist oder nicht. Im Wesentlichen betrachtet ein Browser jede Folge von Schriftarten als erste Schriftartauswahl, zweite Schriftartauswahl, dritte Schriftartauswahl und so weiter. Wenn ein Browser keine der Schriftarten in der Sequenz finden kann, wird er je nach verwendeter Schriftartklassifizierung auf eine Standard-Serif, Sans Serif oder Monospace zurückgesetzt.

Beispielsweise verfügt ein großer Prozentsatz der Betriebssysteme über die Schriftart Century Gothic. Sie könnten daher einen Schriftartenstapel erstellen, der mit Century Gothic als Ihrer ersten Schriftartwahl begann, gefolgt von Arial, Helvetica und schließlich einer generischen Sans-Serif-Klassifizierung. Beachten Sie in CSS, dass Schriftarten mit mehreren Wörtern im Titel in Anführungszeichen gesetzt werden müssen. Zum Beispiel Schriftfamilie: „Century Gothic”, Arial, Helvetica, Sans-Serif.

Dies würde den Browser anweisen, zuerst nach der Schriftart Century Gothic zu suchen. Da ein großer Teil der Systeme diese Schriftart verwendet, würden die meisten Ihrer Besucher die Site mit Century Gothic angezeigt sehen. Für Betrachter ohne Century Gothic würde der Browser zunächst auf Arial, dann auf Helvetica und schließlich auf eine Sans-Serif-Alternative zurückgreifen.

7 Faktoren im Zusammenhang mit den physikalischen Merkmalen von Schriftarten können die Flexibilität der Verwendung von Schriftarten für Designs beeinflussen

Während es in Bezug auf Maß, Zeilenabstand und Schriftgröße viele Möglichkeiten zur Flexibilität gibt und diese Variationen an das Layout angepasst werden können, kann die responsive Typografie durch Faktoren eingeschränkt werden, die sich auf die Glyphen selbst auswirken. Dies sind Gewicht, Breite, Strichkontrast, Abstieg und optische Größe. Änderungen dieser Parameter können sich auf die Website auswirken. Es stehen Tools zur Verfügung, die Designern helfen, diese Einschränkungen zu überwinden, indem sie verschiedene Arten von Schriftstilen durch mathematische Interpolationen zwischen Schriftfamilien innerhalb der von ihnen festgelegten physikalischen Parameter entwerfen.

Zwei Beispiele für solche Tools sind Superpolator oder FlowType.js. Wenn die Bildschirmgröße kleiner wird, vergrößert sich die relative proportionale Differenz zwischen den Skalen. Daher muss es ein Gleichgewicht zwischen der Größe des Bildschirms und der relativen Skalierung geben. Unter Berücksichtigung dieser Tatsache wurden einige Skalen entwickelt, die für die Gestaltung wirkungsvollerer Websites verwendet werden können. Die Proportion bezieht sich darauf, wie oft die Schriftart der Überschrift größer oder kleiner als der Fließtext ist. Deshalb brauchen wir responsive Typografie. Wir brauchen eine Typografie, die sich selbst anpasst, um an Haltepunkten zu schrumpfen, weil Designer sich nicht die Mühe machen können, alle ihre Grundlinienstile für jedes einzelne typografische Element auf ihrer Seite zurückzusetzen.

Fallstudie: Überprüfen Sie den Flusstyp. Ziehen Sie den Schieberegler und Sie werden sehen, was responsive Typografie dank Tools wie Superpolator und FlowType.js macht.

Responsive Typografie wird durch Übung perfektioniert. Mit einigen Kenntnissen zur Verwendung von Medienabfragen und einer Reihe von Geräten mit unterschiedlichen Bildschirmgrößen zum Testen können Sie dies meistern. Jetzt, da Sie wissen, was getan werden muss, um die beste Typografie zu haben, mehr Aufrufe anzuziehen und mehr Leads zu konvertieren, können Sie die oben genannten Prinzipien anwenden, um zu sehen, wie sie sich in der physischen Realität verwirklichen.

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen