Zum Hauptinhalt springen

Was ist die Schriftskala und wie verwende ich sie

Die Schriftskala ist eine der wichtigsten Eigenschaften von Text, mit der Sie die Schriftgröße auf einer Webseite ändern können. Mit der Schriftskala können Sie die Lesbarkeit von Inhalten für den Benutzer steuern, sodass sie besser lesbar oder weniger sichtbar sind. Darüber hinaus spielt die Schriftskala eine große Rolle bei der Erstellung adaptiver und reaktionsfähiger Designs, die sich an den Bildschirm des Geräts des Benutzers anpassen.

Die Verwendung des Schriftmaßstabs in der Webentwicklung ermöglicht Flexibilität bei der Darstellung von Inhalten, insbesondere bei der Entwicklung mehrsprachiger Websites oder Websites mit unterschiedlichen Überschriftenhierarchiegrundlagen. Mithilfe dieser Eigenschaft können Sie strukturierten Text erstellen und Akzente mit den ursprünglich ausgewählten Textgrößenwerten markieren. Außerdem hilft die Schriftskala, die Anzahl der Zeichen zu erhöhen, die in eine Zeile passen, und die Breite der Blöcke kann leicht angepasst werden.

Mit der Schriftskala können Sie die Benutzeroberfläche vereinfachen und die Benutzererfahrung verbessern. Wie viele Elemente des Webdesigns ist die Schriftskalierung ein leistungsfähiges Werkzeug, um attraktive und benutzerfreundliche Bildschirme zu erstellen.

Festlegen des Schriftmaßstabs

Die Schriftgröße kann auf verschiedene Arten geändert werden, einschließlich der Verwendung eines Attributs font-size in CSS und mit den Befehlen zum Ändern der Schriftgröße in HTML.

Der Schriftgrad wird in Pixeln (px), Prozentsätzen (%) oder anderen Maßeinheiten gemessen und kann als absoluter Wert oder relativ zu anderen Textgrößen angegeben werden.

Wenn Sie beispielsweise einen Textabsatz mit einer Schriftskala von 14px haben, beträgt seine Größe 14 Pixel. Wenn Sie es auf 120% skalieren, beträgt die neue Schriftgröße 16.8 Pixel (14px * 120% = 16.8px).

Die Verwendung der richtigen Schriftgröße auf einer Webseite ist für die Lesbarkeit und Zugänglichkeit von Inhalten sehr wichtig, da zu wenig oder zu großer Text das Lesen und Verstehen von Informationen erschweren kann.

Die Schriftgröße und ihre Auswirkungen auf die Textwahrnehmung

Die Schriftgröße ist für die Wahrnehmung von Text im Webdesign von großer Bedeutung. Es bestimmt, wie lesbar und benutzerfreundlich der Text für den Benutzer sein wird. Eine zu kleine Schriftgröße kann schwer lesbar sein, während eine zu große Schriftgröße zu einer Belastung der Augen führen kann.

Wenn es um die Schriftgröße geht, wird eine Skalierung verwendet, mit der Sie die Größe des Textes auf einer Webseite ändern können, ohne die Schriftgröße selbst zu ändern.

Die Schriftgröße bestimmt, wie oft die Schriftart vergrößert oder verkleinert wird. Normalerweise wird eine relative Maßeinheit wie ein Prozentsatz oder ein em-Wert verwendet.

Die Schriftskalierung kann beim Erstellen eines ansprechenden Designs hilfreich sein, bei dem der Text an verschiedene Bildschirmgrößen und Geräteauflösungen angepasst werden muss. Es kann auch verwendet werden, um wichtige Informationen hervorzuheben oder spektakuläre Überschriften zu erstellen.

Wenn Sie die Schriftgröße und die Schriftgröße auswählen, ist es wichtig, nicht nur die Lesbarkeit, sondern auch die ästhetische Komponente des Designs zu berücksichtigen. Der Text sollte für die Augen der Benutzer leicht wahrnehmbar und angenehm sein. Die Schriftgröße muss den Designzielen und dem Verwendungskontext entsprechen, um die maximale Benutzerfreundlichkeit und Effektivität des Textes zu gewährleisten.

Methoden zum Festlegen des Schriftmaßstabs

In HTML gibt es mehrere Möglichkeiten, den Schriftgrad für Text festzulegen.

1. Absolute Maßeinheiten verwenden:

Sie können den Schriftgrad mit absoluten Maßeinheiten wie Pixeln (px), Punkten (pt), Millimetern (mm) oder Zoll (in) festlegen. Zum Beispiel:


Этот текст будет иметь размер шрифта 16 пикселей.
А этот текст будет иметь размер шрифта 12 пунктов.

2. Verwenden relativer Einheiten:

Relative Einheiten drücken die Schriftgröße relativ zu anderen Elementen auf der Seite aus. Sie können die folgenden relativen Einheiten verwenden:

  • em: die Schriftgröße entspricht der aktuellen Schriftgröße des Elements. Wenn beispielsweise die aktuelle Schriftgröße des übergeordneten Elements 16 Pixel beträgt, ergibt das Festlegen der Schriftgröße des Elements auf 1.5em eine Schriftgröße von 24 Pixeln.
  • rem: die Schriftgröße entspricht der aktuellen Schriftgröße des Stammelements (html). Dies ist nützlich, wenn Sie eine Schriftgröße festlegen möchten, die unabhängig von anderen Elementen auf der Seite ist.
  • %: die Schriftgröße entspricht einem Prozentsatz der Schriftgröße des übergeordneten Elements. Wenn beispielsweise die Schriftgröße des übergeordneten Elements 16 Pixel beträgt, ergibt das Festlegen der Schriftgröße des Elements auf 150% eine Schriftgröße von 24 Pixeln.

Этот текст будет иметь размер шрифта, равный 1.5 размеру шрифта родительского элемента.
А этот текст будет иметь размер шрифта, равный 1.2 размеру шрифта корневого элемента.
И этот текст будет иметь размер шрифта, равный 150% размера шрифта родительского элемента.

3. Verwendung von Schlüsselwörtern:

HTML bietet außerdem mehrere Schlüsselwörter zum Festlegen des Schriftmaßstabs:

  • small: legt die kleinste Schriftgröße fest.
  • medium: legt die durchschnittliche Schriftgröße fest (Standard).
  • large: legt eine große Schriftgröße fest.

Этот текст будет иметь наименьший размер шрифта.
А этот текст будет иметь средний размер шрифта.
И этот текст будет иметь большой размер шрифта.

Sie können diese Methoden kombinieren, um den gewünschten Schriftgrad für die verschiedenen Elemente auf Ihrer Seite zu erreichen.

Verwenden absoluter Schrifteinheiten

In HTML gibt es mehrere absolute Maßeinheiten für die Schriftart, mit denen Sie die genaue Textgröße festlegen können. Diese Einheiten sind unabhängig von den Einstellungen Ihres benutzerdefinierten Browsers oder Geräts und bieten daher ein vorhersagbareres Aussehen für Ihre Inhalte.

Eine der beliebtesten absoluten Maßeinheiten einer Schriftart ist Pixel (px). Ein Pixel ist die kleinste Maßeinheit, die zum Anzeigen von Grafiken auf dem Bildschirm verwendet wird. Sie können die Schriftgröße in Pixeln festlegen, indem Sie den Wert nach der Eigenschaft "font-size" in CSS angeben. Zum Beispiel:

Der Wert "16px" bedeutet, dass die Schriftart eine Höhe von 16 Pixeln hat.

Neben Pixeln können absolute Maßeinheiten wie Millimeter (mm) und Zoll (in) verwendet werden. Zum Beispiel:

Hier gibt der Wert "10mm" an, dass die Schriftart eine Höhe von 10 Millimetern hat.

Obwohl die absoluten Schrifteinheiten für die genaue Textgröße nützlich sind, sind sie bei der Arbeit mit verschiedenen Geräten und Bildschirmauflösungen möglicherweise weniger flexibel. Es wird daher empfohlen, sie unter Berücksichtigung des Kontexts und der Bedürfnisse Ihres Projekts zu verwenden.

Verwenden relativer Schrifteinheiten

Wenn Sie eine Webseite erstellen, ist es wichtig, die richtige Schriftgröße zu wählen, um die Lesbarkeit des Inhalts zu maximieren. Anstatt absolute Maßeinheiten wie Pixel oder Punkte zu verwenden, wird empfohlen, relative Einheiten zu verwenden, mit denen Sie die Schriftgröße basierend auf den Vorlieben der Benutzer festlegen können.

Es gibt mehrere relative Einheiten für die Schriftgröße in HTML:

EinheitDie Beschreibung
emDie Schriftgröße wird relativ zur Schriftgröße des übergeordneten Elements festgelegt. Beispielsweise entspricht der Wert 1em der Schriftgröße des übergeordneten Elements.
remDie Schriftgröße wird relativ zur Schriftgröße des HTML-Elements angegeben. Beispielsweise entspricht der Wert 1rem der Schriftgröße eines HTML-Elements.
%Die Schriftgröße wird als Prozentsatz relativ zur Schriftgröße des übergeordneten Elements angegeben. Beispielsweise entspricht der Wert 100% der Schriftgröße des übergeordneten Elements.
vwDie Schriftgröße wird in Prozent relativ zur Breite des Ansichtsfensters angegeben. Beispielsweise entspricht der Wert 1vw der Breite von 1% des Ansichtsfensters.
vhDie Schriftgröße wird in Prozent relativ zur Höhe des Ansichtsfensters angegeben. Beispielsweise entspricht der Wert 1vh der Höhe von 1% des Ansichtsfensters.

Die Verwendung relativer Maßeinheiten ermöglicht eine flexible Anpassung der Schriftgröße an verschiedene Geräte und Anzeigebedingungen. Wenn Sie beispielsweise die Schriftgröße im Browser erhöhen oder verringern, ändert sich auch die Schriftgröße, die mit relativen Einheiten festgelegt wurde, entsprechend.

Bei der Auswahl der relativen Schrifteinheiten wird empfohlen, die Elementhierarchie zu berücksichtigen und die Seitenstruktur gut zu durchdenken, um sicherzustellen, dass der Text auf verschiedenen Bildschirmen und Geräten korrekt angezeigt wird.

Ändern der Schriftgröße auf einer Webseite

Die Schriftgröße einer Webseite bezieht sich auf die Größe des im Browser angezeigten Textes. Es kann vergrößert oder verkleinert werden, um die Lesbarkeit oder visuelle Wirkung zu verbessern.

Es gibt mehrere Möglichkeiten, die Schriftgröße auf einer Webseite zu ändern:

  • Verwenden relativer Einheiten
  • Absolute Maßeinheiten verwenden
  • Verwenden spezieller CSS-Eigenschaften

Relative Maßeinheiten wie Prozentsätze (%), em und rem ermöglichen es Ihnen, die Schriftgröße relativ zum übergeordneten Element oder der zugrunde liegenden Schriftgröße des Browsers festzulegen. Wenn Sie beispielsweise die Schriftgröße eines Elements auf "200%" festlegen, wird die Schriftgröße eines Elements um das Doppelte erhöht.

Absolute Maßeinheiten wie Pixel (px) und Punkte (pt) ermöglichen es Ihnen, eine feste Schriftgröße festzulegen, die sich nicht ändert, wenn Sie die Größe des Browserfensters oder die Grundschriftgröße des Browsers ändern.

Darüber hinaus können Sie mit speziellen CSS-Eigenschaften wie font-size-adjust und font-Stretch zusätzliche Skalierungsoptionen für die Schriftart anpassen.

Beachten Sie, dass das Ändern der Schriftgröße nicht nur den Text, sondern auch das Markup und die visuelle Darstellung von Elementen auf einer Webseite beeinflussen kann. Daher sollten Sie bei der Auswahl der Methode zum Ändern der Schriftgröße diese Faktoren berücksichtigen und die Ergebnisse auf verschiedenen Geräten und Browsern testen.