Pixel in Prozent der CSS-Schriftgröße umrechnen

Geben Sie die gewünschte Pixelgröße und die Größe des Elternelements ein; der Rechner liefert sowohl den Zahlenwert als auch eine direkt einsetzbare CSS-Angabe. Damit können Sie feste Typografie durch vererbte Größen ersetzen, einen vorhandenen Entwurf ohne Änderung seiner visuellen Skalierung nachbilden oder das Verhältnis zwischen verschachteltem Text und seinem Umfeld dokumentieren.

Rechnen Sie einen vorhandenen Pixelentwurf präzise um

Beginnen Sie mit der Schriftgröße, die Sie nachbilden möchten, und der berechneten Schriftgröße des künftigen Elternelements. Der Rechner teilt die Pixelgröße durch die Größe des Elternelements und multipliziert dieses Verhältnis mit 100. Ein untergeordnetes Element mit 18 Pixeln innerhalb eines Elternelements mit 16 Pixeln ergibt beispielsweise 112.5 Prozent. Den ausgegebenen CSS-Wert können Sie direkt in eine font-size-Deklaration übernehmen. Die Angabe des Elternelements ist entscheidend, weil Prozentwerte keine absolute physische Größe beschreiben, sondern ein Verhältnis innerhalb der Vererbungskette. Ändert sich das Elternelement später von 16 Pixeln auf 20 Pixel, wächst ein mit 112.5 Prozent definiertes untergeordnetes Element mit. Verwenden Sie die tatsächliche Schriftgröße des unmittelbaren Elternelements und keinen unbeteiligten root- oder body-Wert, sofern dieses Element nicht wirklich die berechnete Schriftgröße vererbt. Mit der Genauigkeit legen Sie fest, wie viele Dezimalstellen erhalten bleiben, und gleichen Entwurfstreue und lesbare Stylesheet-Werte aus. Ganzzahlige Ergebnisse bleiben kompakt und erhalten keine unnötigen Endnullen.

Verstehen Sie prozentuale CSS-Schriftgrößen

Eine prozentuale Schriftgröße wird anhand der berechneten Schriftgröße des Elternelements aufgelöst. 100 Prozent entsprechen derselben Größe wie beim Elternelement, 50 Prozent der Hälfte und 150 Prozent dem Eineinhalbfachen. Dadurch reagiert Typografie natürlich auf vererbte Änderungen, doch Verschachtelungen können sich auch vervielfachen. Ist ein Container auf 125 Prozent gesetzt und ein darin enthaltenes Element ebenfalls auf 125 Prozent, erreicht das innere Element 156.25 Prozent der Größe außerhalb beider Ebenen. Der Rechner verarbeitet jeweils genau ein Verhältnis. Geben Sie daher stets die Größe des Elternelements auf der Ebene an, auf der die neue Deklaration eingesetzt wird. Prozentwerte und em-Einheiten drücken bei font-size dasselbe Verhältnis zum Elternelement aus, unterscheiden sich jedoch in Syntax und Konventionen von Designsystemen. Dieses Werkzeug liefert gezielt Prozent-Syntax. Damit sind Größenverhältnisse beim Prüfen eines Stylesheets oder beim Übertragen einer Pixelspezifikation in vererbte CSS-Regeln unmittelbar erkennbar.

Setzen Sie das Ergebnis sicher im Typografiesystem ein

Betrachten Sie den umgerechneten Wert als zuverlässigen Ausgangspunkt und testen Sie ihn anschließend im tatsächlichen Layout. Browser-Zoom, Schriftvorgaben der Nutzer, Ersatzschriften, Zeilenhöhe und verfügbarer Platz können das Erscheinungsbild beeinflussen, selbst wenn die mathematische Größe stimmt. Prozentangaben eignen sich besonders für Komponenten, die der umgebenden Textskalierung folgen sollen, etwa Bildunterschriften, Kennzeichen, Navigationsbeschriftungen und verschachtelte Überschriften. Weniger geeignet sind sie, wenn wiederholte Verschachtelungen die endgültige Skalierung schwer vorhersehbar machen. Dann lässt sich eine wurzelrelative Einheit oder ein Design-Token leichter pflegen. Bewahren Sie genügend Dezimalstellen auf, um sichtbare Abweichungen zu verhindern, aber übernehmen Sie keine bedeutungslosen Stellen aus ungefähren Entwurfsmaßen. Der Rechner weist ein Elternelement mit null oder negativem Wert zurück, weil daraus kein sinnvoller CSS-Prozentwert abgeleitet werden kann. Negative untergeordnete Größen sind ebenfalls unzulässig, da CSS keine negativen Schriftgrößen erlaubt. Die ausgegebene Formel und die normalisierten Eingaben erleichtern die Prüfung automatisierter Umrechnungen vor der Übernahme in ein Stylesheet.