Farbige typografische Experimente

In letzter Zeit gab es einige interessante, grenzüberschreitende typografische Experimente. Ich habe versucht, einen Witz zu finden wie „etwas ist in den Unterlängen“ (somethings in the descenders), aber ich kann einfach nichts finden, das für sich allein bestehen kann, ohne leicht konterbar zu sein.

Codrin Pavel hat eine faszinierende mehrfarbige Schriftart namens CSSans erstellt, die von seiner Schwester Izabela Andronache entworfen wurde!

Output of using CSSans Pro, geographic shapes in multiple colors combined to make letterforms.

Es ist keine „Schriftart“ (font), denn eine Schriftart ist eine Datei, wie „lato.woff2“ oder so. Dies ist eine CSS-Datei, und man schreibt darin so:

<div class="cssans cssans--center">
    <div class="cssans__accessible">Cool News</div>

    <div class="cssans__word">
        <b class="cssans:C"></b>
        <b class="cssans:o"></b>
        <b class="cssans:o"></b>
        <b class="cssans:l"></b>
    </div>

    <div class="cssans__word">
        <b class="cssans:N"></b>
        <b class="cssans:e"></b>
        <b class="cssans:w"></b>
        <b class="cssans:s"></b>
    </div>
</div>

Beachten Sie das spezielle <div> oben mit dem vollständigen Wort darin, während die leeren <b>-Elemente die eigentliche Zeichnung der Glyphen durchführen. Ich würde es nicht als vollständig zugänglich bezeichnen, da ein Teil der Zugänglichkeit Dinge wie die Seitensuche mit Hervorhebung und wählbarer Text sind, argumentiere ich. Aber dies ist offensichtlich ein künstlerisches Experiment, und Ihre Implementierung könnte in unzähligen Varianten erfolgen. Ich würde gerne einen Versuch sehen, transparentes SVG <text> darüber zu legen, das die gleiche Größe hat, damit der Text auswählbar *ist*.

Es sieht so aus, als wäre die Landingpage in CodePen Projects erstellt worden!

Diese Technik und ihre Beziehung zur Zugänglichkeit sind ziemlich interessant und tatsächlich relevanter, als man vielleicht denkt. Tatsächlich scheint Facebook eine ähnliche Span-Technik zur Bekämpfung von Ad-Blocking zu verwenden.

Harbor Type hat kürzlich Rocher Color herausgebracht, eine kostenlose Farbschriftart. Ja, *Farbschriftart*. Das ist ein Ding. Und Rocher Color ist tatsächlich eine Farbschriftart und eine variable Schriftart.

Die Unterstützung erscheint mir ziemlich gut, aber es ist kompliziert, weil es eine Menge verschiedener Arten gibt, alle mit unterschiedlicher Unterstützung in verschiedenen Browsern.

Die andere Geschichte ist, dass sie, nun ja, *ziemlich riesig* sind, was die Größe angeht. Die woff2-Datei ist hier wahrscheinlich am relevantesten, da sie ohnehin eine so moderne Funktion ist. Der Download von der Website (RocherColorGX.woff2) liegt bei 178 KB. Wahrscheinlich nichts, was man einfach für eine einzelne Überschrift auf eine Seite werfen würde, wenn man bedenkt, dass es bei Schriften nicht nur um das Gewicht geht – man kämpft auch immer mit der FOUT/FOIT-Schlacht.

Ich denke, um die Verwendung einer kräftigen Farbschriftart wie dieser zu rechtfertigen, würde man…

Sie ziemlich häufig auf der ganzen Seite für dynamische Überschriften verwenden
Die Farben anpassen, um sie perfekt für Sie zu machen (im Voraus)
Die schicken variablen Schriftartfunktionen wie die Schrägstrich- und Schattenanpassungen nutzen (on the fly)

Wenn Sie sich nicht dabei sehen, diese Dinge zu tun, sind Sie wahrscheinlich besser dran, <svg> mit diesen Formen, die alle zu Pfaden erweitert wurden, zu verwenden. Sie könnten diese Schriftart immer noch verwenden, um das SVG zu erstellen, vorausgesetzt, Ihr Design-Tool unterstützt diese Art von Schriftart. Sie erhalten keinen Textumbruch oder so etwas, aber die Dateigröße und die Ladegeschwindigkeit werden viel schneller sein. Oder Sie könnten sogar ein Grafikformat wie PNG/WebP verwenden, und daran ist keine schreckliche Schande, wenn Sie immer noch ein semantisches Element für die Überschrift verwenden (natürlich visuell versteckt). Sie erhalten keine Seitensuchhervorhebung oder Auswählbarkeit, aber es könnte ein akzeptabler Kompromiss für eine einmalige Sache sein.

Kenneth Ormandy hat weitere interessante typografische Experimente in CSS zusammengestellt. In seinem Beitrag erwähnt er Diana Smiths Pure CSS Font, die sich aus leeren Elementen und allerlei schicken CSS-Tricks zusammensetzt, um die Formen zu zeichnen.

Der Sinn dieses Projekts liegt genau im Header

Für privaten, SEO-versteckten, CAPTCHA-freundlichen, nicht auswählbaren Text. Plagiate und Spambots abschrecken!

Auch für assistierende Technologien versteckt, also seien Sie vorsichtig, aber für mich scheint dieses Projekt eher das Erkunden von Möglichkeiten zu sein. Immerhin sind es die Buchstaben, die Dianas bemerkenswerte CSS-Gemälde wie Zigaro antreiben.

Verpassen Sie Kenneths Beitrag nicht, da er auf viele weitere faszinierende Beispiele von Leuten verlinkt, die Typografen mit sehr unkonventionellen Werkzeugen sind. Kenneth versucht sich selbst daran mit diesem faszinierenden kleinen Experiment, bei dem ein Button verwendet wird, um die Tricks darin aufzudecken

Siehe den Stift
START Pure CSS Lettering test 1 von Kenneth Ormandy (@kennethormandy)
auf CodePen.

Kommentare