EmChart – Em einfach nachschlagen

Früher, als noch alles besser war, hat man jede Font-Größe in px oder pt angegeben. Wie sich im nachhinein herausstellte ist das eine ziemlich doofe Idee, wenn man nachträglich Schriftgrößen ändern möchte. Vor allem wenn man mit responsive Design zu kämpfen hat, rächt sich die feste Angabe von Größen fürchterlich. Wie funktioniert das nun? Man kann eine Standard-Schriftgröße vorgeben, oder mit der Standardschriftgröße des Browsers leben. Alle anderen Schriftgrößen werden nicht mehr absolut angegeben, sondern in Relation zu dieser Standardschriftgröße gesetzt (also doppelt so groß als normal, halb so groß wie normal, usw.)

Screenshot von EmChart

Trotzdem will man aber dass die Font in „einer normalen Darstellung“ nicht bzgl. seiner Größen macht was es will, deshalb muss man relativ genau angeben wie die Relation auszusehen hat. Dies bedeutet wiederum: man benutzt als Maß am besten das em und hat sofort eine Dezimalzahl mit 3 Stellen hinter dem Komma am Hals. Ferner sollte man sich für eine Standard-Pixel-Größe entscheiden. Dann kann mit folgender Formal das em errechnet werden:

gewünschte px / standard px = em

Geht aber auch einfacher mit dem EmChart, in dem man einfach nachschlagen kann. Ich kann an der Stelle nur noch empfehlen, nicht mehr jedes Element mit einer festen (und somit fixen) Größe zu belegen. Es gibt da inzwischen bessere Wege die einem in der Zukunft weniger Wege verbaut. Wenn man sich einmal dran gewöhnt hat ist es ganz einfach, und wer auf Nummer sicher gehen will belegt einfach das Body-Element mt einer Font-Größe und verwendet diese als Basis.

Ähnliche Beiträge

jFontSize – dynamische Font-Size mittels jQu... Ich entwickele zur Zeit einen Magento-Shop für Silver Surfer. Natürlich gibt es da besondere Ansprüche, und eine davon ist die klare Lesbarkeit der Se...
CSS Flexbox lernen mit Flexbox Froggy Flexbox ist eine moderne Möglichkeit responsive und flexible Layouts zu erstellen. Dabei kann komplett auf Größenangaben und Werte wie position, float...
CSS Refresh ohne Reload, dafür mit JavaScript Seien wir doch mal ehrlich, was ist die am meisten genutzte Taste auf eurer Tastatur? Richtig! F5 - Reload! ;) Das nervige Reloaden einer Seite kann d...
CSScomb – Sortieren einer CSS-Datei Die Übernahme von komplexen Seiten dritter ist kein Spaß, aber leider Alltag. In der Regel sieht dieses Szenario bei mir so aus: irgendein Hobby-Frick...

Eine Antwort auf „EmChart – Em einfach nachschlagen“

  1. Das ist doch mal eine Arbeitserleichterung.
    War mir zwar schon immer klar, das man besser mit em arbeiten sollte, aber aus Bequemlichkeit ist es dann doch meist die absolute Pixelangabe oder Prozentangabe geworden.

    Das nächste Projekt wird sicher mit em und diesem Tableau umgesetzt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.