Responsive Webdesign – Grundlagen

Schriftart und Schriftgröße

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ob ein Text gut lesbar ist, hängt von mehreren Faktoren ab. Die passende Schriftgröße hängt auch von der gewählten Schriftart ab. Zum Testen gibt es recht nützliche Tools.

Transkript

Ob ein Text gut lesbar ist, hängt von mehreren Faktoren ab. Wichtig ist natürlich zuerst einmal genügend Kontrast, besonders bei mobilen Endgeräten, die ja vielleicht auch einmal unter ungünstigeren Lichtverhältnissen genutzt werden. Andere entscheidende Faktoren sind die gewählte Schriftart und die Schriftgröße. Was ist jetzt aber die richtige Größe für eine Schrift? Das hängt auch vom benutzten Gerät ab, genau genommen, wie nah wir es vor Augen halten. Das sehen Sie hier auch symbolisiert in dieser Zeichnung. Das heißt nämlich 16 Pixel auf einem Monitor, zu dem ich im großen Abstand sitze, wirken anders, als 16 Pixel auf meinem Smartphone, das ich einfach ganz nah bei mir halte. Ein anderer Faktor ist die gewählte Schriftart. Je nach gewählter Schrift wirken Größen ganz unterschiedlich. Es gibt manche Schriften, da wirken 16 Pixel relativ groß. Und bei anderen Schriftarten sind 16 Pixel ein Minimum, das man nicht unterschreiten darf. Um das ein bisschen auszutesten, gibt es ein schönes Tool, das Sie hier sehen. Das ist dieses Responsive Type References. Und das ist ein php-Script, das Sie sich hier herunterladen können. Und weil das php ist, müssen Sie das natürlich auf dem Web-Server aufrufen. Das heißt, Sie können es entweder direkt beim Provider ausführen, oder eben auf einem lokalen Web-Server. Ich habe das jetzt hier einmal kopiert und führe es lokal aus. Und wenn ich das zum ersten Mal lade: beim xampp gibt es so eine unschöne Fehlermeldung, die sich aber leicht beheben lässt. Die wäre natürlich nicht an sich störend. Aber wir wollen mal kurz anschauen wie wir die beheben können. Das ist dieses Script. Und wenn wir die Fehlermeldung hier ausschalten, dann ist dieser Fehler nicht mehr da und ich kann das wieder ganz normal aufrufen. Jetzt ist die Fehlermeldung nicht da. Und wie benutze ich dieses Script? Erstmal, wenn Sie es aufrufen, so schaut es so aus. Und dann können Sie die gewünschte Schrift angeben, indem Sie hinter dem Scriptnamen ein Fragezeichen machen und dann zum Beispiel font=Verdana. Und dann sehen Sie wie schaut jetzt eine Verdana aus bei 12 Pixel, 14 Pixel, 16 Pixel und so weiter und haben hier einfach ein wunderbares Beispiel und können sehen wie wirkt das unterschiedlich, oder wenn ich hier jetzt Helvetica eingebe, dann sehe ich das hier. Und es gibt einem natürlich ein gut... ein bisschen Gefühl, wie das Ganze funktioniert. Jetzt ist die nächste Frage natürlich, wenn man jetzt eine Schrift gewählt hat und weiß auch welche Größe gut ist... Hier haben wir das Ganze mit den Pixeln ausprobiert. Pixel sind das jetzt wirklich die richtige Einheit für Schrift. Im Responsive Web Design natürlich nicht, weil wir müssen Einheiten wählen hier, wenn wir auch sonst schon mit Prozent arbeiten und alles flüssig machen, müssen wir bei der Schrift auch Einheiten wählen, die flexibel sind. Und was der erst einmal zur Verfügung steht, noch aus CSS 2.1, sind Prozent und em. Prozent und em bei der Schrift haben ja eine besondere Bedeutung. Prinzipiell ist es so, dass Prozent und em das Gleiche machen. Also, 100% entspricht 1 em bei der Schrift, nicht bei anderen Elementen. Es empfiehlt sich aber folgendermaßen vorzugehen, dass Sie bei Body ein Bezugspunkt setzen mit Prozent, weil es sonst in irgendwelchem Internet Explorer zu Problemen kommt. Und dann können Sie die einzelnen Schriften hingegen in em angeben. Was gewinnt man dadurch? Ich habe jetzt mal hier ein Beispiel gebastelt. Habe jetzt Body hier auf 80% gesetzt und habe mal sehr deutlich unterschiedene Schriftgrößen für h1, h2 und p gewählt. Dann kann ich jetzt innerhalb von Media Queries den Bezugspunkt, das heißt Body, da die Schriftgröße anpassen. Und dann passen sich die anderen Schriften immer proportional an. Das heißt, wenn Sie das hier global festlegen, dass die bestimmte Größen haben sollen, müssen Sie nur an einer Stelle schrauben, um die Größen global anzupassen. Testen wir das einmal hier. Sehen jetzt wie das aussieht, wenn sehr viel Platz da ist. Und die Schrift wird kleiner je kleiner mein Viewport wird. Aber alle Schriften und die Schriften passen sich immer gegenseitig an. Wie groß ist das Ganze? Das hängt natürlich immer davon ab, ob der Benutzer auch was in seinen Einstellungen geändert hat, Wenn der Benutzer nichts in seinen Einstellungen geändert hat, können Sie davon ausgehen, dass 100% oder 1 em 16 Pixel entsprechen. Und dann lassen sich die anderen Werte immer berechnen. Hilfreich finde ich hier auch mit Firebug oder einem ähnlichen Tool zu arbeiten, wo Sie sich anzeigen lassen können wie groß ist es denn jetzt wirklich gerade. Ich habe jetzt hier gerade eine Größe, wo Body auf 100% gesetzt ist. Da kann ich ja dann mal auf Berechnet schalten und dann sehe ich: das entspricht jetzt gerade, das Ergebnis ist 16 Pixel. Wenn ich dann hingehe und meine h1-Überschrift auswähle, die ist ja hier definiert mit 2em. 1em ist im Beispiel 16 Pixel, das heißt 2em sind 32 Pixel. Ich kann das Ganze natürlich hier jetzt auch ein bisschen kleiner machen. So, dann ist ja Body nicht mehr, wenn wir uns das anschauen, auf 100%, sondern auf 80% und das ergibt 12,8 Pixel. Und wenn wir dann die h1 anschauen, dann ergibt die auch das Doppelte, nämlich 25,6 Pixel. Und so skalieren die Ganzen immer relativ. Und das könnte man nicht so einfach machen, wenn man jetzt die ganzen Angaben in Pixel direkt machen würde. Dann müsste man hier wahnsinnig viel anpassen und alle Stellen immer einzeln gehen. Also, das ist hier ein eindeutiger Vorteil der flexiblen Einheit em. Fazit: eine Empfehlung zur richtigen Einheit kann man leicht aussprechen. Also, statt Pixel lieber flexible Einheiten einsetzen für die Schrift wie em oder Prozent. Die richtige Größe im konkreten Fall ergibt sich hingegen am besten durch Ausprobieren, weil man ja natürlich unterscheiden muss, welche Schrift gewählt ist. Und da ist dieses Responsive Type-Script sehr hilfreich.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 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!