0251 / 590 837 15

HTML: Schriftgröße, Schriftfarbe, Schriftart, fett, kursiv ...

Texte in HTML-Dateien können viele Gestalten haben, hier stellen wir Ihnen nun ersteinmal vor, wie Sie Schrift/Text notieren und welche Möglichkeiten der Gestaltung es gibt.

Jeglichen Text können Sie in das Dokument innerhalb des body hinein schreiben - er wird dann vom Browser angezeigt. Um diesen zu gestalten, können Sie anschließend zum Beispiel das span-Element verwenden oder den Text in einem Absatz packen.

<span> Hier steht Text </span> 

Für die eigentliche Gestaltung nutzen wir in diesem Artikel teilweise schon CSS. Hier werden in das style-Attribut bereits erste Regeln festgelegt.

Schriftgröße

Die Schriftgröße wird als font-size in das style-Attribut notiert. Die Größe kann dabei als Zahl, Zahlwert oder relative Größe angegeben werden. Man unterscheidet dabei mehrere Schriftgrößen. Beim Schriftgrößenangaben ist allgemein das folgende Schema gültig

<span style="font-size:Schriftgröße">Text</span> 

Die Schriftgrößen kann man in verschiedenen Maßeinheiten angeben. Eine gute Möglichkeit ist die Eingabe in Pixeln, also die Anzahl der Punkte auf dem Bildschirm, die ein Buchstabe in der Höhe einnehmen soll.

Für Überschriften werden oft Größen zwischen 20px und 30px verwendet. Fließtexte wie dieser haben in der Regel eine Größe zwischen 12 und 16px. Beispiel:

<h1 style="font-size:28px">Überschrift</h1>
<p style="font-size:16px">Dieser Absatz kann <span style="font-size:12px">kleine</span>
und <span style="font-size:18px">große</span> Schriften enthalten</p>

Man kann also auch in einem Absatz durch verschiedene span-Elemente verschiedene Schriftgrößen nutzen. Das style-Attribut kann man übrigens bei fast allen HTML-Elementen nutzen.

Schriftfarbe

Die Schriftfarbe wird mit color:Farbe im style-Attribut notiert. Hierbei können Sie entweder den Namen der Farbe oder den Farbcode verwenden. Beispiel:

<span style="color:white"> Weiße Schrift </span>
<span style="color:black"> Schwarze Schrift </span>
<span style="color:#FF0000"> Rote Schrift </span>

Schriftart

Um die Schriftart zu bestimmen wird in das CSS-Attribut font-family notiert. Als Wert wird der Name einer Schriftart angegeben. Dabei ist zu beachten, dass Schriftarten, die nicht auf dem Computer erst einmal installiert sind auch nicht als solche angezeigt werden können. Das heißt, wenn Sie zum Beispiel die Schriftart 'Arial Black' definieren und jemand der kein 'Arial Black' installiert hat, sich diese Seite ansieht, dann erscheint die Schrift bei ihm automatisch in einer anderen Schriftart. Abhilfe dabei schaffen später sogenannte Webfonts.

Durch die Angabe von mehreren Schriftarten wird die erste Schrift genommen, die verfügbar ist. Sollte also im folgenden Beispiel die Schrift "Verdana" nicht vorhanden sein, wird auf "Arial" zurückgegriffen:

<p style="font-family: Arial, Verdana">Andere Schriftart</p>

Schriftschnitt/-stil

Text kann mit verschiedenen Schriftschnitten dargestellt werden. Folgende Möglichkeiten stehen zur Auswahl: fett/bold, kursiv/italic, unterstrichen sowie jede Kombination daraus.

Fett/Bold

Fette Schrift erreicht man durch ein umschließendes b-Element (b = bold = fett). Beispiel:

<b> Fetter Text </b>

Ähnlich dem b-Tag ist das strong-Tag, dass ebenfalls die Schrift fett aussehen lässt. Der Unterschied ist, dass b nur für die Darstellung ist und strong aussagt, dass der Text betont wird. Über CSS könnte man diesen dann sinngemäß zum Beispiel auch farblich anders darstellen.

Kursiv/Italic

Um eine Kursivform der Schrift zu erhalten, umschließt man Sie mit einem i-Element (i = italic = kursiv/schräg). Beispiel:

<i> kursiver Text </i>

Unterstrichen

Damit der Text unterstrichen dargestellt wird, wird er mit einem u-Element (u = underlined = unterstrichen) umschlossen. Beispiel:

<u> unterstrichener Text </u> 

Durchgestrichen

Neben den drei erst genannten Möglichkeiten des Schriftschnittes/-stils, besteht noch die Option die Schrift durchgestrichen darzustellen. Der gewünschte Text wird dann mit einem strike- oder s-Element umschlossen. Beispiel:

<strike> durchgestrichener Text </strike>
<s> durchgestrichener Text </s>

Hochgestellt/Tiefgestellt

In besonderen Bereichen, zum Beispiel der Chemie, reicht es nicht aus, Texte oder Ziffern normal zu schreiben, hier muss manchmal der hochgestellt bzw. der tiefgestellt Schriftschnitt/-stil verwendet werden. Hochgestellte Schrift wird mit <sup> und </sup>, tiefgestellte Schrift mit <sub> und </sub> umschlossen. Beispiel:

<sub> tiefgestellter Text </sub><sup> hochgestellter Text </sup>

Hervorgehoben/Betont

Um Text hervorzuheben benutzt man allgemein das strong-Element. Zum Betonen wird das em-Element verwendet. Sie werden, wie die anderen auch, um den Text notiert. Beispiel:

<strong> hervorgehobener Text </strong>
<em> betonter Text </em> 

Hinweis: Die Darstellung des hervorgehobenen Textes und des betonten Textes gleichen denen von fettem und kursivem Text.

Textausrichtung

Um Text auszurichten wird die text-align Anweisung verwendet (align = Ausrichtung). Hier haben Sie die Wahl zwischen zentriert und rechtsbündig. Linksbündiger Text wird ohne Angaben dargestellt (Standardwert) oder mit text-align:left , rechtsbündiger wird mit text-align:right und zentrierter Text mit text-align:center (center = zentriert) angegeben. Beispiel:

<p>linksbündiger Text</p>
<p style="text-align:center"> zentrierter Text </p>
<p style="text-align:right">rechtsbündiger Text </p>

Zusätzlich gibt es noch die Möglichkeit den Text als Blocksatz zu definieren. Dann muss als Wert justify notiert werden. Beispiel:

<p style="text-align: justify"> Text als Blocksatz </p> 

Weitere Möglichkeiten mit CSS

In CSS gibt es noch einige weitere Möglichkeiten und Schriften zu gestalten. Dazu zählen zum Beispiel:

  • letter-spacing: Abstand zwischen den Zeichen
  • line-height: Höhe der Textzeilen
  • text-transform: Großbuchstaben / Kleinbuchstaben
  • Alle ansehen