HTML und CSS für Designer

Schriftformatierung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Nach der Einbindung eines Webfonts in das HTML-Dokument müssen in der CSS-Datei bestimmte Befehle auf die Einbindung abgestimmt werden.

Transkript

Nachdem wir den Zeichensatz installiert haben, sodass er für die Website verfügbar ist, müssen wir nun noch einen weiteren Schritt machen, nämlich den Zeichensatz auch irgendwie verwenden. Im Moment haben wir im Wesentlichen den Zustand, als wenn wir hier in InDesign - oder besser gesagt auf dem Computer - die Schriftart "Exo 2" installiert haben, aber hier noch gar nicht angewendet. D. h., es existiert auf dem Rechner, aber keiner interessiert sich dafür. Und genau den Zustand haben wir im Moment an dieser Stelle. Ein kleiner Hinweis noch: Ich habe hier eine +2 eingetragen, denn fälschlicherweise, bei der Auswahl aus Google Fonts habe ich nur die "Exo" genommen, dann fehlt diese +2. Falls Ihnen das auch passiert ist, einfach hier die +2 nachtragen, dann hat sich das erledigt. Und noch ein kleiner Hinweis, das kam auch schon vor, dass ich hier oben "document" geschrieben habe; bitte darauf achten: Hier darf kein "document" stehen, da muss "doctype" stehen. Bis dahin hat das funktioniert, wenn Sie aber die Stylesheet-Angaben zuweisen wollen, werden Sie feststellen, dass der Browser nicht darauf reagiert, und das wäre ärgerlich. Also: "doctype", darauf achten, und dann hier die "Exo 2"-Familie. Schauen wir uns kurz an, was wir nun übernehmen müssen. Wir haben in InDesign einen Text , der der "Exo 2"-Familie angehört, das sehe ich auch hier. Aber es fällt auch auf, dass der nicht schwarz ist, d.h. ich habe eine Textfarbe zugewiesen. Die bekomme ich, indem ich auf die Farbzuweisung doppelklicke. Da sieht man, es gibt verschiedene Farbmöglichkeiten: CMYK - werden Sie wahrscheinlich aus den Druckbereich kennen. Die können wir in der Webprogrammierung gar nicht verwenden. "LAB" wäre schon möglich unter bestimmten Voraussetzungen, aber die beiden geläufigsten sind heute RGB und diese komische Angabe, die hier unten steht. Was verbirgt sich nun dahinter? Ich bewege die mal so ein bisschen. Wir haben einmal bei RGB, also rot grün blau, Werte von 0 bis 255. Das, was sie nun hier sehen: 100 106 157 entspricht genau den Angaben: Die 100 ist die 64, 6A entspricht 106 und die 9D entspricht der 157. Das bedeutet also, ich habe hier immer für rot, grün, blau zwei Werte. Hexadezimal bedeutet nichts anderes, als dass wir ein Zahlensystem zur Basis 16 haben, während das hier ein Dezimalsystem ist. Das ist der Grund, warum das Dezimalsystem drei Stellen braucht und das Hexadezimalsystem nur jeweils zwei Stellen, um drei Werte darzustellen. Der Grund ist der, habe ich beim Dezimalsystem Zahlen von 0 bis 9, um alle Zahlen darstellen zu können, alle Werte, habe ich bei einem Hexadezimalsystem 16, und zwar Zahlen von 0 bis 9 - das ist gleich -, aber ab dann, der Wert 10 geht mit "A" weiter und hört dann bei "F" entsprechend auf. Man sieht, auch hier gibt es eine Angabe, also 106 ist 6A im Hexadezimalsystem. Jetzt muss man das ja nicht alles im Kopf ausrechnen. Man bekommt es hier angezeigt, und entsprechend habe ich auch hier, wenn ich z.B. Nullwerte überall eintrage, selbstverständlich auch überall Null im Hexadezimalbereich. Trage ich z. B. den Maximalwert bei grün ein: 255, dann sieht man, das ist auch der Maximalwert in hexa: FF. Und ich muss jetzt nichts anderes machen als den Wert, den ich mir ausgewählt habe, auch hier zu übernehmen. Das kann ich mir markieren, falls ich das nicht im Kopf behalten möchte, und später in der CSS-Datei verwenden. Also, ich breche das Ganze ab und gehe zurück in die CSS-Angabe. Jetzt muss ich hier übernehmen, wohin oder wofür und für welchen Bereich diese Schriftart gelten soll. Wenn wir uns mal das HTML-Dokument anschauen, dann gibt es hier den Bereich "body", und der "body"-Container beinhaltet alles, was wir im Browser sehen. Ich rufe mal die Datei auf: "Datei öffnen...". Dann hole ich mir die "index". So sieht im Moment unser Dokument aus, von der "Exo 2" sieht man rein gar nichts. Aber alles, was ich hier in diesem Bereich sehe, also im unteren Browserbereich, das steht im "body". Damit habe ich die Möglichkeit, über den "body" zu sagen: Alles, was hier jetzt an Text kommt, das soll die "Exo 2"-Familie sein. Dann gibt es noch eine schöne Hilfe bei den Google-Fonts über die Einbindung. Wenn man das hier so eingebunden hat, weiter unten findet sich der Hinweis, wie ich das im Stylesheet umsetzen muss; da sieht man: "font-family: 'Exo 2' , sans serif;" - alles klar. Dann basteln wir das; ich gehe in das Stylesheet. Ich möchte, dass die Schriftfamilie komplett für den "body" gilt, und dort genau das, was mir auch Google sagt, "font-family", Doppelpunkt in Anführungsstrichen "Exo 2", Komma, "sans-serif", Semikolon, und jetzt muss ich noch die Farbe reinbekommen, diese komischen hexadezimalen Angaben; und das kann ich mit "color" machen, Raute, dann den Farbwert und das war's schon. Alternativ - ich klammere das mal aus als Kommentar - könnten Sie durchaus auch RGB verwenden hier in einem HTML5-Dokument , und dann schreiben Sie anstatt dem Hexadezimalwert einfach RGB, runde Klammer auf, 100, 100, 100 Komma 0. Der Nullwert hinten steht für Transparenzen, und spätestens dann, wenn man etwas transparent darstellen möchte, braucht man diesen Wert. Das lasse ich mal als Kommentar einfach drinstehen, das ist nämlich identisch zu dieser Befehlszeile. Dann speichere ich das Stylesheet ab, wechsele in den Browser, aktualisiere, und wie man sieht: Jetzt gilt im kompletten HTML-Dokument die "Exo 2" als Schriftart mit der Farbe. Das ist schon die Vorbereitung für alle weiteren präzisen Angaben der Typographie.

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!