- In den Anwendungen vieler Unternehmen sind UI-Elemente wie Text oder Icons nicht sauber zentriert.
- Mit CSS
flexundgridlässt sich Zentrierung eigentlich leicht umsetzen, und trotzdem passiert es oft nicht.
display: flex
justify-content: center /* horizontale Zentrierung */
align-items: center /* vertikale Zentrierung */
oder
display: grid
justify-items: center /* horizontale Zentrierung */
align-items: center /* vertikale Zentrierung */
Faktoren, die das Zentrieren erschweren
- Die Metriken von Schriftarten spielen eine wichtige Rolle. Bei den meisten populären Fonts sitzt die Bounding Box nicht exakt am Text, sondern enthält Leerraum, was das Zentrieren erschwert.
- Durch die Wirkung der
line-height-Einstellung ist es fast unmöglich, zwei Elemente in unterschiedlichen Containern sauber auszurichten. - Auch ein Icon neben Text auszurichten ist sehr schwierig. Mit der CSS-Eigenschaft
vertical-alignlassen sich Icons nicht sinnvoll ausrichten. - Icon-Fonts, bei denen Icons in einer Font-Datei verwendet werden, machen die Ausrichtung noch schwieriger, weil sich Größe und Padding nicht anpassen lassen.
- Auch Designer machen den Fehler, mechanisch zu zentrieren, ohne die Form des Icons zu berücksichtigen.
- Auch die horizontale Ausrichtung kann ohne große Sorgfalt falsch wirken.
Lösungsansätze
Designer
- Wenn die Bounding Box eines Fonts exakt an den Text angepasst wird, wird das Zentrieren deutlich einfacher.
- Figma unterstützt diese Funktion (sie ist nicht der Standard).
- Vertical Trim : Cap Height to baseline
Font-Designer
- Wenn die Font-Metriken so gesetzt werden, dass der Raum zwischen Ascender und Descender dem Doppelten der Cap Height entspricht, können Entwickler deutlich einfacher zentrieren.
- Die tatsächlichen Ascender/Descender müssen dafür nicht bis an die Grenzen reichen; es genügt, wenn die Zahlen stimmen.
Webentwickler
- Man muss den verwendeten Font im Voraus kennen (bei Font-Fallbacks funktioniert es nicht).
- Mit einem anhand der Font-Metriken berechneten
padding-bottom-Wert lässt sich die vertikale Zentrierung anpassen. - Auch Icons lassen sich ausrichten, indem man
vertical-align: baselinesetzt und sie um einen aus Font-Metriken und Icon-Größe berechneten Wert nach unten verschiebt.
Icon-Fonts
- Bitte verwendet endlich keine Icon-Fonts mehr, sondern normale Bildformate.
- Es gibt nichts Einfacheres, als zwei Rechtecke mit Breite und Höhe auszurichten.
Visuelle Korrektur
- Entwickler können nur mathematisch perfekte Rechtecke ausrichten. Was man manuell korrigieren muss, ist die visuell ausgewogene Platzierung eines Icons innerhalb dieses Rechtecks.
Meinung von GN⁺
- Das zeigt, wie stark sich die UI-Qualität durch Aufmerksamkeit für kleine Details verbessern lässt. Schon eine scheinbar banale Sache wie Zentrierung verändert den Gesamteindruck deutlich.
- Es deutet darauf hin, dass gute Ergebnisse nicht entstehen, wenn man nur denkt: „Designer kümmern sich nur ums Design, Entwickler nur um die Umsetzung“, sondern wenn beide die Bereiche des jeweils anderen verstehen und zusammenarbeiten.
- Sinnvoll wäre es wohl, schon im Designprozess die Font-Metriken anzupassen und Entwürfe darauf abzustimmen, damit die Umsetzung wie beabsichtigt gelingt und Unterschiede im Browser-Rendering möglichst keine Rolle spielen.
- Solche Probleme finden sich sogar in Produkten großer Unternehmen wie Apple, Microsoft und Google, aber die meisten Menschen scheinen sie kaum wahrzunehmen. Umso wichtiger ist es, mit akribischer Liebe zum Detail zu arbeiten.
- Gerade weil in letzter Zeit mit UI-Testautomatisierungstools der Prozess des manuellen Prüfens mit dem menschlichen Auge oft übersprungen wird, könnten solche Probleme noch häufiger auftreten; entsprechend ist Vorsicht geboten.
3 Kommentare
Man sollte vielleicht auch darüber nachdenken, ob eine mechanische Zentrierung wirklich immer gut ist. So wie eine Maus bequemer sein kann, wenn sie ergonomisch leicht asymmetrisch statt perfekt links-rechts-symmetrisch geformt ist, scheint das auch etwas zu sein, das man anhand der gesamten Usability entscheiden sollte.
Entscheidend scheint zu sein, dass dabei Ergebnisse herauskommen können, die nicht der Absicht entsprechen. Zum Beispiel Situationen, in denen ein Mausklick auf dem Bildschirm nicht an der Pfeilspitze, sondern am hinteren Ende des Cursors registriert wird.
Hacker-News-Kommentar
Zusammenfassung:
justifyundalignin CSS interaktiv ausprobieren lassen