...Schriftgrößenangabe (em) in allen Browsern korrekt angezeigt zu bekommen? Das Logo besteht aus drei Wörtern. Rechts soll groß der Branchenname stehen und links davon oben ganz klein der Vorname und darunter etwas größer der Nachname, sodass Vor- und Nachname untereinander genauso hoch sind wie der Branchenname. Dabei soll möglichst nicht mit absoluten Angaben gearbeitet werden, da sich das Logo in abhängigkeit der Bildschirmgröße und Auflösung anpassen soll (deshalb em-Angaben und keine Pixel). Als Schriftart wurde Arial gewählt, was zumindest auf einem Großteil der Rechner vorhanden ist. Falls jemand kein Arial auf dem Rechner hat, gibt es dann überhaupt die Möglichkeit, das Logo dennoch passend mit einer Alternativschriftart (z.B. Helvetica) auszurichten?
Auf eine @font-face-Einbindung von Schriftarten auf dem Server soll möglichst verzichtet werden, da es hier zu rechtlichen Problemen kommen kann und die Schriftarten - wenn die Schriftgröße zu klein gewählt wurden ist - im Fließtext als zu pixlig erscheinen. Außerdem müssten die Schriftarten immer erst vom Server geladen werden, was insbesndere bei mobilen Geräten zu Verzögerungen führen kann.
Andere Alternativen wie beispielsweise die Verwendung des Logos als Bild würden nur dazu führen, dass das Logo größeren Bildschirmen pixlig aussieht, da das Bild gestreckt wurde und außerdem bewertet Google Überschriftentext höher als Bild-alternativtexte. Eine Einbindung von SVG-Dateien ist leider auch nicht auf allen Browsern darstellbar. Es soll eben eine möglichst suchmaschinenfreundliche Lösung gefunden werden, die in den gängigsten Browsern angezeigt wird und auch auf allen möglichen Bildschirmgrößen funktionieren soll (responsitive Webdesign). Ein weiteres Problem ist, dass der Hintergrund ein horizontaler Farbverlauf ist, weshalb das Logo, wenn es als Bild abgespeichert wird, transparent sein sollte, was in einigen älteren Browsern erneut zu Darstellungsproblemen führen könnte.
Ich habe bereits versucht, es hinzukriegen. Dazu verwendete ich die Ausgangsschriftgröße 100% und bei den einzelnen Logobestandteilen 3.8em, 1.8em und 1.4em. Damit passte es in etwa von der Größe. Doch leider gab es Probleme mit der Anordnung, denn die beiden Namen standen nebeneinander und nicht wie gewünscht untereinander. Im HTML taucht zunächst der Branchenname auf, dann der Vorname (welcher links neben dem Branchennamen oben erscheinen soll) und dann der Nachname (links neben dem Branchennamen, unter dem Vornamen). Im CSS verwendete ich bei allen 3 position:relative und float:right. Ich habe auch bereits mit den Schriftgrößeneinstellungen und clear herumexperimetniert, jedoch kam ich zu keiner zufriedenstellenden Lösung. Der Nachname blieb entweder links neben dem Vornamen stehen oder rutschte (durch clear) unter den Branchennamen.
Ein weiteres Problem ist, dass die oberen Logoelemente nicht bündig anfangen. Obwohl Padding und Margin auf 0 gesetzt sind, beginnt der Vorname etwas früher.