Größen und rem

Erläuterung der rem-Einheiten und der empfohlenen rem-Werte in Client-First.

Rem

Webflow ist standardmäßig auf px-Einheiten eingestellt. Wenn wir "10" in ein beliebiges Designer-Eingabefeld eingeben und "Enter" drücken, wird "10px" eingestellt.

Client-First verwendet rem, das wir im Dropdown-Menü der Einheit auswählen können.

Was ist rem?

Rem steht für "root em".

  • Rem ist eine relative Maßeinheit, die auf der font-size des Root Elements (meistens html) basiert.
  • Das Root Element ist html.
  • Rem ist relativ zur html Schriftgröße.
  • Die meisten Größen, die im Client-First angewandt werden, sind in rem.

Vererbung der Browser-Schriftgröße

Bei Client-First erben wir die html font-size vom Browser.

Die Browser verwenden zunächst 16px als html font-size.

Die Umwandlung von 1rem = 16px ist die Standardeinstellung des Browsers.

Auf der Grundlage der vom Client-First genehmigten Größen können wir die px-Werte schnell in rem umwandeln. Die von Client-First genehmigten rem-Werte sind zum Beispiel 0,5, 1, 1,5, 2, 2,5, 3 und so weiter.

Rem und Client-First sind ein starkes Paar, wenn es darum geht, die besten Praktiken für Barrierefreiheit bei der Schriftgröße im Browser zu befolgen.

Die Mathematik

Alle 16px sind 1rem, wenn die font-size des Browsers in den Browsereinstellungen auf "Standard" eingestellt ist.

Wenn wir unser Webflow-Projekt erstellen, verwenden wir immer 16px als Basiswert für die Berechnung von rem.

Jede rem Umrechnung ist ein Vielfaches von 16.

Um den px-Wert in rem umzurechnen, teile diesen Wert durch 16.

64px / 16px = 4rem

Um den rem-Wert in px umzurechnen, multipliziere diesen Wert mit 16.

2rem x 16px = 32px

Der Einfachheit halber empfehlen wir, leicht lesbare rem-Werte wie 1, 2, 2,5, 3, 4, 5 zu verwenden.

Wir wollen die häufige Verwendung von langen Zahlenwerten wie 8,4375rem vermeiden. Diese Werte sind schwerer zu merken und verlangsamen unseren Arbeitsablauf.

Berechnungen im Webflow Designer

In den meisten Eingabefeldern des Webflow Designers können wir rem nativ in Webflow berechnen.

In der Eingabe für die Breite (Width) im Designer gibst du "100/16rem" ein, drückst "Enter" und siehst, wie der rem-Wert berechnet wird.

Wir können jede Zahl durch 16 teilen, um ihren rem-Wert im Webflow Designer zu erhalten.

Vorteile der Barrierefreiheit

Browser-Schriftgrößeneinstellungen

Browser verwenden 16px als ihre standardmäßige html font-size – und die Browser erlauben es dem Nutzer, die standardmäßige Schriftgröße zu verändern. Die Nutzer können ihre Einstellungen aktualisieren und die Schriftgröße ändern.

Die Einstellung der Schriftgröße im Browser ist ein wichtiges Thema für die Barrierefreiheit. Wenn Nutzer/innen ihre Browser-Schriftart aktualisieren, sollte sich der Inhalt der Website an die Änderung anpassen. Das Client-First Rem-System passt sich an die Schriftgrößeneinstellungen des Browsers der Nutzer/innen an.

Wenn wir mit anderen Maßeinheiten wie px und vw arbeiten, ignorieren wir die Voreinstellungen des Nutzers, um seine Schriftgröße im Browser zu verändern.

Browser-Zoom

Rem respektiert auch die Steuerung des Browser-Zooms des Nutzers. Wenn ein Nutzer die Seite vergrößert oder verkleinert, werden das Layout und der Inhalt von rem entsprechend mit gezoomt.

Wenn wir vw oder vh Einheiten verwenden, funktioniert der Browser-Zoom nicht.

vw basiert auf der Breite des Browserfensters (oder der Höhe im Fall von vh). Nur eine Änderung des Browserfensters wirkt sich auf die in diesen Einheiten eingestellten Größen aus.

Client-First folgt den besten Praktiken für Barrierefreiheit. Die Entscheidung, in rem zu arbeiten, steht in direktem Zusammenhang mit diesem Vorteil für die Barrierefreiheit und die Benutzerfreundlichkeit.

Erfahre mehr über Barrierefreiheit mit rem in unserem Artikel Wizardry vs. Client-First Vergleich. Dies ist ein technischer Überblick über die Vorteile von rem als barrierefreie Maßeinheit.

Empfohlene px zu rem Werte

Im Folgenden findest du eine Liste aller empfohlenen rem-Werte mit ihren umgerechneten px-Maßen.

Diese vom Client-First festgelegten Werte sind eine Empfehlung und keine strikte Vorschrift.

Diese Liste der Größen ist interaktiv. Aktualisiere die Werte über das Menü.

{ Calculator }

Client-First schlägt vor, mit diesen Werten zu arbeiten.

Es gibt 3 Ausnahmen von der Verwendung der oben genannten Werte.

1. Typografie

Die Verwendung von 14px als Schriftgröße ist üblich und wird empfohlen, wenn 16px zu groß ist. Eine Schriftgröße von 12px ist für die Typografie oft zu klein.

14px = 0.875rem

2. 2px Spacing

Verwende 2px für kleines Spacing (Abstände). Wenn Spacing von weniger als 4px benötigt wird, verwende 2px.

2px = 0.125rem

3. 1px ist 1px

Wenn du 1px verwendest, zum Beispiel als border, verwende 1px als Wert.

Wir raten davon ab, 1px-Werte in rem zu konvertieren.

Retina-Geräte haben andere Skalierungsregeln als Nicht-Retina-Geräte. Wenn du 1px verwendest, wird auf jedem Gerät genau 1px Linie erzeugt, ohne dass die Retina-Skalierung gestört wird.

1px = 1px

Finsweet Extension px zu rem Migrationstool

Die Finsweet Extension bietet ein Tool, mit dem du Projekte, die in px erstellt wurden, in rem konvertieren kannst.

Es wandelt jeden Wert im Projekt von px in den berechneten rem-Wert um.

Auf der Registerkarte Client-First der Finsweet Extension verwaltet das Candy "PX to REM Migrator" die Migration der Größeneinheiten.

nächste

Typografie-Strategie

Entwickle und pflege eine einheitliche Typografie für das gesamte Projekt.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reset
HTML font size
px
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
px values
rem values
2px
=
0.125rem

Closest to Client-First values

2px
=
0.125rem

Neighboring values

2px
=
0.125rem