Ein Blick in: Bessere Typografie für moderne Websites

Digitaler Text kann in so vielen Varianten formatiert werden. Mit der Weiterentwicklung von Webfonts und Browserskripten haben wir einen neuen Projektcode für Entwickler kennengelernt. Auch Webdesigner suchen nach der besten Strategie, um ihre Websites zu codieren und einen einheitlichen typografischen Stil zwischen all ihren Seiten zu erstellen.

Viele professionelle Webdesigner haben über das Thema geschrieben, einschließlich aktualisierter Funktionen und Services. Sie müssen jede Webseite als ein einzelnes Dokument betrachten, das Ihr Root-Layout-Design abbricht. Unter dieser Sicht ist es leicht zu sehen, wie Typografie von Seite zu Seite fließen kann und eine einzigartige Möglichkeit für Kreativität bietet. Und dies wird besonders offensichtlich, wenn Sie eindeutige Klassen für Ihre Absätze und Überschriften erstellen.

Im Folgenden werde ich einige fantastische Ideen für aufstrebende Typografiedesigner vorstellen, die daran interessiert sind, für das Web zu bauen. Blogs, soziale Netzwerke und Unternehmen sind immer auf der Suche nach Updates für ihre aktuelle Website. Und CSS-Stile für die Web-Typografie bieten eine hervorragende Quelle, um mit der Aktualisierung Ihrer Seiten zu beginnen.

Unterschiede im heutigen Internet

Das moderne Web hat sich seit Anfang 2000 dramatisch weiterentwickelt. Es gibt viele neue Funktionen für Webdesigner, um fantastische Grafiken, Logos, Banner und praktisch alles andere zu erstellen. Die Veröffentlichung der HTML5- und CSS3-Spezifikationen hat sich auch auf die alte Art und Weise, Web-Fonts zu erstellen, ausgewirkt.

Es ist nun durchaus möglich, eigene Schriftarten mit der CSS @font-face Eigenschaft einzubinden. Sie können jede TrueType (.ttf) - oder OpenType (.otf) -Datei verwenden und eine Kopie lokal auf Ihrem Server speichern. Dann mit etwas CSS3 Magie die Familie irgendwo auf Ihrer Webseite einbinden!

Unter dieser Technik ist es möglich zu sehen, wie sich unser modernes Internet entwickelt hat.

Und da jQuery jeden Tag immer beliebter wird, ist es keine Überraschung, dass wir erstaunliche Animationseffekte mit benutzerdefinierten Schriftarten kombinieren können. Als Alternative zur obigen Methode können Sie mit dem TTFGen-Plugin für jQuery jede TrueType-Schriftart in Ihre Webseite integrieren.

Diese Methode ist etwas zuverlässiger, da Sie keinen modernen Browser benötigen, der die CSS3-Standards unterstützt, um das zu erreichen. Aber natürlich müssen ältere Browser wie Internet Explorer 6 nicht richtig gerendert werden.

Aber zum Glück haben die meisten Benutzer auf neuere Browser-Software umgestiegen, die diese Standards unterstützen! Und wenn Sie für das Web entwickeln, sollten Sie genau betrachten, wem Ihr Markt ist. Sie können nicht immer die ganze Zeit zufrieden sein, aber Sie können sicher versuchen, nah genug zu kommen.

Der Zweck der digitalen Typografie

Irgendwie eine merkwürdige Idee, aber was ist der wahre Zweck von digitalem Text? Informationen vermitteln, Quellen teilen und der Welt der Internetnutzer Ihre Meinung mitteilen. Text ist die einfachste Form der Medien zum Austausch von Gedanken und Ideen . Aber es ist auch sehr komplex und enthält wichtige Details, die Fotos / Videos einfach nicht verwenden können.

Ihre Besucher werden Ihre Website wahrscheinlich anhand von Stichwörtern in Ihrem Text oder in Ihren Überschriften finden - ein weiterer Grund, auf Ihre Webkopie aufmerksam zu achten. Und sobald Sie etwas Aufmerksamkeit auf Ihre Website erlangt haben, müssen Sie an ihrer Konzentration festhalten. Dies wird am einfachsten mit fett gedruckten Überschriften und gleichmäßigem Seitentext erreicht.

Wenn Sie einen Artikel oder ein Tutorial schreiben, müssen Sie eine klare Sprache verwenden. Genauso wichtig ist es, wie Ihr Seitentext aussieht und wie gut Ihr Inhalt ist. Je größer Ihr Text erscheint, desto einfacher wird das Lesen und Suchen nach Schlüsselwörtern. Und da Absätze den Großteil Ihrer Inhalte enthalten, sollten Sie viel Zeit für das Prototyping aufwenden. Absätze werden verwendet, um Ihre Nachricht in kleinen, in Sätze unterteilten Teilen zu übermitteln. Verstehen Sie, wie Sie schreiben und planen, um ein passendes Seitenlayout zu erhalten.

Zusätzlich zu Ihrer Seitentext kommen Medien und Sekundärinhalte. Wenn Ihre Absätze primäre Informationen enthalten, haben Sie vielleicht Grafiken oder Bilder, um die Seite aufzupeppen. Diese Akzente sind genau die richtige Berührung, die Benutzer durch Ihre Website bewegen.

Videos und Bilder sind in der Lage, Ihre Inhalte aufzubrechen und es so aussehen zu lassen, als ob Leser sich schneller durch Ihren Artikel bewegen. Aber verwenden Sie diese Elemente sparsam und lassen Sie nichts Ihre Kernbotschaft überwältigen. Die Benutzer kommen (meistens) zu Ihrer Website, um Informationen zu erhalten, und möchten nicht zu viele Ablenkungen.

Alle anderen Formatierungsoptionen werden verwendet, um die Funktionalität oder den Zweck anzugeben. Zum Beispiel hat Hyperlink-Text oft eine andere Farbe als der Rest, um als "klickbar" hervorzustehen. Sie können mit fett gedruckten oder kursiven Wörtern arbeiten, die Ihren Sätzen mehr Gewicht verleihen. Und die Verwendung von Blockquotes oder vorformatiertem Text kann dabei helfen, grundlegende Aussagen bzw. Web-Code abzugrenzen.

Webseitenüberschriften

Einer der wichtigsten Vorteile für Ihre Web-Typografie sind Überschrift-Tags. Wenn Sie mit HTML-Überschriften nicht vertraut sind, reichen Sie von

zu

wobei ersteres die größte Bedeutung und letzteres das geringste Gewicht hat. Dieses Markup ist hilfreich, um zu verstehen, dass Google Ihre Domain und Webseiten basierend auf der Content-Struktur klassifiziert. Dadurch haben Sie letztendlich die Kontrolle darüber, welche Schlüsselwörter Sie verwenden und welche Überschriften Sie benötigen.

Obwohl die Standard-HTML5-Spezifikation bis zu 6 verschiedene Überschriftenformate enthält, würde ich eine Verwendung zwischen 3-4 empfehlen. Sie müssen nicht alle auf Ihren Seiten enthalten. Und es ist auch sehr unwahrscheinlich, dass Sie eine Verwendung für 6 verschiedene Überschriften finden. Wenn Sie sich zuerst hinsetzen, um Ihre Stile zu erstellen, versuchen Sie, einige Beispiele für Überschriften zu entwerfen, um zu sehen, was Sie mögen.

Photoshop eignet sich hervorragend für dieses Szenario. Sie könnten auch versuchen, verschiedene Überschriften in HTML zu codieren, um zu sehen, wie sie im Browser aussehen. Wichtig ist, dass Sie mit Ihren Seitenfluss- und Designüberschriften entsprechend ihrem Rang arbeiten.

Zum Beispiel, dein

Tags sollten unter allen Ihren Seitenüberschriften am meisten hervorstechen.

und

sind die beliebtesten Tags und werden von Google zum Crawlen von Seiteninhalten empfohlen. Durch die Verwendung von Design-Effekten wie Fettschrift, Unterstreichungen, gestrichelten Rändern oder anderen Farben können Sie Ihre Titel von der Seite springen lassen.

Der Abstand ist auch wichtig, wenn es um Überschriften oder irgendeinen Teil Ihres Inhalts geht. Stellen Sie sicher, dass Sie zusätzliche Ränder zwischen Ihren Überschriften und dem Hauptinhaltsbereich hinzufügen. Wenn Sie Ihre Schrift groß genug gemacht haben, sollte jede Überschrift als eigener Kernblock hervorgehoben werden. Dieser Look ist ideal, wenn Sie mit einer klaren Botschaft die Aufmerksamkeit Ihrer Leser auf sich ziehen wollen.

Eindeutige Hyperlinks erstellen

Zum Thema Seitenlinks gibt es viel zu sagen. Auf die eine oder andere Weise müssen Sie Hyperlinks in Ihrem Code verwenden. Sie sind extrem wichtig als Hauptnavigationsschnittstelle zwischen verschiedenen Seiten Ihrer Website. Sie können auch einen Link zu anderen Blogs oder sogar Ihren archivierten Blog-Posts zu einem späteren Zeitpunkt erstellen.

Sie sollten den Haltetext für Ihren Link sehr sorgfältig auswählen. Dies ist der spezifische Inhalt, der durch einen Link-Stil betont wird. Zum Beispiel ist "hier klicken" sehr beliebt und wird meistens direkt heruntergeladen. Versuchen Sie, diesen systematischen Ansatz zu vermeiden und stattdessen mit Ihrem Hyperlink-Text etwas kreativ zu werden. Ihre Besucher klicken viel eher auf einen Link, wenn sie auch den Kontext erkennen und herausfinden können, was die neue Seite enthalten soll.

Wenn Sie Ihre Links formatieren, sollten Sie Folgendes beachten: Wie würden Änderungen in Ihrer Seiteneinrichtung aussehen, welche Art von Hintergrundfarbe würden Sie bearbeiten und welche Farbe hat der Kontrast?

Links sollten als Click-fähige Elemente offensichtlich von der Seite erscheinen - das ist schließlich ihre Funktion. Deshalb funktioniert das alte Blau mit unterstrichenem Texteffekt so gut. Aber wenn Sie feststellen, dass eine alternative Farbe besser funktioniert, sollten Sie es ausprobieren. Es gibt keine Einheitslösung für Link-Designs. Blättern Sie einfach ein wenig im Internet und Sie werden sicherlich etwas Außergewöhnliches zusammenstellen.

Ein interessanter Punkt sind einige Funktionen, die Sie vermeiden sollten . Dinge wie das Ändern der Schriftfamilie oder der Schriftgröße können sehr störend sein. Dadurch wird der Text verzerrt und bewegt sich, wodurch der Mauszeiger gerade aus der Verknüpfungszone entfernt werden kann. Auf ähnliche Weise sollten Sie vermeiden, dass Sie Ihren Links oder Hover-Effekten zusätzliche Ränder / Abstände hinzufügen. Diese funktionieren viel besser, wenn Sie einfach bleiben. Ein Farbwechsel oder eine zusätzliche Unterstreichung führt in der Benutzererfahrung zu einem langen Weg.

Aufbau von Styled Listen

Die Chancen stehen gut, dass Sie irgendwann auch mit Listen arbeiten müssen. Enthalten sind sowohl sortierte als auch ungeordnete Listen in HTML. Diese eignen sich perfekt, um auf kleinstem Raum eine kleine Sammlung von Ideen, Produkten, Personen oder Links online anzubieten. Das Styling unterscheidet sich auch nicht wesentlich von Absätzen oder Überschriften.

Ihre Besucher sollten sofort verstehen, dass sie sich eine Liste von Gegenständen ansehen. Halten Sie jedes Listenelement getrennt und in einer neuen Zeile auf Ihrer Seite. Fügen Sie nach Möglichkeit etwas zusätzlichen Platz zwischen ihnen hinzu. Dies gibt etwas Luft zum Atmen und erscheint als eine nette Trennung für den Artikeltext. Wenn Sie möchten, können Sie die Schriftarten oder Einrückungslisten sogar etwas fett formatieren, um von den Standardrändern des Layouts abzuweichen.

Es ist keine Voraussetzung, zusätzliche Funktionen hinzuzufügen, um Ihre Liste hervorzuheben. Aber wenn Sie den Block-Layout-Stil genießen, konzentriert es sich wirklich auf Ihre Listen. Sie könnten versuchen, einen hellen Hintergrund oder Symbole hinzuzufügen. A List Apart hat eine großartige Aufzählung auf Taminglisten, die meiner Meinung nach einige sehr mächtige Wissensbrüche enthält. Aber wenn Sie Seiteninhalt linear halten und Listenblöcke nur bei Bedarf verwenden, sollten Sie keine Design-Rückschläge bekommen.

So erstellen Sie In-Page-Zitate

Das Erscheinen von Zitaten und Zitaten ist heutzutage sehr begrenzt. Im frühen Web würden Sie nicht viel von diesen Elementen in Gebrauch sehen. Vielleicht in Leitartikeln, Aufsätzen oder Bildungspapieren. Aber HTML5 hat die Regeln sicherlich ein wenig aktualisiert, was das Zitieren von Blockquotes viel einfacher macht.

Die HTML5 Doctor-Website enthält eine faszinierende Quelle für die Diskussion dieses genauen Themas. Sie diskutieren die Verwendung von Inhalten innerhalb von Blockquotes als intern in der Dokumentenstruktur. Sie können also auch Überschriften, Absätze und sogar Listen und Fußzeilen einfügen. Die Hauptverwendung von a