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

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...
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...
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...
SlickMap – Sitemaps schnell und einfach als ... Es gibt nicht einen Kunden, der nicht auf seiner noch so winzigen Homepage eine Sitemap haben will. Der tiefere Sinn erschliesst sich zumeist nicht. W...

Ein Kommentar

  • 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