Advertisement
  1. Web Design
  2. Typography

Die typografische Boilerplate eines Webdesigners

by
Read Time:11 minsLanguages:
This post is part of a series called A-Z of Web Typography.
The Anatomy of Web Typography
Taking Ems Even Further

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Ich verwende gerne eine typography.css in meinen Projekten; eine separate Datei, die alle grundlegenden strukturellen typografischen Stile enthält, die ich benötige. Vieles, was darin zu finden ist, ist offensichtlich (zum Beispiel Überschriftengrößen), aber es enthält auch weniger offensichtliche Dinge, die ich nicht vergessen möchte. Lassen Sie uns die Checkliste durcharbeiten.


Eine separate CSS-Datei

Das Aufteilen Ihrer CSS-Dateien ist ein sinnvoller Arbeitsablauf beim Erstellen einer Website. Wenn Sie einen Präprozessor (wie Sass) verwenden, ist das Aufteilen von Dateien in "Partials" ganz natürlich. Wenn Sie es vorziehen, altmodisches Vanilla-CSS zu schreiben, gibt es immer noch Tools, die Ihnen helfen, sie zu einem endgültigen Build zu kompilieren.

Hinweis: Um es klar zu sagen: Es ist keine gute Idee, viele separate CSS-Dateien in Ihrem endgültigen Build zu haben (viele HTTP-Anfragen führen zu einem Leistungsengpass), also stellen Sie sicher, dass sie vor der Bereitstellung zusammengeführt werden!

In jedem Fall bedeutet das Aufteilen Ihres CSS in Teilbereiche, dass Sie Stilelemente für neue Projekte problemlos wiederverwenden können, und die Wartung wird zum Kinderspiel.

Wir werden eine typography.css erstellen, damit unsere Typografie auch bei einem aggressiven CSS-Reset immer solide beginnt.


Browserübergreifende Optimierung

Schriftarten werden je nach verwendetem Browser und verwendeter Plattform unterschiedlich gerendert. Wir können niemals alles überall gleich aussehen lassen, aber beginnen wir mit der Optimierung unserer Typografie, wo immer dies möglich ist.

Textwiedergabe

Viele Schriftarten enthalten luxuriöse Extras, um die Lesbarkeit zu verbessern. Ligaturen, Kerning und geometrische Präzision werden von Browsern unter normalen Umständen nicht oft verwendet, können jedoch verwendet werden, wenn Sie den Browser ausdrücklich dazu anweisen.

Browser, die unter Mac OS X laufen, geben normalerweise ihr Bestes, um Schriftarten gut zu rendern, und Rendering-Engines auf verschiedenen Plattformen spielen manchmal mit 20px oder größer Schrift um Schrift (die genaue Anzeige kleiner Schrift ist verständlicherweise schwieriger).

Hier ist das CSS:

Es teilt dem Browser mit, dass er nach Möglichkeit versuchen sollte, die zusätzlichen Schriftfunktionen wiederzugeben, um die Lesbarkeit zu verbessern. Es entstehen jedoch geringe Leistungskosten. Wenn Sie manchmal auf Geschwindigkeit über Qualität setzen müssen, können Sie für bestimmte Elemente zusätzlich den Wert optimizeSpeed verwenden:

Wo soll das eigentlich funktionieren? Diese netten Kerle bei Mozilla haben eine Browser-Support-Tabelle zusammengestellt, um das zu beantworten.

Schriftglättung

Das Standard-Schrift-Rendering in modernen Browsern wird von vielen als mangelhaft angesehen. Zeichen werden oft aufgrund der zusätzlichen Subpixel, die zum Glätten von Kanten verwendet werden, als "bit thick" (besonders unter OS X) gerendert. Aus diesem Grund verwenden viele Menschen Folgendes:

Alternativ können Sie Folgendes verwenden:

Wie wir bereits erwähnt haben, subpixel-antialiased ist, was moderne Browser neigen dazu, als Standard zu verwenden, wird none glatter Rendering insgesamt deaktivieren.

Wenn Sie sich an antialiased halten, verlieren Ihre Designs ein paar Kilos, aber wie James Koster betont, ignorieren Eingaben und Schaltflächen manchmal Ihre Anweisungen.

The button and the input are ignoring you. You gonna stand for that?!The button and the input are ignoring you. You gonna stand for that?!The button and the input are ignoring you. You gonna stand for that?!
Die Schaltfläche und die Eingabe ignorieren Sie. Wirst du dafür stehen?!

Damit Eingänge und Schaltflächen mitspielen können, müssen Sie genauer sein:

Sorted. CodepenSorted. CodepenSorted. Codepen
Sortiert. Codepen

Update: Wie von retrovertigo in den Kommentaren erwähnt, hat Firefox OS X jetzt einen eigenen vorangestellten Zusatz zum Spielen:

Dies hat einen ähnlichen Effekt wie das Antialiasing-Rendering von WebKit. Bei all dem ist jedoch gewarnt, dass es auf lange Sicht möglicherweise nicht der klügste Ansatz ist, mit Font-Rendering-Eigenschaften herumzuspielen.


Base

Wenn Sie zur Sache kommen, beginnen Sie Ihr typografisches Boilerplate wahrscheinlich mit der Einstellung der Basisschriftgröße, der Zeilenhöhe und der Schriftfamilie. Normalerweise führen wir dies für das <html>- oder das <body>-Element mit der Kurzanweisung aus:

Dies setzt uns mit unserer Basisgröße auf 100% der Standardgröße des Browsers (normalerweise 16px) fest, gibt uns eine einheitenlose 1,5 für die Zeilenhöhe und richtet dann unseren Font-Stack ein. Sie können mehr über diese "100%" -Standardeinstellung lesen, indem Sie Ems noch weiter auf Tuts+ nehmen.


Überschriften

Der nächste typografische Boxenstopp sind oft die Überschriften. Es sind sechs einzurichten, die jeweils für Überschriften mit unterschiedlicher Bedeutung verwendet werden.

Um zu bestimmen, welche Größe Ihre Überschriften haben sollten, müssen Sie eine modulare Skala ausarbeiten. Wir werden einen unkomplizierten Satz von Werten verwenden, der auf einer Legacy-Version von Nicolas Gallaghers normalize.css basiert (die Sie möglicherweise sowieso verwenden).

Diese Werte sind in ems angegeben, aber Sie können die entsprechenden Pixelwerte in den Kommentaren sehen.


Absätze

Absätze bilden normalerweise die Knochen eines HTML-Dokuments. ihr Styling kann die Lesbarkeit von Inhalten beeinflussen oder beeinträchtigen. Als absolutes Minimum benötigen sie eine gute Zeilenhöhe und einen guten Abstand.

Der Absatzabstand auf diese Weise gibt uns Folgendes:

font-para1font-para1font-para1
Zitat: Ferris Bueller's Day Off

Gedruckte Veröffentlichungen (wie, Sie wissen schon... Bücher) enthalten jedoch häufiger eingerückte Absätze, die wir wie folgt erhalten:

Dadurch wird der Rand entfernt, stattdessen wird ein Einzug auf alle Elemente außer den ersten Absatzelementen angewendet (mithilfe eines gleichgeordneten Selektors).

font-p-indentfont-p-indentfont-p-indent

Das einzige Problem dabei ist, dass am Ende des letzten Absatzes kein Rand mehr vorhanden ist. Alle folgenden Elemente würden dagegen gequetscht. Zum Glück kann dies gelöst werden. Harry Roberts schlägt Mo Robust Paragraph Indenting vor und es ist eine Technik, die ich sehr liebe:

Hier sehen Sie, dass wir das ursprüngliche Styling unserer Absätze beibehalten haben, der Rand unten ist bei allen noch vorhanden. Diesmal wenden wir jedoch einen gleichen negativen oberen Rand auf alle bis auf den ersten Absatz an, wodurch das Ganze nach oben verschoben wird, um die Lücken zu schließen.

Wortbrüche

Im Zeitalter flüssiger Layouts ändern sich unsere Maße (Linienbreiten) ständig. Anders als in der statischen Druckwelt können wir Zeilenumbrüche nicht manuell festlegen, um die Übersichtlichkeit zu wahren. Die CSS-Unterstützung für die Silbentrennung ist noch nicht so toll, so dass viele Leute versteckte Zeichen in ihren Inhalten verstecken, die als weiche Bindestriche (&shy;) fungieren und vorschlagen, wo ein Wort bei Bedarf getrennt werden sollte. Die praktischen Aspekte davon sind schrecklich.

Zum Glück verbessern sich die Dinge. Die word-break-Eigenschaft wird von Chrome und älteren IE unterstützt, und die zukünftige Unterstützung für die CSS3-Silbentrennung ist in Sicht. Die Einzelheiten von all dem werden von Kenneth Auchenberg sehr gut abgedeckt, aber vorerst ist hier die browserübergreifende CSS-Silbentrennung in ihrer ganzen Pracht:

Update: Nochmals vielen Dank an retrovertigo für den Hinweis; IE8 unterstützt tatsächlich den word-break ohne Präfix. Weitere Informationen finden Sie unter developer.mozilla.org.


Schlag auf die Anker

Wie sehen Ihre Hyperlinks aus? Standardmäßig zeigen die meisten Browser einen aktiven Link mit einer Unterstreichung an. Dies ist zu einer so etablierten Norm geworden, dass Sie einen guten Grund haben sollten, sie zu entfernen! Ebenso erwarten Benutzer, dass unterstrichene Wörter in der Kopie irgendwo verlinkt werden, also unterstreichen Sie keine zufälligen Wörter zur Hervorhebung.

Erwähnenswert ist auch der :visited-Status von Links (eine andere Farbe ist hilfreich, aber das ist alles, was Sie steuern können) und der :hover-Status.

Einige Leute argumentieren, dass eine Unterstreichung die Lesbarkeit eines Links behindert, daher könnten Sie stattdessen alternativ einen border-bottom verwenden, der den Abstand zwischen Zeile und Buchstabe vergrößern würde.

Außerdem (wie Bowie mich in den Kommentaren erinnerte) sollten Sie wirklich die Pseudoklassen :active und :focus einbeziehen. Diese Zustände sind für die Mausnutzung nicht sehr hilfreich (weshalb ich sie manchmal vergesse), aber für das Durchblättern mit der Tastatur oder für den Zugriff über andere Hilfstechnologien sind sie eine Definition wert.

Hinweis: Sie können sogar einen :focus:hover einfügen, wenn Sie sich ein bisschen besessen fühlen!

Ein letzter Hinweis, während wir gerade beim Thema Anker sind, ist, dass dies ein guter Ort sein könnte, um das Styling für verschiedene Arten von Links einzurichten. Wenn Sie möchten, können wir mit CSS-Attributselektoren externe Links anders gestalten, oder vielleicht Links, die zu einem Download führen:


Angenommene Bits und Bobs

Sofern Sie nicht alle Ihre Stile auf absolute Null zurückgesetzt haben, hat der Browser Sie wahrscheinlich hier behandelt, aber es ist eine gute Idee, sich Ihrer Grundlagen zu vergewissern. Heben sich Ihre strong ab? Sind Ihre em betont?

Code Ausschnitte

Wir verwenden *viel* <code>-Elemente auf Tuts+, also werde ich das nie vergessen, aber hat deins ein codeähnliches und lesbares Stil-Setup?

Sehr schön. Unser guter Freund, die Monospace-Schriftart, stellt sicher, dass jedes Zeichen leicht zu unterscheiden ist, weshalb es in Code-Editoren auf der ganzen Welt verwendet wird. Wir schließen hier auch den Elementselektor <pre> ein; "code" sollte für Inline-Schnipsel verwendet werden, "preformatted" sollte für Codeblöcke verwendet werden (Zeilenumbrüche etc. werden angenehm beachtet).

Abgesehen davon gefällt mir immer die Art und Weise, wie Bootstrap seine Codeelemente gestaltet:

pre-bootstrappre-bootstrappre-bootstrap

Das ist natürlich stilistisch, aber gib mir jeden Tag eine schöne, abgerundete Hintergrundfarbe auf meinen Inline-Schnipsel.


Block Zitate

Sie müssen Ihre <blockquote>-Elemente nicht übertreiben, aber es ist wichtig, sie optisch vom Rest Ihres Inhalts abzuheben. Sie unterstreichen den Fluss eines Artikels, erhöhen das Interesse und helfen beim Rhythmus.

Um hier nicht zu tief in die Stile einzutauchen, betonen wir nur die Tatsache, dass es sich um Blockzitate handelt:

Dadurch erhalten sie einen kursiven Stil (hoffentlich hat die verwendete Schriftart eine bestimmte kursive Variante, anstatt sie dem Browser zu überlassen) und stützt sich dann auf ein Pseudoelement für ein Anführungszeichen.

Einfach. Dieses Anführungszeichen \201C wird von nun an immer dynamisch in unsere Blockquotes eingefügt. Jedes weitere Styling liegt ganz bei Ihnen!


Druckstile

Das Styling für den Bildschirm ist eine Sache, aber wie oft haben Sie wirklich darüber nachgedacht, was passiert, wenn Ihre Benutzer auf "Drucken" klicken? Wir neigen dazu, keine Papierausgabe zu sehen, also neigen wir dazu, nicht darüber nachzudenken.

Wir nehmen ein Blatt aus der HTML5 Boilerplate und können einige Stile anwenden, um diejenigen zu unterstützen, die gerne auf Papier lesen. Zuerst verschachteln wir alles innerhalb eines Printmedientyps:

Mal es schwarz

Lassen Sie uns nun das Board leeren, indem wir sicherstellen, dass alles schwarz gedruckt wird, alle Hintergründe entfernen (wir möchten keinen Toner darauf verschwenden) und alle überflüssigen Schatten entfernen. Und ja, wir werden !important verwenden, was in diesem Fall ziemlich nützlich ist und nie überschrieben werden muss.

Paging

Ein paar andere Dinge, die ich aus HTML5BP herauspicken werde, beziehen sich auf die Lesbarkeit auf der gedruckten Seite. Auch diese werden in unserem @media print verschachtelt, werfen Sie einen Blick darauf:

Diese Eigenschaften gelten speziell für seitenweise Medien (wie unser "Print") und haben keinen Einfluss auf den Bildschirm. Sie steuern das Seitenwechseln eines bestimmten Dokuments und verhindern, dass verirrte Zeilen oben auf einer neuen Seite sitzen oder in Einzelhaft am unteren Rand einer alten Seite verschwendet werden.

Chris Coyier fasst es gut zusammen.

Witwen = Mindestanzahl von Zeilen in einem Absatz, der auf der neuen Seite geteilt wird. Waisen = Mindestanzahl von Zeilen in einem auf der alten Seite geteilten Absatz.

Witwen sind beispielsweise die letzten Zeilen eines Absatzes, die sich oben auf einer neuen Seite befinden:

This is a widow.This is a widow.This is a widow.
Dies ist eine Witwe (Zitat: Anton Ego, Ratatouille)

Während Waisen die Anfangszeilen eines Absatzes sind, die sich am Ende einer Seite befinden:

Say hello to Oliver Twist.Say hello to Oliver Twist.Say hello to Oliver Twist.
Sag Hallo zu Oliver Twist (Zitat: Anton Ego, Ratatouille)

Das Aufteilen eines Absatzes (oder einer Überschrift) in beiden Situationen unterbricht den Lesefluss, daher stellen die oben genannten CSS-Regeln sicher, dass in jedem Fall mindestens drei Zeilen vorhanden sind. Wenn nicht, werden Witwen auf die nächste Seite gestoßen, Absätze mit unzureichenden Waisenkindern werden ebenfalls auf die nächste Seite gezogen.

Seitenumbruch

Lassen Sie uns schließlich verhindern, dass die Seite unmittelbar nach einer Überschrift stoppt (die so aussehen würde:)

Gah.Gah.Gah.
Gah. (Zitat: Anton Ego, Ratatouille)

Auch hier benötigen wir Folgendes, um in unserem @media print bereich zu sitzen.

page-break-after kann eine Reihe von Werten annehmen. Wir haben avoid verwendet, um zu verhindern, dass die Seite nach der Überschrift umbricht (indem die Überschrift auf die nächste Seite gezogen wird). Seien Sie sich bewusst, dass diese Unterkunft eines Tages für eine break-after wird.


Wir werden es dort lassen

Wir könnten ewig so weitermachen, aber jetzt ist es an der Zeit, das Wort zu öffnen und sich die typografischen Basisstile anzuhören, die Sie alle verwenden. Was fehlt auf dieser Kesselplatte?

Weitere Ressourcen

Ein Artikel ist ohne eine Prise weiterführender Lektüre nie vollständig..

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.