Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Gestaltungsgrundlagen für Webdesigner

Text und Typografie

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Lassen Sie sich in diesem Film von Christoph Luchs mehr über Webfonts, Textstruktur, Textfluss und Formatierung erzählen.
12:14

Transkript

In diesem Video möchte Sie mit der Web-Typographie vertraut machen Fonts und Websites, das war lange Zeit ein sehr schwieriges Thema, weil Fonts einfach über Websites nicht geladen werden konnten. Fonts waren überwiegend PostScript-Schriften oder OpenType-Schriften, die eigentlich für den Druck gedacht waren oder für die Gestaltung von Druckvorlagen. Jetzt haben wir Webfonts und da haben wir eine ganze Menge, die wir dann in unser Projekt einbauen können. Das betrifft nämlich die Google Fonts. Google Fonts sind Open Source-Fonts, die Google bereitstellt und das sind 819 Font-Familien, aus denen wir auswählen dürfen. Gut, es gibt natürlich auch massive Einschränkungen. Schriften, die Sie bislang gewohnt waren, über mehrere Jahre oder gar Jahrzehnte anzuwenden, wie zum Beispiel die Univers oder die Avenir oder andere Schriften, die sind natürlich bei großen Herstellern entsprechend gelistet, können dort auch für etwas höhere Preise im Web verfügbar gemacht werden. Das ist also von Hersteller zu Hersteller unterschiedlich, ob der jetzt Monotype oder anders heißt. Adobe hat dazu auch ein Programm aufgelegt, das nennt sich Typekit und ist innerhalb der Creative Cloud verfügbar. Wir wollen uns aber hier mit dem Google Fonts beschäftigen. Wie läuft das Ganze? Erst einmal ist das hier diese Website fonts.google.com und ich kann hinterher die Fonts auch teilweise herunterladen. Nach Kategorien kann ich sortieren, was habe ich denn hier für Fonts überhaupt, wie viele Serifen habe ich? 171. Wie viele Sans-Schriften haben wir? 223. Display-Schriften, also möglichst plakative Headline-Schriften sind 283. Handwriting, allein da haben wir 126 Schriften, auch eine ganze Menge und Monospace, also Schriften, die auf gleicher Dickte laufen, 16 Stück. Auch da immerhin 16 verschiedene. So, wenn wir also eine Schrift suchen, dann müssen wir natürlich gucken, was wollen wir haben. Für mein Projekt suche ich eine Serifenschrift. Die Serifenschrift kann unterschiedliche Charakteristika haben und wir können natürlich auch einen Beispieltext nehmen und die Größe jeweils. Zunächst werden alle Schriften hier der Reihe nach aufgezählt, zum Beispiel hier die Roboto Slab. Roboto, das ist die große Familie aus der Android-Familie der Geräte, also aus dem Android-Betriebssystem. Merriweather, ein sehr schöner Font, Droid Serif oder Lora. Also alles Schriften, die nichts mit einem Klassiker in dem Sinne zu tun haben, aber natürlich auf solchen Klassiker basieren. Dann haben wir noch andere Schriften hier, die Bitter beispielsweise, das ist eine sehr plakative, Arvo und andere. Aber selbstverständlich auch sehr schwierig teilweise, so eine Schrift wie hier die Crimson Text, da müsste ich natürlich ganz genau gucken, wie die Zeichen hier aussehen, weil wir hier natürlich auch sehr feine Buchstaben haben, die im Web bei niedriger Auflösung schnell mal wegbrechen können. Also muss der Schriftgrad möglichst groß sein und der Schriftgrad muss natürlich auch entsprechend kräftig sein. Apropos Fette, hier lassen sich natürlich auch noch diverse Dinge einstellen. Zum Beispiel die sogenannte Thickness, also die kräftige, die Dicke sozusagen eines Fonts. Wenn ich hier das Ganze hier runter drehe, dann sehe ich Schriften, die extrem mager sind, also die auch ein Thin-Schnitt haben und diese ganzen Schnitte, die werden hier in Hunderter Stufen abgestuft, das sind die entsprechenden CSS-Befehle, die dahinter stecken. Also hier wird zum einen in Thin bis Extra Bold differenziert, aber in dem Code wird es hinterher 100 bis 700, wird das eingeteilt. Das heißt, ich kann hier allein mit dem Regler schon mal sagen, ich brauche eine Schrift, die mindestens so semi-bold ist, ungefähr in dem Wert und dann schauen wir mal, was wir da haben. Da haben wir die Merriweather immer noch, die Bitter ist dabei, die Arvo und andere natürlich. Und ich kam hinterher auch noch andere Sachen einstellen, zum Beispiel die Weite der Schrift. Wie breit laufen die Zeichen, ist es also eine sehr breit gedehnte, also hier zum Beispiel so eine Extended, BioRhyme Expanded, so heißt die hier oder ist das eher so ein Condensed-Schnitt, oder ein Compressed sogar, also etwas, was eng läuft, oder sehr eng läuft. Dann sieht man hier auch, das sind also platzsparende Schriften, vielleicht für Fließtext auch sehr gut geeignet. Und last but not least, es gibt natürlich auch noch die Rubrik Slant, also Slant heißt in dem Fall geneigt, also kursiv. Und hier sehen wir auch entsprechend schöne Schriften, die hier eingebaut sind. Allerdings alles unter dem Hauptfilter Serif, wenn ich hier die kursiven Sans haben möchte, dann kann ich das natürlich damit auch kombinieren. Allerdings haben wir jetzt hier keinen direkten Schnitt, wir müssten also hier in Regular Italic wechseln, dann sehen wir, haben wir auch einen Slanted-Font. Gut, noch mal zurück zu meinen Schriften, die ich hier haben will. Ich habe nach Serif geguckt, und ich habe geschaut, dass es hier ein etwas kräftiger Schnitt wird und ich gucke mir mal die Merriweather an. In der Übersicht sieht das Ganze sehr hübsch aus, ähnlich wie ein Fontbuch früher, wer sich daran noch erinnern kann, so sieht das hier aus und die Merriweather ist hier sehr schön ausgebaut, auch mit kyrillischen und anderen Zeichen und wir haben hier jeweils die verschiedenen Stile von Light, Regular, Bold bis Black. Dazu weitere Angaben und natürlich auch die Option, ist das Ganze hier ein Open Sans-Font. und wir haben hinterher auch noch die Benutzung als Statistik, das heißt, in welchem Sprachraum wird dieser Font hauptsächlich verwendet, natürlich überwiegend im US-Bereich, in Deutschland nur ganz wenig, das heißt, mit diesem Font könnte man tatsächlich in Deutschland sogar noch Aufmerksamkeit erzeugen, weil der Font hier eher selten zum Einsatz kommt. So, wenn ich jetzt also mit der Merriweather arbeite, kann ich im CSS-Code hinterlegen, dass diese Merriweather über Google bereitgestellt wird, das heißt, der Font, der wird eingebaut in meine Website. Und das können wir natürlich auch mit zur Gestaltung nutzen dafür muss ich von Google den Font herunterladen. Das kann ich nämlich tun in dem Fall, wenn ich hier eingeloggt bin und kann den Font also lokal als echten Font verwerten. Das tue ich jetzt einfach mal hier unten, da haben wir nämlich hier eine Textbox und ich werde hier erst einmal einen Text einstellen. Ich werde hier einfach mal eine Headline eingeben und ein bisschen Fließtext zum Füllen und dann gucken wir mal, was wir mit der Typografie hier alles machen können. Zunächst will ich das Ganze zentrieren und der Textrahmen selbst, der soll natürlich auch noch eigene Eigenschaften haben. Textrahmenoptionen gibt es hier, den Abstand nach oben und nach unten setze ich schon mal ein und links und rechts soll der Textrahmen auch einen Abstand haben und ich setze ihn hier auf 160 Pixel. Wir wollen ja den Rahmen möglichst so gestalten, dass er auch noch lesbar bleibt. So, die Schriftgröße, der Schriftgrad ist hier noch sehr klein und ich muss natürlich die Merriweather auch hier aufrufen und das habe ich tatsächlich und die gibt’s einmal in der normalen Serife und es gibt sie auch in Sans. also auch schön in der Kombination mit beidem. Wir nehmen die Merriweather Bold als Anfang, können hier die Schriftgröße einstellen 12 Punkt ist im Web extrem klein, das sei hier schon mal gesagt, man kann durchaus mit größeren Schriftgraden arbeiten, sogar bis 18 Pixel, weil einfach die Auflösungen der Geräte heute so hoch sind und natürlich auch ein gewisser Skalierungsfaktor da immer dabei ist. So, Bold für den Schriftschnitt für die Leseschriftgröße ist natürlich etwas fett also nehmen wir hier in dem Fall Regular, aber für die Headline kann man auch mal Bold nehmen und einen größeren Schriftgrad, wenn man den hier einstellen will. So, so weit zu diesen Einstellungen, das ist also typografisch ohne Probleme möglich, das so darzustellen. Jetzt geht es weiter, wie sieht es im Absatzformat eigentlich aus. Das kennen wir aus dem klassischen Printdesign und so ähnlich läuft das auch hinterher in CSS-Code, das heißt, ich kann hier durchaus, das ist durchaus legitim, dass ich mit Absatzformaten zum Beispiel hier auch gewisse Abstände noch definieren kann, zum Beispiel für die Headline. Das heißt, ich nehme hier ein Absatzformat, ich nenne das einfach mal h1, damit ich auch gleich weiß, was das später im CSS-Code heißen könnte oder sollte. Und wir haben die Vorgabe 36, 36, aber wir haben auch Abstände. Und es gibt einen Abstand danach und den kann ich hier einstellen, zum Beispiel kann ich den hier auf 25 Pixel stellen. Mit aktiver Vorschau sehe ich das auch, was passiert. Die Schrift wird tatsächlich im Abstand nach unten verdrängt. Das ist etwas ganz Normales, das ist einfach der Absatzabstand quasi, den man auch in CSS-Code angeben Ähnlich die Silbentrennung, ob getrennt wird oder nicht, kann ich natürlich einstellen. Und ob der Text natürlich auch hier mit einem weiteren Absatzabstand verrichtet ist. Ein weiteres Absatzformat, ich nenne das p für Paragraph, das ist auch der Tag, der HTML-Tag, der dann den Inhalt markiert. Und auch hier haben wir Abstände. den Abstand danach zum Beispiel ebenfalls mit 25 Pixel. So weit kann ich also erst mal typografisch Einfluss nehmen auf diese Informationen und kann also mit Absatzformaten arbeiten, die später zu CSS-Code natürlich werden, aber damit kann ich schon mal sehr gut beurteilen, ob die Gestaltung hier funktioniert. Und wenn ich das so tue und sehe, dass hier die Schriftgröße doch ziemlich aus dem Ruder läuft, weil wir hier extrem breite Zeilen haben. Ja, das ist für die Lesbarkeit natürlich extrem schwer. dann muss ich hier mit dem Textrahmen reagieren. Das heißt, der Textrahmen kriegt von links und rechts noch einmal einen höheren Wert zugewiesen, zum Beispiel links und rechts noch mal 50 Pixel eingezogen, dann sind wir bei links und rechts 210. Und das ist schon wieder eine ganz angenehme Größe, die ich auch am Monitor noch lesen kann und bei mobilen Geräten natürlich dann später skaliert wird. Warum mache ich das in einem einzigen Rahmen? Nun, das ist ganz einfach. Zum einen kann ich den nach unten weiter ausklappen, wenn die Texte länger sind, zum anderen kann ich ihm einfach mit einem Klick irgendeine Hintergrundfarbe geben, sodass ich diese gesamte Box mit einem Klick auch umfärben kann. Das ist also sehr wichtig bei der Auswahl von dieser Typografie. Und ganz zum Schluss noch eine Faustregel. Wenn ich mit Google Fonts arbeite, werden die Fonts über Google online bereitgestellt. Das heißt, Fonts sind gar nicht bei mir auf der Website eingebunden, sondern werden über Google, über den Server jeweils von Google bereitgestellt. Das bedeutet ein bisschen Ladezeit und deswegen sollte man sich ungefähr auf drei bis vier Fontschnitte begrenzen, also hier die Merriweather Bold, Regular und vielleicht noch zwei weitere Schnitte und damit ist eigentlich dann die Performance der Website auch ausgereizt. Das funktioniert auch auf mobilen Geräten übrigens, auf Smartphones und auf Tablets.

Gestaltungsgrundlagen für Webdesigner

Lassen Sie sich die Grundlagen guten Webdesigns anhand eines Praxisbeispiels näherbringen.

2 Std. 30 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:27.07.2017

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!