Digital Typography – UI/UX Design

Technik Workshops

Übung: Responsive Plakat

Aufgabenstellung

Siehe Paul

CSS Grid, Spaltenbreite nach Wort-/Absatzlänge

Mit der Eigenschaft grid-template-columns und den Werten min-content und max-content kannst eine Spaltenbreite einstellen, die entweder so breit ist, wie das breiteste Wort in einem Text oder so breit, dass der ganze Text auf einer Zeile darin Platz findet.

variable Schriftgrösse

Anstatt Media-Queries zu verwenden, kannst du die Schriftgrösse mit den Viewport-Einheiten vw und vw einstellen – dann skaliert Text proportional zum Browser-Fenster.

vw steht für ‘viewport width’. 100vw entspricht der vollen Viewport-Breite in Pixeln, 50vw bedeutet die Hälfte (50 %) davon, 4vw sind 4 % der Viewport-Breite.

vh steht für ‘viewport height’, das Prinzip ist das Gleiche. Diese Einheit kommt wahrscheinlich eher nicht in Frage, um die Schriftgrösse einzustellen, weil für horizontal geschriebene Schrift in der Regel die Zeilenlänge in Zusammhang mit der Schriftgrösse steht.

clamp

Mit der CSS-Eigenschaft clamp() Du kannst auch Schwellenwerte für die Schriftgrösse einstellen, d.h. ein unteres und ein oberes Limit.

font-size: clamp(24px, 4vw, 64px);

In diesem Fall ist die Schriftgrösse variabel, solange 4vw nicht kleiner als 24 respektive 64 Pixel ist. Fällt der Wert unter 24px bleibt die Schriftgrösse doch 24 Pixel gross. Wird der Wert grösser als 64px, bleibt die Schriftgrösse doch 64 Pixel gross.

Laufrichtung von Text, Orienteriung der Zeichen

Mit den Eigenschaften writing-mode und text-orientation kannst du andere Laufrichtungen als jene von oben links nach rechts wählen. Z.B. weil du Text in einem anderen Schriftsystem als dem Lateinischen darstellen musst, oder zu plakativen Zwecken.

Besser als lange Erklärungen sind die Beispiele bei MDN. Und hier mein Beispiel in CodePen, mit David Jonathan Ross’ Schrift «Bungee».

Animation

Wir behandeln das Thema Animation hier nur am Rande. Es kommt dann im Herbst in Zusammenhang mit Variable Fonts noch einmal auf den Tisch. Trotzdem möchte ich an dieser Stelle genug Information für eigene Experimente abgeben.

Eine Faustregel

Problemlos animieren lässt sich alles, was sich in folgende Animationstypen gliedern lässt: Wachsen/Schrumpfen, Bewegen von A nach B, Rotieren, Verzerren, Einblenden/Ausblenden.

Problematisch ist alles, was eine Verwandlung beinhaltet. Z.B. Das überführen von Text in eine geometrische Form, von einem Film in ein Vektorbild etc. Alles was nach «Trickfilm» riecht, sollte sicherheitshalber mit dem Prädikat «technisch nicht machbar» versehen werden.

Animation am Bildschirm bedingt Interpolation (siehe unten): solange es Eigenschaften mit Zahlenwerten gibt, die manipulierbar sind, dann ist eine Animation sehr wahrscheinlich möglich.

Terminologie

«Interpolation»

Von Interpolation wird gesprochen, wenn die Zwischenschritte für den Übergang von einem Ausgangswert zu einem Zielwert vom Computer errechnet werden. Der Computer «interpoliert» von einem Wert zum anderen.

«Ease»

Wenn die Schritte einer Interpolation immer gleich gross sind, so ist es eine «lineare» Interpolation.

Manchmal erfolgt eine Interpolation aber nicht in gleichmässigen Schritten. Zum Beispiel kann es sein, dass der Ausgangswert am Anfang nur in kleinen Schritten gesteigert wird, gegen Ende aber in immer Grösseren. Das ergibt eine Animation, die zu Beginn langsam ist und gegen Ende schneller wird. Ein Beispiel dafür wäre eine startende Rakete.

Umgekehrt kann eine Animation am Anfang schnell sein, gegen Ende aber langsamer werden. Ein Beispiel dafür wäre ein bremsendes Auto.

Solche Beschleunigungen oder Verlangsamung werden ease genannt.

  • ease-in: langsam zu Beginn, schnell am Schluss
  • ease-out: Verlangsamung gegen Ende.
  • ease-in-out: Verlangsamung zu Beginn und gegen Ende

Je nach Anwendungsfall kann es sein, dass eine Animation natürlicher wirkt, wenn sie nicht linear abläuft.

Das Tempo einer Interpolation lässt sich als Pfad in einem Rechteck visualisieren, in dem die X-Achse für die Dauer und die Y-Achse für den interpolierten Wert steht. Ist es eine lineare Interpolation, so verläuft der Pfad gerade. Ist es nicht linear, so gibt es eine Kurve.

Animation mit CSS

Zur Animation von HTML-Elementen gibt es folgende CSS-Eigenschaften:

animation-name            /* Referenz für @keyframes, siehe unten          */
animation-duration        /* Dauer in Sekunden oder Millisekunden          */
animation-timing-function /* linear, ease, ease-in, ease-in-out, ease-out  */
animation-delay           /* Verzögerung  in Sekunden oder Millisekunden   */
animation-iteration-count /* Wiederholungen: 0–infinite                    */
animation-direction       /* normal, reverse, alternate, alternate-reverse */
animation-fill-mode       /* none, forwards, backwards, both               */
animation-play-state      /* paused, running                               */

@keyframes

In der CSS-Regel @keyframes, gefolgt vom Namen einer Animation, werden die Werte definiert, zwischen denen interpoliert wird: Start, Schluss und bei Bedarf Zwischenschritte. Erlaubt sind Angaben in Prozenten von 0–100, oder from und to, wenn es keine Zwischenschritte gibt.

@keyframes grow {
    from { transform: scale(1); }  /* statt 'from' ginge auch '0%' */
    to   { transform: scale(2); }  /* statt 'to' ginge auch '100%' */
}

Einzeln und übersichtlich oder kurz und bündig

Du kannst die Animations-Eigenschaften separat schreiben

.foo { 
  animation-name: grow;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 0;
  animation-iteration-count: infinite
  animation-direction: alternate;
}

Oder du kannst es mit der Eigenschaft animation zusammenfassen:

.foo { animation: grow 2s ease 0 infinite alternate; }

Anmerkungen

Reihenfolge der Werte in ‘animation’

Die Reihenfolge der Werte ist nur teilweise geregelt. Als erstes muss der Name aufgeführt werden. Falls Dauer und Verzögerung definiert werden, muss die Dauer zuerst angegeben werden.

Ankerpunkt von Text-Elementen

Achtung beim Animieren von Text: Inline-Elemente wie <p> erstrecken sich über die ganze Spalte. Auch bei Texten, die kürzer als die Spalte sind, ist der Ankerpunkt darum in der Spaltenmitte, nicht in der Mitte des Textes.

Wenn du die Eigenschaft display auf inline-block setzst, passt sich die Grösse des Elements an seinen Inhalt an.

Um zu sehen, wie gross ein Element ist, kann es helfen, einen border: solid 1px black; darum zu zeichnen oder den background: hotpink; zu färben.

.kurzer-text { display: inline-block; }

Videos

Links