U0303 Headlineschrift oder Fliesstextschrift

Aufgabenstellung:

Schreibe ein Processing Sketch, der einen Text in Lesegröße und einen Text in Schaugröße mit einer zufällig ausgewählten Schriftart, zeigt. Der Name der Schrift soll in Konsultationsgröße unten rechts angezeigt werden. Führe den Sketch mehrfach aus und entscheide jeweils, ob es sich bei der zufällig gewählten Schrift um eine Headlineschrift oder Fließtextschrift handelt.

Mein Ergebnis:

Ergebnis 1Ergebnis 2Ergebnis 3Ergebnis 4

---

Reflexion

Bei dieser Aufgabe ging es weniger ums Coding – das war eigentlich ziemlich straightforward – sondern vielmehr um die Einschätzung, welche Schriftart sich besser für Headlines oder Fließtext eignet. Der Sketch selbst zeigt jeweils einen Text in Lesegröße und einen in Schaugröße, zusammen mit dem Namen der zufällig ausgewählten Schrift in kleiner Schrift unten rechts.

Spannend wurde es erst dann bei die zufällgien Schriften, als ich versucht habe die zu „kategorisieren“. Ich wollte es bei manchen nicht ganz alleine entscheiden und hab deshalb meine Auswahl mit meinem Ehepartner diskutiert. In den meisten Fällen waren wir uns einig – aber bei Ergebnis 4 kam es zum kleinen Streitpunkt. Ich war überzeugt, dass die Schrift nur als Headlineschrift funktioniert, aber mein Partner meinte, sie eigne sich definitiv für beides. Und je länger wir drüber gesprochen haben, desto klarer wurde: Es kommt stark auf den Kontext an.

Ein interessantes Ergebnis unserer Diskussion war die Beobachtung, dass Fließtextschriften oft auch für Headlines funktionieren – umgekehrt aber eher selten. Vielleicht liegt’s daran, dass Fließtextschriften neutraler und zurückhaltender gestaltet sind und dadurch flexibler einsetzbar wirken.

Auch wenn die Aufgabe auf den ersten Blick simpel wirkte, war sie ein gutes Beispiel dafür, wie subjektiv Typografie sein kann – und wie stark persönliche Wahrnehmung und Anwendungskontext eine Rolle spielen.

Code

int rows = 4;
int cols = 4;

float cellPadding = 20;
float squareSpacing = 10;

void setup() {
size(700, 700);
rectMode(CENTER);
noLoop();
}

void draw() {
background(200);
drawMatrixWithTriangles();
}

void drawMatrixWithTriangles() {
float cellWidth = (width - (cols + 1) * cellPadding) / cols;
float cellHeight = (height - (rows + 1) * cellPadding) / rows;
float squareSize = min(cellWidth, cellHeight) - squareSpacing;

for (int row = 0; row < rows; row++) {
    for (int col = 0; col < cols; col++) {
    float cellX = cellPadding + col * (cellWidth + cellPadding);
    float cellY = cellPadding + row * (cellHeight + cellPadding);

    float centerX = cellX + cellWidth / 2;
    float centerY = cellY + cellHeight / 2;

    // cell formatting
    fill(255);
    stroke(50);
    rect(centerX, centerY, squareSize, squareSize);

    // triangles
    for (int i = 0; i < 3; i++) {
        float size = random(10, squareSize / 2);
        float offsetX = random(-squareSize / 2 + size / 2, squareSize / 2 - size / 2);
        float offsetY = random(-squareSize / 2 + size / 2, squareSize / 2 - size / 2);
        float triX = centerX + offsetX;
        float triY = centerY + offsetY;

        fill(0);  // black
        noStroke();

        // Draw an equilateral triangle centered at (triX, triY)
        pushMatrix();
        translate(triX, triY);
        rotate(random(TWO_PI));  // random rotation for variety

        float h = size * sqrt(3) / 2; // height of equilateral triangle

        beginShape();
        vertex(-size / 2, h / 3);
        vertex(size / 2, h / 3);
        vertex(0, -2 * h / 3);
        endShape(CLOSE);

        popMatrix();
    }
    }
}
}

void keyPressed() {
if (key == 's') {
    saveFrame("######.png");
}
// re-randomize
if (key == 'r') {
    redraw();
}
}