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
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Textformen
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project