Muse CC 2018 Grundkurs

Umgang mit Schriften auf Webseiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Arbeit mit Schriften im Web unterliegt ganz besonderen Regeln, die sich von denen anderer Medien deutlich unterscheiden. Das Video erklärt Ihnen die verschiedenen Möglichkeiten im Umgang mit Text für Webseiten sowie deren Vor- und Nachteile.

Transkript

In diesem Video möchte ich Ihnen erklären, wie man ganz allgemein im Web mit Schriften umgeht und wie Adobe Muse mit Schriften umgeht. Und damit Sie das gleich besser sehen können, werde ich mich hier einfach mal so ein bisschen Dummy-Text nehmen, „Lustiges über New York City“, klicke hier auf „Kopieren“ und gehe nun auf eine leere Seite. Um es direkt zu sagen, den Text den, wir jetzt hier verwenden, der ist nicht wirklich wichtig, sondern es geht nur um das Prinzip, damit Sie das gleich besser sehen können. Ich erstelle jetzt hier einen Textrahmen. Da kommt mein Text hinein und damit man das gleich besser sehen kann, werde ich hier diese Schriftgröße einmal erhöhen und zwar hier so auf 24 Pixel. Dann werde ich hier diesen Text kopieren, in die Zwischenablage und noch zweimal einfügen. Und zwar hier und dann noch einmal und dann haben wir ihn hier, so in etwa. Dieses Bedienfeld hier oben, das brauche ich jetzt nicht mehr, das blende ich einmal aus und des Weiteren werde ich ihr die Hilfslinien ausblenden, damit wir hier noch etwas mehr als nur Hilfslinien auf dem Bildschirm sehen. Ich schieb das jetzt hier so ein bisschen zur Seite und jetzt gehe ich mal hier in dieses Textfeld hinein und wähle jetzt hier mal diese Schriftarten aus. Das hätten wir auch im Bedienfeld „Text“ machen können, aber ich glaube, so ist es alles in allem ein wenig übersichtlicher, auf dem Bildschirm. Wenn wir jetzt hier, in diese Schriftauswahl hineingehen, dann gibt es dort vier Bereiche. „Zuletzt verwendete Schriften“ ist glaube ich klar, das muss ich nicht erklären. Das hat auch keine eigentliche auszeichnende Bedeutung, sondern das ist schlicht und ergreifend, die von Ihnen zuletzt verwendete Schrift, Punk! Dann kommen aber die sogenannten Webschriften. Die „Standardschriften (mit Fallbacks)“ und die „Systemschriften (Export als Bild)“. Das sind die drei Bereiche, um die es mir jetzt im Folgenden hauptsächlich geht und ich fange nicht oben an, sondern ich fange, wenn man so will, hier in der Mitte an. Nämlich mit den sogenannten Standardschriften mit Fallback. Und ich wähle jetzt hier einfach mal „Arial“ aus, klicke jetzt da drauf und hätte das vorher markieren sollen. Dann wäre das schlauer gewesen, markiere es, klicke jetzt hier auf „Arial“ und Sie sehen, wir haben jetzt hier Arial. Was ist aber, wenn diese Webseite auf einem anderen Computer angezeigt wird, auf dem die Schriftart Arial überhaupt nicht vorhanden ist? Zum Beispiel auf relativ vielen Linux- und Unix-Systemen, da ist zum Beispiel die Schriftart Arial nicht drauf, weil in der Tat um die Schriftart Arial verwenden zu können, muss man sie schlicht und ergreifend lizensieren. Wenn auf diesem System aber keine lizensierte Schriftart ist, was soll denn jetzt angezeigt werden und genau deswegen steht hier in Klammern mit Fallback. Wenn ich jetzt hier mit der Maus drüberfahre, dann sieht man was passiert, wenn Arial nicht drauf ist, dann versuch das System Helvetica Neue zu benutzen. Sollte die Schriftart Helvetica Neue ebenfalls nicht drauf sein, dann versuch das System Helvetica zu benutzen. Sollte diese Schriftart ebenfalls nicht drauf sein, dann nimmt er eine sogenannte sans-serif-Schriftart. Also flapsige gesagt, irgendeine, Hauptsache es sind keine Serifen dran und das kann man jetzt hier auch bei diesen anderen Schriftarten durchexerzieren. Nehmen wir mal die Georgia, da sehen Sie es, wenn Georgia drauf ist, nimmt er Georgia, wenn sie nicht drauf ist, nimmt er Palatino. Wenn Palatino nicht drauf ist, nimmt er Palatino Linotype und so weiter und so fort. Das können Sie sicherlich selber lesen und das sorgt in der Tat dafür, dass das manchmal auf dem einen System so ausschaut und manchmal auf dem anderen System so ausschaut. Bei einigen dieser Schriftarten hat man sogar das Problem, das obwohl sie identisch heißen, dass sie von unterschiedlichen Schriftherstellern geliefert worden sind oder auch aus einem anderen Jahrgang stammen und dann auch noch mal dafür sorgen, dass es auf dem Bildschirm leicht anders ausschaut und das wiederum kann natürlich zu unterschiedlichen Zeilenumbrüchen führen. Und naja, das ist eben lange Zeit das Problem im Internet gewesen, dass wenn man hier eine Schriftart auswählt, man sich nicht drauf verlassen kann, dass es beim anderen funktioniert. Zugegebenermaßen muss man sagen, die Schriftarten die wir jetzt hier haben, die sind heutzutage auf fast jedem System drauf, so dass diese Fallbacks häufig nicht zum Einsatz kommen, aber das Grundprinzip besteht. Wenn ich nun eine andere Variante hier auswähle und dazu gehe ich mal in den unteren Bereich hier, „Systemschriften (Export als Bild)“ man ahnt wahrscheinlich schon so ein bisschen, was jetzt passiert. Wenn ich jetzt hier eine Schriftart auswähle, ich nehme mal hier diese Schriftart von Apple, wenn Sie auf einem Windows-System sich dann die Webseite anschauen würden, dann wäre die auf Ihrem System nicht drauf, keine Chance. Aber was würde jetzt auf Ihrem System angezeigt werden? Naja, weil ich eben hier diese Variante ausgewählt habe, hier im untersten Bereich „Export als Bild“, wird dieser Text nicht in den HTML-Code eingebunden, sondern daraus wird ein Bild. Und das hat wahnsinnig viele Nachteile, es gibt eigentlich nur einen wirklich guten Vorteil. Hier unten rechts, da kann man auch sehen: „Hey, wenn du das später exportierst, das hier ist kein Text mehr, das hier wird ein Bild“. Der einzige wirklich gute Vorteil an dieser Variante ist, wenn Sie die Schriftart auf Ihrem System haben, das wird auf jeden Fall perfekt auf der Webseite ausschauen. Der andere muss die Schriftart ja auf seinem System nicht installiert haben, weil Sie liefern ihm ja auch gar nicht den Text, sondern Sie liefern in Wirklichkeit ein Bild, aber dieses Bild bringt eben auch die genannten Nachteile. Bilder sind eben von der Suchmaschine Google oder auch von anderen Suchmaschinen wie Bing oder DuckDuckGo nicht indexierbar. Wenn ich jetzt das Ganze hier so exportiere und dieses „Lustiges über New York City“ würde nur hier in der Mitte stehen, dann wären die Suchmaschine nicht in der Lage, diesen Text hier zu indexieren. Die Suchmaschine wüsste nicht, was auf ihrer Seite draufsteht. Genau genommen, es steht ja auch nichts auf ihrer Seite drauf, sondern ist es ein Bild auf ihrer Seite. Also Sie sehen, diese Variante hat wirklich sehr, sehr viele Nachteile und es gibt nur wenige Gründe, warum man das Ganze meiner Meinung nach, nutzen sollte. Jetzt gibt es noch die dritte Variante und dazu muss ich hier wieder ein bisschen nach oben scrollen. Die sogenannten Webschriften. Webschriften sind eine relativ moderne Technik und damit geht man diesen beiden Problemen so ein wenig aus dem Weg. Wie Webschriften genau funktionieren, erkläre ich Ihnen im nächsten Video.

Muse CC 2018 Grundkurs

Lernen Sie mithilfe von Muse CC 2018 Websites zu gestalten ohne Programmier-Vorkenntnisse haben zu müssen.

7 Std. 0 min (66 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:16.03.2018

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!