CSS lernen - Schriftarten auf einer Website mit CSS formatieren

Schriftarten mit CSS gestalten

Die Wahl der richtigen Schriftart und des richtigen Stils ist sehr wichtig für die Lesbarkeit des Textes auf einer Website.

CSS bietet verschiedene Eigenschaften zum Gestalten der Schriftart des Textes, einschließlich des Änderns der Schrift, des Steuerns von Größe und Fettdruck, des Verwaltens von Varianten usw.

Die Schrifteigenschaften sind:

• font-family
• font-style
• font-weight
• font-size
• und font-variant

Lassen Sie uns jede dieser Schrifteigenschaften nacheinander genauer besprechen.

Schriftfamilie (font-family)

Die font-family-Eigenschaft wird verwendet, um die Schriftart anzugeben, die zum Anzeigen des Textes verwendet werden soll.

Diese Eigenschaft kann mehrere durch Kommas getrennte Schriftarten als Fallback enthalten, die der Browser nutzt, wenn die erste Schrift auf dem System des Benutzers nicht zur Verfügung steht

Listen Sie daher zuerst die gewünschte Schriftart auf, dann alle Schriftarten, die möglicherweise für die erste ausgefüllt werden, wenn sie nicht verfügbar ist.

Sie sollten die Liste mit einer der fünf generischen Schriftfamilien beenden. Diese lauten: serif, sans-serif, monospace, cursive und fantasy

Eine typische Deklaration einer Schriftfamilie (font-family) könnte wie folgt aussehen:

body {
    font-family: Arial, Helvetica, sans-serif;
}

Die im Webdesign am häufigsten verwendeten Schriftfamilien sind serif und sans-serif , da sie sich für den Besucher der Webseite besser zum Lesen eignen. monospace hingegen wird eher verwendet um Code darzustellen. Bei monospace nimmt jeder Buchstabe den gleichen Platz ein. Außerdem sieht er aus wie maschinengeschriebener Text.

Die cursive-Schriftarten sehen, wie Sie sich sicherlich denken können, aus wie kursive Schrift oder Handschrift. Die fantasy-Schriftart stellt eine künstlerische Schriftart dar, wird jedoch aufgrund der schlechten Verfügbarkeit in diversen Betriebssystemen nicht häufig verwendet.

Der Unterschied zwischen Serifen- und Sans-Serif-Schriften

Serifen-Schriften haben im Gegensatz zu serifenlosen Schriftarten kleine Linien oder Striche an den Enden der Zeichen. Siehe die folgende Abbildung:

Auf Bildschirmen sollte man serifenlose Schriften verwenden, da diese gerade bei größeren Texten besser zu lesen sind. Die Nutzbarkeit der Webseite sollte also immer wichtiger als das Design sein.

Schriftstil (font-style)

Die font-style-Eigenschaft wird verwendet, um den Schriftschnitt bzw. den Schriftstil für den Textinhalt eines Elements festzulegen. Der Schriftstil kann normal (Standard), italic oder oblique sein:

• normaler Text - font-style: normal;
• kursiver Text - font-style: italic;
• schräger Text - font-style: oblique;

Schriftgröße (font-size)

Die font-size-Eigenschaft wird verwendet, um die Schriftgröße für den Textinhalt eines Elements festzulegen. Es gibt mehrere Möglichkeiten, die Werte für die Schriftgröße anzugeben:

• Schlüsselwörtern (z.B. large)
• Prozentsätzen (z.B. 62.5%;)
• Pixeln (z.B. 62.5%;)
• EMs (z.B. large)
• usw.

Schriftgröße mit Pixeln einstellen

Die Einstellung der Schriftgröße in Pixelwerten ist eine gute Wahl, wenn Sie eine hohe Pixelgenauigkeit benötigen. Pixel ist eine absolute Maßeinheit, die eine feste Länge angibt. Sie ist also statisch. Beispiel:

p {
    font-size: 24px;
}

Die Definition der Schriftgrößen in Pixel wird als nicht sehr zugänglich angesehen, da der Benutzer die Schriftgröße nicht über die Browsereinstellungen ändern kann. Zum Beispiel möchten Benutzer mit eingeschränktem Sehvermögen die Schriftgröße möglicherweise viel größer als die von Ihnen angegebene Größe einstellen. Daher sollten Sie die Pixelwerte vermeiden und stattdessen die Werte verwenden, die relativ zur Standardschriftgröße des Benutzers sind.

Schriftgröße mit EM einstellen

Die em-Einheit bezieht sich auf die Schriftgröße des übergeordneten Elements. Wenn also das Elternelement die Schriftgröße 16px hat und ich die Schriftgröße des Kindelements mit 1em definiere, so entspricht dies genau den 16px.

Wenn Sie die Schriftgröße nirgendwo auf der Seite definiert haben, entspricht die Schriftgröße dem Browserstandard von 16px. Daher sind standardmäßig 1em = 16px, und 2em = 32px, etc.

h1 {
    font-size: 2em;        
    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    
    /* 14px/16px=0.875em */
}

Verwendung der Kombination von Prozent und EM

Wie im obigen Beispiel zu erkennen, ist die Berechnung der Schriftgrößen über EM nicht einfach. Eine gängige Praxis ist es deshalb, die Schriftgröße des body-Elementes auf 62.5% zu stellen. Dies entspricht 10px oder eben 0.625em. Nun kann man die leicht zu merkende Umrechnung 10px = 1em nutzen. Beispiel:

body {
    font-size: 62.5%;    
    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    
    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    
    /* 2em = 28px */
}

Schriftgröße mit Root-EM (rem) einstellen

Um die Dinge noch einfacher zu machen, hat CSS3 eine rem-Einheit (kurz für "root em") eingeführt, die immer relativ zur Schriftgröße des Root-Elements ( also html) ist. Dies ist im Gegensatz zu em unabhängig davon, wo das Element im Dokument liegt. Wir erinnern uns, em bezog sich immer auf das Elternelement.

1rem entspricht der Schriftgröße des html-Elements, also 16px. Im folgenden Beispiel zeige ich Ihnen wie rem angewendet wird:

       

html {
    font-size: 62.5%;    
    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    
    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    
    /* 2rem = 20px (not 28px) */
}
        

Schriftgröße mit Schlüsselwörtern einstellen

CSS stellt mehrere Schlüsselwörter bereit, mit denen Sie Schriftgrößen definieren können. Eine absolute Schriftgröße kann mit einem der folgenden Schlüsselwörter angegeben werden: xx-small, x-small, small, medium, large , x-large, xx-large. Eine relative Schriftgröße hingegen kann mit den Schlüsselwörtern: smaller oder larger angegeben werden. In diesem Beispiel sehen Sie, wie Schlüsselwörter angewendet werden:

       

body {
    font-size: large;
}
h2 {
    font-size: larger;
}
span {
    font-size: smaller;
}
        

Einstellen der Schriftgröße mit Viewport-Einheiten (vw, vh)

Die Schriftgrößen können mithilfe der Größe des Viewports mit vw und vh angegeben werden. Viewport-Einheiten beziehen sich auf einen Prozentsatz der Viewport-Dimensionen des Browsers, wobei 1vw = 1 % der Viewport-Breite und 1 vh = 1 % der Viewport-Höhe ist. Wenn das Ansichtsfenster also 1900 px breit ist, ist 1vw = 19px. Die Angabe erfolgt dabei folgendermaßen:

body {
    font-size: 1vw;
}

Dabei gibt es aber ein riesengroßes Problem: Auf kleinen Bildschirmen werden Schriften so klein, dass sie kaum noch lesbar sind. Um dies zu verhindern, kann die CSS- calc()Funktion wie folgt verwendet werden:

html { 
    font-size: calc(1em + 1vw); 
}

In diesem Beispiel würde die Schriftgröße mindestens 1 em oder 16 Pixel betragen, selbst wenn die Breite des Viewports 0 wäre. Darüber hinaus kann man Media-Querys für eine Anpassung verwenden.

p {
    font-weight: bold;
}

p {
    font-variant: small-caps;
}