Startseite Skripte für das Wintersemester 2018/19 Webdesign Interaction, Webfonts, Webtypografie Übung zu Web-Typografie


Übung zu Web-Typografie

Briefing

  • HTML ist schon fertig, nicht verändern – nur das Stylesheet anpassen
  • Schriftgröße der Überschrift „Typografie“ via der (neuen) Maxeinheit „vw“ festlegen – dann passt sich die Textgröße automatisch der Breite des Browsers an
  • Mehrspaltigen Text diesmal via „Multi-Column“-Anweisungen einbauen – siehe entsprechenden Slide am Anfang dieses Scripts
  • es sind diesmal keine Media-Queries notwendig, damit sich die Seite an verschiedene Browser-Breiten anpasst – das erledigt die (richtige) „Multi-Column“-Anweisung

Integration von Webfonts via Google-Fonts

  • Fügt für die Überschrift den Webfont „Montserrat thin 100“ ein
  • Für den restlichen Text bitte den Webfont „Fira Sans“ in den Schriftstärken „extra light 200 italic“ und „regular 400“ einbauen

Hover-Menü

Die Links zu weiteren Web-Typografie-Tips werden nur sichtbar, wenn man mit dem Mousezeiger über den Pfeil (oben rechts) hovert – siehe Vorlage!

HTML

<head>

    <!-- hier den Link zu den Google-Fonts einfügen! -->
    <link rel="stylesheet" href="c/style.css">
</head>

Download

Lade das Übungspaket hier herunter