La typographie suédoise

 (identity.sweden.se)
3 points par GN⁺ 2023-07-19 | 1 commentaires | Partager sur WhatsApp
  • Sweden Sans est la police principale chargée de l’accessibilité, de la simplicité et de la cohérence de l’ensemble de la communication de marque suédoise, conçue en s’inspirant de l’ancien système suédois de signalisation
  • Conçue pour offrir une grande lisibilité tout en préservant l’identité propre de la marque, elle assure une forte capacité d’identification afin d’avoir un impact marqué dans tous les contextes d’usage
  • Sweden Sans est proposée en quatre graisses : Book, Regular, Semibold, Bold. Lorsque Sweden Sans ne peut pas être utilisée, Noto Sans sert de police alternative et d’appoint
  • Lorsque ni Sweden Sans ni Noto Sans ne peuvent être utilisées, Arial est employée comme police de repli
  • Dans les environnements numériques, une hiérarchie typographique structurée fondée sur une grille de base de 6 px est appliquée afin de maintenir une expression de marque cohérente

Hiérarchie typographique (Type hierarchy)

  • Sweden Sans est la police principale et existe en quatre graisses : Book, Regular, Semibold, Bold
  • Lorsque Sweden Sans ne peut pas être utilisée, Noto Sans fonctionne comme police alternative et d’appoint
  • Sweden Sans est un élément central de l’identité de marque de la Suède : elle garantit la cohérence, crée de la clarté et gère l’héritage de la marque. Elle doit toujours être utilisée lorsque l’expression de la marque doit être pleinement mise en avant
  • Noto Sans est la police alternative (secondaire) et d’appoint de Sweden Sans, ainsi que la police de substitution pour les langues non romanes, les caractères spéciaux et les graisses spéciales comme l’italique
    • Un usage en dehors de ces cas peut affaiblir la force d’expression de la marque et doit donc être évité autant que possible

Police principale (Main typeface)

  • Sweden Sans est proposée en quatre graisses : Book, Regular, Semibold, Bold
    • Semibold est utilisée uniquement pour le sous-logo

Police alternative (Alternative typeface)

  • Noto est une famille de polices de Google conçue pour prendre en charge toutes les langues du monde et distribuée sous Open Font License
  • Noto Sans est utilisée lorsque Sweden Sans ne prend pas en charge le contexte réel d’application ou l’usage visé
    • Prise en charge linguistique uniquement
    • Graisses indisponibles à l’usage (par ex. italique)
    • Caractères spéciaux

Police de repli (Fallback typeface)

  • Arial est la police de repli, utilisée lorsque Sweden Sans ou Noto Sans n’est pas installée ou ne peut pas être utilisée
  • Dans la communication courante, comme les documents Word, Arial peut être plus adaptée

Associations (Pairings)

  • Utiliser les associations typographiques proposées pour garantir clarté, cohérence et hiérarchie forte dans toutes les communications
  • Exemples donnés : Level 1 Sweden Sans + Level 2 Noto Sans, ainsi que la combinaison Level 1 Sweden Sans et Level 2 Noto Sans Italic/Mono
  • Des exemples d’associations multilingues sont également inclus, comme Noto Sans Russian et Noto Sans Japanese

Paliers typographiques (Type stairs)

  • Les paliers typographiques aident à traiter les titres, le corps de texte et la relation entre les deux
  • Des titres en graisse forte, mis en contraste avec une typographie plus petite, assurent clarté, cohérence et hiérarchie forte

Numérique (Digital)

  • Il s’agit de la hiérarchie typographique principale pour l’expression numérique de la marque Suède, avec comme ligne directrice un rythme structuré en unités de 6 px
    • Cela fournit une relation équilibrée entre tailles et combinaisons différentes, tout en préservant l’expression globale
  • Les labels s’utilisent avec retenue aux côtés de titres associés à une offre ou à une catégorie spécifique
    • Ils aident l’utilisateur à classer rapidement l’information et à la relier directement à la catégorie ou à l’offre concernée
    • Ils sont principalement utilisés sur des cartes dans l’espace hero pour décrire des projets sélectionnés, des valeurs clés ou des contenus éditoriaux majeurs
  • Tous les styles peuvent être utilisés en blanc sur fond sombre, à l’exception des liens

Espacement (Spacing)

  • Pour assurer un flux typographique rationnel et continu sur l’ensemble des plateformes, toutes les interlignes sont définies selon la grille de base (une ligne tous les 6 px)
  • Tous les espacements sont réglés optiquement sur cette base afin de s’équilibrer avec les différentes interlignes
    • Règle générale : plus le titre est grand, plus l’espace entre le titre et le paragraphe est important

Rédaction (Writing)

  • Dans tous les contextes, utiliser autant que possible la casse de phrase (sentence case) ou les minuscules
    • La marque cherche à s’adresser au public plutôt qu’à lui crier dessus
  • Les majuscules ne doivent être utilisées qu’en cas de nécessité, limitées à 1 à 3 caractères maximum (par ex. les labels de catégories sur un site web)

Lecture de droite à gauche (Right to left hand reading)

  • Lorsque le sous-logo et le contenu reposent sur du texte arabe, suivre les exemples présentés

Alignement (Alignment)

  • Le texte est toujours aligné à gauche
  • Le système Sender est lui aussi toujours aligné à gauche
  • Le logo à l’intérieur du système Sender est centré

Cas d’application (Applications)

  • Des exemples montrent comment utiliser la famille Sweden Sans
    • Semibold pour le logotype
    • Sweden Sans Bold pour les titres
    • Sweden Sans Book pour le corps du texte

À lire aussi

1 commentaires

 
GN⁺ 2023-07-19
Réactions sur Hacker News

  • La typographie et la mise en page me fascinent, et j’aime lire des articles sur le sujet, mais j’ai du mal à comprendre comment un niveau de minutie quasi obsessionnel comme celui-ci peut être maintenu
    On a souvent l’impression que la documentation et l’attention portée aux détails autour des polices et de leurs conditions d’usage dépassent largement le temps consacré à l’exploitation d’un site web, à la documentation d’API ou aux fonctionnalités de base d’une app
    C’est un peu comme faire pousser un chêne pendant 100 ans, en tirer un placage au couteau artisanal, le faire tremper un an dans de l’huile de coco, puis le coller sur un panneau alvéolaire en pâte à papier IKEA

    • La documentation typographique est généralement destinée aux designers, mais bien utilisée, elle peut profiter à tout le monde. Si les designers produisent un design cohérent, les développeurs peuvent créer un design system avec des comportements par défaut sains, et à ce stade le système ne leur ajoute pas de charge, il leur en retire
      J’ai déjà conçu à assez grande échelle, dans l’éducation, une interprétation de design system basée sur Tailwind, où le design et le tailwind-config provenaient de la même spécification. En réduisant les options et les possibilités, on supprime des zones de décision pour les ingénieurs, et les valeurs comme le padding, la graisse des polices, l’interligne ou les couleurs deviennent toutes cohérentes
      Une maquette qui sort du cadre défini pour l’interligne, le padding, la graisse ou la couleur est une mauvaise maquette, et les valeurs configurées le rendent visible pour les développeurs. Du code qui sort de la spécification est également mauvais. Il faut une bonne circulation de l’information entre l’ingénierie et l’UX, mais ça fonctionne réellement
      Dans un système qui marche bien, le simple fait de regarder suffit à connaître les valeurs par défaut, ce qui réduit la charge mentale. Et au fond, le but de tout le backend d’une app est de servir le frontend. Même si les pratiques backend sont excellentes, si le design ou la spécification ne sont pas respectés, c’est un échec visible pour le client
    • Les personnes qui rédigent ce genre de guides de design et celles qui s’occupent de la documentation d’API ou d’autres fonctions de base ont en général des rôles différents. Donc produire des guides de design et travailler sur les exigences techniques n’est pas forcément un jeu à somme nulle ; en pratique, ce sont souvent des efforts totalement distincts
      Le design, et en particulier la typographie, est directement lié à l’accessibilité, donc ce niveau d’attention aux détails le mérite. La définition des contrastes et de la hiérarchie visuelle a un impact majeur sur le degré d’accessibilité d’un design
      Dans cet exemple, j’ai surtout remarqué la partie qui recommande de beaucoup moins utiliser le texte en capitales à l’avenir. Les capitales sont un sujet sur lequel j’ai déjà dû me battre avec des designers pour des raisons d’accessibilité, et Microsoft a lui aussi connu un problème public notable à ses débuts avec le design « Metro », avant de s’excuser et de revenir en arrière plus tard avec le design « Fluent »
      Les gens lisent davantage la forme des mots que les lettres isolées, et les capitales produisent beaucoup de rectangles similaires, ce qui ralentit la lecture comme des ralentisseurs sur la route, même pour des lecteurs non dyslexiques. Pour les lecteurs dyslexiques, ce n’est pas un ralentisseur mais un mur, au point que le texte entièrement en capitales peut devenir pratiquement inaccessible
      J’ai vu beaucoup de designs qui mettaient tout en capitales parce que « ça rend bien », mais une forme qui paraît ordonnée et propre à certains designers peut constituer pour d’autres un énorme bug d’accessibilité
    • C’est étonnant de voir autant d’efforts investis là-dedans, mais la raison me semble simple. Il y a beaucoup de gens qui aiment être obsessionnels à propos de la typographie, ils veulent l’être, et ils se créent donc un but à cette obsession
      Personnellement, je trouve ça bien, et je pense qu’il faut payer ces gens-là
    • Ce type de directives peut être extrêmement utile de nombreuses façons. Comme des personnes de niveaux et de formations très variés essaient d’exprimer leur créativité, parfois au détriment de campagnes de marque de grande ampleur, les équipes de brand design doivent trouver des moyens de canaliser cet élan
      L’accès technique est généralement limité pour ces personnes, mais leur accès de fait à l’expression de la marque par des moyens graphiques est bien plus large
      S’il existe une différence avec la documentation technique, alors cette différence doit être traitée comme un problème distinct ; ce n’est pas une raison pour qualifier les guides de design de pinaillage excessif sous prétexte qu’autre chose serait moins planifié ou moins documenté
    • Ce ne sont pas des directives pour une app ou un site web, mais un guide sur la manière d’utiliser la typographie lorsque le ministère des Affaires étrangères, le ministère de l’Entreprise et de l’Innovation, le ministère de la Culture, le Swedish Institute, Business Sweden, Visit Sweden et les nombreux organismes qu’ils utilisent représentent la Suède à l’étranger
      Je ne trouve pas que la section sur les polices soit particulièrement démesurée. J’ai travaillé pendant deux ans dans une entreprise qui ne produisait que des manuels de design, et un manuel bien fait ressemble généralement à ça

  • J’ai aussi découvert récemment la Finlandica finlandaise, et elle est plutôt réussie : https://toolbox.finland.fi/brand-identity-and-guidelines/fin...

    • Je n’aime pas l’élément au-dessus du A majuscule. Ça peut être élégant dans un usage ponctuel, comme un titre, mais le voir sur tous les A est distrayant
    • Elle est vraiment très belle. On dirait presque une police à chasse fixe, et avec quelques ajustements elle pourrait aussi faire une excellente police pour la programmation
    • #, &, @ ne me plaisent pas. Les A et G sont aussi bizarres : on dirait deux lettres décorées dans une police sans empattement. Même chose pour i et j
      En revanche, le I est conçu pour être distingué du l, ce qui n’est pas le cas dans beaucoup de polices

  • On peut soigner la police et le design autant qu’on veut, si l’accueil du visiteur consiste en un agaçant « Vous ne voulez vraiment pas de cookies de suivi ? », ça n’a plus beaucoup de sens. Il faut cliquer sur deux petites cases, avec un bouton utilisateur-hostile en gras « Tout autoriser » à côté d’un « Autoriser uniquement la sélection » grisé
    Si l’on veut vraiment améliorer l’UX, ce genre de chose mériterait davantage d’attention

  • C’est l’agence de design stockholmoise Söderhavet qui l’a réalisé. Plus de détails ici : https://soderhavet.com/work/sweden/

  • Aux États-Unis, il y a Public Sans : https://public-sans.digital.gov/

  • https://archive.is/7ytlz
    On dirait que le site a sauté à cause du trafic HN

    • C’est un peu décevant que sweden.se ne puisse pas encaisser ne serait-ce que quelques milliers de visiteurs en peu de temps
    • Je sais que HN n’est pas un forum de support, mais je me demande si je suis le seul à voir “Safari couldn’t establish a secure connection” sur les sites archive.xx. Ça dure depuis assez longtemps

  • J’ai l’impression que c’est destiné à un site centré sur la promotion de l’image de la Suède auprès des étrangers. En vivant en Suède, je n’ai pas l’impression d’avoir déjà vu cette police utilisée dans la communication habituelle des administrations suédoises
    Si on peut parler d’un langage visuel pour la Swedish Tax Agency, alors ça me plaît. Je ne pense pas qu’ils utilisent Sweden Sans, mais je ne sais pas exactement ce qu’ils utilisent

    • Le site est géré par le Swedish Institute
      « Le Swedish Institute est une agence publique qui renforce l’intérêt et la confiance envers la Suède dans le monde entier. Nous travaillons sur la promotion de la Suède, la coopération dans la région de la mer Baltique et le développement mondial. […] Les activités du SI sont principalement financées par des allocations directes du budget de l’État. Le SI dispose d’environ 470 millions de SEK de financements du gouvernement suédois dans quatre domaines : la coopération internationale, l’aide internationale, l’éducation et la recherche universitaire, et les entreprises. »
      [1] https://si.se/en/about-si/our-mission/
    • Il me semble que Sweden Sans est utilisée pour les titres sur les cartes d’identité nationales et passeports récents
    • C’est clairement intéressant de voir qu’aujourd’hui les pays font leur propre promotion. Et ça marche. Quand on pense aux pays nordiques, il y a de fortes chances que la Suède soit le premier qui vienne à l’esprit
    • J’ai eu la même impression, celle d’un site qui fait la promotion de l’image de la Suède. Il y a des endroits agréables, des paysages de campagne, et avec une moto il ne faut pas longtemps pour traverser la Suède
      https://www.youtube.com/watch?v=qXiIJ32kaZU
      Quelqu’un en Suède a dit que la police devait arrêter le conducteur le jour même pour prouver qui conduisait, mais moi je compte continuer à rouler sur l’Autobahn allemande. Il y a moins d’élans en liberté
      ghost rider patrik fürstenhoff

  • Le nom est Sweden Sans, mais certaines lettres comme le i minuscule et le l semblent avoir des empattements. Je ne sais pas si je comprends mal ce qu’est un empattement, ou si c’est le sens de sans ici que je comprends mal

    • Il y a pas mal de marge. La création typographique relève aussi d’un art sensible, donc un designer peut glisser discrètement un empattement, ou il peut y avoir une raison précise dans le cahier des charges du projet
      Quand j’enseignais la typographie dans les années 2000, les étudiants faisaient souvent ce genre de remarque. C’était un bon exemple pour les cours débutants : on utilise une police sans vraiment l’examiner, puis on bute plus tard sur un détail particulier
      C’est étrange, mais la plupart des gens choisissent une police sans y réfléchir très profondément. Ils ne lisent même pas son nom, encore moins ne l’examinent de près. Ils pensent seulement à leur design, à leurs idées et émotions, au message, aux occasions de faire quelque chose de beau
      Un designer expérimenté doit apprendre à se demander s’il n’est pas en train d’halluciner la finalité d’une police, parce qu’il suffit souvent de la regarder quelques secondes pour que son intention d’origine devienne très claire. Une fois qu’on comprend ce mécanisme, il devient aussi évident de voir pourquoi cet empattement slab a été ajouté
    • Ce n’est pas une catégorie si stricte. C’est davantage un indicateur de la filiation dans laquelle le designer situe cette police
      Même beaucoup de polices sans empattement comportent un léger empattement sur certaines lettres, surtout celles qui prêtent facilement à confusion comme le l. C’est encore plus vrai quand elles sont utilisées dans un contexte technique ou comme ici, comme une police passe-partout
    • Les graisses normales et grasses sont probablement plus proches d’une slab serif, mais la graisse “book” est une vraie sans serif. Le plus simple est sans doute de télécharger la police et de regarder les fichiers OTF
    • En effet, on dirait bien qu’il y a un peu de slab serif. En étant généreux, on peut dire que serif et sans serif forment un spectre avec deux extrémités
      Si on l’appelait serif, les gens s’attendraient à une police beaucoup plus clairement à empattements, donc il est peut-être plus simple de la qualifier de sans serif
    • Le terme exact serait Slab Serif

  • La France a aussi son propre système de design et sa police Marianne : https://www.systeme-de-design.gouv.fr/elements-d-interface/f...

  • Ce n’est pas pour rabaisser la Suède, mais l’Estonie a aussi quelque chose de similaire : https://brand.estonia.ee/guidelines/typography/?lang=en

    • La beauté est affaire de regard, mais si le travail suédois est dans l’ensemble assez joli et facile à lire, les recommandations estoniennes ressemblent plutôt à un excellent exemple de ce qui se passe quand on laisse le designer faire à sa guise, ou quand le client est trop conciliant et veut à tout prix se différencier.
      L’introduction décrit le caractère de la marque Estonia comme « nordic, surprising, smart », mais la police Aino, en particulier, semble trop se concentrer sur le côté surprising au détriment de la lisibilité, ce qui affaiblit nettement l’expression de l’aspect smart.