Skip to content

U0301 Geometrien von Schriftschnitten

Aufgabenstellung

Schreibe einen Processing Sketch, der für jeglichen Schriftschnitt, k-Linie, h-Linie, x-Linie, Grundlinie und p-Linie anzeigt.

Lernziel: Aneignung typografischer Geometrien verschiedener Schriftschnitte.

Ergebnis

Code

PFont f;
String[] fontList;
int baseLine = 100;

void setup() {
    size(1024, 768);

    // Create the font
    fontList = PFont.list();
    printArray(fontList);
    f = createFont(fontList[(int) random(0, fontList.length)], 84);
    textFont(f);
    print(textDescent());
}

void draw() {
    background(102);
    textAlign(LEFT);

    drawType(50);
}

void drawType(float x) {

    stroke(100,10,10);
    // Fake x-Linie
    line(0, baseLine - textAscent() + textDescent(), width, baseLine - textAscent() + textDescent());

    stroke(0);
    // h-Linie
    line(0, baseLine - textAscent(), width, baseLine - textAscent());
    // Grundlinie
    line(0, baseLine, width, baseLine);
    // p-Linie
    line(0, baseLine + textDescent(), width, baseLine + textDescent());

    fill(204);
    text("Gestaltung ist wichtig", x, baseLine);

    fill(55);
    rect(0, 2 * baseLine - textAscent(), width,  textAscent() + textDescent());
    fill(0);
    text("Gestaltung ist wichtig", x, 2 * baseLine); 
}

Vergleich verschiedener Schriftschnitte

Schriftschnitt mit p-, Grund- und h-Linie Schriftschnitt mit p-, Grund- und h-Linie Schriftschnitt mit p-, Grund- und h-Linie Schriftschnitt mit p-, Grund- und h-Linie

Erkentnis

Die Funktion textAscent() in Processing scheint nicht die Überlängen mit einzuschliessen, sondern nur Mittel- und Oberlänge also die Distanz von Grundlinie zur h-Linie.

Die Funktion textDescent() in Processing gibt die Unterlänge einer Schrift in px zurück.

Der Processing Sketch sollte den verwendeten Schriftschnitt mit anzeigen, da sonst im Nachhinein die Schriftart schwer wieder zu erkennen ist und man auch so die Gelegenheit nutzen kann um Schriftarten kennen zu lernen.

x-Linie und k-Linie konnten nicht generiert werden.

Experiment Fake X-Linie

In Einzelfällen kann die x-Linie "emuliert" werden in dem man die mit textDescent() ermittelte Unterlänge von der Distanz zur h-Linie subtrhiert. Das Resultat für verschiedene Schriftarten ist folgend zu sehen. Der "fit" dieser Methode wurde in exakt, grob und sehr ungenau sortiert.

Exakt

Schriftschnitt Fake x-Linie Schriftschnitt Fake x-Linie Schriftschnitt Fake x-Linie

Grob passend

Schriftschnitt Fake x-Linie Schriftschnitt Fake x-Linie Schriftschnitt Fake x-Linie

Sehr ungenau

Schriftschnitt Fake x-Linie

Aus 10 Random Samples

Aus 10 Samples randomisiert ausgewählter Schriftschnitte passte diese Fake x-Linie 7x exakt, 2x grob passend und 1x sehr ungenau.

Weiterhin unklar

... wie man eine k-Linie zumindest approximieren könnte.

Neue Fragen

Wie sieht es mit weiteren Geometrien z.B. den Mittelpunkten von Buchstaben, Wörtern, Sätzen und Paragraphen aus? In Hinsicht auf Positionierung für eigenen Gestaltungen könnte diese wichtig werden.