Schwedische Typografie

 (identity.sweden.se)
3 Punkte von GN⁺ 2023-07-19 | 1 Kommentare | Auf WhatsApp teilen
  • Sweden Sans ist die zentrale Schrift für Barrierefreiheit, Einfachheit und Konsistenz in der gesamten Markenkommunikation Schwedens und wurde vom früheren schwedischen Beschilderungssystem inspiriert
  • Sie ist auf hohe Lesbarkeit und die Wahrung der markeneigenen Identität ausgelegt und verfügt über hohe Wiedererkennbarkeit, damit sie in allen Anwendungskontexten starke Wirkung entfaltet
  • Sweden Sans ist in den vier Schriftschnitten Book, Regular, Semibold, Bold verfügbar; wenn Sweden Sans nicht verwendet werden kann, dient Noto Sans als Ersatz- und Ergänzungsschrift
  • Wenn weder Sweden Sans noch Noto Sans verfügbar sind, wird Arial als Fallback-Schrift verwendet
  • In digitalen Umgebungen sorgt eine strukturierte typografische Hierarchie auf Basis eines 6px-Baseline-Grids für einen konsistenten Markenausdruck

Typografische Hierarchie (Type hierarchy)

  • Sweden Sans ist die zentrale Schrift und in den vier Schriftschnitten Book, Regular, Semibold, Bold verfügbar
  • Wenn Sweden Sans nicht verfügbar ist, fungiert Noto Sans als Ersatz- und Ergänzungsschrift
  • Sweden Sans ist ein Kernelement der schwedischen Markenidentität; sie sorgt für Konsistenz, schafft Klarheit, verwaltet das Markenvermächtnis und wird immer dann eingesetzt, wenn der Markenausdruck vollständig zur Geltung kommen soll
  • Noto Sans wird als Alternative (sekundäre Schrift) und Ergänzung zu Sweden Sans eingesetzt, außerdem als Ersatzschrift für nicht-lateinische Sprachen und Sonderzeichen sowie als Fallback für spezielle Schriftschnitte wie Kursiv
    • Eine Nutzung außerhalb dieser Zwecke kann die Ausdruckskraft der Marke schwächen und sollte daher möglichst vermieden werden

Zentrale Schrift (Main typeface)

  • Sweden Sans ist in den vier Schriftschnitten Book, Regular, Semibold, Bold verfügbar
    • Semibold wird nur für Sublogos verwendet

Alternative Schrift (Alternative typeface)

  • Noto ist eine Font-Familie von Google mit dem Ziel, alle Sprachen weltweit zu unterstützen, und steht unter der Open Font License
  • Noto Sans wird verwendet, wenn Sweden Sans den konkreten Anwendungskontext oder Verwendungszweck nicht unterstützt
    • ausschließlich zur Sprachunterstützung
    • nicht verfügbare Schriftschnitte (z. B. Kursiv)
    • Sonderzeichen

Fallback-Schrift (Fallback typeface)

  • Arial ist die Fallback-Schrift und wird verwendet, wenn Sweden Sans oder Noto Sans nicht installiert oder nicht nutzbar sind
  • In alltäglicher Kommunikation, etwa in Word-Dokumenten, kann Arial geeigneter sein

Kombinationen (Pairings)

  • Verwende die vorgeschlagenen Schriftkombinationen, um in jeder Kommunikation Klarheit, Konsistenz und eine starke Hierarchie sicherzustellen
  • Als Beispiele werden Kombinationen wie Level 1 Sweden Sans + Level 2 Noto Sans sowie Level 1 Sweden Sans mit Level 2 Noto Sans Italic/Mono gezeigt
  • Enthält Beispiele für mehrsprachige Kombinationen wie Noto Sans Russian und Noto Sans Japanese

Schriftstufen (Type stairs)

  • Schriftstufen helfen dabei, Überschriften und Fließtext sowie deren Beziehung zueinander zu handhaben
  • Fette Headlines stehen im Kontrast zu kleinerer Typografie und sorgen so für Klarheit, Konsistenz und eine starke Hierarchie

Digital (Digital)

  • Als wichtigste typografische Hierarchie für den digitalen Markenausdruck Schwedens dient ein strukturierter Rhythmus auf Basis von 6px-Einheiten als Grundlinie
    • Er bietet eine ausgewogene Korrelation beim Wechsel zwischen unterschiedlichen Größen und Kombinationen und erhält den Gesamtausdruck
  • Labels werden zurückhaltend zusammen mit Headlines verwendet, die mit einem bestimmten Angebot oder einer Kategorie verbunden sind
    • Sie helfen Nutzern, Informationen schnell einzuordnen und direkt mit Kategorien oder Angeboten zu verknüpfen
    • Sie werden vor allem in Karten im Hero-Bereich genutzt, um ausgewählte Projekte, Kernwerte und wichtige redaktionelle Inhalte zu beschreiben
  • Alle Stile können weiß auf dunklem Hintergrund verwendet werden, Links ausgenommen

Abstände (Spacing)

  • Für einen sinnvollen und kontinuierlichen typografischen Fluss über die gesamte Plattform hinweg werden alle Zeilenabstände über ein Baseline-Grid definiert (eine Linie alle 6px)
  • Alle Abstände sind optisch an der Baseline ausgerichtet, damit sie mit unterschiedlichen Zeilenabständen im Gleichgewicht stehen
    • Allgemeine Regel: Je größer die Headline, desto größer auch der Abstand zwischen Headline und Absatz

Schreiben (Writing)

  • In allen Kontexten möglichst Sentence case oder Kleinschreibung verwenden
    • Die Marke spricht ihr Publikum an, ohne es anzuschreien
  • Großbuchstaben nur bei Bedarf einsetzen und auf maximal 1–3 Zeichen begrenzen (z. B. Kategorie-Labels auf der Website)

Lesen von rechts nach links (Right to left hand reading)

  • Wenn Sublogo und Inhalte auf arabischem Text basieren, den gezeigten Beispielen folgen

Ausrichtung (Alignment)

  • Text ist immer linksbündig ausgerichtet
  • Auch das Sender system ist immer linksbündig ausgerichtet
  • Logos innerhalb des Sender system sind zentriert ausgerichtet

Anwendungsbeispiele (Applications)

  • Beispiele für die Verwendung der Sweden-Sans-Familie werden bereitgestellt
    • Semibold im Logotype
    • Sweden Sans Bold für Headlines
    • Sweden Sans Book für Fließtext

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-07-19
Meinungen auf Hacker News

  • Ich bin von Typografie und Seitendesign fasziniert und lese gern Artikel dazu, aber ich weiß nicht so recht, wie sich eine solche fast schon obsessive Detailverliebtheit aufrechterhalten lässt.
    Der Aufwand für Dokumentation und Detailpflege rund um Schriftarten und Nutzungsbedingungen wirkt oft viel größer als die Zeit, die in den Betrieb der Website, API-Dokumentation oder grundlegende App-Funktionen fließt.
    Es fühlt sich an, als würde man 100 Jahre lang eine Eiche ziehen, mit einem handgefertigten Messer Furnier abziehen, es ein Jahr lang in Kokosöl einlegen und dann auf eine IKEA-Wabenkernplatte aus Zellstoff kleben.

    • Typografie-Dokumentation richtet sich meist an Designer, kann aber, wenn sie richtig genutzt wird, allen helfen. Wenn Designer ein konsistentes Design schaffen, können Entwickler ein Design System mit sinnvollen Standardverhalten bauen, und ab diesem Punkt erhöht das System nicht die Last der Entwickler, sondern reduziert sie.
      Ich habe im Bildungsbereich einmal in ziemlich großem Maßstab eine Tailwind-basierte Interpretation eines Design Systems erstellt, und Design sowie tailwind-config stammten aus derselben Spezifikation. Durch das Reduzieren von Auswahlmöglichkeiten und Optionen werden Bereiche beseitigt, über die Engineers nachdenken müssten, und Werte wie Padding, Schriftgewicht, Zeilenhöhe und Farben werden durchgehend konsistent.
      Ein Mockup, das bei Zeilenhöhe, Padding, Gewicht, Farbe usw. von den Vorgaben abweicht, ist ein falsches Mockup, und die konfigurierten Werte machen Entwicklern genau das sichtbar. Code, der von der Spezifikation abweicht, ist ebenfalls falscher Code. Es braucht einen guten Kommunikationsfluss zwischen Engineering und UX, aber in der Praxis funktioniert es.
      In einem gut funktionierenden System erkennt man schon durch Hinschauen die Defaults, was die kognitive Last reduziert. Und der Zweck des gesamten App-Backends ist letztlich, das Frontend bereitzustellen. Selbst wenn die Backend-Praktiken hervorragend sind: Wenn Design oder Spezifikation nicht eingehalten werden, ist das ein Fehler, den Kunden sehen.
    • Die Leute, die solche Design-Guides erstellen, und diejenigen, die API-Dokumentation oder andere grundlegende Funktionen verantworten, haben in der Regel unterschiedliche Rollen. Deshalb sind die Erstellung eines Design-Guides und die Arbeit an technischen Anforderungen nicht zwingend ein Nullsummenspiel; in der Praxis sind es oft völlig getrennte Aufwände.
      Design, insbesondere Typografie, hängt direkt mit Barrierefreiheit zusammen und verdient daher diese Detailpflege. Die Definition von Kontrast und visueller Hierarchie hat großen Einfluss darauf, wie barrierefrei ein Design ist.
      In diesem Beispiel fällt besonders der Teil auf, in dem empfohlen wird, künftig viel weniger Text in Großbuchstaben zu verwenden. Großbuchstaben sind ein Punkt, über den ich mich schon mit Designern wegen Barrierefreiheit gestritten habe; auch Microsoft hatte mit dem frühen „Metro“-Design öffentlich große Probleme, entschuldigte sich später dafür und nahm es im anschließenden „Fluent“-Design wieder zurück.
      Menschen lesen eher die Form von Wörtern als einzelne Buchstaben, und Großbuchstaben erzeugen viele ähnliche Rechtecke, die selbst Leser ohne Legasthenie wie Bremsschwellen auf der Straße verlangsamen. Für Leser mit Legasthenie fühlen sich diese Schwellen eher wie Wände an, sodass komplett großgeschriebener Text praktisch unzugänglich werden kann.
      Ich habe viele Designs gesehen, die komplett Großbuchstaben verwenden, weil es „gut aussieht“, aber was für manche Designer ordentlich und sauber wirkt, kann für andere ein riesiger Barrierefreiheits-Bug sein.
    • Es ist erstaunlich, wie viel Aufwand in so etwas fließt, aber der Grund wirkt simpel. Es gibt viele Menschen, die es lieben, von Typografie besessen zu sein; sie wollen sich hineinsteigern, also schaffen sie sich einen Zweck dafür.
      Persönlich finde ich das gut, und ich denke, solche Leute sollte man dafür bezahlen.
    • Solche Guidelines können auf vielerlei Weise sehr nützlich sein. Menschen mit unterschiedlichem Niveau und unterschiedlicher Ausbildung versuchen, ihre Kreativität auszuleben, selbst wenn das zulasten großer Brand Campaigns geht; deshalb müssen Brand-Design-Teams einen Weg finden, diese Energie zu kontrollieren.
      Der technische Zugriff solcher Leute ist meist ziemlich eingeschränkt, aber ihr faktischer Zugriff auf Markendarstellung über grafische Ausdrucksformen ist viel breiter.
      Wenn es im Vergleich zu technischer Dokumentation Unterschiede gibt, sollte man diese als eigenes Problem behandeln, statt Design-Guides als kleinteilige Nörgelei abzutun, nur weil etwas anderes weniger geplant oder weniger dokumentiert ist.
    • Das sind keine Guidelines für Apps oder Websites, sondern ein Leitfaden dafür, wie das Außenministerium, das Ministerium für Unternehmen und Innovation, das Kulturministerium, das Swedish Institute, Business Sweden, Visit Sweden und die zahlreichen von ihnen genutzten Organisationen Typografie verwenden sollen, wenn sie Schweden im Ausland repräsentieren.
      Ich finde den Abschnitt zu Schriftarten nicht außergewöhnlich groß. Ich habe zwei Jahre lang bei einer Firma gearbeitet, die ausschließlich Design Manuals erstellt hat, und gut gemachte Manuals sehen im Allgemeinen genau so aus.

  • Kürzlich bin ich auch auf Finnlands Finlandica gestoßen, und die ist ziemlich gut: https://toolbox.finland.fi/brand-identity-and-guidelines/fin...

    • Das Element über dem Großbuchstaben A gefällt mir nicht. Wenn es selten eingesetzt wird, etwa in Überschriften, kann es cool wirken, aber wenn es bei jedem A auftaucht, lenkt es ab.
    • Sie sieht wirklich gut aus. Wirkt fast wie eine Monospace-Schrift, und mit ein bisschen Feinschliff könnte daraus auch eine schöne Programmierschrift werden.
    • #, &, @ gefallen mir nicht. A und G sind auch seltsam; sie wirken wie zwei Buchstaben mit Zierelementen in einer Sans-Serif-Schrift. Bei i und j ist es ähnlich.
      Allerdings ist das I so gestaltet, dass es sich von l unterscheiden lässt, was bei vielen Schriften nicht der Fall ist.

  • Egal, wie viel Sorgfalt man in Schrift und Design steckt: Es bringt wenig, wenn Besucher mit einem nervigen „Wollen Sie wirklich keine Tracking-Cookies?“ begrüßt werden. Man muss zwei kleine Checkboxen anklicken, und neben einem ausgegrauten „Nur ausgewählte Optionen erlauben“ steht ein nutzerfeindlicher, fett hervorgehobener Button „Alle erlauben“.
    Wenn man UX wirklich verbessern will, verdient so etwas mehr Aufmerksamkeit.

  • Erstellt wurde es von der Stockholmer Designagentur Söderhavet. Mehr dazu hier: https://soderhavet.com/work/sweden/

  • In den USA gibt es Public Sans: https://public-sans.digital.gov/

  • https://archive.is/7ytlz
    Sieht so aus, als hätte der HN-Traffic die Seite umgeworfen.

    • Es ist schon etwas enttäuschend, dass sweden.se nicht einmal ein paar Tausend Besucher in kurzer Zeit verkraftet.
    • Ich weiß, dass HN kein Support-Forum ist, aber ich frage mich, ob ich der Einzige bin, bei dem auf den archive.xx-Sites „Safari couldn’t establish a secure connection“ erscheint. Das passiert bei mir schon seit ziemlich langer Zeit.

  • Das scheint eher für eine Site gedacht zu sein, die das Bild Schwedens im Ausland bewirbt. Obwohl ich in Schweden lebe, glaube ich nicht, diese Schrift in der allgemeinen Kommunikation schwedischer Behörden gesehen zu haben.
    Wenn man von einer Designsprache der Swedish Tax Agency sprechen kann, gefällt sie mir. Ich glaube nicht, dass sie Sweden Sans verwenden, weiß aber auch nicht genau, was sie nutzen.

    • Diese Site wird vom Swedish Institute betrieben.
      „Das Swedish Institute ist eine öffentliche Einrichtung, die weltweit Interesse an und Vertrauen in Schweden aufbaut. Wir befassen uns mit der Förderung Schwedens, der Zusammenarbeit im Ostseeraum und globaler Entwicklung. […] Die Tätigkeit des SI wird hauptsächlich durch direkte Zuweisungen aus dem Staatshaushalt finanziert. Das SI verfügt über schwedische Regierungsmittel in Höhe von rund 470 Millionen SEK in vier Bereichen: internationale Zusammenarbeit, internationale Hilfe, Bildung und Hochschulforschung sowie Wirtschaft.“
      [1] https://si.se/en/about-si/our-mission/
    • Soweit ich weiß, wird Sweden Sans als Titelschrift auf den neuesten Personalausweisen und Reisepässen verwendet.
    • Es ist definitiv interessant, dass Staaten heutzutage ihr eigenes Marketing betreiben. Und es funktioniert auch. Wenn man an ein nordisches Land denkt, ist die Wahrscheinlichkeit groß, dass einem zuerst Schweden einfällt.
    • Den Gedanken hatte ich auch, dass es eine Site ist, die Schwedens Image bewirbt. Es gibt viel Raum zum Genießen und ländliche Landschaften, und mit einem Motorrad dauert es nicht lange, Schweden zu durchqueren.
      https://www.youtube.com/watch?v=qXiIJ32kaZU
      Jemand in Schweden sagte, die Polizei müsse einen noch am selben Tag erwischen, um zu beweisen, dass man der Fahrer war, aber ich bleibe lieber bei der deutschen Autobahn. Da laufen weniger Elche frei herum.
      Ghost Rider Patrik Fürstenhoff

  • Der Name ist Sweden Sans, aber einige Buchstaben wie das kleine i und l sehen aus, als hätten sie Serifen. Ich weiß nicht, ob ich Serifen falsch verstehe oder ob ich missverstehe, was Sans hier bedeutet.

    • Da gibt es ziemlich viel Spielraum. Da Schriftdesign auch eine emotionale Kunst ist, schleusen Designer manchmal eine Serif ein, oder es kann laut Projektspezifikation einen bestimmten Grund dafür geben.
      Als ich in den 2000ern Typografie unterrichtete, haben Studierende solche Dinge oft angemerkt. Als Beispiel aus Anfängerkursen: Man verwendet eine Schrift, ohne sie wirklich genau anzusehen, und stolpert später über irgendein Detail.
      Seltsam, aber die meisten Menschen wählen Schriften aus, ohne viel über die Schrift selbst nachzudenken. Sie schauen sie sich nicht einmal genau an, geschweige denn, dass sie den Namen lesen. Sie denken nur an ihr eigenes Design, ihre Gedanken und Gefühle, ihre Botschaft oder die Gelegenheit für ein cooles Design.
      Erfahrene Designer müssen darin geschult werden, zu überlegen, ob sie den Zweck einer Schrift nicht im Grunde halluzinieren. Denn oft wird der ursprüngliche Zweck schon nach wenigen Sekunden Betrachtung sehr klar. Wenn man lernt, wie das funktioniert, wird auch deutlich, warum diese Slab-Serifen dort eingebaut wurden.
    • Das sind keine so strengen Kategorien. Es ist eher ein Hinweis darauf, welcher Tradition der Designer die Schrift zuordnet.
      Viele serifenlose Schriften haben ebenfalls kleine Serifen, besonders bei leicht zu verwechselnden Zeichen wie l. Das gilt umso mehr, wenn sie in technischen Kontexten verwendet werden oder, wie diese Schrift, als Allzweckschrift gedacht sind.
    • Die normalen und fetten Schnitte könnten wahrscheinlich eher in Richtung Slab Serif gehen, aber der „book“-Schnitt ist eine echte serifenlose Schrift. Am einfachsten sieht man das vermutlich, wenn man die Schrift herunterlädt und sich die OTF-Dateien ansieht.
    • Tatsächlich sieht es so aus, als wären ein paar Slab-Serifen enthalten. Großzügig betrachtet kann man sagen, dass Serif und Sans Serif ein Spektrum mit zwei Enden sind.
      Wenn man sie Serif nennt, würden die Leute eine deutlich stärker serifige Schrift erwarten; daher ist es vielleicht einfacher, sie Sans Serif zu nennen.
    • Der genaue Begriff dürfte Slab Serif sein.

  • Frankreich hat ebenfalls ein eigenes Designsystem und die Schrift Marianne: https://www.systeme-de-design.gouv.fr/elements-d-interface/f...

  • Ich will Schweden nicht schlechtmachen, aber Estland hat etwas Ähnliches: https://brand.estonia.ee/guidelines/typography/?lang=en

    • Schönheit liegt im Auge des Betrachters, aber die schwedische Arbeit ist insgesamt ziemlich hübsch und gut lesbar, während die estnischen Guidelines wie ein hervorragendes Beispiel dafür wirken, was passiert, wenn Designer freie Hand haben oder wenn ein Kunde zu nachgiebig ist und unbedingt anders sein will.
      In der Einführung wird die Persönlichkeit der Marke Estonia als „nordic, surprising, smart“ beschrieben, doch besonders die Schrift Aino scheint sich selbst auf Kosten der Lesbarkeit zu stark auf „surprising“ zu konzentrieren, wodurch der „smart“-Aspekt deutlich schwächer zum Ausdruck kommt.