Ein Blick in bessere Typografie für moderne Websites

Digitaler Text kann in so vielen Varianten formatiert werden. Mit der Weiterentwicklung der Webfonts und Browserscripts haben wir neuen Projektcode für Entwickler gefunden. Auch Webdesigner suchen nach der besten Strategie, um ihre Websites zu kodieren und einen einheitlichen typografischen Stil zwischen allen ihren Seiten aufzubauen.

Viele professionelle Webdesigner haben zu diesem Thema geschrieben, einschließlich aktualisierter Funktionen und Dienste. Sie müssen jede Webseite als ein einziges Dokument betrachten, das Ihren Stammlayoutentwurf abbricht. In dieser Ansicht können Sie leicht erkennen, wie Typografie von Seite zu Seite fließen kann und eine einzigartige Möglichkeit für Kreativität bietet. Dies wird besonders deutlich, wenn Sie einzigartige Klassen für Ihre Absätze und Überschriften erstellen.

Im Folgenden werde ich auf einige fantastische Ideen für aufstrebende Typografie-Designer eingehen, die sich für das Web interessieren. Blogs, soziale Netzwerke und Unternehmen sind stets bemüht, ihre aktuelle Website zu aktualisieren. CSS-Stile für die Web-Typografie bieten eine hervorragende Quelle für die Aktualisierung Ihrer Seiten.

Unterschiede im heutigen Internet

Das moderne Web hat sich seit Anfang 2000 dramatisch weiterentwickelt. Webdesignern stehen zahlreiche neue Funktionen zur Verfügung, mit denen sie fantastische Grafiken, Logos, Banner und fast alles andere erstellen können. Die Veröffentlichung von HTML5- und CSS3-Spezifikationen hat auch ihren Tribut von der alten Art der Erstellung von Webfonts gefordert.

Es ist jetzt durchaus möglich, eigene Schriftarten in das CSS einzufügen @Schriftart Eigentum. Sie können jeden verwenden TrueType(.ttf) oder Offener Typ(.otf) Datei und speichern Sie eine Kopie lokal auf Ihrem Server. Dann fügen Sie mit etwas CSS3-Zauber die Familie irgendwo auf Ihre Webseite ein!

Allein mit dieser Technik kann man sehen, wie sich unser modernes Internet entwickelt hat.

Da die Beliebtheit von jQuery jeden Tag steigt, ist es keine Überraschung, dass wir erstaunliche Animationseffekte zusammen mit benutzerdefinierten Schriftarten erstellen können. Als Alternative zu der obigen Methode können Sie mit dem TTFGen-Plugin für jQuery beliebige TrueType-Schriftarten in Ihre Webseite einfügen.

Diese Methode ist etwas zuverlässiger, da Sie keinen modernen Browser benötigen, der CSS3-Standards unterstützt, damit sie funktioniert. Natürlich können ältere Browser wie Internet Explorer 6 nicht richtig gerendert werden.

Aber zum Glück haben die meisten Benutzer auf neuere Browsersoftware umgestellt, die diese Standards unterstützen! Wenn Sie für das Web entwickeln, sollten Sie genau überlegen, für wen Ihr Markt bestimmt ist. Sie können nicht jeden zufrieden stellen, aber Sie können sicher versuchen, nahe genug zu sein.

Der Zweck der digitalen Typografie

Eine seltsame Idee, die man bedenken sollte, aber Was ist der eigentliche Zweck von digitalem Text?? Um Informationen zu vermitteln, Quellen zu teilen und Ihre Meinung der Welt der Internetnutzer zu präsentieren. Text ist die einfachste Form von Medien, um Gedanken und Ideen auszutauschen. Es ist jedoch auch sehr komplex und enthält wichtige Details, die Fotos / Videos nicht verwenden können.

Ihre Besucher finden Ihre Website wahrscheinlich anhand von Stichwörtern in Ihren Texten oder Überschriften. Dies ist ein weiterer Grund, Ihre Web-Kopie sorgfältig zu beachten. Und wenn Sie sich einmal mit Ihrer Website beschäftigt haben, müssen Sie sich auf ihre Konzentration konzentrieren. Dies ist am einfachsten mit fetten Überschriften und gleichmäßigem Seitentext möglich.

Wenn Sie einen Artikel oder ein Tutorial schreiben, müssen Sie eine klare Sprache verwenden. Es ist Ebenso wichtig wie Ihr Seitentext aussieht und die Qualität Ihres Inhalts. Je größer Ihr Text erscheint, desto einfacher wird es, nach Schlüsselwörtern zu lesen und nach diesen zu suchen. Und da Absätze den Großteil Ihres Inhalts enthalten, sollten Sie viel Zeit darauf verwenden, Prototypen für die richtige Passform zu erstellen. Absätze werden verwendet, um Ihre Nachricht in bitgroßen Brocken, die in Sätze unterteilt sind, zu vermitteln. Verstehen Sie, wie Sie schreiben und planen, um ein passendes Seitenlayout zu erhalten.

Zu Ihrem Seitentext gehören außerdem Medien und sekundäre Inhalte. Wenn Ihre Absätze primäre Informationen enthalten, haben Sie möglicherweise Grafiken oder Bilder, um die Seite aufzupeppen. Diese Akzente sind genau die richtige Note, um die Nutzer auf Ihrer Website zu bewegen.

Videos und Bilder können Ihren Inhalt aufteilen und den Eindruck erwecken, als würden sich Leser schneller durch Ihren Artikel bewegen. Verwenden Sie diese Elemente jedoch sparsam und lassen Sie Ihre Kernbotschaft nicht durch etwas überwältigen. Benutzer besuchen (meistens) Ihre 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. Beispielsweise ist Hyperlink-Text oft eine andere Farbe als der Rest, um hervorzuheben “klickbar”. Sie können mit fetten oder kursiven Wörtern arbeiten, die Ihre Sätze hervorheben. Die Verwendung von Blockanhängen oder vorformatiertem Text kann dabei helfen, grundlegende Aussagen bzw. Webcode abzugrenzen.

Webseiten-Header

Zu den wichtigsten Assets Ihrer Web-Typografie gehören Überschriften-Tags. Wenn Sie mit HTML-Überschriften nicht vertraut sind, reichen Sie aus

zu

wobei die erstere die größte und die geringste Bedeutung hat. Dieses Markup ist hilfreich für das Verständnis, da Google auch Ihre Domain und Webseiten nach Inhaltsstruktur sortiert. So haben Sie letztendlich die Kontrolle darüber, welche Keywords Sie verwenden und welche Überschriftenebene Sie benötigen.

Obwohl die Standard-HTML5-Spezifikation bis zu 6 verschiedene Überschriftenstile umfasst, würde ich die Verwendung von 3-4 empfehlen. Es ist nicht notwendig, sie alle in Ihre Seiten aufzunehmen. Es ist auch sehr unwahrscheinlich, dass Sie 6 verschiedene Überschriften verwenden werden. Beim ersten Sitzen zum Erstellen Ihrer Stile sollten Sie einige Beispiele für Überschriften entwerfen, um zu sehen, was Ihnen gefällt.

Photoshop eignet sich hervorragend für dieses Szenario. Sie können auch versuchen, verschiedene Überschriften in HTML zu codieren, um zu sehen, wie sie im Browser aussehen. Wichtig ist, dass Sie mit Ihrem Seitenfluss und den Kopfzeilen nach ihrem Rang arbeiten.

Zum Beispiel deine

Tags sollten unter allen Überschriften Ihrer Seite am meisten hervorgehoben werden.

und

sind die beliebtesten Tags und werden von Google für das Crawlen von Seiteninhalten empfohlen. Wenn Sie Design-Effekte wie Fettschrift, Unterstriche, gestrichelte Rahmen oder andere Farben verwenden, können Ihre Titel von der Seite springen.

Abstand ist auch wichtig wenn es um Überschriften oder einen beliebigen 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 auffallen. Dieser Look ist ideal, wenn Sie Ihre Leser mit einer klaren Botschaft ansprechen möchten.

Einzigartige 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 äußerst wichtig als Hauptnavigationsschnittstelle zwischen verschiedenen Seiten Ihrer Website. Sie können auch zu einem späteren Zeitpunkt einen Link zu anderen Blogs oder sogar zu Ihren archivierten Blog-Posts als Referenz erstellen.

Sie sollten den Holding-Text für Ihren Link sehr sorgfältig auswählen. Dies ist der spezifische Inhalt, der durch einen Link-Stil hervorgehoben wird. Zum Beispiel ist "hier klicken" sehr beliebt und wird meistens für direkte Downloads verwendet. Versuchen Sie, diesen systematischen Ansatz zu vermeiden, und erhalten Sie stattdessen mit Ihrem Hyperlink-Text etwas Kreativität. Ihre Besucher klicken viel eher auf einen Link, wenn sie auch den Kontext erkennen und möglicherweise herausfinden, was die neue Seite enthält.

Bei der Gestaltung Ihrer Links sollten Sie Folgendes beachten - wie würden Änderungen in Ihrem Seiten-Setup aussehen, An welcher Art von Hintergrundfarbe arbeiten Sie gerade?, und Welche Farbe hat der Text für den Kontrast??

Links sollten offensichtlich als anklickbare Elemente von der Seite angezeigt werden - dies ist schließlich ihre Funktion. Deshalb funktioniert das alte Blau mit Text unterstrichen so gut. Wenn Sie jedoch feststellen, dass eine alternative Farbe besser funktioniert, sollten Sie es ausprobieren. Es gibt keine einheitliche Lösung für Linkdesigns. Stöbern Sie einfach im Internet und Sie werden sicherlich etwas Besonderes zusammenstellen.

Ein interessanter Punkt sind einige Funktionen, die Sie ausprobieren sollten vermeiden. Dinge wie das Ändern der Schriftfamilie oder der Schriftgröße können sehr ärgerlich sein. Dadurch wird der Text verzerrt und verschoben, wodurch sich der Mauszeiger möglicherweise außerhalb des Verknüpfungsbereichs befindet. Auf ähnliche Weise sollten Sie es vermeiden, Ihren Links oder Hover-Effekten zusätzliche Ränder / Füllungen hinzuzufügen. Diese funktionieren viel besser, wenn Sie einfach bleiben. Eine Farbänderung oder zusätzliche Unterstreichung ist für die Benutzererfahrung sehr wichtig.

Aufbau von gestylten Listen

Die Chancen stehen gut, dass Sie irgendwann auch mit Listen arbeiten müssen. Eingeschlossen sind sowohl geordnete als auch ungeordnete Listen in HTML. Diese sind ideal, um eine kleine Sammlung von Ideen, Produkten, Personen oder Links online auf kleinstem Raum anzubieten. Auch das Styling unterscheidet sich kaum von Absätzen oder Überschriften.

Ihre Besucher sollten sofort verstehen, dass sie sich eine Liste mit Artikeln ansehen. Halten Sie jedes Listenelement separat und in einer neuen Zeile auf Ihrer Seite. Fügen Sie, falls möglich, etwas zusätzlichen Abstand hinzu. Dies gibt etwas Raum zum Atmen und erscheint als nette Trennung für den Artikeltext. Wenn Sie möchten, können Sie die Schrift- oder Einrückungslisten sogar etwas hervorheben, um sich von den Standard-Layouträndern zu entfernen.

Das Hinzufügen zusätzlicher Funktionen, um Ihre Liste hervorzuheben, ist keine Voraussetzung. Wenn Sie jedoch den Block-Layout-Stil mögen, bleibt der Fokus auf Ihren Listen. Sie können versuchen, einen hellen Hintergrund oder Symbole hinzuzufügen. A List Apart hat eine großartige Aufzählung von Zähnenlisten, die meiner Meinung nach einige sehr wichtige Erkenntnisse beinhalten. Wenn Sie jedoch den Seiteninhalt linear halten und Listenblöcke nur dann verwenden, wenn dies erforderlich ist, sollten Sie keine Rückschläge beim Design feststellen.

So erstellen Sie In-Page-Angebote

Das Aussehen von Zitaten und Zitaten ist heutzutage sehr begrenzt. Im frühen Web sieht man nicht viel von diesen Elementen. Vielleicht in Leitartikeln, Aufsätzen oder Lehrbüchern. Aber HTML5 hat die Regeln sicherlich ein wenig überarbeitet, was die Verwendung von Block-Anführungszeichen viel einfacher macht.

Die HTML5 Doctor-Website enthält eine faszinierende Ressource, um genau dieses Thema zu diskutieren. Sie besprechen die Verwendung von Inhalten in Blockquotes, die intern in der Dokumentstruktur erscheinen. Sie können also Überschriften, Absätze und sogar Listen und Fußzeilen hinzufügen. Die Hauptanwendung von a