Nein. Nicht zum Essen, sondern ein Bündel Werkzeug und Inspiration, das ich heute zu Tische tragen möchte. Interessante Dinge, die ich gefunden habe und teilen möchte. Das Buffet ist eröffnet.

Zum Basteln

ecsstender verspricht moderne CSS Eigenschaften für jeden Browser zugänglich zu machen

20 Typografie Plugins für WordPress

jQuery Einstieg: Selektoren, Filter und Traversing

Eine Liste mit Tools rund um Typografie im Webdesign

Von Photoshop zu HTML: Das ultimative Guide

Mozilla und das Web Open Font Format WOFF

Eigene Formularfelder im WordPress Backend

Mootools Floom: Der etwas andere Bilder Slide Effekt

Tools

Google Chrome: Jetzt auch für Mac erhältlich. Developer Release

Tags: CSS, css3, design, fonts, Google, Mozilla, Typografie, Webdesign | In der Kategorie Webdesign

In diesem zweiten Artikel zur Verbesserung des eigenen CSS Schreibstils möchte ich mal etwas näher auf die Masse Em, Pixel, Points, Prozent und die selten gebräuchlichen Keywords zur Grössenbemessung von Schriftarten eingehen und ein paar Webdesignern auf die Hände klatschen.

Pixel (px)

Pixel sind wohl die meist gebrauchten Masse. Und genau deswegen steige ich mal hier ein. Pixel eignen sich hervorragend für statische Layoutelemente, wo man sie heute heute überall vermehrt hat. Da sich viele Webseiten darauf festlegen, zentriert angezeigt zu werden, kommt auch meist eine feste Pixelbreite zum Einsatz. Man umschliesst seine ganze Seite im Normalfall mit einem Container, der sich und seinen Inhalt dann flexibel anpassen lässt. Aus Tests weiss man, dass sich die Benutzer meist nur auf eine kleine Fläche des Bildschirms konzentrieren können. So sind voll dynamische, auf die ganze Browser Breite justierte Seiten nicht wirklich praktisch, da der Bereich, der mit den Augen eingefangen werden kann, so oder so zu gross ist.

Nun, Pixel sind also eine gute Sache, da sind wir uns einig. Jetzt verwenden aber viele Webdesigner und CSS Schreiberlinge Pixel für Schriftgrössen.

Probleme:

• Schriften lassen sich von alten Browsern nicht verkleinern und vergrössern, was den Benutzer einschränkt.
• Schriftgrössen justieren sich exakt in diese Pixelmasse was bewirkt, dass sie kleiner aussehen, als sie eigentlich sind im Vergleich zu anderen Schriftarten.
• Je nach Monitor und Einstellung der Kantenglättung sehen Schriftarten ganz anders aus.
• Pixelgrössen sind statisch. Sie lassen sich nicht durch Elternelemente beeinflussen im Gegensatz zu EM, Prozent und Keywords.

Dadurch, dass viele Webdesigner diese Punkte ignorieren, schaffen sie eine statische Umgebung, die spätere Anpassungen völlig unbequem lassen und dabei noch noch ältere Browser ausschliessen. Gut, da in letzter Zeit sowieso immer mehr Kontroverse und Boykott Aktionen gegen den Internet Explorer 6 statt finden, ist der von mir zweite genannte Punkt sicher nicht mehr eine grosse Diskussion wert.

EM

EM ist eher was Neues. Ja und genau deswegen hat’s der Bauer wohl auch noch nicht gefressen. EM heisst übrigens auch nicht Europa Meisterschaft. Ehrlich gesagt habe ich noch nicht rausgefunden, was EM in der Namensgebung genau bedeutet, aber ich würde mal so etwas wie Elastic Mass vermuten.

Wie auch immer, was man über EM wissen muss ist kurz gesagt: EM ist eine relative Masseinheit. Das heisst, sie passt sich seinem Elternelement an und ist so flexibel und dynamisch. EM eignen sich praktisch nur für Schriftarten. Dabei gilt die Regel: Beim normalen Browserstandard ist 1em = 16px. Setze ich als keinen Wert in meinem Body, werden Schriftarten in 16 Pixel angezeigt. So, nun scheuen sich viele vor dem Arbeiten mit EMs weil es wohl einfach schwer vorstellbar ist, wie z.B. 1.2em oder 2em aussieht, wenn ja 1em = 16px ist. Meine Güte, man könnte es ja ausrechnen, aber wer will das schon? Und hier kommt der Trick.

Setzen wir die Schriftgrösse unseres Body auf 62.5%, ist 1em = 10px. Warum? Ganz einfach. Da EM relativ ist und Body das oberste Element ist, passt sich die Grösse unserer EM Masseinheiten an.

1em = 16px = 100%
1em = 10px = 62.5%

Die Arbeit mit EM ist nun auch für jeden Pixelmeister kein Problem mehr. Denn 12px wären nun Beispielsweise 1.2em, oder 20px wären 2em.

body {
font-size: 62.5%
}

Vorteile:

• Kann verkleinert und vergrössert werden mit IE6
• Dynamisch/Elastisch
• Passt sich dem Elternelement an

Points (pt)

Points laufen auf das gleiche problem wie Pixel hinaus: Sie sind nicht beeinflussbar durch ältere Browser. Die pt Masseinheit sollte vor Allem für Druckerfreundliche Seiten oder speziell vorgefertigte Druckseiten auf Webseiten benutzt werden und für mehr nicht.

72pts = 1 Zoll = 2.54 cm

Warum wir Points nicht für Webseiten nutzen liegt klar auf der Hand. Die Unterschiede zwischen verschiedenen Browsern sind drastisch. Je nach Browser kann die Schriftart sogar Doppelt so gross erscheinen.

Prozent (%)

Wie die Prozent Masseinheit funktioniert muss man wohl nicht lange erklären. Hat ein Elternelemnt die Schriftgrösse von 20px, hat das Unterlement bei einer eingestellten Schriftgrösse von 50% noch eine Grösse von 10px.

Im produktiven Betrieb kommt die Prozent Schriftgrösse vor Allem dort zum Einsatz, wo sie sich per Eingabe des Benutzer flexibel vergrössern und verkleinern lässt. Sie ist ebenfalls abhängig vom Elternelement wie EM. Doch ist es sehr schwer mit % über eine ganze Webseite hinweg zu arbeiten. Es ist schlecht vorstellbar, wie gross diese % angaben sind, da sowohl Angaben hinter dem Komma die Schriftgrösse noch Feintunig verändert.

Eine beliebte Technik ist, die Body Schriftgrösse auf 62.5% zu setzen, um in den danach folgenden Elementen mit EM zu arbeiten (siehe Beschriebung zu EM).

Keywords

Keywords trifft man ehrlich gesagt nicht mehr so oft an. Mögliche Angaben sind xx-small, x-small, small, medium, large, x-large und xx-large. Weiter gibt es noch smaller und larger, welche mit den Font-Weight Eigenschaften bolder und smaller verglichen werden können.

Der Vorteil dieser Methode ist, dass die Schriftgrössen auf jedem Browser in etwa gleich gross sind. nachteile sind aber ganz klar die definierte Anzahl an Stufen, die unsere Schriftarten haben. Da wir uns ja meistens auf eine Methode von Schriftgrössen Angaben beschränken, hätten wir hier das Problem, das wir nur sieben Schriftgrössen zur Auswahl hätten. Das mag nicht schlimm sein in Anbetracht der Tatsache, dass wir für eine Webseite meist sowieso nicht mehr verwenden müssen.

Die Qual der Wahl

Die beste Auswahl macht man eindeutig mit EM. Sie sind modern, flexibel, vom Elternelementabhängig und lassen sich mit dem oben gezeigten Trick auch leicht anwenden. Es gibt also kein Schlecht und kein Gut. Jede der Masseinheiten hat seinen Platz in der richtigen Verwendung.

Schlecht sind aber sicher Webseiten, die für die Schriftgrösse jedes Elements eine Pixelmasseinheit definiert haben. Denn sie haben das Prinzip der Usability nicht verstanden die darin liegt, schnell und einfach alles anpassen zu können.

Tags: CSS, em, fonts, keywords, pixel, prozent, schriftgrössen, Webdesign | In der Kategorie CSS, Webdesign