Colorscheme

Font-Kompendium

Da ich selbst immer wieder im Internet stöbern muss, wenn ich mal wieder was mit Schrift mache, wollte ich mir und euch hier ein kleines Kompendium erstellen, nichts was es nicht auch woanders zu finden gibt.

CSS-Eigenschaften

  • font-family – Welche Schriftart soll verwendet werden. Hier liegt Freu und Leid nahe beieinander, denn einerseits kann man mit der Schriftart den größten Effekt erzielen, andererseits muss man auch wissen welche Schriftarten zumindest ähnlich auf unterschiedlichen Systemen aussehen. Eine gute Seite zur Übersicht findet sich hier: Windows-Mac-Fonts

    Code:
    style="font-family: arial, 'lucida console', sans-serif"

  • font-size – Hiermit läßt sich die Schriftgröße ändern, Formate sind px, em oder Bezeichnungen wie small, medium, large

    Code:
    style="font-size: 10px"

  • font-size-adjust – Unterschiedliche Schriftarten haben unterschiedliche Standardgrößen, sprich Verdana hat wird bei 14px anders dargestellt als andere Schriftarten. Möchte man aber nun verhindern das die Schrift größer oder kleiner dargestellt wird, wenn die gewünschte Schriftart auf dem System nicht verfügbar ist, kann man für jede Schriftart nochmal extra die font-adjust-size einstellen. Das Schriftbild läßt sich dann auch für andere Schriftarten anpassen.

    Hier ist noch eine Formel zur Berechnung:
    Wenn Verdana mit 14px nicht verfügbar ist (aspect-wert von 0.58), aber eine verfügbare Schriftart einen aspect-wert von 0.46 hat dann würde sich der Ersatzwert folgendermaßen berechnen: 14 * (0.58/0.46) = 17.65px

    Code:
    style="font-size-adjust: 0.58"

    font-size-adjust in CSS 2.1 entfallen

  • font-stretch – Hiermit läßt sich der Breite des Zwischenraums zwischen den einzelnen Buchstaben eines Wortes bestimmen. Umso größer der Zwischenraum, desto schlechter die Lesbarkeit, darauf sollte man achten. Eingesetzte werte: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded

    Code:
    style="font-stretch: ultra-condensed"

  • font-style – Soll der Text italic oder oblique (kursiv) dargestellt werden, hiermit läßt es sich einstellen. Wer wissen möchte wo der Unterschied zwischen italic und oblique liegt, findet was dazu im mediengestalter-Forum

    • Code:
    style="font-style: italic;"

  • font-variant – wird für font-variant der Wert “small-caps” eingesetzt werden alle Buchstaben als Großbuchstaben dargestellt, allerdings werden die Buchstaben, die “kleingeschrieben” wurden auch kleiner dargestellt als die Buchstaben die großgeschrieben wurden. Effekt: Durch Großbuchstaben erzeugt man mehr Aufmerksamkeit aber die Lesbarkeit leidet, durch die Eigenschaft “small-caps” wird dem etwas entgegengewirkt.
  • font-weight – Wie “fett” soll der Text dargestellt werden. Üblicher Wert ist hier “bold” doch es sind auch feinere Abstufungen möglich: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

    Code:
    style="font-weight: bold;"

  • font – Dies ist die Master-Eigenschaft, damit lassen sich obige Eigenschaften in einer bündeln, das spart Code und macht es leichter etwas zu ändern.

    Code:
    style="font: oblique small-caps 900 12px/14px arial"

via: w3schools.com

Nützliches Tool
CSS-Typeviewer – ein Tool was sich wirklich jeder bookmarken sollte. Hiermit läßt sich direkt sehen welcher Effekt eine Font-Änderung hat und man muss nicht mal die einzelnen Werte kennen sondern kann diese direkt aus einem Liste auswählen

Links
sIFR 2.0 – Rich Accessible Typography for the Masses

Verwandte Artikel
  1. CSS Font Stacks
  2. 7 Methoden eine Website mit wenig Text “voll” aussehen zu lassen
  3. Kostenlose Schriftarten
  4. Das Adsense Kompendium
  5. Valide Webseiten erzeugen und Tabellen mit Stylesheets den Kampf ansagen

am November 2, 2006 um 11:23 Uhr | in Webdesign | 4 Kommentare


4 Kommentare
  1. Damian Frick, November 2, 2006:

    Vieleicht wäre im Bezug auf Fonts auch noch sIFR (http://www.mikeindustries.com/sifr/) zu erwähnen.

  2. Christian Strang, November 2, 2006:

    Gutes ding! Muss mir das mal genauer anschauen, der Einleitungstext wirkt aber so, als würde das die Welt verändern ^^

  3. Stefan, November 7, 2006:

    Hab grad auf meiner lieblings CSS Seiten gestöbert und da steht: font-size-adjust in CSS 2.1 entfallen – vielleicht nützlich zu wissen wer CSS 2.1 valid coden will :D. (css4you.de)

  4. Christian Strang, November 7, 2006:

    Jau, danke! Werd das mal direkt updaten.

Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.