U0302 Das Typografische Ornament

Aufgabenstellung

Erkunde die verschiedenen Schriftklassifikationen unter dem Gesichtspunkt ein typografisches Ornament zu erstellen.

Wählen Sie vier unterschiedliche Schriften aus. Aus diesen vier Schriften wählen Sie jeweils einen Buchstaben, der sich dazu eignet, wiederholend angeordnet, ein Ornament zu bilden. Nutzen Sie zur Umsetzung Processing. Erstellen Sie von einer Schrift mehrere Ornamentvarianten (mindestens 12), die sie in einer 4x3 Matrix auf einer Grundfläche der Größe 1920x1080px anordnen. Wählen Sie das beste Ornament pro Schrift aus und heben Sie es gegenüber den Varianten hervor.

Es entstehen vier Screens, die mit dem Namen der Schrift über- oder untertitelt sein müssen. Diese werden anschließend in der Gruppe besprochen und die Erkenntnisse geteilt. Erstellen Sie sich hierfür ein Memo, welches festhält: • Was ihnen aufgefallen ist? • Welche Schriften eignen sich, welche nicht? • Macht es einen Unterschied, ob ich Groß- oder Kleinbuchstaben verwende? • Neue Fragen, etc.

Lernziel: Schriftkunde, Abstraktionsvermögen. Schulung des grafischen Verständnisses z.B. für die Logoentwicklung.

Umsetzung

Beobachtungen:
Die H des Arial Bold zeichnet sich durch die klaren, gleich starken Striche und symmetrischen Proportionen aus. Schon geringe Rotationswinkel verändern das statische Raster in ein dynamisches, schräg gestelltes Geflecht. Durch die einfache, geometrische Form bleibt das Ornament insgesamt ruhig und minimalistisch.
Eignung:
Ich finde es eignet sich sehr gut für reduzierte, moderne Ornamente mit sachlicher Anmutung. Für verspielte oder detailreiche Muster fehlt der Schrift allerdings die Komplexität; sie wirkt sehr nüchtern.
Groß- vs. Kleinbuchstaben:
Das Groß-H erzeugt ein streng gleichmäßiges Muster. Ein Klein-„h“ mit seinem Bogen und variierenden Strichstärken würde dagegen ungleichmäßigere Zwischenräume schaffen und dem Ornament vermutlich mehr Lebendigkeit verleihen.
Bestes Ornament:
Am stärksten überzeugt die zweite Reihe, zweites Feld: Leichte Rotation und ausgewogene Abstände erzeugen eine gleichmäßig dichte, aber nicht überladene Fläche. Diese Variante sticht durch ihr harmonisches Gleichgewicht hervor.

Beobachtungen:
Jeder Buchstabe nimmt gleich viel Platz ein, und die kantigen Serifen erzeugen an den Ecken markante Betonungen. Bei geringen Rotationen wirkt das Raster noch streng orthogonal, die Serifen zeichnen feine, rechteckige „Zacken“ ins Muster. Mit zunehmender Drehung entstehen diagonale Rhythmen, in denen sich die Serifen wie kleine Pfeile aneinanderreihen.
Eignung:
Für mich wirkt es wie eine technische, fast maschinelle Ästhetik – meiner Meinung nach wie „Computerschrift“-Assoziationen. Für organisch-fließende Muster ist sie weniger geeignet, da die Serifen und der feste Zeichenabstand das Muster hart und kantig halten.
Groß- vs. Kleinbuchstaben:
Das Groß-„F“ erzeugt durch seine horizontalen Balken und den rechten Winkel eine sehr geometrische Form. Ein Klein-„f“ mit seinem Haken und dem feinen Auslauf würde mehr Dynamik ins Spiel bringen und Zwischenräume organischer erscheinen lassen.
Bestes Ornament:
Am stärksten überzeugt die zweite Reihe, drittes Feld: Hier sind die kantigen Serifen in einem klaren, rhythmischen Diagonalraster, ohne dass das Muster zu überladen wirkt.

Beobachtungen:
Die Schriftart gefällt mir sehr gut, aufgrund der feinen, eleganten Serifen. Schon kleine Rotationen lassen die Serifen zu feinen Zierlinien im Raster werden, die dem Ornament eine klassische, fast kalligrafische Anmutung verleihen. Bei stärkeren Drehwinkeln entsteht ein reizvolles Wechselspiel aus dicken und dünnen Linien, wodurch das Muster lebendig und reich strukturiert wirkt.
Eignung:
Georgia eignet sich meiner Meinung nach hervorragend für Ornamente mit traditionellem, dekorativem Charakter. Durch den Strichkontrast entstehen reizvolle Hell-Dunkel-Spiele. Allergings lassen die Serifen und Kontraste das Ornament schnell überladen wirken.
Groß- vs. Kleinbuchstaben:
Das kleine „a“ bietet mit seinem Oberlängen-Bogen und dem schmalen Anschlag ein besonders organisches Element, das in Serie gesetzt verspielte Zwischenräume schafft. Ein großes „A“ würde durch seine spitz zulaufenden Linien und die Querbalken ein strengeres, geometrischeres Muster ergeben.
Bestes Ornament:
Am stärksten überzeugt die dritte Reihe, zweites Feld: das feine Serifenwerk ist gleichmäßig verteilt und das Raster wirkt weder zu luftig noch zu eng. Dieses Feld unterstreicht den Strichkontrast optimal und bewahrt trotzdem Harmonie.

Beobachtungen:
Times New Roman ist eine Serifenschrift mit starkem Strichkontrast und feingliedrigen, geschwungenen Serifen. Bei geringen Rotationen entstehen weiche Diagonalen, in denen sich die Serifen fast wie feine Wellen aneinanderreihen. Mit stärkeren Drehwinkeln gewinnt das Muster an Dynamik: dicke und dünne Strichpartien wechseln sich ab und erzeugen eine lebendige Textur.
Eignung:
Times New Roman eignet sich meiner Meinung nach hervorragend für Ornamente mit klassischer, eleganter Ausstrahlung. Der deutliche Strichkontrast verleiht dem Muster Tiefe und plastische Wirkung. Allerdings lassen die feinen Serifen und der Kontrast das Muster schnell komplex wirken.
Groß- vs. Kleinbuchstaben:
Das große „T“ mit seinem breiten Balken liefert klare, stabile Rasterelemente. Ein kleines „t“ wäre filigraner und durch die obere Hakenform unregelmäßiger in den Zwischenräumen – dies könnte man nutzen um eine verspielte Note hinzuzufügen.
Bestes Ornament:
Am überzeugendsten ist die dritte Reihe, drittes Feld: Hier sind Rotation und Versatz so abgestimmt, dass das Spiel von dicken und dünnen Strichen gleichmäßig verteilt ist. Das resultierende Diagonalraster bringt den Strichkontrast optimal zur Geltung, ohne visuell zu überladen.

Kommentare

Neue Fragen:
Wie verändert sich die Wirkung, wenn man statt fester Abstände variable Abstände einsetzt?
Welche Effekte entstehen bei deutlich größeren Rotationswinkeln oder sogar Spiegelungen?
Wie verändert sich die Wirkung, wenn man den Kontrast durch Färbung einzelner Linien betont?
Wie verhält sich das Muster bei variierenden Schriftgrößen oder Schnitten (Regular vs. Bold)?

Code

PFont[] fonts = new PFont[4];
String[] fontNames = {
  "Arial-BoldMT",
  "Georgia",
  "CourierNewPSMT",
  "TimesNewRomanPSMT"
};
String[] displayNames = {
  "Arial Bold",
  "Georgia",
  "Courier New",
  "Times New Roman"
};
char[] letters = { 'H', 'a', 'F', 'T' };
int currentScreen = 0;
void settings() {
  size(1920, 1080);
}
void setup() {
  for (int i = 0; i < fonts.length; i++) {
    fonts[i] = createFont(fontNames[i], 200);
    if (fonts[i] == null) {
      println("Font '" + fontNames[i] + "' konnte nicht geladen werden!");
    }
  }
  textAlign(CENTER, CENTER);
  rectMode(CENTER);
  noLoop();
  redraw();
}
void draw() {
  background(255);
  drawScreen(currentScreen);

  saveFrame("screen-"+currentScreen+"-####.png");
}
void keyPressed() {
  if (key == ' ' || keyCode == RIGHT) {
    currentScreen = (currentScreen + 1) % fonts.length;
    redraw();
  } else if (keyCode == LEFT) {
    currentScreen = (currentScreen + fonts.length - 1) % fonts.length;
    redraw();
  }
}
void drawScreen(int idx) {
  fill(50);
  textFont(createFont("Arial-BoldMT", 36));
  text(displayNames[idx], width/2, 50);

  int cols = 4;
  int rows = 3;
  float marginX = 100;
  float marginY = 120;
  float cellW = (width - 2*marginX) / cols;
  float cellH = (height - 2*marginY) / rows;

  for (int i = 0; i < cols*rows; i++) {
    int col = i % cols;
    int row = i / cols;
    float cx = marginX + col*cellW + cellW/2;
    float cy = marginY + row*cellH + cellH/2 + 30;

    pushMatrix();
    translate(cx, cy);
      OrnParam p = makeParams(i);
      drawOrnament(fonts[idx], letters[idx], p, cellW * 0.8, cellH * 0.8);
    popMatrix();
  }
}
class OrnParam {
  int nx, ny;
  float angle, scale, offset;
}
OrnParam makeParams(int variant) {
  OrnParam p = new OrnParam();
  p.nx     = 3 + variant % 4;         
  p.ny     = 3 + (variant/4) % 3;     
  p.angle  = map(variant, 0, 11, -PI/8, PI/8);
  p.scale  = map(variant, 0, 11, 0.6, 1.2);
  p.offset = map(variant, 0, 11, 0, 20);
  return p;
}
void drawOrnament(PFont f, char c, OrnParam p, float w, float h) {
  textFont(f);
  pushMatrix();
  rotate(p.angle);
  scale(p.scale);

  float dx = w / p.nx;
  float dy = h / p.ny;
  for (int i = 0; i < p.nx; i++) {
    for (int j = 0; j < p.ny; j++) {
      float x = -w/2 + i*dx + dx/2 + sin((i+j)*0.5f)*p.offset;
      float y = -h/2 + j*dy + dy/2 + cos((i+j)*0.5f)*p.offset;

      pushMatrix();
      translate(x, y);
      rotate(sin((i+j)*0.3f) * 0.2f);
      textSize(min(dx, dy) * 0.8);
      noStroke();
      fill(30);
      text(c, 0, 0);
      popMatrix();
    }
  }

  popMatrix();
}