Typografie Info und CSS

Kaum eine Website kommt völlig ohne Schrift aus. Selbst Seiten, die Bilder oder Filme zum Thema haben (zum Beispiel Flickr oder YouTube), verwenden Texte, um die eigentlichen Inhalte zu erläutern. Ursprünglich war das Web sogar ein komplett bilderloses Medium. Und auch heute noch spielen Texte auf den meisten Websites die Hauptrolle. Daher ist es auch nicht verwunderlich...

Schriftarten festlegen in Webseiten mit font-family

Sie wollen in Ihren Webseiten Schriften verwenden, die nach Möglichkeit von allen Browsern verstanden werden. Verwenden Sie die Eigenschaft font-family, um die gewünschte Schrift und eine Reihe von Alternativen anzugeben. Beschränken Sie sich bei der Auswahl Ihrer Schriften auf solche, die mit größter Wahrscheinlichkeit auf allen Computern installiert sind. Hier ein paar Beispiele...

Schriftgrößen und -Maße festlegen mit font-size

Sie wollen die in einer Webseite zu verwendende Schriftgröße festlegen. Definieren Sie die nötigen Werte mithilfe der Eigenschaft font-size. Nutzen Sie bei der Gestaltung von Webseiten als Wert möglichst eine relative Maßeinheit wie beispielsweise em. Die Definition der Schriftgröße hat bei der Gestaltung vieler Websites eine besondere Bedeutung. Oftmals wollen Sie anstelle...

Die Schriftfarbe ändern mit color

Sie wollen bestimmte Elemente in einer eigenen Schriftfarbe gestalten. Verwenden Sie die Eigenschaft color mit einem in CSS gültigen Farbwert. In diesem Beispiel geben wir den Wert der Eigenschaft color als hexadezimalen Wert an. Durch diese Regel werden alle Überschriften zweiter Ordnung in einem dunklen Schiefergrau dargestellt. Standardmäßig stellen so gut wie alle...

Das Schriftgewicht ändern mit font-weight

Bestimmte Textteile sollen mehr oder weniger fett dargestellt werden, ohne dass hierfür spezielle HTML-Tags verwendet werden müssen. Passen Sie das Schriftgewicht mithilfe der Eigenschaft font-weight an die eigenen WüNische an. Eines der größten Probleme früherer Versionen von HTML bestand in der Vermischung von Inhalt und Darstellung. Viele Tags existierten allein zu...

Den Schriftstil anpassen mit font-style

Sie wünschen sich für bestimmte Textteile einen eigenen Schriftstil (z.B. kursiv). Verwenden Sie die Eigenschaft font-style und geben Sie ihr einen passenden Wert. Um Inhalt und Gestaltung möglichst getrennt zu halten, wird empfohlen, stattdessen die entsprechende CSS-Eigenschaft font-style zu verwenden. Mögliche Werte sind italic ("echte" Kursivschrift), oblique...

Text in Kapitälchen darstellen mit font-variant

Einige Textteile sollen in Kapitälchen dargestellt werden. Verwenden Sie die Eigenschaft font-variant und geben Sie ihr den Wert small-caps. Mithilfe dieser Regel werden Überschriften dritter Ordnung (<h3>) in sogenannten Kapitälachen dargestellt. Kapitälchen bestehen komplett aus Großbuchstaben. Trotzdem wird zwischen Groß- und Kleinschreibung unterschieden...

Text in Groß- und Klein mit text-transform

Sie möchten bestimmte Textteile komplett in Groß- oder Kleinbuchstaben darstellen, ohne hierfür den Text selbst verändern zu müssen. Optional soll jedes Wort mit einem großgeschriebenen Anfangsbuchstaben versehen werden. Verwenden Sie die Eigenschaft text-transform mit einem passenden Wert. Der HTML-Code enthält einen Absatz mit der ID einleitung...

Zeilenhöhen ändern zwischen den Zeilen

Sie wollen den Abstand zwischen den Zeilen ändern. Passen Sie den Wert für die Eigenschaft line-height an. Die hier gezeigte Regel legt fest, dass die Zeilenhöhe das Eineinhalbfache der Standard-Schriftgröße betragen soll. Durch eine Erhöhung des Werts für die Eigenschaft line-height vergrößert sich die Zeilenhöhe. Wird der Wert verringert, wird auch der Abstand zwischen den...

Abstand zwischen Buchstaben und Wörtern

Sie wollen den horizontalen Abstand zwischen Buchstaben und Wörtern (die Laufweite) im HTML-Text anpassen. Den Abstand zwischen Buchstaben können Sie mit der Eigenschaft letter-spacing einstellen; der Wortabstand wird durch die Eigenschaft word-spacing definiert. Während in der ersten Deklaration der Buchstabenabstand um 0,05 em-Einheiten verringert wird...