Tipografía de Suecia

 (identity.sweden.se)
3 puntos por GN⁺ 2023-07-19 | 1 comentarios | Compartir por WhatsApp
  • Sweden Sans es la tipografía principal responsable de la accesibilidad, la simplicidad y la consistencia en toda la comunicación de marca de Suecia; fue creada inspirándose en el antiguo sistema sueco de señalización
  • Diseñada para ofrecer alta legibilidad y mantener una identidad de marca propia, asegura una alta reconocibilidad para generar un fuerte impacto en todos los entornos de aplicación
  • Sweden Sans está disponible en cuatro pesos: Book, Regular, Semibold y Bold; cuando no sea posible usar Sweden Sans, Noto Sans funciona como tipografía alternativa y de apoyo
  • Cuando no se puedan usar ni Sweden Sans ni Noto Sans, se utiliza Arial como tipografía de respaldo
  • En entornos digitales, se mantiene una expresión de marca consistente aplicando una jerarquía tipográfica estructurada basada en una retícula de línea base de 6px

Jerarquía tipográfica (Type hierarchy)

  • Sweden Sans es la tipografía principal y ofrece cuatro pesos: Book, Regular, Semibold y Bold
  • Cuando no se puede usar Sweden Sans, Noto Sans actúa como tipografía alternativa y de apoyo
  • Sweden Sans es un elemento central de la identidad de marca de Suecia; se encarga de mantener la consistencia, crear claridad y gestionar el legado de la marca, y debe usarse siempre que se necesite expresar plenamente la marca
  • Noto Sans se usa como alternativa (secundaria) y tipografía de apoyo de Sweden Sans, así como tipografía de reemplazo para idiomas no romanos y caracteres especiales, y como fallback para pesos especiales como itálica
    • Se recomienda evitar su uso fuera de estos casos siempre que sea posible, ya que puede debilitar la fuerza expresiva de la marca

Tipografía principal (Main typeface)

  • Sweden Sans está disponible en cuatro pesos: Book, Regular, Semibold y Bold
    • Semibold se usa solo en sublogos

Tipografía alternativa (Alternative typeface)

  • Noto es una familia tipográfica de Google cuyo objetivo es admitir todos los idiomas del mundo, y está licenciada bajo la Open Font License
  • Noto Sans se usa cuando Sweden Sans no puede cubrir el entorno de aplicación real o el uso previsto
    • Uso exclusivo para soporte de idiomas
    • Pesos no disponibles (por ejemplo, itálica)
    • Caracteres especiales

Tipografía de respaldo (Fallback typeface)

  • Arial es la tipografía de respaldo y se usa cuando Sweden Sans o Noto Sans no están instaladas o no pueden utilizarse
  • En comunicaciones cotidianas, como documentos de Word, Arial puede ser más adecuada

Combinaciones (Pairings)

  • Usar las combinaciones tipográficas propuestas para asegurar claridad, consistencia y una jerarquía marcada en todas las comunicaciones
  • Se presentan ejemplos como Level 1 Sweden Sans + Level 2 Noto Sans, y combinaciones de Level 1 Sweden Sans con Level 2 Noto Sans Italic/Mono
  • Incluye ejemplos de combinaciones multilingües, como Noto Sans Russian y Noto Sans Japanese

Escalones tipográficos (Type stairs)

  • Los escalones tipográficos ayudan a manejar títulos, cuerpo de texto y la relación entre ambos
  • Los titulares en negrita contrastan con tipografías más pequeñas para asegurar claridad, consistencia y una jerarquía marcada

Digital (Digital)

  • Como jerarquía tipográfica principal para la expresión digital de la marca Suecia, aplica como línea base un ritmo estructurado en unidades de 6px
    • Ofrece una correlación equilibrada al alternar entre distintos tamaños y combinaciones, y mantiene la expresión general
  • Las etiquetas se usan con moderación junto con titulares vinculados a una oferta o categoría específica
    • Ayudan a que el usuario clasifique la información rápidamente y la conecte directamente con categorías u ofertas
    • Se usan principalmente en tarjetas dentro de espacios hero para describir proyectos seleccionados, valores centrales y contenido editorial destacado
  • Todos los estilos pueden usarse en blanco sobre fondos oscuros, con excepción de los enlaces

Espaciado (Spacing)

  • Para un flujo tipográfico razonable y continuo en toda la plataforma, todo el interlineado se define mediante una retícula de línea base (una línea cada 6px)
  • Todos los espaciados se ajustan ópticamente a la línea base para equilibrarse con distintos interlineados
    • Regla general: cuanto más grande sea el titular, mayor será el espacio entre el titular y el párrafo

Escritura (Writing)

  • En todos los contextos, usar mayúsculas/minúsculas de oración (sentence case) o minúsculas siempre que sea posible
    • La marca busca una expresión que le hable a la audiencia sin gritarle
  • Usar mayúsculas solo cuando sea necesario, limitándolas a un máximo de 1 a 3 caracteres (por ejemplo, etiquetas de categoría en un sitio web)

Lectura de derecha a izquierda (Right to left hand reading)

  • Cuando el sublogo y el contenido estén basados en texto árabe, seguir los ejemplos presentados

Alineación (Alignment)

  • El texto siempre va alineado a la izquierda
  • El Sender system también siempre va alineado a la izquierda
  • El logo dentro del Sender system va centrado

Casos de aplicación (Applications)

  • Se ofrecen ejemplos de uso de la familia Sweden Sans
    • Semibold en el logotipo
    • Sweden Sans Bold en titulares
    • Sweden Sans Book en el cuerpo de texto

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-07-19
Comentarios de Hacker News

  • Me encanta la tipografía y el diseño de páginas, y disfruto leer sobre el tema, pero no termino de entender cómo se sostiene este nivel de detalle casi obsesivo
    A menudo parece que la documentación y el cuidado por los detalles dedicados a la tipografía y a sus condiciones de uso son mucho mayores que el tiempo invertido en operar un sitio web, documentar una API o las funciones básicas de una app
    Se siente como cultivar un roble durante 100 años, sacar chapas de madera con un cuchillo artesanal, remojarlas en aceite de coco por un año y luego pegarlas sobre un tablero alveolar de pulpa de IKEA

    • La documentación tipográfica normalmente está pensada para diseñadores, pero si se usa bien puede beneficiar a todos. Si los diseñadores crean un diseño consistente, los desarrolladores pueden construir un sistema de diseño con comportamientos predeterminados razonables, y al llegar a ese punto el sistema no aumenta la carga del desarrollador, sino que la reduce
      Una vez hice, a bastante escala en el sector educativo, una implementación de un sistema de diseño basado en Tailwind, y tanto el diseño como tailwind-config salían de la misma especificación. Al reducir opciones y posibilidades, se elimina el espacio donde el ingeniero tiene que decidir, y valores como padding, grosor de fuente, interlineado y color quedan todos consistentes
      Un mockup que se sale del interlineado, el padding, el peso o el color es un mockup incorrecto, y los valores configurados se lo dejan claro al desarrollador. El código que se sale de la especificación también es incorrecto. Hace falta un buen flujo de comunicación entre ingeniería y UX, pero realmente funciona
      En un sistema que funciona bien, con solo verlo ya sabes cuáles son los valores por defecto y eso reduce la carga. Y al final, todo el propósito del backend de una app es servir al frontend. Aunque las prácticas de backend sean excelentes, si no se ajusta al diseño o a la especificación, el fracaso es visible para el cliente
    • Quienes hacen este tipo de guías de diseño y quienes se encargan de la documentación de API u otras funciones básicas por lo general cumplen roles distintos. Por eso, crear guías de diseño y trabajar en requisitos técnicos no es necesariamente un juego de suma cero; de hecho, muchas veces son esfuerzos completamente separados
      El diseño, y en particular la tipografía, está directamente relacionado con la accesibilidad, así que merece ese nivel de detalle. Definir el contraste y la jerarquía visual tiene un gran impacto en qué tan accesible es un diseño
      En este ejemplo se nota especialmente la parte donde dicen que a futuro se use mucho menos texto en mayúsculas. Las mayúsculas son algo por lo que ya me ha tocado discutir con diseñadores debido a problemas de accesibilidad, y Microsoft también tuvo problemas públicos importantes con eso en su diseño inicial “Metro”, luego pidió disculpas y después dio marcha atrás con el diseño “Fluent”
      La gente lee más la forma de las palabras que las letras individuales, y las mayúsculas crean muchos rectángulos parecidos, lo que reduce la velocidad de lectura incluso para lectores sin dislexia, como si fueran topes en el camino. Para lectores con dislexia, no son topes sino paredes, y el texto completamente en mayúsculas puede volverse prácticamente inaccesible
      He visto mucho diseño que usa todo en mayúsculas porque “se ve bien”, pero lo que para algún diseñador puede verse ordenado y limpio, para otra persona puede ser un enorme bug de accesibilidad
    • Me sorprende la enorme cantidad de esfuerzo que entra en esto, pero la razón parece simple. Hay mucha gente a la que le encanta obsesionarse con la tipografía, quiere obsesionarse con eso, y por eso crea un propósito para hacerlo
      En lo personal, me parece bien, y creo que hay que pagarles a esas personas
    • Estas guías pueden ser muy útiles de muchas maneras. Personas con distintos niveles de experiencia y formación suelen intentar ejercer su creatividad incluso a costa de una campaña de marca a gran escala, así que el equipo de diseño de marca tiene que encontrar formas de encauzar ese entusiasmo
      El acceso técnico para esas personas por lo general es limitado, pero el acceso de facto a la expresión de marca a través de recursos gráficos es mucho más amplio
      Si hay una diferencia frente a la documentación técnica, esa diferencia debe tratarse como un problema aparte; no corresponde llamar puntillosas a las guías de diseño solo porque otra cosa esté menos planificada o menos documentada
    • Esta no es una guía para apps o sitios web, sino una guía sobre cómo deben usar la tipografía el Ministerio de Relaciones Exteriores, el Ministerio de Innovación Empresarial, el Ministerio de Cultura, el Swedish Institute, Business Sweden, Visit Sweden y varias otras entidades que usan cuando representan a Suecia en el extranjero
      No me parece que la sección de tipografía sea inusualmente grande. Trabajé dos años en una empresa que hacía solo manuales de diseño, y los manuales bien hechos suelen verse así

  • Hace poco también conocí Finlandica de Finlandia y está bastante bien: https://toolbox.finland.fi/brand-identity-and-guidelines/fin...

    • No me gusta el elemento sobre la A mayúscula. Puede verse bien si se usa de forma ocasional, como en un título, pero verlo en cada A distrae
    • Se ve realmente bien. Casi parece una fuente monoespaciada, y con unos pequeños ajustes podría ser una gran tipografía para programar
    • #, &, @ no me convencen. La A y la G también son raras, parecen dos letras decoradas dentro de una tipografía sans serif. Lo mismo pasa con la i y la j
      Aun así, la I está diseñada para distinguirse de la l, y en muchas tipografías no pasa eso

  • No importa cuánto cuidado pongas en la tipografía y el diseño si la forma de recibir al visitante es un molesto “¿de verdad no quieres cookies de seguimiento?”. Hay que hacer clic en dos casillas pequeñas, y junto a “permitir solo las opciones seleccionadas”, que está atenuado, aparece un botón en negritas y hostil para el usuario de “permitir todo”
    Si de verdad quieres mejorar la UX, una de estas cosas sí vale más la pena atenderla

  • Lo hizo la agencia de diseño de Estocolmo Söderhavet. Más detalles aquí: https://soderhavet.com/work/sweden/

  • En Estados Unidos tienen Public Sans: https://public-sans.digital.gov/

  • https://archive.is/7ytlz
    Parece que se cayó por el tráfico de HN

    • Es un poco decepcionante que sweden.se no pueda aguantar ni siquiera unos miles de visitas en poco tiempo
    • Sé que HN no es un foro de soporte, pero me pregunto si soy el único al que en los sitios archive.xx le aparece “Safari couldn’t establish a secure connection”. Me viene pasando desde hace bastante tiempo

  • Parece que esto es para un sitio enfocado en promocionar la imagen de Suecia ante los extranjeros. Vivo en Suecia y no creo haber visto que esta tipografía se use en la comunicación general de las instituciones estatales suecas
    Si se le puede llamar el lenguaje de diseño de la Swedish Tax Agency, eso sí me gusta. No parece que usen Sweden Sans, pero no sé exactamente cuál usan

    • Ese sitio lo opera el Swedish Institute
      “El Swedish Institute es una agencia pública que construye interés y confianza en Suecia alrededor del mundo. Trabajamos con la promoción de Suecia, la cooperación en la región del mar Báltico y el desarrollo global. […] Las operaciones del SI se financian principalmente mediante asignaciones directas del presupuesto estatal. El SI cuenta con alrededor de 470 millones de coronas suecas en fondos del gobierno sueco dentro de cuatro áreas: cooperación internacional, ayuda internacional, educación e investigación universitaria, y negocios.”
      [1] https://si.se/en/about-si/our-mission/
    • Según entiendo, Sweden Sans se usa como tipografía de títulos en los documentos nacionales de identidad y pasaportes más recientes
    • Definitivamente es interesante que hoy en día los países hagan su propia promoción. Y sí funciona. Si piensas en los países nórdicos, es muy probable que Suecia sea el primero que te venga a la mente
    • Yo también pensé que era un sitio para promocionar la imagen de Suecia. Tiene lugares agradables y paisajes rurales, y si tienes una motocicleta no toma tanto tiempo recorrer Suecia
      https://www.youtube.com/watch?v=qXiIJ32kaZU
      Alguien en Suecia dijo que la policía tiene que atraparte ese mismo día para poder demostrar que eras el conductor, pero yo pienso seguir usando la autobahn alemana. Hay menos alces sueltos
      ghost rider patrik fürstenhoff

  • Se llama Sweden Sans, pero algunas letras, como la i minúscula y la l, parecen tener serifas. No sé si entendí mal lo que es una serifa, o si entendí mal lo que significa sans aquí

    • Hay bastante margen. Como el diseño tipográfico también es un arte emocional, a veces el diseñador mete discretamente una serifa, o puede haber una razón específica en la especificación del proyecto
      Cuando enseñaba tipografía en los 2000, los estudiantes solían señalar este tipo de cosas. Como ejemplo de clase para principiantes, a veces usaban una tipografía sin examinarla bien y después se atoraban con algún detalle
      Es raro, pero la mayoría de la gente elige tipografías sin pensar mucho en la tipografía en sí. Ni siquiera leen el nombre, mucho menos la observan con atención. Solo piensan en su propio diseño, sus ideas y emociones, su mensaje, una oportunidad de diseño atractiva
      A un diseñador con experiencia hay que entrenarlo para pensar si no estará en realidad alucinando el propósito de la tipografía. Porque muchas veces, con solo mirarla unos segundos, el propósito original se vuelve muy claro. Cuando aprendes cómo funciona esto, también se vuelve evidente por qué le metieron esa slab serif
    • No es una categoría tan estricta. Es más bien un indicador de en qué linaje considera el diseñador que entra esa tipografía
      Muchas tipografías sans serif también llevan un poco de serifa, especialmente en caracteres fáciles de confundir como la l. Eso pasa aún más cuando se usan en contextos técnicos o, como esta, como tipografías para todo uso
    • El peso regular y el bold quizá estén más cerca de una slab serif, pero el peso “book” sí es una sans serif de verdad. Probablemente sea más fácil verlo si descargas la tipografía y revisas los archivos OTF
    • Sí parece que en realidad tiene un poco de slab serif. Si queremos ser generosos, se puede decir que serif y sans serif son un espectro con extremos
      Si la llamaras serif, la gente esperaría una tipografía mucho más claramente serif, así que quizá sea más simple llamarla sans serif
    • El término correcto sería Slab Serif

  • Francia también tiene su propio sistema de diseño y la tipografía Marianne: https://www.systeme-de-design.gouv.fr/elements-d-interface/f...

  • No es por menospreciar a Suecia, pero Estonia también tiene algo parecido: https://brand.estonia.ee/guidelines/typography/?lang=en

    • La belleza está en el ojo de quien la mira, pero aunque el trabajo de Suecia en general se ve bastante bonito y fácil de leer, la guía de Estonia parece un gran ejemplo de lo que pasa cuando se deja al diseñador hacer lo que quiera, o cuando el cliente es demasiado complaciente y quiere cambiar por cambiar
      En la introducción describen la personalidad de la marca Estonia como “nordic, surprising, smart”, pero da la impresión de que, sobre todo la tipografía Aino, se enfoca demasiado en lo surprising a costa de la legibilidad, y por eso la expresión del elemento smart claramente se debilita.