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


HTML Table CSS Style Generator
Nachdem ja nun der Bann von HTML Tables scheinbar aufgehoben worden ist, darf man es ja wagen diese wieder zu verwenden. Das macht auch Sinn, weil tab...


Mozilla Thimble – HTML & CSS lernen
Meine persönliche Meinung ist ja, das Mozilla anstatt sich auf den Browser zu konzentrieren, in den diversesten Nebenprojekten aufreibt. Teilweise kom...


Sprite Cow – CSS Sprite nach CSS
CSS Sprites sind höchst nützliche kleine Dinger, um Ladezeiten zu verkürzen, vor allem wenn man ein passendes Caching / Expire im Apache damit verbind...


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...

Kommentare

  1. Eddy

    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.