HTML Schrift ändern

HTML Schrift ändern:
Anpassung der Schriftgrößen

HTML ist eine sog. Auszeichnungssprache. Das bedeutet, einzelne Textbausteine werden als bestimmte Elemente ausgezeichnet. Das erleichtert es dem Computer, den Text zu lesen und ihn korrekt formatiert darzustellen. Die richtige Verwendung von HTML ist auch wichtig, damit der Google-Crawler deine Webseite richtig lesen und einordnen kann und du SEO-mäßig gut rankst.
Außerdem ist semantisch korrektes HTML wichtig, um deine Webseite barrierefrei zu gestalten – also so, dass Computer deine Webseite z.B. vorlesen können.

Wie werden einzelne Elemente in HTML ausgezeichnet?

Damit der Computer weiß, welches Textelement wie ausgezeichnet werden soll, umschließt man das Textelement mit sog. Tags.

Für den obigen Abschnitt sieht das dann zum Beispiel so aus:

<p>Damit der Computer weiß, welches Textelement wie ausgezeichnet werden soll, umschließt man das Textelement mit sog. Tags.</p>

Du siehst in dem Beispiel, dass der Abschnitt eingeschlossen ist von den beiden Tags <p> und </p>. <p> sagt dem Computer, dass es sich um einen Textabschnitt handelt. Dabei ist <p> der öffnende Tag, der dem Computer sagt, dass der Abschnitt beginnt und </p> der schließende Tag, der dem Computer demnach sagt, dass der Abschnitt endet.

Das sind die wichtigsten HTML-Tags für die Darstellung von Textelementen:

• <p>Textabschnitt</p>
• <h1>Überschrift 1</h1>
• <h2>Überschrift 2</h2>
• <h3>Überschrift 3</h3>
• <h4>Überschrift 4</h4>
• <h5>Überschrift 5</h5>
• <h6>Überschrift 6</h6>
• <blockquote>Zitat</blockquote>
• <ol>Geordnete Liste</ol>
• <ul>Ungeordnete Liste</ul>
• <li>Listenelement</li>
• <a href="#">Link</a>
• <small>Kleiner Text</small>
• <dfn>Definition</dfn>
• <code>Computercode</code>

Das ist nur ein kleiner Auszug aus den gängigstigen HTML-Tags für die Textformatierung. Zusätzlich dazu gibt es auch HTML-Tags für die Formatierung des Dokuments.
Wenn du alle HTML-Tags kennenlernen möchtest, kannst du das zum Beispiel hier tun.

Was hat das alles mit Schriftgrößen zu tun?

Die einzelnen HTML-Tags sagen nicht nur dem Computer, um was für ein Element es sich handelt, sondern sie sehen auch unterschiedlich aus.

<p>Textabschnitt</p>

sieht zum Beispiel so aus:

Textabschnitt

<h2>Überschrift 2</h2>

so:

Überschrift 2

und <h4>Überschrift 4</h4> sieht so aus:

Überschrift 4

Die Formatierung der einzelnen Elemente ist dabei per default in deinem Browser voreingestellt. Hier kannst du nachlesen, wie diese Voreinstellungen definiert sind.

Wenn man eine eigene Webseite baut, möchte man in der Regel auch selbst vorgeben, wie diese Webseite aussehen soll. Man möchte also auch selbst Schriftgrößen, Schriftfarben und vieles mehr definieren, also HTML Schrift ändern. Hier kommt CSS ins Spiel!

CSS steht für „Cascading Stylesheets“ und ist eine deklarative Sprache für die Gestaltung von Webseiten.  Mithilfe von CSS kannst du die Eigenschaften der HTML-Tags mithilfe von Eigenschaftswerten definieren.

Schauen wir uns mal ein Beispiel ohne CSS an:

<p>Text</p>

sieht ohne CSS so aus:

Textabschnitt

Mit CSS könnte der gleiche Abschnitt aber völlig anders aussehen:

<p style="font-size: 28px;">Text</p> sieht so aus:

Textabschnitt

und <p style="font-size: 8px;">Text</p> sieht so aus:

Textabschnitt

In diesem Beispiel haben wir unseren Textabschnitt mit sog. Inline-CSS gestylt.

Inline CSS

Inline CSS bedeutet, dass die CSS-Anweisungen innerhalb des HTML Codes stehen, und so die HTML Schrift ändern.

Damit der Computer weiß, dass nun eine CSS-Anweisung kommt, haben wir style="" in das öffnende Tag hineingeschrieben. Der Computer weiß dann, dass alles, was zwischen den beiden Anführungszeichen kommt, CSS-Anweisungen sind.
In unserem Fall lautet die Anweisung font-size: 8px; Dabei sagt font-size, welche Eigenschaft geändert werden soll und 8px zeigt den neuen Eigenschaftswert an. Der Semikolon ; bedeutet, dass die Anweisung für diese Eigenschaft beendet ist. Das ist dann wichtig, wenn wir mehrere Eigenschaften auf einmal anpassen wollen.

External CSS

In der Regel wollen wir, dass beispielsweise alle unseren Überschriften gleich aussehen. Stell dir einmal vor, wir würden zu jeder einzelnen Überschrift auf 123mathe Inline CSS hinzufügen, damit jede Überschrift gleich aussieht und so für jedes einzelne Element die Darstellung der HTML Schrift ändern. Das würde ganz schön lange dauern…

Deshalb arbeitet man eigentlich so gut wie immer mit External CSS. Im Gegensatz zu Inline CSS sind hier die CSS-Anweisungen nicht mehr innerhalb des HTML-Codes, sondern in einer eigenen Datei, dem sog. Stylesheet.
Wenn man nur ein Stylesheet auf einer Webseite verwendet, nennt man es meistens style.css und es sieht zum Beispiel so aus, wenn wir alle Abschnitte <p> und alle Überschriften <h1> stylen wollen:

p {
font-size: 23px;
}
h1 {
font-size: 28px;
}

Statt unsere CSS-Anweisung innerhalb des Tags zu platzieren, schreiben wir zuerst den Selektor auf. Also den Namen des Elements, das wir ändern wollen, z.B. p oder h1 . Die CSS-Anweisung schreiben wir dann innerhalb der geschweiften Klammern {}.

Wie bei Inline CSS steht font-size für die Eigenschaft, die wir für das gewählte Element anpassen wollen und nach dem Doppelpunkt steht der gewünschte Eigenschaftswert. Der Semikolon sagt, dass die Anweisung für die Eigenschaft ; beendet ist.

Was ist besser: Inline CSS oder External CSS?

Die kurze Antwort: Kommt drauf an.

Manchmal kann es einfach schneller und effizienter sein, bestimmte CSS-Anpassungen direkt innerhalb des HTML-Codes zu machen.  Das gilt insbesondere dann, wenn es sich um überschaubare Änderungen für einzelne Elemente handelt, die sich auf dem Rest der Webseite nicht wiederholen.

Sobald du Elemente anpassen möchtest, die sich auf dem Rest der Webseite wiederholen, solltest du lieber auf External CSS zurückgreifen.
Damit hast du den besten Überblick und kannst auch Änderungen am effizientesten durchführen. Auch bei der Fehlerbehebung bist du viel schneller, wenn du mit einem externen Stylesheet arbeitest.

In der professionellen Webgestaltung arbeitet man i.d.R. mit externen Stylesheets. Wir verwenden für unsere Beispiele auf 123mathe trotzdem meistens Inline CSS, da es die Lesbarkeit der Beispiele vereinfacht.

In unserem Artikel CSS Stylesheet Grundlagen kannst nachlesen, wie man ein Stylesheet anlegt und wie man es mit der HTML-Datei verknüpft.

Mögliche Eigenschaftswerte für die Schriftgröße

Die Schriftgröße von HTML-Elementen ändert man mithilfe von CSS durch Angabe der Eigenschaft und des gewünschten Eigenschaftswerts.

Die Eigenschaft, mit der man die Schriftgröße anpasst, nennt man font-size.
Den Eigenschaftswert zu font-size kann man in verschiedenen Maßeinheiten angeben:

• Relative Maßeinheiten
  

  • em
  • rem
  • vh
  • vw
  • %
  • larger
  • smaller
  • …

• Absolute Maßeinheiten

  • px
  • xx-small
  • x-small
  • small
  • …

In diesem Beitrag gehen wir nur auf die absolute Maßeinheit px ein.

In CSS gibt px einen absoluten Wert an und zwar ist 1px in CSS so groß wie ein Punkt, den du mit einer Armlänge Abstand zu deinem Bildschirm gerade noch sehen kannst.
Diese Definition stellt damit sicher, dass Angaben in px auf jedem Bildschirm ziemlich gleich aussehen.

Hier ein paar Beispiele für unterschiedliche Schriftgrößen in px

Meine Schriftgröße ist 5px.

Meine Schriftgröße ist 10px.

Meine Schriftgröße ist 12px.

Meine Schriftgröße ist 18px.

Meine Schriftgröße ist 26px.

HTML Schrift ändern:
Anpassung der Schriftfarbe

Die Schriftart lässt sich genauso leicht per CSS anpassen wie die Schriftgröße.
Die Eigenschaft, mit der man die Schriftgröße anpasst, nennt man color.
Der Eigenschaftswert zu color ist immer eine Farbe. Diese kann man aber auf verschiedene Weise angeben:

• Farbname

  • Aqua
  • Azure
  • Blue
  • …

• Hexcode

  • #00FFFF
  • #F0FFFF
  • #0000FF
  • …

• Farbe in RGB-Schreibweise

  • rgb(0, 255, 255)
  • rgb(240, 255, 255)
  • rgb(0, 0, 255)
  • …

• Farbe in HSL-Schreibweise

  • hsl(180, 100%, 50%)
  • hsl(180, 100%, 97%)
  • hsl(240, 100%, 50%)
  • …

• Farbe in CMYK-Werten

  • 100,0,0,0
  • 6,0,0,0
  • 100,100,0,0
  • …

Gibt man keinen Farbwert an, wird die im Browser vordefinierte Farbe verwendet. Hier kannst du nachlesen, wie diese Voreinstellungen definiert sind.

Am gebräuchlichsten ist die Angabe der gewünschten Farbe mithilfe des Hexcodes, da sich alle erdenklichen Farben damit sehr effizient darstellen lassen.

Alternativ bietet sich auch die Verwendung vordefinierter Farbnamen an, v.a. für sehr gebräuchliche Farben.

Auf dieser Seite kannst du dir alle vordefinierten Farben inklusive ihrer Farbnamen, Hexcodes, RGB- und HSL-Werte ansehen.
Auf der gleichen Seite kannst du im oberen Abschnitt eine Farbe heraussuchen und die Seite gibt dir dann den passenden Code an, damit du ihn bei deiner Webentwicklung verwenden kannst und so HTML Schrift ändern, aber auch andere Elemente mit verschiedenen Farben ausstatten kannst.

Und wie sieht das jetzt konkret aus?

<p>Textabschnitt</p>

sieht ohne CSS so aus:

Textabschnitt

Mit CSS könnte der gleiche Abschnitt aber völlig anders aussehen:

<p style="color: blue;">Text</p>

sieht so aus:

Textabschnitt

Wenn du dir in der Farbtabelle den passenden Hexcode oder RGB- oder HSL-Wert heraussuchst, ändert sich zwar der Code, die Ausgabe bleibt aber immer gleich:

<p style="color: #0000FF;">Text</p> →

Textabschnitt

<p style="color: RGB(0, 0, 255);">Text</p> →

Textabschnitt

<p style="color: HSL(240, 100%, 50%);">Text</p> →

Textabschnitt

Was sind eigentlich Websichere Farben?

Heutzutage spielen die sog. Websicheren Farben keine Rolle mehr.
Früher aber, als die meisten Grafikkarten nur 256 Farben für den Monitor bereitstellen konnten, einigten sich die Hersteller auf eine Palette von 216 definierten Farben, die auf allen Monitoren gleich dargestellt werden sollten. Demnach galten nur diese 216 Farben als websichere Farben.

Mittlerweile ist man aber nicht mehr auf diese Palette beschränkt, du kannst also aus dem vollen Farbeimer schöpfen!

HTML Schrift ändern:
Anpassung der Schriftarten

So wie man die Schriftgröße und -farbe mithilfe von CSS ändern kann, kann man sogar die Schriftart ändern.

Hier ein Beispiel:

<p>Textabschnitt</p>

verwendet die im Browser voreingestellte Schrift:

Textabschnitt

<p style="font-family: Arial, sans-serif;">Textabschnitt</p>

stellt unseren Text in Arial dar:

Textabschnitt

font-family steht für die Eigenschaft, die wir ändern möchten. Das kennst du schon von den Anpassungen von Schriftgröße und Schriftfarbe. Die Besonderheit, die wir bei der Anpassung der Schriftart, also des Fonts, haben, ist dass wir es hier mit zwei Eigenschaftswerten zu tun haben: Arial und sans-serif.

In unserem Beispiel ist Arial der <family-name> und sans-serif der <generic-name>.

Font Family

Der <family-name> gibt an, welcher Font, also welche Schriftart, im Browser angezeigt werden soll.

In den meisten Fällen gibt man an dieser Stelle zwei Fonts an: Eine Schriftart, die man auf dem eigenen Server für den Besucher der Webseite bereitstellt und eine Schriftart, auf die der Computer zurückgreifen kann, wenn er nicht auf die bereitgestellte Schrift zugreifen kann.

Unser Beispiel können wir also optimieren, indem wir als erste Schriftart diejenige angeben, die wir eigentlich anzeigen lassen wollen, z.B. Inter:

<p style="font-family: Inter, Arial, sans-serif;">Textabschnitt</p>

Inter ist ein Google Font, den du dir hier ansehen kannst.
Google bietet sehr viele kostenlose Fonts an, aber auch Adobe hat ein breites Spektrum an Schriften im Angebot.

Wie man sich eine besondere Schrift auf Google oder Adobe herunterlädt und auf die eigene Webseite einbindet, werden wir bald in einem speziellen Beitrag zu diesem Thema erklären und hier verlinken.

Generic Font Family

Falls der unter <family-name> angebene Font weder auf dem Gerät, mit dem man sich die Webseite ansieht noch auf dem Server der Webseite bereitsteht, greift das System nämlich auf auf die unter <generic-name> angebene Darstellung zurück. <generic-name> ist also eine Fallback-Option. Es gibt folgende Auswahlmöglichkeiten für die Generic Font Family:

• serif
• sans-serif
• monospace
• cursive
• fantasy

Idealerweise wählst du stets die Generic Font Family aus, die der Schriftart, die du vorher gewählt hast, am ähnlichsten kommt. Damit kannst du sicherstellen, dass die Schrift auf deiner Webseite in jedem Fall gut aussieht.
Hier kannst du mehr zu diesem Thema erfahren.