Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML und CSS für Designer

Maßeinheiten in HTML und InDesign

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Bekannte Maßeinheiten aus der Gestaltung wie Pixel oder Millimeter sind hinlänglich bekannt. Bei der Designarbeit ist es deshalb sinnvoll, möglichst in den Maßeinheiten zu planen, die man auch bei der späteren Online-Umsetzung benötigen wird.

Transkript

Da als eine Projektvergabe die Umsetzung als Responsive Design gefordert ist, muss man sich ein wenig mit Masseinheiten auseinandersetzen. Sie werden sehen, dass es auch hier wieder sehr viele Berührungspunkte gibt. Schauen wir uns das doch kurz an in InDesign bspw. oder in unserer Dokumenterstellung mit einem Programm dieser Art. Dort arbeiten wir in der Regel, wenn man sich die Lineale anschaut, mit Größeneinheiten wie Millimeter, Zoll, Pixel etc. Sehr leicht auch herauszufinden über die "Voreinstellungen", wenn man dann hier auf "Einheiten und Einteilungen" geht. Da gibt es dann solche Vorgaben wie Punkt, Pixel, Pica, Zoll, Millimeter etc. Das einzige, was hier nicht auftaucht, ist das, was wir heute bei einer modernen Webseite mit Responsive Design benötigen. Das ist nämlich eine Maßeinheit "em". Vielleicht klingelt es bei Ihnen, wenn Sie diese Einheit hören, denn die ist auch in Druckbereich gar nicht so uninteressant. Die Maßeinheit "em" wird im Schriftsatz nämlich zur Bestimmung der Zeichenbreite in Abhängigkeit von der Schriftgröße verwendet, also, anders ausgedrückt, im Grunde entspricht 1 em der Breite eines Gevierts und das dürfte ihnen bekannt sein aus den Druckwesen. Es gibt auch ein Halbgeviert, das ist ein "en". Dieses "em" ist eine Angabe, die mit der Proportion zur Schriftgröße zu tun hat. Mal ganz nebenbei gesagt, ganz ungefähr ist die Breite 1 em die Breite des Großbuchstaben "M" von dieser Proportion wird ausgegangen und somit entspricht die Breite des Gevierts der Höhe des Gevierts und somit der Schriftgröße, also ein "em" ist somit direkt proportional zur Schriftgröße, unabhängig von der Gestaltung des Großbuchstabens "M" in der jeweiligen Schriftart. Was bedeutet das nun für die Website selber? Die Website mit der Einheit "em" hat man die Möglichkeit, ausgehend von einer bestimmten Schriftart die Schriften proportional zu verwenden. Wenn die Webseite verkleinert wird, also der Anzeigebereich kleiner wird, dann wäre das ja fatal, wenn diese Schrift in der Größe stehen bleiben würde. Bei der Angabe konkreter Pixelwerte ist das in den meisten Fällen der Fall, also bei Schrift vielleicht nicht, aber bei Grafiken. Wenn Sie einer Grafik sagen, die Grafik soll 500 Pixel breit sein, dann ist das so. Verändert sich auch durch "responsive" nicht mehr. Ich kann zwar durch verschiedene Abfragen hinterher unterschiedliche Pixel ausgeben, aber diese Grafik selbst ist immer starr durch die Pixelangabe. Bei der Schriftart ist das theoretisch gesehen ähnlich, aber es gibt halt diese Proportion. Ich muss, wenn das ganze Dokument verkleinert wird darauf achten, dass die Proportion eingehalten wird. Genau hier greift jetzt die Einheit "em" bei der Programmierung und der Umsetzung. Ich zeige Ihnen das kurz mal an einer Website. Es gibt hier eine Seite, die heißt pxtoem.com, das ist keine deutsche Seite, aber beschreibt sehr schön, wie diese Umrechnung stattfindet kann. Sie haben immer eine Grundlagen-Schrift , von der müssen sie ausgehen. Das ist die Standardschrift im Browser, in dem das angezeigt wird. Üblicherweise liegt das so bei 16 oder 12. Da müssen Sie auswählen, was Ihre Standard-Schriftgröße ist. Im Übrigen können Sie das auch hinterher einstellen mit CSS Hilfe. Sie entscheiden sich für 12 Pixel als Standardgröße in ihrem "Body", dann entsprechen diese 12 Pixel 100 %. Wären das 16 Pixel, sind 12 Pixel 75 %, weil Sie haben ja gerade gesagt das ist jetzt 1 em und das entspricht 100 %. Man muss ausgehen von einem Standardfont, und einer Standard Fontgröße, das definieren Sie in CSS, und ich gehe jetzt mal von 12 Pixel aus, und, wenn ich nun berechnen möchte, wie groß etwas ist, wenn ich jetzt zum Beispiel sage: "Was entspricht denn 19 Pixeln?" Dann kann ich hier auf "Convert" klicken und bekomme die Information, dass ich 1,583 em brauche, um diese 19 Pixel darzustellen, bei 20 Pixel entprechend 1,6 em und bei 24 genau 2 em. Andersrum kann ich genauso vorgehen. Wenn ich z. B. sage, was entspricht 1,5 em, dann hätte ich hier 18 Pixel. Achten Sie bitte darauf, dass sie kein Komma eingeben. Das ist lustig, wenn Sie sich daran orientieren, werden sie erschlagen mit 180 Pixel. Ich weiß nicht, wie er das interpretiert aber das englische Sprachsystem verwendet ja Punkt anstelle von Dezimalkomma, daher also 1,5 werden 18. Diesen em-Angaben werden wir später in der CSS Programmierung noch begegnen. Ich erwähne das an dieser Stelle, weil ich finde, es macht Sinn, wenn man sich im Vorfeld schon mal mit beschäftigt und sich anschaut: wie funktioniert solch ein Maßsystem in einem Browser? Das eine ist bereits bekannt, Pixel. Das wird uns auch begegnen an der ein oder anderen Stelle. Das andere ist "em", was im Druckbereich als Geviert bezeichnet wird.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!