5202

ein Blog über technische Fragen zu Blogger

CSS für Schrift

von
Ich find's ganz nützlich, mal die wichtigsten CSS Eigenschaften für Schrift gesammelt vor sich zu haben. Ich gebe im Skizzenbuch für jede Eigenschaft ein Beispiel, der Link zurück führt zum jeweiligen Unterpunkt hier im Post.

font-family

Die CSS Eigenschaft font-family meint die Schriftart eines Textes. Ich habe dazu schon mal etwas ausführlicheres geschrieben.

Wichtig ist bei Schrift die Leserlichkeit und das ist eine objektive Eigenschaft und kein Geschmacksfrage! 'Handschriften' sind etwa für längere Texte ungeeignet.

Bei der Schreibweise für font-family beachten, dass Schriften aus mehreren Begriffen in Anführungsstrichen geschrieben werden:
foo {
font-family: 'Open Sans Condensed', serif
}

font-size



font-size ist die Schriftgröße eines Textes und kann in px, em, rem und Prozent(%) angegeben werden.

Am verbreitetsten ist die Größe 'px', was in Zukunft ein großes Problem werden wird. Moderne Displays wie das Apple 'Retina-Display' haben bei gleicher Fläche vier mal so viel Pixel, womit eine 16px Schrift vier mal so klein als wie auf einem 'normalen' Display dargestellt wird (okay, keine Sorge, Apple vergrößert alles ...). Absolute Größenangaben machen in Zukunft also wenig Sinn

Die Schriftgröße hat einen objektiven Einfluss auf die Leserlichkeit eurer Texte - eine 13px Schrift ist im Webdesign am Rand der Unleserlichkeit.
foo {
font-size: 1.1em
}

font-weight



Das Schriftgewicht kann in Werten oder Begriffen angegeben werden. Achtung: Nicht jede Schrift unterstützt alle Schriftgewichte!

Die Werte sind: 100,200,300,400,500,600,700,800,900
Die Begriffe sind: lighter, normal, bold, bolder
foo {
font-weight: 800
}

font-style



font-style ist der ... hmhm ... Schriftstil? Der einzige Schriftstil von bedeutung ist kursiv - als CSS Wert italic.
foo {
font-style: italic
}

line-height



Die Linienhöhe in einem Text meint den Abstand zwischen zwei Zeilen. Linienhöhe x Schriftgröße ergibt das horizontale Raster eines Textes.

Die Linienhöhe ist für das Schriftbild und die Gliederung einer Seite wichtig - sowohl zu groß als auch zu klein wirken sofort seltsam.

Die Werte von line-height können in Zahlen, px, em, rem und Prozent angegeben werden.
foo {
line-height: 1.2em
}

text-transform



Einen Text komplett in Großbuchstaben darzustellen geht mit der Eigenschaft text-transform - unabhängig davon, wie's im Quelltext geschrieben ist. Für Überschriften ist das manchmal eine nützliche Eigenschaft.

Wer seine Leser in den Wahnsinn treiben will, kann auch alles in Kleinbuchstaben schreiben. Persönlich lese ich Texte, die die deutsche Groß.- und Kleinschreibung ignorieren, niemals - ist mir zu anstrengend :=).
foo {
text-transform: uppercase
}

font-variant



font-variant setzt euren Text in 'Kapitälchen', wobei Großbuchstaben als solche zu erkennen sind. Eine sehr elegante Schrifteigenschaft. Habe ich allerdings in Blogger in freier Wildbahn noch nie gesehen.
foo {
font-variant: small-caps
}

text-align



text-align wird wohl die am häufigsten gebrauchte CSS Eigenschaft für Texte sein. Man kann einen Text sowohl vertikal link, rechts, mittig als auch horizontal oben, unten, mittig ausrichten. Ist im Fall das Falles manchmal a bisserl kniffelig ...
foo {
text-align: right
}

text-decoration



Am wichtigsten ist die Eigenschaft text-decoration bei Links - ein 'unterstrichener' Text ist nämlich im Web seit jeher ein Hinweise auf ein klickbarer Link.

Ihr solltet also auf keinen Fall einzelne Wörter im Text unterstreichen, wenn kein Link dahinter liegt, das verwirrt eure Besucher.
foo {
text-decoration: line-through
}

text-indent



text-indent meint, dass die erste Zeile eines HTML-Elements um einen bestimmten Betrag nach rechts einrückt. Im Buchdruck findet ihr das häufig, im Web weniger. Schade, ich finde das gibt ein schönes Schriftbild.
foo {
text-indent: 1.5em
}

white-space



Die CSS-Eigenschaft white-space kontrolliert den Zeilenumbruch eines Texts.

Ein häufiges Problem vom Blogger-Editor ist, dass er Zeilenumbrüche erst am Ende einer Zeile macht. Wer sich nicht mit nervigen <br /> Tags rumärgern will, kann's mal mit white-space und dem Wert pre versuchen.
foo {
white-space: pre
}

color



Schriftfarbe hat bestimmt jeder von euch schon mal verwendet. Ihr könnt eine Farbe als Begriff (green, red, yellow), in Hexschreibweise (mit sechs Buchstaben oder Zahlen), als RGB-Farbe (Rot, Grün, Blau), als RGBA-Farbe (Rot, Grün, Blau, Alphakanal) oder in noch seltsameren Schreibweisen schreiben.

Bei Schriftfarben gibt es auch wieder objektive Kriterien zur Leserlichkeit von Texte - weiße Schrift auf schwarzem Grund ist etwa physiologisch für das menschlichen Auge extrem anstrengend.
foo {
color: rgba(0,0,0,.3)
}

letter-spacing



letter-spacing verändert den Abstand zwischen den Buchstaben eines Textes - kann für eine Feinjustierung der Leserlichkeit wichtig sein.

Mit der Einheit em lässt sich der Wert bis zum dritten Stelle hinter dem Komma kontrollieren.
foo {
letter-spacing: .001em
}

word-spacing



word-spacing ist das Äquivalent zu letter-spacing für Worte. Die Eigenschaft verändert den Abstand zwischen den Wörtern eines Textes.
foo {
word-spacing: .015em
}

text-shadow



Okay, kommen wir zu den neuen CSS3-Eigenschaften von Text:

Der Anfang macht text-shadow, also Textschatten. Das ist eine a bisserl unterschätzte Eigenschaft, die hier zu erklären der Platz nicht reicht - aber ich werde bestimmt irgendwann einmal etwas dazu schreiben ... :=).
foo {
text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999
}

Pseudoelement ::first-letter



Über das Pseudoelement ::first-letter könnt ihr den ersten Buchstaben der erste Zeile eines HTML-Elements selektieren. Im Buchdruck wird ja häufig der erste Buchstabe eines Kapitels eigens gestaltet.
foo::first-letter {
  font-size:30px;
  color:#0000ff;
  font-weight:bold;
  padding: 0 .2em 0 0
}

Pseudoelement ::first-line



Mit dem Pseudoelement ::first-line könnt ihr die erste Zeile eines HTML-Elements gestalten - das ist ebenfalls eine Layout-Technik aus dem Buchdruck.
foo::first-line {
  font-size:21px;
  font-style:italic
}

Pseudoelement ::selection



Mit dem Pseudoelement ::selction könnt ihr Farbe und Hintergrund für die Auswahl eines Texts bestimmen - ich sehe zwar keinen rechten Sinn darin, aber vielleicht ist es für jemanden ja mal von Wert.
foo::selection {
  color: red
}

Verwendung?

Das soll hier kein Kompendium für-alle-denkbaren-Fälle sein, sondern lediglich eine Liste von Text-Eigenschaften, die ich für nützlich halte. Es gibt natürlich noch viel mehr [und exotischere] Eigenschaften, aber die werdet ihr wohl nie vermissen.

In einem Blog ist Text das zentrale Ausdrucksmittel und ich denke schon, das man da Zeit und Mühe reinstecken sollte. Ich sehe jeden Tag einige Blogs wo ich mir denke, der Eigentümer legt's darauf an, möglichst nicht gelesen zu werden ... und das kann's einfach nicht sein.

Ich habe versucht möglichst 'klare' Skizzen zu bauen, wo ihr euch unter den Texteigenschaften auch was vorstellen und eventuell überlegen könnt, ob das nicht was für euch wäre. Vielleicht hilft's ja weiter ... :=).

Anmerkungen, Fragen

Wenn's Fragen zu konkreten Anwendung von dieser CSS in einem blogspot.com Blog gibt, dann fragt einfach in den Kommentaren nach. Wenn's irgendwelche Fragen gibt, die thematisch nicht so dazu passen - dafür habe ich jetzt ein Forum.