35 Zeichen · kostenlos kopierbar

Geometrische Formen als Zeichen

Der Block Geometrische Formen bei U+25A0 bis U+25FF ist das Arbeitstier textbasierter Oberflächen: Kreise, Quadrate, Dreiecke und Rauten, fast alle als gefüllt-umrissenes Paar in zwei oder drei Größen. Diese Paarung erlaubt es, zwei Zustände, zwei Spieler oder zwei Prioritäten darzustellen, ohne auf Farbe angewiesen zu sein. Kopiere unten ein beliebiges Zeichen; jedes ist mit seinem Unicode-Namen und Codepunkt aufgeführt.

Kreise

Gefüllt, hohl und die Teilfüllungen für Bewertungen, Phasen und Umschaltzustände.

Quadrate

Drei Größen in gefüllt und hohl. Das kleine Paar gibt bessere Aufzählungszeichen ab als ein einfacher Punkt.

Dreiecke

Alle vier Richtungen in zwei Größen. Das große gefüllte Set dient zugleich als Mediensteuerung.

Rauten und Losungen

Rauten lesen sich als „besonders“, ohne aufdringlich zu sein — die übliche Wahl für einen dekorativen Trenner.

Klicke auf ein Zeichen, um es zu kopieren. Es wird nichts heruntergeladen — das sind Textzeichen, keine Bilder.

Unicode-Blöcke

  • U+25A0–U+25FF Geometrische Formen
  • U+2756 Dingbats

So verwendest du Geometrische Formen

01

Gefüllt mit hohl paaren, um Zustand zu zeigen

Fast jede Form hier kommt als gefüllt-umrissenes Paar. ● gegen ○ für An und Aus, oder Erledigt und Ausstehend, zu verwenden, vermittelt den Unterschied durch Form — das übersteht Graustufendruck und Farbenblindheit auf eine Weise, die Rot-gegen-Grün nicht schafft.

02

Die kleinen Varianten als Aufzählungszeichen nutzen

Das kleine Quadrat ▪ und der weiße Punkt ◦ wirken neben Fließtext besser als ein ■ in voller Größe. Verschachtelte Listen lesen sich gut als • dann ◦ dann ▪.

03

Die Teilkreise für Fortschritt nutzen

○ ◔ ◐ ◕ ● liefert fünf saubere Fortschrittsstufen in je einem Zeichen — eine kompakte Fortschrittsanzeige für eine Tabellenzelle oder eine Logzeile.

04

Per CSS einfärben

Sie sind Text, `color` gilt also direkt. Eine Reihe ● in fünf verschiedenen Farben braucht keine Bilder und kein SVG und bleibt bei jedem Zoom scharf.

Über Geometrische Formen

Der Block Geometrische Formen ist der still nützlichste Bereich in Unicode. Seine Grundidee ist das Paar: Für fast jede Form gibt es eine gefüllte und eine umrissene Version, oft in zwei oder drei Größen. Diese Redundanz wirkt verschwenderisch, bis du zwei Zustände in einem monochromen Kontext zeigen musst — einem Terminal, einem Ausdruck, einer reinen Text-E-Mail — und feststellst, dass Formkontrast dort noch funktioniert, wo Farbkontrast versagt.

Diese Eigenschaft ist der Grund, warum diese Zeichen im Interface-Design überall auftauchen. Die gefüllten und hohlen Kreise sind Radiobuttons und Karussell-Punkte. Die Dreiecke sind Ausklapp-Pfeile und Mediensteuerungen. Die kleinen Quadrate sind Aufzählungszeichen. Weil es Text ist, übernimmt jedes von ihnen die umgebende Schriftgröße und -farbe, ein daraus gebautes Icon-Set braucht also kein Sprite-Sheet, keine Iconfont und kein SVG — und es lädt nie verspätet oder gar nicht.

Die Teilfüllungs-Kreise bei U+25D0 bis U+25D3 und die Viertelfüllungs-Varianten in ihrer Nähe sind ein kleines Stück Design-Vokabular, das die meisten Leute nie entdecken. Eine Folge von leer bis voll gibt dir eine Fortschritts- oder Bewertungsanzeige, die genau eine Zeichenzelle belegt, weshalb sie in CLI-Dashboards und Statustabellen auftaucht, wo horizontaler Platz knapp ist.

Diese Seite stützt sich stark auf den Block. Vier gewinnt und Reversi nutzen ● und ○ für die beiden Spieler; Simon nutzt die großen Dreiecke für seine vier Felder; Lights Out und Memory nutzen Quadrate und Rauten. Farbe wird per CSS als Verstärkung darübergelegt, aber die Formen tragen die Bedeutung von sich aus — genau das macht die Bretter für einen farbenblinden Spieler lesbar.

Spiele, die mit diesen Zeichen gezeichnet sind

Jedes Spielbrett auf dieser Seite besteht aus Unicode statt aus Sprites. Diese hier verwenden die Zeichen oben.

Häufig gestellte Fragen

Was ist der Unterschied zwischen ● und ○?

Sie sind die gefüllte und die hohle Version desselben Kreises. Unicode nennt sie „black circle“ und „white circle“, aber diese Namen beschreiben die Füllung, nicht die Farbe — beide sind Text, du kannst also jeden in jeder beliebigen Farbe darstellen. Sie zu paaren zeigt zwei Zustände, völlig unabhängig von Farbe.

Welche Formsymbole eignen sich gut als Aufzählungszeichen?

Der Aufzählungspunkt • (U+2022) ist der Standard, mit dem weißen Punkt ◦ und dem kleinen Quadrat ▪ für verschachtelte Ebenen. ■ und ● in voller Größe sind neben Fließtext meist zu schwer. Eine übliche Verschachtelung ist • dann ◦ dann ▪.

Kann ich geometrische Formen statt Icons verwenden?

Für einfache Anzeigen ja, mit echten Vorteilen: kein Sprite-Sheet, keine Iconfont, keine zusätzliche Anfrage, und sie übernehmen automatisch Textfarbe und -größe, sodass sie nie verspätet laden oder falsch ausgerichtet sind. Dreiecke funktionieren als Ausklapp-Pfeile und Play-Buttons, Kreise als Radiozustände und Statuspunkte.

Warum wirken manche Formen in derselben Schriftart größer als andere?

Unicode kodiert mehrere Größen explizit — klein, mittel und regulär —, und Schriftarten zeichnen denselben Codepunkt zudem in unterschiedlichen optischen Stärken. Wirkt eine Formreihe ungleichmäßig, mischst du wahrscheinlich Größenvarianten wie ▪ U+25AA mit ■ U+25A0. Bleib innerhalb einer Reihe bei einer Größenklasse.

Funktionieren diese Formen als Emoji?

Ein paar haben Emoji-Darstellungen und können auf manchen Plattformen vorgefärbt ankommen. Hänge den Text-Variationsselektor U+FE0E an, um die monochrome Textglyphe zu erzwingen, damit sie deine CSS-Farbe annimmt. Der größte Teil des Blocks ist reiner Text und braucht diese Behandlung nicht.

Support the arcade

Gefallen dir die Spiele?

UnicodeGames ist kostenlos, zeigt keine Werbung und wird das auch nie tun. Wenn es deine Kaffeepause aufgehellt hat, kannst du dich revanchieren.

Spendier mir einen Kaffee

One-off · No account needed · Handled by Buy Me a Coffee