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

CSS Crush – noch ein CSS Preprocessor aus De... Ich für meinen Teil bin inzwischen starker Verfechter für den Einsatz von Turbine. Der CSS Preprocessor von Peter Kröner vereinfacht mein Leben nachha...
Adobe Brackets – Code Editor für HTML, CSS &... Nach gefühlten 25 Jahren, dem Plattmachen von Homesite und einigen Versuchen Dreamweaver irgend etwas sinnvolles abzugewinnen glaubt jetzt wohl schein...
Schnellere Webentwicklung mit MarkerCSS? Mit all den notwendigen Browser-Workarounds, und der generellen Schreibwütigkeit, die man zur Erstellung von CSS aufbieten muss, gehen derzeit viele B...
Typetester – online CSS für Fonts erstellen und ve... Die Definition eines Fonts ist jedes Mal aufs Neue ein ziemliches Rumgemurkse. Es ist zwar nicht schwer eine Verdana auszusuchen, aber aufgrund der vi...

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.