U0305 Handlettering

Aufgabenstellung

Schreiben und zeichnen Sie auf einem Format Ihrer Wahl verschiedene, frei wählbare, Adjektive in handschriftlicher Typografie.

Handlettering bedeutet mehr als das „Zeichnen“ von Schrift denn das Konstruieren und Schönschreiben/ Kalligrafieren.

Achten Sie darauf Ihre Adjektive inhaltlich zu erfassen und deren Bedeutung zu visualisieren. Der Augenmerk liegt auf der gezeichneten, hand-geschriebenen Schrift! Schreibmaterialien und Farbigkeit sind frei wählbar. Probieren Sie verschiedene Werkzeuge aus.

Ergebnis

Nachdem ich die hohe Schrift entworfen habe, ist mir bei nochmaligem Überlegen aufgefallen, dass es Kategorien von Verben gibt, die sich besser oder schlechter handlettern lassen. So gibt es etwa Verben wie "groß" oder "hoch", die sich lediglich durch eine Transformation einer Schriftart darstellen lassen, und Verben wie "trocken", "feucht", "kalt" oder "warm", die Sachverhalte beschreiben, die man anfassen und fühlen kann. Letztere eignen sich besonders gut fürs Handlettering.

Hoch/condensed

Das ist natürlich ein sehr einfaches Konzept. In meinem allerersten Versuch musste ich erstmal die Proportionen ausarbeiten und habe gemerkt, dass die Punze des "h"s genau wie die anderen Buchstaben die Mittellänge ausfüllen sollte. In den Versuchen danach habe ich die Höhe bewusst übertrieben, um zu schauen, wie es wirkt und ob es eine Grenze gibt. Mein Fazit: Je höher die Schrift (bzw. in meinem Fall konkreter: die Mittellänge) gezogen wird, desto interessanter und ausgefallener wirkt sie, die Lesbarkeit bleibt in allen Fällen aber gleich.

Mit dem "condensed" Schriftzug wollte ich ein paar andere Buchstaben ausprobieren. Den Schriftzug habe ich gewählt, weil mich die hohe Font an eine ultra condensed Font erinnert.

Nach Bearbeitung frage ich mich, wie dieses Konzept in Druckbuchstaben aussieht.

Weitere Ideen

Für mich ist Typographie eine der aussagekräftigsten Gestaltungselemente. Alleine die Wahl der Font (und dazu zählen auch ausgefallene Elemente wie die folgende) kann ein sehr markantes Designelement und Alleinstellungsmerkmal sein.

Bei dieser Aufgabe musste ich sofort an diesen Talk über die zu der Zeit noch recht neuen variable fonts zurückdenken. Variable fonts können beliebig viele, kontinuierlich veränderbare Achsen definieren, mit denen sich wirklich interessante Effekte erzielen lassen. Hier habe ich ein Beispiel aus dem Talk (bei Minute 12:00), das ich einprägsam fand, nachgebaut (Link zur Font, Link zum Codebeispiel aus dem Talk):

Weight Inline Worm Skeleton Worm Terminal

wuchernd

wuchernd

Code

Hab vielleicht ein bisschen übertrieben ;) Ich nutze hier zwei übereinandergelagerte Fonts; Eine obere mit der etwas helleren Grastextur, die man auch mit den Slidern sich verändern sieht, und eine untere mit der inneren, etwas blasseren Grastextur als Akzent.

Für eine Erklärung der Struktur (insbesondere der Slider) siehe auch den Code von U0413.

<div style="display: flex; flex-direction: column">
  <label>
    <input type="range" id="slider-weight" min="0" max="1000" value="75" />
    Weight
  </label>
  <label>
    <input type="range" id="slider-inline" min="0" max="1000" value="675" />
    Inline
  </label>
  <label>
    <input type="range" id="slider-skeleton" min="0" max="1000" value="950" />
    Worm Skeleton
  </label>
  <label>
    <input type="range" id="slider-terminal" min="0" max="1000" value="875" />
    Worm Terminal
  </label>
</div>
<div style="
  font: 8em Decovar;
  color: transparent;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
">
  <div id="font-container-inner" style="
    position: absolute;
    background-image: url('../../../static/photos/grass-texture-inner.jpg');
    -webkit-background-clip: text;
    z-index: -1;
    opacity: .5;
    /* --- Das hier ist, damit man die untere Schrift nicht auswählen kann! --- */
    user-select: none;
    -webkit-user-select: none;
  ">wuchernd</div>
  <div id="font-container" style="
    position: absolute;
    background-image: url('../../../static/photos/grass-texture.jpg');
    -webkit-background-clip: text;
    text-shadow: hsla(108.5, 48.2%, 44.7%, .4) 0px 0px 8px;
    filter: brightness(125%);
  ">wuchernd</div>
</div>

<script>
const fontContainer = document.getElementById('font-container');
const fontContainerInner = document.getElementById('font-container-inner');

const sliderWeight = document.getElementById('slider-weight');
const sliderInline = document.getElementById('slider-inline');
const sliderSkeleton = document.getElementById('slider-skeleton');
const sliderTerminal = document.getElementById('slider-terminal');
sliderInline.addEventListener('input', changeVariable);
sliderWeight.addEventListener('input', changeVariable);
sliderSkeleton.addEventListener('input', changeVariable);
sliderTerminal.addEventListener('input', changeVariable);

changeVariable();

function changeVariable() {
  fontContainer.style.fontVariationSettings = `\
    'TRMA' 1000,
    'WMX2' ${sliderWeight.value}, 
    'BLDA' ${sliderInline.value},
    'SKLB' ${sliderSkeleton.value},
    'TRML' ${sliderTerminal.value}`;

  // Weil sich die obere Font mit dem Verändern von "Inline" etwas nach
  // unten verschiebt, muss die untere Font auch mitbewegt werden
  fontContainerInner.style.transform = `translateY(${sliderInline.value / 200}px)`;
  fontContainerInner.style.fontVariationSettings = `\
    'TRMA' 1000,
    'WMX2' ${sliderWeight.value}, 
    'SKLB' ${sliderSkeleton.value},
    'TRML' ${sliderTerminal.value}`;
}
</script>