Vor ein paar Tagen habe ich meine Tags hier anders gestaltet. Vorher waren sie – wie auf Twitter oder Instagram – im Stil von Hashtags gehalten, per CSS kleingeschrieben und eine Raute vor dem Tag, ohne Leerzeichen. Aber das passte mir irgendwie nicht. Es sieht auf Instagram, in Beiträgen oder so vielleicht ganz gut aus, aber so wie ich es hier darstellen möchte, nein, eher nicht. Zudem ist die Kleinschreibung ein Accessibility-Problem: #themandalorian lässt sich deutlich schlechter lesen als #TheMandalorian. Und am besten ist eben einfach The Mandalorian.

Damit es ein bisschen einheitlicher aussieht, habe ich den neuen Tags auch ein Icon verpasst – und kurzerhand eins aus dem kostenfreien Set Hero Icons genommen (übrigens sehr schöne Icons). So weit, so gut. Aber jedes Mal fiel mir der Unterschied in der Strichstärke des Icons ins Auge. Er war nur minimal, vielleicht 0,2 Pixel. Aber das genügte: Das Icon war zu dünn.

Also habe ich mir das Icon selber in Affinity Designer gebaut, mit Rechtecken und Rauten ein Lesezeichen zusammen gesetzt, es mit den Geometrie-Werkzeugen zugeschnitten und dabei auch gleich das Ecken-Werkzeug kennen gelernt, denn es sollte natürlich genauso abgerundet sein wie die anderen Icons. Die Strichstärke habe ich dabei angeglichen an die anderen Icons und es schließlich durch SVGO gejagt, um die Dateigröße möglichst gering zu halten. Hier sieht man das Ganze auf 400% vergrößert:

Das sieht besser aus, finde ich. Es sind einfach die kleinen Dinge, und manchmal muss man eben selbst Hand anlegen.

Mit clip-path kann man App-Icons auch einen Squircle-Radius verpassen:

<img src="https://kegelclub-tüddern.de/assets/app/icons/icon-384.png" width="200" height="200" alt="Kegelclub">

img {
  border-radius: 22%;
}

@supports (clip-path: path("")) {
  img {
    border-radius: unset;
    clip-path: path("M100,200c43.8,0,68.2,0,84.1-15.9C200,168.2,200,143.8,200,100s0-68.2-15.9-84.1C168.2,0,143.8,0,100,0S31.8,0,15.9,15.9C0,31.8,0,56.2,0,100s0,68.2,15.9,84.1C31.8,200,56.2,200,100,200z");
  }
}

Demo auf CodePen

Adobes John Nack hat gestern die Icons für Adobes neue Creative Suite 3 vorgestellt. Und was ich da sehe, macht mich nicht sehr glücklich in meiner Hose:

Und mit meiner Meinung stehe ich nicht alleine da. Dave Shea hat auch schon seinen Unmut kundgetan, und zahlreiche Kommentatoren bei John auch. Mal abgesehen davon, dass sich die Icons nicht an die gängigen Guidelines von Microsoft oder Apple halten (was sie aber auch nicht zwingend müssten), sind sie vor allem nicht sonderlich intuitiv. „PS“ ist ja noch klar, aber was ist z.B. mit „RH“ oder „SB“? Hilfe …