10 Web-Typografie-Regeln, die jeder Designer kennen sollte
Sie können viele Elemente in Ihr Webdesign integrieren, die Engagement schaffen und die Aufmerksamkeit Ihrer Besucher auf sich ziehen. Dazu gehören Bilder, Videos und sogar Ton. Der wichtigste Teil fast jeder Website sind jedoch die Inhalte, die Besucher lesen, um die Informationen zu erhalten, die sie lesen.
Wenn Sie diese Informationen leichter lesbar und visuell interessant gestalten möchten und diesen Text zum Gesamtdesign einer Website hinzufügen möchten, müssen Sie Typografie verstehen. Dies ist die Kunst und Fähigkeit, das geschriebene Wort sowohl funktional als auch ästhetisch ansprechend zu gestalten.
Wenn Sie lernen möchten, Typografie zu Ihrem Vorteil zu nutzen, sehen Sie sich diese 10 Regeln an, die jeder Designer beachten sollte.
1 Beenden Sie die Verwendung von LoremIpsum nach dem anfänglichen Designprozess
Wenn der Inhalt König ist, warum wird er im Webdesign-Prozess nicht ernsthaft berücksichtigt? Durch die Verwendung von gefälschten Inhalten als Platzhalter verweisen Webdesigner Inhalte auf eine untergeordnete Rolle. Dies ist ein deutlicher Hinweis darauf, dass Designprioritäten völlig aus dem Ruder gelaufen sind. In der Anfangsphase ist das nicht so problematisch, wenn Sie zum Beispiel verschiedene Seitenlayouts simulieren. Sobald Sie jedoch die Dinge eingegrenzt haben, ist es wichtig, bei der Erstellung des endgültigen Designs mit tatsächlichen Webinhalten zu arbeiten. Dadurch wird sichergestellt, dass dem, was auf einer bestimmten Webseite gesagt wird, genauso viel Bedeutung beigemessen wird wie dem Layout und den visuellen Elementen.
Darüber hinaus ist der tatsächliche Text in Bezug auf Design und Layout von Bedeutung. Sie möchten nicht in der Lage sein, eine Webseite fertig gestaltet zu haben, nur um dann festzustellen, dass es mit dem eigentlichen Inhalt nicht funktioniert. Aus diesem Grund ist es äußerst wichtig, den eigentlichen Text so schnell wie möglich von Ihrem Kunden des Inhaltsautors zu erhalten.
2 Erstellen Sie Text ohne Serifen
Serifentext ist absolut schön. Dies sind großartige Schriftarten für den Druck und für größere Druckanwendungen wie Überschriften, Titel und Unterüberschriften. Leider lassen sich Serifen auf dem Bildschirm nicht gut skalieren, wenn es um kleinere Darstellungen von Inhalten wie Textblöcken geht. Die Serifen, die bei größerer Größe schön aussehen, erschweren die Lesbarkeit des Textes, wenn die Schrift kleiner wird. Aus diesem Grund ist es ratsam, Serifen für großen Text aufzusparen und sich auf Sans zu verlassen, wenn die Lesbarkeit ein Problem sein könnte. Besser noch, nehmen Sie das klare, glatte, moderne Aussehen von Sans-Schriftarten an und bewahren Sie Serifen für die Druckmaschine auf. Auf diese Weise müssen Sie sich nie mit einer Verschlechterung der Lesbarkeit zugunsten einer hübsch aussehenden Schriftart auseinandersetzen.
3 Denken Sie schon früh im Designprozess an intelligente Anführungszeichen und andere Symbole
Wahrscheinlich haben Sie eine Website besucht, auf der bestimmte Symbole nicht richtig angezeigt wurden. Manchmal werden sie durch eine Frage oder eine Reihe seltsam aussehender Zeichen ersetzt. Andere Male sind sie einfach nicht da. Dies geschieht häufig bei intelligenten oder „geschwungenen” Anführungszeichen. Dies ist häufig das Ergebnis, dass Texte in MS Word oder einem anderen Paket erstellt und dann auf eine Webseite übertragen werden. Die Dinge werden einfach nicht wie gewünscht übersetzt. Dies ist auch beim Euro üblich Symbol, Double-Byte-Zeichen und andere Symbole aus fremden Inhalten.
Um dieses Problem in Ihrem endgültigen Design zu vermeiden, haben Sie mehrere Möglichkeiten. Erstens können Sie Ihren Inhalt ändern, um diese Symbole loszuwerden. Dies funktioniert, wenn Sie bereit sind, die Symbole in natürliche Sprache umzuwandeln. Sie können auch HTML verwenden, um sicherzustellen, dass die Symbole richtig angezeigt werden, anstatt sich nur auf das Kopieren und Einfügen zu verlassen. Wie auch immer Sie sich entscheiden, stellen Sie sicher, dass Sie die Webseite in jedem möglichen Browser testen. Was in einem Browser ein Problem mit Symbolen lösen könnte, ist in einem anderen möglicherweise überhaupt nicht effektiv.
4 Fortgeschrittene CSS-Fähigkeiten sind extrem wichtig
Wenn Sie gute CSS-Kenntnisse entwickelt haben, sollten Ihre Besucher absolut nahtlos durch die Seiten Ihrer Website navigieren können. Wenn Sie Ihre Stylesheets richtig erstellen, können Sie sogar mehrere Versionen derselben Seite haben und gleichzeitig eine große Kontinuität in Bezug auf Typografie beibehalten. Natürlich müssen Sie nicht viele Tricks anwenden. Gutes CSS kann Ihnen helfen, kleine, aber häufige Probleme zu vermeiden, wie z. B. das Ändern von Schriftarten und Schriftgrößen von einer Seite zur nächsten.
Warum ist konsistente Typografie so wichtig? Die Verwendung von CSS zur Aufrechterhaltung einer konsistenten Typografie verleiht Ihrer Website ein professionelles und scharfes Aussehen. Es bedeutet auch, dass Sie beim Entwerfen jeder Seite nicht über Typografie nachdenken müssen. Stattdessen verwenden Sie einfach das entsprechende Stylesheet. Wenn Sie sich entscheiden, auf einer bestimmten Seite mit der Norm zu brechen und etwas anderes mit Typografie zu machen, um einen Effekt zu erzielen oder die Aufmerksamkeit auf etwas zu lenken, wird sie dank Ihrer Verwendung von CSS stärker hervorstechen.
5 Sowohl Mikro- als auch Makrotypografie sind wichtig
Mikrotypografie bezieht sich auf die Details der Typografie, die sich auf die Lesbarkeit beziehen. Beispielsweise sind Abstände ein Problem im Zusammenhang mit der Mikrotypografie, ebenso wie Skalierung und Kontrast. Die Anpassungen, die Sie vornehmen, um sicherzustellen, dass ein Textblock auf jedem Gerät oder Browser lesbar ist, beziehen sich alle auf die Mikrotypografie.
Makrotypografie bezieht sich auf die Art und Weise, wie Ihre Entscheidungen bezüglich Typografie in Ihr Gesamtdesign eingebunden werden. Es bezieht sich auf die Ästhetik.
Gute Typografie berücksichtigt sowohl Mikro- als auch Makrotypografie. Haben Sie jemals eine Website besucht, die eine wirklich gut aussehende, benutzerdefinierte Schriftart verwendet hat, die auch fast unmöglich zu lesen war? Das passiert, wenn der Makrotypografie Aufmerksamkeit geschenkt wird, aber nicht der Mikrotypografie.
6 Kennen Sie den Inhalt sowie das Design
Wie Sie wissen, hat eine gute Website Flow. Ein Teil davon ist die Lesbarkeit des Inhalts, der sich auf der Seite befindet. Wir haben bereits besprochen, wie dies durch Dinge wie Serifen beeinflusst wird, und wir haben besprochen, dass Dummy-Text kein Ersatz für den echten Text ist, wenn es um die späteren Phasen des Designs geht. Wir sind noch nicht fertig. Inhalt ist wirklich König. Sobald das endgültige Design, einschließlich des Inhalts, steht, müssen Sie die Webseite lesen.
Wenn Sie den Inhalt lesen, nachdem Ihr Design fertig ist, können Sie feststellen, ob es Probleme mit Abständen oder Zeilenumbrüchen gibt. Diese können Inhalte verwirrend machen oder sogar unbeabsichtigt die Bedeutung der Inhalte verändern. Die Behebung dieser Probleme mit ein paar typografischen Tricks kann sicherstellen, dass Ihr Endprodukt genau das kommuniziert, was Sie oder Ihr Kunde beabsichtigt.
7 Die Bedeutung der Hierarchie verstehen
Die Hierarchie ist die Roadmap, die Sie den Besuchern Ihrer Website geben. Sie können Bilder, Videos, Farben und (natürlich) Typografie verwenden, um diese Hierarchie zu erstellen.
Es geht einfach darum, den Besucher von der ersten Sache, die er sehen soll, zur nächsten zu führen und so weiter. Mit Typografie können Sie Größe, Schriftartänderungen und Abstände verwenden, um die Hierarchie zu definieren, der die Benutzer folgen sollen. Wenn Sie eine Seite haben, die nicht konvertiert, sollten Sie vielleicht mit der Typografie herumspielen, um zu sehen, ob Änderungen, die Sie vornehmen, dazu beitragen, Besucher zum Call-to-Action-Button zu führen.
8 Seien Sie kreativ, aber vorsichtig mit Farbe
Der einfachste Weg, um sicherzustellen, dass Sie niemals Lesbarkeitsprobleme aufgrund von Problemen mit Schriftfarbe und Hintergrundfarbe haben, besteht darin, die kontrastreichsten Farben zu verwenden, die es gibt, Schwarz und Weiß. Leider kann das zu einem ziemlich langweiligen Design führen.
Scheuen Sie sich nicht, Farben zu verwenden. Scheuen Sie sich nicht, Farbkombinationen zu verwenden, die nicht so aussehen, als würden sie funktionieren. Manchmal genügt es, einfach ein oder zwei Nuancen heller oder dunkler zu werden. Dann ändert sich Ihre Typografie von unlesbar zu perfekt erkennbar und wirklich cool aussehend.
9 Zentrierten Text ausblenden
Die Probleme mit zentriertem Text sind zahlreich. In erster Linie kann es dazu führen, dass Ihre Webseiten schlecht gestalteten Flyern ähneln. Darüber hinaus enden Sie fast immer mit seltsamen Rändern und Text, der aussieht, als ob es sich um ein Gedicht oder Liner Notes aus einem alten Rockalbum handeln soll. Obwohl es in Ordnung sein kann, zentrierten Text für Überschriften zu verwenden, ist es in der Regel am besten, dies ganz zu vermeiden. Bleiben Sie bei linksbündigem Text, und Ihre Leser werden Ihre Inhalte viel einfacher zu lesen finden.
10 Betrachten Sie, wie Ihr Text vergrößert aussieht
Egal, ob sie ihren Daumen und Zeigefinger benutzen oder auf die Zoom-Schaltfläche klicken, die Leute werden Ihren Text vergrößern. Manchmal tun sie dies, um einen kleineren Bildschirm auszugleichen. In anderen Fällen tun sie dies einfach, weil es für sie schwierig ist, Ihren Text in normaler Größe zu lesen.
Es wäre großartig, wenn jeder Ihren Text wie beabsichtigt sehen könnte, aber da Boomer oft zusätzliche Hilfe benötigen, um Text zu sehen, ist das einfach nicht möglich. Achten Sie darauf, keine Schriftart zu verwenden, die sich verschlechtert, wenn sie vergrößert wird.
Hilfreiche Tools und Ressourcen
Hier sind ein paar nützliche Tools und Ressourcen, die Ihnen helfen, mehr mit Typografie zu machen:
- FontFace Ninja: Dieses Dienstprogramm hilft Ihnen, Schriftarten zu identifizieren, die Sie im Internet finden. Dies ist ein großartiges Werkzeug, wenn Sie auf eine Schriftart stoßen, die Ihnen wirklich ins Auge fällt. Dieses Chrome-Plug-in hilft Ihnen, alle handelsüblichen Schriftarten zu identifizieren, zu finden und zu kaufen, die Sie auf einer Website sehen.
- TypePlate: Dies ist ein komplettes Typografie-Framework, das sich perfekt für Webdesigner eignet. TypePlate kann Initialen, Blockzitate, Skalierung, Farben und eine Vielzahl anderer typografischer Herausforderungen bewältigen.
- Modulare Skala: Dies ist eine Skala, mit der Sie die ideale Schriftart und Schriftgröße bestimmen können. Es hilft Ihnen auch dabei, ein Gleichgewicht zwischen der Schriftgröße Ihrer Titel und Überschriften und der Schriftart zu finden, die Sie für Ihren Text auswählen.
- TIFF: Mit diesem Tool können Sie zwei verschiedene Schriftarten aufrufen. Dann zeigt es die Unterschiede zwischen jeder der beiden Schriftarten für Sie an. Sie können sogar verschiedene Buchstaben und Zahlen von einer Schriftart zur nächsten vergleichen.
- TypeWolf: Verwenden Sie diese Website, um einige der coolsten Schriftarten und die inspirierendste Verwendung von Typografie im Internet zu finden. Dies ist eine hervorragende Quelle der Inspiration und Information.
- Why Fonts Matter, Sarah Hyndman: Dies ist ein ausgezeichnetes Buch, das die Bedeutung von Schriftarten und die Art und Weise untersucht, wie Typografie den Geisteszustand beeinflussen kann. Es ist ein großartiges Buch für Leute, die sich für Typografie begeistern, aber auch für Leute, die vielleicht davon überzeugt werden müssen, wie wichtig es ist, die richtige Art von Job zu wählen.
Fazit
Hoffentlich beeinflusst dieser Artikel Webdesigner, sich etwas mehr Gedanken über Typografie zu machen und Wege zu finden, Schrift effektiver und kreativer in ihren Designs einzusetzen.