Muse Kompakt Kurs – Lektion 10 – Schriften im Web und in Muse

Wir haben uns in der letzten Lektion ausführlich damit beschäftigt, wie man Texte mittels Absatz- und Zeichenformaten gestalten kann.

Eine Information der Textformatierung habe ich auf eine eigene Lektion verschoben. Es handelt sich dabei um die Schriften.

 

Schriften im Web – Vieles ist anders

Wenn man ein Dokument erstellt, das später ausgedruckt werden soll, dann ist man gewohnt, dass man bei den Schriften so alles verwenden kann, was sich auf dem Computer befindet. Wie sieht es aber mit dem Web aus?

Hier ist es leider ganz anders. Die Auswahl der zur Verfügung stehenden Schriften ist sehr gering. Warum ist das gerade im Web so problematisch?

Der Grund dafür ist, dass der Browser zum Darstellen der Schriften in der Regel immer auf die am Computer installierten Schriften zurückgreifen muss. Das bedeutet, wir dürfen nur Schriften verwenden, die beim Betrachter der Website auch wirklich vorhanden sind.

Jetzt können wir aber nicht nur so einfach alle Schriften verwenden, die zum Beispiel bei einer Microsoft Windows Installation vorhanden sind, denn unsere User benutzen ja auch andere Betriebssysteme, wie etwa macOS oder Linux. Diese Betriebssysteme haben wieder etwas andere Systemschriften installiert.

Das bedeutet, wir können nur die Schriften verwenden, die sicher auf all diesen Systemen vorhanden sind. Damit die Auswahl übrigens noch schwieriger wird, haben wir heute noch unsere mobilen Geräte mit den Betriebsystemen iOS und Android.

Aus diesem Grund ist der gemeinsame Nenner nur eine Handvoll Schriften, die wirklich problemlos verwendet werden können. Was aber passiert, wenn man eine Schrift auswählt, die nicht am System vorhanden ist? Wird der Text dann gar nicht angezeigt?

Zum Glück wird der Text bei einer fehlenden Schrift trotzdem dargestellt, allerdings nur mit der Standardschrift des Browsers und das ist meistens „Times New Roman“. Meistens sage ich deshalb, weil der User die Standardschrift im Browser selbst definieren könnte, was ab kaum jemand macht.

Wenn die ausgewählte Schrift ähnlich ist, dann wäre das ja nicht so tragisch. Nachdem man aber im Web wegen der Lesbarkeit meist Schriften ohne Serifen verwenden sollte (übrigens das Gegenteil zum Print) ist da schon ei wesentlicher Unterschied. Die Standard Schrift „Times New Roman“ ist eine Schrift mit Serifen.

 

Verwenden von Alternativ Schriften

Um das Problem zum vermeiden, kann man bei der Angabe von Schriften auch Alternativ- oder auch Fallbackschriften genannt einsetzen. Wenn wir Muse verwenden dann müssen wir uns nicht darum kümmern, den Muse hat bei den Schriften schon eine Reihe von alternativen Schriften definiert.

Sehen wir uns das ganze einmal praktisch in Muse an. Wenn wir einen Text zum Beispiel mit dem Text Bedienfeld formatieren, dann haben wir ganz oben ein Dropdown für die Auswahl der Schriften. Klappen wir das einmal auf uns sehen uns an, was die Liste so anbietet.

Muse - Schrift Dropdown

Muse – Schrift Dropdown

Ganz oben (1) haben wir zur schnelleren Verwendung jene Schriften, die zuletzt verwendet wurden. Damit muss man bei einer langen Liste nicht immer nach unten scrollen um häufig verwendete Schriften auszuwählen.

Etwas weiter unten gibt es die „Standardschriften (mit Fallback)“ (2). Das sind die Schriften, von denen ich vorher gesprochen habe. Die Angabe Fallback drückt damit auch aus, dass es eine Angabe von alternativen Schriften gibt. Rechts vom eigentlichen Schriftnamen, kann man in hellgrauer Schrift die alternativen Schriften lesen. Da der Platz hier etwas eingeschränkt ist, kann es sein, dass diese Liste etwas abgeschnitten ist. Fährt man mit der Maus über die Schrift, zum Beispiel Arial, dann kann man im Toolbox Fenster die komplette Liste lesen.

Muse - Standardschrift Fallback

Muse – Standardschrift Fallback

Bei Arial sind die alternativen „Helvetica Neue“, wenn es diese nicht gibt, dann „Helvetica“ und wenn diese auch nicht vorhanden ist, dann irgendeine Systemschrift, die keine Serifen hat. Damit ist die Darstellung zumindest etwas ähnlicher. Die Bezeichnung „sans-serif“ bedeutet übrigens ohne Serifen.

 

Einsatz beliebiger Systemschriften

Wie wir sehen können, ist die Liste der zur Verfügung stehenden Schriften recht kurz. In meinem Fall sind es gerade einmal 11 Schriften. Was machen wir jetzt, wenn wir eine andere als diese 11 Schriften nutzen wollen. Immerhin bietet und Muse ja die Möglichkeit an, auch Systemschriften von unserem Computer zu verwenden. In meinem Beispiel hier, hab ich die Schrift „Adobe Arabic Regular“ ausgewählt.

Muse – Systemschrift Auswahl Export als Bild

Wie kann das sein, wenn ich vorhin behauptet habe, dass dies nicht zulässig ist und nicht funktionieren wird? Die Lösung steht eigentlich schon bei der Überschrift neben „Systemschriften“. Adobe Muse macht aus dieser Schrift automatisch ein Bild. Verwendet man zum Beispiel eine solche Schrift um einen Text zu formatieren, dann sieht das in Muse so aus.

Muse - Systemschrift verwendet mit Bildsymbol

Muse – Systemschrift verwendet mit Bildsymbol

Der Text wurde mit der richtigen Schrift formatiert. An dem kleinen Symbol rechts unten ein T mit einem Bildsymbol, kann man auf den ersten Blick rasch erkennen, dass die Schrift als Bild eingefügt wurde.

Es geht ja doch – also alles kein Problem? Doch es ist ein Problem, denn es gilt der Grundsatz, dass es zu vermeiden ist, dass Texte als Bild eingefügt werden.

Gründe dafür gibt es einige. Erstens ist der Text damit weder für Suchmaschinen erfassbar noch für User, die Inhalte nicht normal lesen können, also für blinde User. Wir hatten das Thema ja bereits in der letzten Lektion.

Texte, die als Bilder eingefügt wurde, lassen sich auch nicht so einfach ändern (zumindest nicht ohne Muse). Es gibt damit keine Möglichkeit diese Teste über die InBrowse Edit Funktion zu verändern.

Weiters ist es auch nicht möglich wirklich gute responsive Seite mit Texten als Bilder zu erstellen, da sich diese nicht automatisch anpassen können.

Es spricht also einiges gegen den Einsatz von Systemschriften. Es ist also eine Notlösung, von Muse die hier angeboten wurde und problemlos und leicht funktioniert. Leider zu leicht – denn wenn man sich nicht bewusst ist, welche Auswirkungen das auf die Seite hat, dann verwendet man es einfach. Eine Warnmeldung beim Einfügen einer solchen Schrift wäre zumindest ein Weg in die richtige Richtung.

Gut wir wissen jetzt, dass wir nur etwa 11 Schriften haben, die wir für Texte verwenden können, da diese auf allen Computern vorhanden sein sollten. Weiters wissen wir, dass wir Systemschriften zwar verwenden können, das aber nicht tun sollten, weil diese als Bilder eingefügt werden.

Gibt es doch eine Lösung um andere Schriften zu verwenden, die diese Nachteile nicht haben?

 

Webschriften – die Lösung für unsere Probleme

Die gute Nachricht – ja die Lösung gibt es. Und auch hier macht uns Muse das Leben recht leicht. Der Weg geht über Web Fonts. Web Fonts sind eine Technik, die eingeführt wurde um es zu erlauben Schriften nachzuladen und dann zu verwenden.

Klingt doch toll oder? Ja toll, wenn da nicht wieder einige Fallstricke wären. Technisch funktioniert alles hervorragend, aber nicht immer ist alles zulässig, was geht. Ich meine damit die rechtliche Sicht. Theoretisch könnte man jede beliebige Schrift, die man für den Desktop gekauft hat auch für den Einsatz von Web Fonts verwenden. Aber zulässig ist das in den meisten Fällen nicht. Sieht man sich die Lizenzen der meisten Schriften an, dann ist für den Einsatz im Web nicht inkludiert und extra zu bezahlen.

Zum Glück gibt es aber auch eine Menge freie Schriften, die den kommerziellen oft sehr ähnlich sind. Eine sehr beliebte Quelle sind die Google Fonts – zu finden unter https://fonts.google.com/.

Google Fonts

Dort gibt es aktuell über 800 Fonts.  Bei Muse ist es sogar seht leicht dies Fonts zu verwenden den diese sind zum Grossteil schon in Muse integriert. Wie man diese verwendet zeige ich dir jetzt.

 

Web Fonts anwenden

Um einen Web Font einzufügen, öffnest du wieder das Schriften Dropdown und wählst die Zeile „+Webschriften hinzufügen“ aus.

Muse – Webschrift hinzufügen

Wenn die diese ausgewählt hast, dann kommt eine Übersicht der drei Varianten in Muse Web Fonts einzubinden.

Muse - Webschriften

Muse – Webschriften

Ganz links sind die Typekit Web Fonts. Du hast hier zwar eine Menge Schriften zu Auswahl (Tausende – wie Adobe sagt), aber diese sind im Prinzip auch kommerziell und an eine aktive Lizenz von Adobe gebunden und nicht so leicht für Kundenprojekte einzusetzen. Ich persönlich rate vom Einsatz dieser Typekit Fonts eher ab. Wenn diese unbedingt verwendet werden sollen, dann solltest du die Lizenz Bedingungen gut durchlesen.

Auf der rechten Seite, kannst du Web Fonts verwenden, die du selbst als Dateien bekommen hast. Wie schon erwähnt, solltest du dich aber vorher erkundigen, ob du auch die notwendigen Rechte besitzt, diese im Web zu verwenden, Andernfalls kann der Einsatz eine teure Angelegenheit werden.

Wesentlich unkomplizierter und problemloser sind die Edge Web Fonts. Diese sind kostenlos und an kein aktives Abo gebunden. Die hier vorhanden Schriften entsprechen im Grossen und Ganzen den Google Fonts.

Um nun eine Schrift zu verwenden, klicken wir auf „Jetzt beginnen“. Soll dieses Fenster das nächste mal nicht mehr erscheinen, dann markiere die Checkbox „Nicht mehr fragen“.

Nun hast du drei Tabs, wobei du den mittleren auswählst. Jetzt hast du eine lange Liste mit Fonts.

Muse - Edge Webfonts

Muse – Edge Webfonts

Im Suchfeld ganz oben, kannst du einen Namen oder einen Teil des Font Names eintippen. Die Liste reduziert sich dann auf die Fonts, die passen. In meinem Beispiel will ich nach der Schrift Robot suchen, die weiter oben im Screenshot der Google Fonts auch schon sichtbar war. Die vier Buchstaben „robo“ reichen und die Auswahl schränkt sich ein auf „Roboto“.

Muse - Webfont Schriftsuche

Muse – Webfont Schriftsuche

Wähle die Schrift oder die Schriften aus, die installiert werden sollen und bestätige rechts unten mit OK.

Muse - Webfonts Schrift installieren

Muse – Webfonts Schrift installieren

Es kommt dann eine Bestätigung, dass eine oder mehrere Schriften installiert wurden.

Muse - Webfonts Schrift installiert

Muse – Webfonts Schrift installiert

Jetzt hast du im Dropdown der Schriften diese Schrift verfügbar und kannst diese problemlos für deine Webseite einsetzen.

Muse - Webschriften Roboto Liste

Muse – Webschriften Roboto Liste

Angewendet sieht das dann so aus.

Muse - Webschriften Roboto angewendet

Muse – Webschrift Roboto angewendet

Du siehst also, es ist in Muse gar nicht so schwer Schriften zu verwenden, die alle lesen können, die legal und auch noch Suchmaschinenfreundlich bzw. Barrierefrei sind.

 

Zusammenfassung

Ich möchte am Schluss noch die wichtigsten Erkenntnisse zum Thema Schriften zusammenfassen:

1. Verwende, wenn möglich Standardschriften mit Fallback Angaben.

2. Vermeide Systemschriften zu verwenden, die in Bilder umgewandelt werden.

3. Wenn Standardschriften nicht ausreichen, dann verwende Webfonts.

4. Wenn Webfonts verwendet werden, vermeide Typekit Fonts. Die Lizenzbedingungen sind meiner Meinung nach zu restriktiv und können zu Verlust der Schrift oder zu unerwarteten Kosten führen.

5. Verwende am besten Edge Webfonts. Diese entsprechen zum größten Teil den Google Webfonts.

Comments

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.