Playground

Dynamic Font Designer

Entdecke, wie Schrift, Grösse und Zeilenbreite den Rhythmus und die Wirkung eines Textes verändern. Gestalte Überschrift und Lauftext unabhängig voneinander und kopiere deine CSS-Einstellungen.

Font-family

font-family legt die Schrift und passende Fallback-Schriften fest. Webfonts müssen geladen werden, bevor sie verwendet werden können.

Mehr zu Fonts und Webfonts

Font-size

px definiert einen festen Wert, rem orientiert sich am Wurzelelement und clamp() verbindet Minimum, dynamischen Wert und Maximum.

Mehr zu Schriftgrössen

Font–weight

font-weight bestimmt, wie fein oder kräftig eine Schrift dargestellt wird. Welche Werte sichtbar sind, hängt von der gewählten Schrift ab.

Mehr zum Styling von Text

Line-height

line-height bestimmt den Abstand zwischen den Textzeilen. Ein einheitenloser Wert passt sich automatisch an die jeweilige Schriftgrösse an.

Mehr zu Line-height

Letter-spacing

letter-spacing verändert den Abstand zwischen den Zeichen. Die Einheit em orientiert sich dabei an der aktuellen Schriftgrösse.

Mehr zum Styling von Text

Text-wrap

text-wrap steuert den Zeilenumbruch. balance eignet sich besonders für kurze Überschriften, pretty für längere Texte.

Mehr zu Textumbruch

Hyphens

hyphens: auto erlaubt dem Browser, Wörter passend zur angegebenen Sprache zu trennen. Dafür muss das lang-Attribut im HTML gesetzt sein.

Mehr zu Worttrennung

Text-transform

text-transform verändert die sichtbare Gross- und Kleinschreibung, ohne den eigentlichen Textinhalt zu ändern.

Mehr zum Styling von Text

Zeilenbreite in ch

ch orientiert sich an der Breite der Ziffer 0 in der gewählten Schrift. Der Wert entspricht deshalb ungefähr, aber nicht exakt, der Anzahl Zeichen pro Zeile.

Mehr zu Zeilenbreite und Textumbruch

Text-align

text-align steuert die horizontale Ausrichtung des Textes. Die logischen Werte start und end orientieren sich zusätzlich an der Schreibrichtung.

Mehr zur Textausrichtung

Kaffee im Blick.

Die erste Webcam der Welt entstand 1991 im Computer Laboratory der Universität Cambridge. Im sogenannten Trojan Room stand eine Kaffeemaschine, deren Füllstand für die Mitarbeitenden überraschend wichtig war.

Das Problem war simpel: Die Forschenden waren über mehrere Stockwerke verteilt und liefen immer wieder zur Kaffeemaschine, nur um eine leere Kanne vorzufinden. Eine Kamera lieferte deshalb regelmässig ein Bild der Maschine ins lokale Netzwerk.

1993 wurde das Bild auch über das World Wide Web zugänglich. Die schwarz-weisse Aufnahme hatte eine Auflösung von 128 × 128 Pixeln und wurde etwa dreimal pro Minute aktualisiert. Menschen aus aller Welt konnten nun nachsehen, ob in Cambridge noch Kaffee vorhanden war.

Im August 2001 wurde die Kaffeemaschine für 3'350 Pfund an SPIEGEL ONLINE versteigert. Am 22. August wurde die Kamera abgeschaltet. Seit 2016 befindet sich die Maschine als Dauerleihgabe im Heinz Nixdorf MuseumsForum in Paderborn.

Heute verbinden wir Webcams mit Social Media, Streaming und Videokonferenzen. Die erste Webcam löste dagegen ein kleines Alltagsproblem. Gute Software beginnt oft nicht mit einer grossen Vision, sondern mit einem konkreten Bedürfnis.

Die Vorschau kann in der Breite verändert und direkt bearbeitet werden.

Copy CSS