Styling Links mit echten Unterstreichungen

Bevor wir dazu kommen, *wie* man Unterstreichungen stylt, sollten wir die Frage beantworten: *sollten wir unterstreichen*?

In der Grafikgestaltung werden Unterstreichungen im Allgemeinen als unraffiniert angesehen. Es gibt schönere Wege, um Betonung zu setzen, Hierarchie zu etablieren und Titel abzugrenzen.

Das wird in diesem Ratschlag aus Buttericks "Practical Typography" deutlich <a href="https://practicaltypography.com/underlining.html" rel="noopener">„Praktische Typografie“</a>

Wenn Sie den Drang verspüren, zu unterstreichen, verwenden Sie stattdessen Fett oder Kursivschrift. In besonderen Situationen, wie z. B. bei Überschriften, können Sie auch Großbuchstaben, Kapitälchen oder die Änderung der Punktgröße in Betracht ziehen. Nicht überzeugt? Ich lade Sie ein, ein Buch, eine Zeitung oder eine Zeitschrift zu finden, die Text unterstreicht. Dieses Aussehen wird hauptsächlich mit Boulevardzeitungen assoziiert.

Aber das Web ist anders. Hyperlinks sind das bestimmende Merkmal des Internets; und seit seiner Entstehung sind sie unterstrichen. Es ist eine universell verständliche Konvention. Die Bedeutung ist kristallklar – <em>eine Unterstreichung bedeutet einen Link</em>.

Viele beliebte Websites haben jedoch auf Unterstreichungen verzichtet: <em>The New York Times</em>, <em>New York Magazine</em>, <em>The Washington Post</em>, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Als Google 2014 auf seiner Ergebnisseite die Unterstreichungen entfernte, argumentierte der führende Designer Jon Wiley, dass dies zu einem saubereren Erscheinungsbild führe. Bemerkenswerterweise hat die Mehrheit dieser Websites jedoch leichte Abwandlungen der traditionellen, grellen blauen Farbe (#0000EE) beibehalten, die seit Beginn des Webs der Browserstandard war. Dies bietet zwar einen visuellen Hinweis für die Mehrheit der Benutzer, reicht aber möglicherweise nicht aus, um die Barrierefreiheitskonformität von <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> zu erfüllen.

Farbe wird nicht als einziges visuelles Mittel verwendet, um Informationen zu vermitteln, Aktionen anzuzeigen, eine Reaktion auszulösen oder ein visuelles Element zu unterscheiden.
— <a href="https://www.w3.org/TR/WCAG21/#use-of-color" rel="noopener"><abbr>WCAG</abbr> 2.1</a>

<abbr>WCAG</abbr> schreibt die <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G183" rel="noopener">Verwendung von Unterstreichungen für Links</a> nicht zwingend vor, empfiehlt sie aber. Farbblinde Benutzer müssen einen Link erkennen können. Man könnte sie auf andere Weise unterscheiden, z. B. mit einer fetten font-weight. Oder man könnte diese seit langem etablierte visuelle Affordanz beibehalten. Aber wenn wir Unterstreichungen verwenden, <em>wollen wir, dass sie gut aussehen</em>. Marcin Wichary, Designer bei Medium, beschrieb die perfekte Unterstreichung als

[…] sichtbar, aber unaufdringlich – so dass die Leute erkennen können, was klickbar ist, ohne zu viel Aufmerksamkeit auf sich zu ziehen. Sie sollte sich im richtigen Abstand zum Text befinden und bequem dahinter liegen, wenn <a href="http://en.wikipedia.org/wiki/Descender" rel="noopener">Absteiger</a> den gleichen Platz einnehmen wollen.

Dies zu erreichen, erforderte bisher <em>CSS-Tricks</em>.

<a href="#aa-the-hacks-weve-had" aria-hidden="true" class="aal_anchor" id="aa-the-hacks-weve-had"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Die Hacks, die wir hatten

Das ist ein Trick, mit dem alle Entwickler vertraut sein werden: border-bottom. Indem wir eine Unterstreichung mit border-bottom emulieren, erhalten wir die Kontrolle über Farbe und Dicke. Diese Pseudo-Unterstreichungen haben ein Problem: einen zu großen Abstand zum Text. Sie befinden sich unterhalb der Absteiger der Buchstaben. Dieses Problem könnte man potenziell durch die Verwendung von line-height lösen, aber das bringt eigene Probleme mit sich. Eine ähnliche Technik nutzt box-shadow. Marcin Wichary war Pionier der raffiniertesten Technik, bei der background-image verwendet wurde, um eine Unterstreichung zu simulieren. Es waren nützliche Hacks, die aber zum Glück nicht mehr benötigt werden.

<a href="#aa-styling-real-underlines" aria-hidden="true" class="aal_anchor" id="aa-styling-real-underlines"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling von <em>echten</em> Unterstreichungen

Endlich können wir Links abgrenzen, ohne auf Stil zu verzichten, dank zweier neuer CSS-Eigenschaften.

• text-underline-offset steuert die Position der Unterstreichung.
• text-decoration-thickness steuert die Dicke von Unterstreichungen sowie Überstreichungen und Durchstreichungen.

Laut dem <a href="https://webkit.org/blog/8718/new-webkit-features-in-safari-12-1/" rel="noopener">WebKit-Blog</a>

Sie können auch from-font für beide Eigenschaften angeben, wodurch die entsprechende Metrik aus der verwendeten Schriftdatei selbst bezogen wird.

Die <abbr>UX</abbr>-Agentur Clearleft setzt (Pseudo-)Unterstreichungen mutig ein und lenkt mit farbenfrohem Styling die Aufmerksamkeit auf Links. Hier ist ein Beispiel für eine gefälschte Unterstreichung

a {
  text-decoration: none;
  border-bottom: #EA215A 0.125em solid;
}

Beachten Sie, dass diese gefälschte Unterstreichung deutlich unter dem Absteiger des Buchstabens „y“ liegt

Hier ist derselbe Absatz, der DevTools verwendet, um dasselbe Styling auf eine echte Unterstreichung mit den neuen CSS-Eigenschaften anzuwenden

a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}

Sie werden feststellen, dass ich in meinem Beispielcode die Einheit em verwende. Die Spezifikation <em>empfiehlt dringend</em>, sie anstelle von Pixeln zu verwenden, damit die Dicke mit der Schrift skaliert.

Diese Eigenschaften sind bereits in Safari verfügbar und werden in Firefox 70 kommen.

Mit der Umstellung auf Chromium für den Microsoft Edge-Browser werden wir endlich browserübergreifende Unterstützung für die Eigenschaft text-decoration-style haben, die die Optionen bietet: solid (Standard), double, dotted, dashed und wavy. In Kombination eröffnen diese neuen Eigenschaften eine ganze Reihe von Möglichkeiten.

Die vielleicht größte Verbesserung für Unterstreichungen im Web kam jedoch, ohne dass Entwickler etwas tun mussten. In den schlechten alten Zeiten wurden Absteiger von Unterstreichungen unaufgefordert durchschnitten, was alles andere als elegant war. Früher umgingen Entwickler dieses Manko, indem sie einen text-shadow anwendeten, der der Hintergrundfarbe entsprach. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink" rel="noopener">text-decoration-skip-ink</a> bot eine bessere Möglichkeit, Platz für Absteiger zu schaffen.

Praktischerweise ist sie als neuer <em>Standardwert</em> für Unterstreichungen festgelegt, was bedeutet, dass sich das Aussehen von Unterstreichungen verbessert hat, während die meisten Webentwickler nicht wissen, dass diese Eigenschaft existiert. Wenn Sie möchten, dass eine Unterstreichung über Glyphen verläuft, können Sie diese Eigenschaft auf none setzen.