Font-Resizer: Schriftgröße, wie Textauszeichnungen interagieren

Illustration pixabay

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle.

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

Dieser Beitrag bietet einen Überblick über die Auswirkungen von Schriftgrößen in Kombination mit dem Font-Resizer. Anhand praktischer Beispiele wird gezeigt, wie unterschiedliche Textauszeichnungen auf Veränderungen reagieren. Der Artikel ist ein nützlicher Leitfaden für alle, die ihre Typografie barrierefrei und leserfreundlich gestalten möchten.

Dieser Beitrag ist eine Erweiterung von Font Resize: Flexible Schrift

Font Resize: Flexible Schrift mit Tipps zur Tastatur-Navigation

Interaktion zwischen Font-Resize und Textauszeichnungen

Die verschiedenen Textauszeichnungen reagieren unterschiedlich auf die Schriftvergrößerung. Dies sollte berücksichtigt werden, wenn man den Font-Resizer integriert, um sicherzustellen, dass alle Textstile korrekt und konsistent dargestellt werden.

Um die Beispiele zu verdeutlichen, nutze bitte die Schaltflächen in der Kopfzeile, um die Schriftgrößen zu ändern. Du kannst diese auch mit der Tab-Taste ansteuern und mit Enter oder Leertaste umschalten.

Normaler Text WP-Editor
^{Hoch- oder} _{tiefgestellter Text, WP-Editor}

Relative Schriftgröße smaller

Relative Schriftgröße larger

Absolute Schriftgröße small

Absolute Schriftgröße large

Textmuster in Pixel, px
Textmuster in Punkten, pt
Ein Textmuster in rem

Textmuster prozentual, %
Ein Textmuster in em

Aus diesen Beispielen ist zu erkennen, dass die folgenden Formatierungen auf Schriftgrößenänderungen durch einen Font-Resizer reagieren:

Normaler Text WP-Editor
^{Hoch- oder} _{tiefgestellter Text, WP-Editor}
Relative Schriftgröße smaller oder larger
Textmuster prozentual, %
Ein Textmuster in em

Diese Formatierungen werden entsprechend der Vergrößerung oder Verkleinerung angepasst.

Im Gegensatz dazu bleiben die Schriftgrößen bei den folgenden Auszeichnungen unverändert:

Überschriften (WP-Editor)
Absolute Schriftgröße "small"/(large)
Textmuster in Pixel
Textmuster in Punkten
Ein Textmuster in rem,

Zusammenfassend lässt sich sagen, dass Überschriften und absolute Auszeichnungen wie small, large, px, pt sowie rem von Schriftgrößenänderungen durch einen Font-Resizer nicht betroffen sind.

WP normaler Text und ^hoch-oder _{tiefgestellt,} relativen Auszeichnungen: smaller, larger, sowie prozentual % und em sind ansprechbar.

Der Hinsicht kann man ebenso beachten, die Schriftgrößen in Tabellen (via WP-Editor oder selbige) bleiben vom Font-Resizer unbeeinflusst:

normaler Text, WP-Editor	Textmuster prozentual	Textmuster in em
Textmuster in px	Textmuster in pt	Textmuster in rem

Mit einem nun folgenden Rahmen verändert sich die Schriftgröße wie gehabt (Anmerkung: Zur einheitlichen Darstellung der Schrift, bei pt und rem sind andere Attributwerte wie oben der Tabelle) – also z. B.:

normaler Text, WP-Editor
Textmuster prozentual, %
Textmuster in emTextmuster in Pixel
Textmuster in Punkten
Textmuster in rem

Frage an ChatGPT: Normaler Text, prozentual und em sind visuell größer als px, pt und rem.

ChatGPT: Um die Unterschiede in der Darstellung von Schriftgrößen in verschiedenen Einheiten wie Prozent, em, px, pt und rem zu verstehen, ist es wichtig zu wissen, wie diese Einheiten in CSS funktionieren und was sie jeweils bedeuten:

Prozent (%): Die Schriftgröße in Prozent wird relativ zur Schriftgröße des Elternelements festgelegt. Wenn das Elternelement beispielsweise eine Schriftgröße von 16px hat, entspricht 100% ebenfalls 16px.
em: Ähnlich wie Prozent ist em eine relative Einheit, die sich auf die Schriftgröße des Elternelements bezieht. 1em entspricht der Schriftgröße des Elternelements. Wenn das Elternelement eine Schriftgröße von 16px hat, entspricht 1em ebenfalls 16px.
Pixel (px): Pixel sind absolute Einheiten, die eine exakte Größe angeben. 16px bedeutet immer 16 Pixel, unabhängig von der Schriftgröße des Elternelements.
Punkt (pt): Punkt ist eine Druckereinheit, wobei 1pt traditionell 1/72 Zoll entspricht. In der digitalen Darstellung entspricht 1pt oft 1.333px, daher sind 12pt ungefähr 16px.
rem: rem steht für "root em" und bezieht sich immer auf die Schriftgröße des Root-Elements (normalerweise das <html>-Element). Wenn das Root-Element eine Schriftgröße von 16px hat, entspricht 1rem ebenfalls 16px.

Hier ist, warum es visuelle Unterschiede geben kann:

Prozent und em: Diese beiden Einheiten sind relativ und beziehen sich auf die Schriftgröße des Elternelements. Wenn das Elternelement eine größere Schriftgröße hat, erscheinen Text in 100% oder 1em größer. Wenn es eine kleinere Schriftgröße hat, erscheinen sie kleiner.
Pixel und Punkt: Pixel und Punkt sind absolute Einheiten und ändern sich nicht relativ zur Schriftgröße des Elternelements. Daher sollten Textmuster in px und pt gleich groß erscheinen, wenn sie die gleiche numerische Größe haben (z.B. 16px und 12pt).
rem: rem ist relativ zur Schriftgröße des Root-Elements und sollte konsistent sein, solange die Schriftgröße des Root-Elements unverändert bleibt.

Beispiel zur Veranschaulichung: Angenommen, dein Root-Element hat eine Standard-Schriftgröße von 16px. Hier sind die relativen Größen, die du genannt hast:

normaler Text
Textmuster prozentual
Textmuster in em
Textmuster in px
Textmuster in pt
Textmuster in rem

100%: Wenn das Elternelement eine Schriftgröße von 16px hat, entspricht 100% ebenfalls 16px.
1em: Wenn das Elternelement eine Schriftgröße von 16px hat, entspricht 1em ebenfalls 16px.
16px: Dies ist eine absolute Einheit und entspricht immer 16px.
12pt: Dies entspricht ungefähr 16px (da 1pt ≈ 1.333px).
1rem: Wenn das Root-Element eine Schriftgröße von 16px hat, entspricht 1rem ebenfalls 16px.

Wenn es Unterschiede in der Darstellung gibt, könnte das auf unterschiedliche Schriftgrößen der Elternelemente oder auf browse-spezifische Interpretationen zurückzuführen sein.

Empfehlungen: Um eine konsistente Schriftgröße zu gewährleisten, überprüfe die Schriftgröße des Elternelements und des Root-Elements (normalerweise <html>). Wenn alle Elternelemente und das Root-Element die gleiche Basis-Schriftgröße haben, sollten alle genannten Einheiten visuell gleich groß erscheinen.

Immer auch zum PFLICHTARTIKEL betreffs Pixel, em und rem – was ist der Unterschied?