Montag, 20. Dezember 2010

29: Text styling with CSS


Zusammengefasst nach dem Artikel von Ben Henick
Quelle: http://dev.opera.com/articles/view/29-text-styling-with-css/
29: Text styling with CSS



Schriften Eigenschaften im CSS

Ein Designer hat im Internet eine geringere Kontrolle über die Typographie einer Webseite als beim traditionellen Printdesign. Doch auch hier ist es wichtig, auf die verschiedenen Eigenschaften von Schriften einzugehen, besonders um eine gute Leserlichkeit bereitzustellen. Es gibt im CSS verschiedene Möglichkeiten, um die Typografie einer Seite zu verändern.


font-size

Am häufigsten wird in einem Text die Schriftgröße geraucht. Im CSS wird diese mithilfe von der Eigenschaft „font-size“ definiert.

Beispiel:
body {font-size: 14px;}

Die Standard Schriftgröße eines Browsers beträgt 16 pixel. Die am häufigsten genutzten Einheiten der Schrfitgröße sind: pixels (px), ems (em), Prozent (%) und Punkt (pt). Der unterschied der verschiedenen Einheiten ist, dass es relatvie und absolute Schrifteinheiten sind.
Absolute Größen (px, pt) werden in Layouts verwendet, in denen die Relation zur Dokumentenfläche nicht ändert - auch fixe, statische oder „Ice“ Layouts.
Relative Größen (em, %) sollten in nicht statischen Layouts verwendet werden.

Üblicherweise entspricht em der Höhe eines großen „M“ in der angegeben Schrift. Im CSS entspricht jedoch em der Höhe einer Zeile, also einem Element in der Schriftgröße von 14px:
1em = 100% = 14px = 10.5pt

Will man nun die Schriftgröße vergrößern oder verkleinern, multipliziert man einfach den Wert dazu: 1.143em = 114.3% ≈ 16px = 12pt

Schlagwörter
Es können auch Schlagwörter von xx-small bis zu xx-large verwendet werden, um die Größe zu definieren.


font-family

Nach der Größenwahl kann nun die Schriftart definiert werden, dabei sollten gewisse Regeln beachtet werden:
Schriftarten müssen genauso benannt sein wie in der Schriftenbibliothek.
Alle Schriftarten müssen durch ein Komma getrennt werden
Besteht eine Schriftart aus mehr Wörtern, muss diese von Anführungszeichen umschlossen sein.
Bei mehreren Schriftarten sollte der Favorit immer als erster genannt werden.


Details bearbeiten

 
font-style: die Schrift wird italic, ohne das „i“ Element zu verwenden; Werte: italic, oblique und normal.

font-variant: der Text wird in Kapitälchen dargestellt; Werte: small-caps und normal
font-weight: kann die Stärke bzw. Dicke einer Schrift definiert werden


Schriften Kürzel

Die Text Eigenschaften können auch mit einem einzigen Kürzel im CSS definiert werden:
h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }

Es sollte jedoch immer eine bestimmte Reihenfolge eingehalten werden: font-style, font-variant, font-weight, font-size und font-family


Weitere CSS Definitionen

  • text-align: die Laufrichtung eines Textes wird definiert: links, rechts, mittig und bündig.
  • etter-spacing und word-spacing: der Weißraum zwischen Buchstaben und Wörtern kann verändert werden
  • text-indent: Einzug von Paragraphen; die Werte werden gleich wie bei der Schriftgröße angegeben.
  • text-transform: hier kann die Groß- bzw. Kleinschreibung definiert werden
  • text-decoration: erzeugt einen Strich über, unter oder durch den Text
  • line-height: der Weißraum zwischen den Zeilen kann verändert werden - Zeilenabstand

Keine Kommentare:

Kommentar veröffentlichen