Grundlegendes zum Schreiben von Typografie für das Web
In Webdesign ist das Thema Typografie wichtig, wenn alle Bereiche der Benutzererfahrung berücksichtigt werden. Jede Website benötigt Text, und es gibt Richtlinien, nach denen Sie außergewöhnliche Layouts erstellen können. Rasterlinien, Beschriftungen, Schrifthöhen, Textabstände, Farbschemata und andere ähnliche Eigenschaften sollten berücksichtigt werden.
In diesem Artikel möchte ich in die Web-Typografie eintauchen. Wir werden nachsehen beliebte Ideen für die Gestaltung glaubwürdiger Seitentexte. Auf dem Weg werde ich einige vorstellen hilfreiche CSS3-Eigenschaften welche Designer oft vergessen.
Ich habe versucht, mich stärker auf Theorien und Ideologien für das Web zu konzentrieren. Dies führt zu einem breiteren Fokus auf digitalen Text im Allgemeinen, und Sie, der Webdesigner, können dann auswählen, welche Stile für welchen Zweck gelten sollen. Der Kontext ist immer der Schlüssel, und Sie müssen dies für jedes Projekt, an dem Sie arbeiten, angemessen bestimmen. Betrachten Sie diesen Leitfaden als Referenzpaket mit modernen Web-Trends von typografischen Innovatoren auf der ganzen Welt.
Messen Sie Ihre Absätze
Für diese Art der Messung müssen Sie den Yard-Stick nicht ausschalten. Tatsächlich bezieht sich das Maß in Bezug auf die Typografie auf die Breite (horizontal) eines beliebigen Absatzes auf Ihrer Seite. Es ist kein Thema, das immer diskutiert wird, aber es beeinflusst die Lesbarkeit Ihrer Inhalte. Als Faustregel gilt, dass Sie jede einzelne Zeile auf 75 bis 85 Zeichen beschränken möchten (nicht unbedingt Leerzeichen enthalten)..
Nun, für einige breitere Layouts mag dies wie ein bisschen strecken. Vor allem, wenn Ihr Design fließend ist und angepasst werden muss, wenn der Benutzer das Browserfenster neu anpasst. Sie können immer ein CSS einstellen maximale Breite Eigenschaft auf Ihrem Hauptinhalt div. Das Kodieren von Rändern und Schriftgrößen in skalierbaren Einheiten (Prozentangaben, Ems) anstelle von Pixeln ermöglicht eine solche Flexibilität in jedem Layout.
Es gibt keine maximale Maßeinheit, vor der man vorsichtig sein sollte. Wie Sie Inhalte schreiben und Wörter in Sätze formulieren, ist viel wichtiger als die Breite jeder Zeile. Denken Sie jedoch daran, dass längere Sätze viel schwieriger zu lesen sind als kürzere, prägnante Aussagen.
Führend erklärt
Beim Entwerfen mit dem Absatzmaß sollten Sie auch die Idee von berücksichtigen führend. Das Wort wird ausgesprochen “ledd-ing”, wie die in Bleistiften verwendete Mine. Dieser Name stammt aus den älteren Tagen des mechanischen Satzes, wo zwischen den Textzeilen Bleistreifen angeordnet wurden.
Leading ist nach wie vor ein sehr wichtiges Konzept im Webdesign und geht mit Absatzmaßnahmen einher. Wenn Ihre Absatzbreite zunimmt, sollten Sie die Anzahl der führenden Zeilen gleich erhöhen, oder Abstand zwischen Textzeilen. Dieser zusätzliche Platz erleichtert das Lesen für Ihre Augen.
Wenn Sie sehr eng gewundenen Text überfliegen, kann es schwierig sein, sich auf eine einzige Zeile zu konzentrieren. Wenn dies der Fall ist, erhöhen Sie die Anzahl der führenden Zeilen mit CSS Zeilenhöhe Eigentum. Sie möchten immer mehr Platz zwischen den Textzeilen als zwischen den Wörtern. Andernfalls erscheinen Ihre Textblöcke möglicherweise als Zeitungsdruck und sind nicht sehr benutzerfreundlich.
Eine solide Technik besteht darin, mehr Platz als ursprünglich benötigt aufzubringen und bei Bedarf zu reduzieren. Nicht jeder Text wird gleich erstellt und Sie benötigen sicherlich Absätze mit unterschiedlichen internen Formatierungen wie fette Wörter, Ankerverknüpfungen, Unterstreichungen usw. Mit etwas mehr Führung werden diese Änderungen im Vergleich zum anderen Text nicht so aus dem Gleichgewicht gebracht.
Verwenden Sie natürliche Schriftgrößen
Es gibt immer noch eine Handvoll Websites, die sich für eine unterdurchschnittliche Schriftgröße entscheiden. 11px-12px kann viel mehr zu sein scheinen “Standard professionell” für Geschäftslayouts. Diese Größen helfen jedoch nicht der Mehrheit der Besucher, die nach bestimmten Informationen suchen.
Im Allgemeinen verwenden Webbrowser standardmäßig 16 Pixel, wenn Sie keine CSS-Regeln anwenden. Selbst wenn Sie mehr Platz in Ihrem Layout haben, um größeren Text unterzubringen, kann dies als etwas klein angesehen werden. Größere Schriftgrößen sehen einfach schöner aus und lassen sich einfacher nach relativen Suchbegriffen durchsuchen. Serifenschriften werden oft nicht als Absatzmaterial ausgewählt, aber Sie können trotzdem damit umgehen. Ich empfehle die Verwendung von viel größeren Textgrößen für serifenbasierte Schriftarten, um die Lesbarkeit zu verbessern und die Aufmerksamkeit auf sich zu ziehen.
Antworten Sie auf die Umgebung des Benutzers
Wenn Sie verschiedene Schriftfamilien und -größen ausprobieren, muss sich Ihr Inhaltsbereich entsprechend anpassen. Die Standardeinheit, mit der ich bleibe, ist ems Sie können die Größe je nach verfügbarem Platz und Bildschirmauflösung problemlos ändern. Dies optimiert die Leistung auf der Benutzerseite, was am wichtigsten ist.
Wenn Sie jedoch so flexible Inhalte haben, ist Ihr Layout anfällig für ein fehlerhaftes Ergebnis. Inhalte in der Fußzeile oder im Seitenleistenbereich können in manchen Browsern möglicherweise schief oder aus dem Gleichgewicht geraten. Oder Sie haben möglicherweise Schwierigkeiten, Bilder oder andere Medien in Ihrem Haupttext zusammenzustellen. Es gibt andere Alternativen zur Verwendung von ems, wenn Sie ein Layout mit festem Stil benötigen. Versuchen Sie jedoch beide Lösungen, um herauszufinden, welche Ihnen am besten gefällt.
Denken Sie daran, dass feste Breiten und Absatzgrößen viele Einstellungen in Ihrem Design einschließen. Es eignet sich hervorragend für Inhalte, die viele stationäre ästhetische Effekte enthalten - beispielsweise Hintergrundbilder oder viele angepasste Sidebar-Widgets. Es ist auch ein einfacher Vorgang, in der linken Spalte einen Bereich mit fließenden Inhalten mit festen Seitenleisten nach rechts zu erstellen.
Stil basiert auf Kontext
Einige andere wirklich nette CSS-Tricks wurden vor dem Mainstream-Design verborgen. Insbesondere gibt es Trends, die aus Druckwerken übernommen wurden und im richtigen Kontext angewendet werden können.
Viele Webdesigner haben die CSS-Eigenschaft text-indent noch nie verwendet. Sie geben einen Wert zum Einrücken der ersten Zeile eines Absatzes an, auf den diese Regel abzielt. Einheiten folgen den Standardtextoptionen wie Pixel, Punkte, Ems, Prozentsätze… Dies ist sicherlich kein Trend, den Sie in den meisten Blogs finden. Es bietet jedoch einen schönen Seitenrhythmus beim Lesen durch große Textblöcke.
Es gibt einen anderen Typ von CSS-Selektor, der als a bezeichnet wird Pseudoelement. Dies kann sich auf einen bestimmten Teil einer beliebigen Inhaltsauswahl beziehen. Der CSS3: Pseudo-Selektor für den ersten Buchstaben ist ideal zum Erstellen ausgefallener Stile für wichtige Absätze. Sie können den Anfangsbuchstaben jedes Absatzes - ähnlich einem Märchenbuch - aufpeppen, indem Sie fett, kursiv oder sogar die Schriftart ändern. Schauen Sie sich dieses schöne Beispiel für Drop Caps an, das zusätzlichen CSS-Code enthält, den Sie verwenden können.
Mit Buchstabenabstand spielen
Ich bin mir sicher, dass viele von uns den Begriff "Tracking" gehört haben, ohne jedoch zu realisieren, dass es dieselbe Idee wie die CSS-Eigenschaft für den Buchstabenabstand ist. Diese beiden Konzepte sind eins und dasselbe zwischen Print und digitaler Typografie. Die Einheit bezieht sich auf den Abstand zwischen Buchstaben innerhalb einer einzelnen Textzeile. Dies ist ein wirklich netter Effekt, der auf Kopfzeilen und sogar auf einige kleinere Inhaltsblöcke auf Ihrer Website angewendet werden kann.
Es ist wichtig, die Buchstabenabstände nicht mit Kerning zu verwechseln. Beide beziehen sich auf die Typografie und den Abstand zwischen den Buchstaben. Kerning bezieht sich jedoch insbesondere auf den Abstand zwischen zwei einzelnen Buchstaben in einem Wort. Die Buchstabenabstandseigenschaft gilt für ein ganzes Element Text, sei es ein Wort, ein Absatz, ein Kopf- oder Ankerlink. Denken Sie daran, wenn Sie mit neuen Ideen für Stile spielen.
Ich benutze oft ein paar Pixel / Punkte Abstand in Kopfzeilen mit allen Großbuchstaben. Dadurch werden die einzelnen Zeichen mit etwas zusätzlichem Speicherplatz aufgelöst und erscheinen auch als sehr definiert “Überschrift” aussehen. Negative Buchstabenabstände funktionieren auch im richtigen Kontext. Im Allgemeinen halte ich mich an kleinere Einheiten, höchstens -0.03em oder -0.1em.
Kombinieren und Anpassen von Schriftarten
Die Gestaltungskonzepte der Web-Typografie sind sicherlich eine Kunst, weniger eine Wissenschaft. Es gibt Richtlinien, die Sie befolgen können, aber es gibt keine festen Regeln, auf die Sie beschränkt sind. Dies bedeutet, dass Sie eine enorme Freiheit haben, die verschiedenen Schriftarten, auf die Sie zugreifen können, zu mischen und abzugleichen.
Bei weitem die beliebteste Kombination von Schriftarten ist eine Serifen- / Sans-Serifen-Aufteilung für den Kopf- und Absatzinhalt. Ich wechsle gerne beide, aber häufiger verwende ich Serifenschriften in den Kopfzeilen. Die zusätzlichen Markierungen und Striche auf jedem Buchstaben lassen sie als dominanter Seitentext schmeicheln.
Außerdem sind serifenlose Schriften sauberer und einfacher in Sätzen zusammenzufassen. Das bedeutet nicht, dass Serifenschriften in Absätzen nicht funktionieren. In der Tat gibt es viele großartige Beispiele! Ein wenig bekanntes Konzept mit der Bezeichnung x-height ist jedoch entscheidend für die Unterscheidung der Komplexität einer Schrift. Wenn Sie sich die Grundlinie einiger Wörter ansehen, werden Sie feststellen, wie solche Schriftarten aussehen werden “sich einfügen” miteinander.
Es ist auch erwähnenswert, wie wichtig der Raum zwischen diesen verschiedenen Elementen ist. Sie werden wahrscheinlich 2 oder 3 verschiedene Kopfzeilenstile verwenden, so dass jeder davon ein anderes Erscheinungsbild aufweist. Ich neige dazu, meine h2 / h3-Elemente etwas näher am folgenden Absatzblock zu halten, da dies impliziert, dass es eine Korrelation zwischen dem Inhalt gibt.
Diese Korrelation ist besonders nützlich, wenn Sie zwei völlig verschiedene Schriftarten nebeneinander verwenden. Ich empfehle nicht mehr als 3 verschiedene Schriftfamilien pro Inhalt. Nach zu vielen Anpassungen erscheinen Ihre Wörter durcheinander und die gesamte Seite erscheint wie ein Durcheinander missverständlicher Schriftarten.
Fazit
Ich hoffe, mit diesen Konzepten wird das komplizierte Thema der digitalen Typografie beleuchtet. Es kann schwierig sein, wirklich als Designer in die Arbeit zu kommen, vor allem, wenn Ihnen das ganze Thema fremd ist. Aber studieren Sie weiter und seien Sie sicher, eine ganze Reihe zu üben!
Nächste Woche: Bleiben Sie dran, wenn wir uns einige ansehen hilfreiche Werkzeuge und Ressourcen für eine bessere Web-Typografie.
Mehr…
Hier sind weitere typografische Beiträge:
- Schaufenster von Webdesigns mit schöner Typografie
- Bessere Typografie für moderne Websites
- Kurzanleitung zur Typografie: Lernen und sich inspirieren lassen
