PAGE online

temper: Website Builder mit stylischen Fonts

Interaktionsdesigner Jonas Pelzer entwickelt seinen kleinen, feinen Website Builder stetig weiter und integrierte zuletzt den Retro-Font Neue Television von nice to type. Wir sprachen mit ihm und zeigen die Schrift in Aktion.

Retro-Font Neue Television: Schriftbeispiel unserer Autorin Lena. Zu lesen: Geist-Emoji »Moin Welt, my name is Lena.« Oliven-Emoji »I like nice to type's Neue Television.« Brezel-Emoji »Saw it in use on a« Als Jonas Pelzer 2018 sein text-only Portfolio mit großer Typo und subtilen Text-Animationen online stellte, traf das einen Nerv. Einige Leute baten ihn um Erlaubnis, seine Homepage als Grundlage für ihre eigene verwenden zu dürfen – andere kopierten ungefragt seinen Quelltext. Als Reaktion darauf entwickelte Pelzer den Website Builder temper und stellte ihn zur kostenlosen Verfügung ins Web.

Das Tool überzeugt tatsächlich durch seine begrenzten Möglichkeiten: text-only, dafür aber mit den spannendsten Schriften. So stehen in temper nicht nur eine Auswahl an Google- und Systemschriften bereit, sondern auch Jonas Pelzers eigenen Kreationen Scope und Fictional sowie eine Reihe besonderer und aktueller Schriften der Foundry nice to type. Da wären zum Beispiel die Massimo Grafia oder die Krasz von Andreas Uebele und Gabriel Richter.

Neue Television in temper und Aktion

Zuletzt kam die Neue Television hinzu. Den vorgänger Television (siehe Video, oder als besser ausgerichtete Variante), eine geometrische, serifenlose Schrift aus horizontalen Linien, entwarf Klaus Richter in den 1970er Jahren. Die Linien erinnern ein wenig an Elektronikbauteile, wie Widerstände oder Dioden.

Sein Sohn Gabriel Richter überführte die Television 2022 in eine variable Schrift und erweiterte sie auf 174 statische Stile. Über ihre Ursprünge und das Making-Of berichteten wir in PAGE 02.23 und zeigten online die Neue Television in Aktion.

Kürzlich entdeckten wir sie dann bei Manuel T. Kreuzer, der sie auf dem Programm-Poster der »rejected« für die Typographische Gesellschaft München e.V. und für das 23. Landshuter Kurzfilmfestival ganz unterschiedlich nutzt und mit ihren Eigenheiten spielt. Wir finden die Schrift sensationell und die Plakate absolut gelungen, aber der Umgang mit ihr ist sicher nicht ganz einfach.

»Ja, das stimmt. Vor allem, wenn man dann die verschiedenen Schnitte übereinander legt. Bei so vielen Schnitten ist es eine Herausforderung, aber es macht Spaß. Da bräuchte es den variablen Font eigentlich gar nicht«, scherzt Manuel Kreuzer.

Retro-Font Neue Television: Plakat für lakff.de, auf dem die Schrift mehrfach übereinander gelegt ist. Retro-Font Neue Television: Plakat für typographische mit dem Font im Hintergrund

»Reduktion macht den Charme aus«

Porträtbild von Jonas Pelzer
Foto: Timo Zier

Mit Jonas Pelzer sprachen wir über seinen Website Builder temper, probierten diesen mit der Neuen Television selbst aus und schauten uns verschiedene Beispielseiten an. Spoiler: eine schicke Homepage ohne <img> ist definitiv möglich.

Was temper jetzt macht, macht es gut.

Website Builder temper von Jonas Pelzer
Die Settings sind übersichtlich: Hintergrund- und Vordergrundfarben, Schriftart, schnitt und -größe. Über die drei Buttons unten rechts lassen sich Verlinkungen und Paragraphen hinzufügen beziehungsweise entfernen. Quelle: Screenshot 27.Feb.2023

Womit hast du temper gebaut und wie lange hast du gebraucht?

Das ist ein Konstrukt aus Javascript und PHP. Die erste Version ging vor dreieinhalb Jahren online und ist innerhalb weniger Wochen entstanden; immer wenn im Freelancer-Alltag zwischendurch kurz Zeit war. Seitdem entwickle ich das Tool konstant weiter – viele Ideen zur Weiterentwicklung verwerfe ich aber schnell wieder, weil sie das Tool zu komplex machen würden, und ich glaube, gerade die Reduktion der Funktionalität macht den Charme aus.

Website von Jack Walsh mit viel Text, keinen Bildern und verschiedenen Verlinkungen
Réduction en perfection: Jack Walsh hat das Web verstanden. Worte sind wichtiger als Bilder und am wichtigsten sind Links. Seine Homepage besteht aus zwei Verweisen zum Portfolio und einem zur Kontaktaufnahme. Quelle: Screenshot 27.02.2023

Gibt es einen gestalterischen oder philosophischen Grund für text-only?

Ausgangslage war meine eigene Website, die nur aus Text und Links besteht, und damit nach wie vor all meine Anforderungen an mein Portfolio erfüllt. Ich möchte temper jedenfalls bewusst möglichst reduziert halten: Sobald der Funktionsumfang größer wird, etwa durch Bilder oder Unterseiten, geht es in dieselbe Richtung wie andere Website Builder, und das machen andere Leute, beziehungsweise andere Firmen mit größeren Teams, besser, als ich es könnte. Was temper jetzt macht, macht es gut.

Website von Petra Matić in der Schrift »Playfair«
Petra Matić hat sich für die Playfair und das vielleicht schönste Ampersand in der Sammlung entschieden. Quelle: Screenshot 27.02.2023

Für welche Websites eignet sich temper besonders?

Es eignet sich vor allem für Web-Visitenkarten. Oft liegen die Inhalte, die man präsentieren möchte, schon irgendwo anders – Social Media, Portfolio-Plattformen, Online-Magazine – und alles, was benötigt wird, ist ein zentraler Ort, um die Inhalte zu verlinken. Es kommt auch für Übergangsseiten zum Einsatz und wird für Event-Ankündigungen oder Landing Pages verwendet. Auch einige Designbüros nutzen es für ihren Online-Auftritt.

Website von Büro Königswasser in der Schrift Space Mono
Das Büro Koenigswasser aus Trier entwarf mit temper und der Space Mono einen marken, etwas längeren Webauftritt. Wir haben uns erlaubt, an passender Stelle zu  kürzen. Quelle: Screenshot 27.02.2023

Sind die Schriften von nice to type frei verwendbar?

Die Schriften sind im Kontext von temper komplett frei verwendbar. Gabriel von nice to type verwendet temper für seine Website selbst und hatte mir vor einiger Zeit diese Kollaboration vorgeschlagen.

Website von Gabriel Richter in der Schrift Takeoff
Press Start: Die reduzierte Webvisitenkarte von Gabriel Richter spricht für sich – in Takeoff und Schwarz-Weiß. Quelle: Screenshot 27.02.2023

Welche Features sind aktuell geplant?

Mir gefällt die Idee, eine hosted version anzubieten – also den Download-Schritt zu überspringen, und die generierte Website auf einen Klick zu veröffentlichen. Allerdings würde das vermutlich die Einführung von User Accounts voraussetzen, damit die Ergebnisse auch editiert werden können, und das würde den ganzen Prozess wieder aufladen und temper ein Stück seiner Einfachheit kosten. Aktuell ist ja das Schöne, dass man sofort mit dem Einfügen der Inhalte loslegen kann, ohne Registrierung oder so. Ich suche noch nach einem Weg, die gleiche Einfachheit auch in Kombination mit einer hosted version zu erreichen.

Website von Kolja Vennewald mit Schrift und Emojis
Über 3600 Emojis bietet der Unicode Standard seit 2021, Tendenz steigend. Wer braucht bei so viel Auswahl noch Bilder? Die Homepage von Kolja Vennewald sicher nicht 🐾 Quelle: Screenshot 27.02.2023

Was kostet die Premium-Version ohne temper-Hinweis?

Die Version ohne Hinweis kostet einmalig 29 US-Dollar. Die Version mit Hinweis ist und bleibt komplett kostenlos. Ich denke, das ist ein fairer Deal.

Vielen Dank!

Kommunikations- und Interaktionsdesigner Jonas Pelzer lebt und arbeitet in Berlin. Neben seiner freiberuflichen Arbeit entwickelt er eigene Projekte wie die Webdesign-Galerie collected oder gestaltet Schriften, die er in seiner Foundry Jonas Type veröffentlicht. Er hat Kommunikationsdesign in Düsseldorf und Interface Design in Potsdam studiert.

PDF-Download: PAGE 02.2023

Storytelling für nachhaltiges Design ++ Designhochschulen im Wandel ++ Green Web: Konzepte und Tipps ++ Boomende Kreativszene aus Afrika ++ Umweltfreundliche Printproduktion ++ ENGLISH SPECIAL Yuri Suzuki ++ Circular Experience Design ++ Revival als Variable Font: Neue Television

9,90 €
AGB

Produkt: Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Best Practices für Web und Mobile. Coding-Tipps für CSS3. Tools, Bibliotheken und Generatoren fürs Prototyping & Wireframing

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren