Tipografia sueca

 (identity.sweden.se)
3 pontos por GN⁺ 2023-07-19 | 1 comentários | Compartilhar no WhatsApp
  • Sweden Sans é a fonte principal responsável pela acessibilidade, simplicidade e consistência em toda a comunicação da marca Suécia, criada com inspiração no antigo sistema de sinalização sueco
  • Projetada para ter alta legibilidade e manter a identidade própria da marca, garantindo alta identificabilidade para causar forte impacto em todos os contextos de aplicação
  • Sweden Sans está disponível em quatro pesos: Book, Regular, Semibold, Bold; quando não for possível usar Sweden Sans, Noto Sans funciona como fonte substituta e auxiliar
  • Quando nem Sweden Sans nem Noto Sans puderem ser usadas, Arial deve ser usada como fonte de fallback
  • Em ambientes digitais, uma hierarquia tipográfica estruturada baseada em uma grade de linha de base de 6px é aplicada para manter uma expressão de marca consistente

Hierarquia tipográfica (Type hierarchy)

  • Sweden Sans é a fonte principal e oferece quatro pesos: Book, Regular, Semibold, Bold
  • Quando Sweden Sans não estiver disponível, Noto Sans atua como fonte substituta e auxiliar
  • Sweden Sans é um elemento central da identidade da marca Suécia, responsável por manter a consistência, criar clareza e gerenciar o legado da marca, e deve ser usada sempre que for necessário expressar plenamente a marca
  • Noto Sans é usada como alternativa (secundária) e fonte auxiliar da Sweden Sans, além de servir como fonte substituta para idiomas não romanos e caracteres especiais, e como fallback para pesos especiais, como itálico
    • O uso fora dessas finalidades deve ser evitado sempre que possível, pois pode enfraquecer a expressividade da marca

Fonte principal (Main typeface)

  • Sweden Sans está disponível em quatro pesos: Book, Regular, Semibold, Bold
    • Semibold é usado apenas em sublogos

Fonte alternativa (Alternative typeface)

  • Noto é uma família de fontes do Google que busca oferecer suporte a todos os idiomas do mundo e é licenciada sob a Open Font License
  • Noto Sans é usada quando Sweden Sans não oferece suporte ao ambiente real de aplicação ou ao caso de uso
    • Uso exclusivamente para suporte a idiomas
    • Pesos indisponíveis (por exemplo, itálico)
    • Caracteres especiais

Fonte de fallback (Fallback typeface)

  • Arial é a fonte de fallback, usada quando Sweden Sans ou Noto Sans não estão instaladas ou não podem ser usadas
  • Em comunicações cotidianas, como documentos do Word, Arial pode ser mais adequada

Combinações (Pairings)

  • Use as combinações de fontes propostas para garantir clareza, consistência e uma hierarquia forte em todas as comunicações
  • Exemplos apresentados incluem Level 1 Sweden Sans + Level 2 Noto Sans, e combinações de Level 1 Sweden Sans com Level 2 Noto Sans Italic/Mono
  • Inclui exemplos de combinações multilíngues, como Noto Sans Russian e Noto Sans Japanese

Escala tipográfica (Type stairs)

  • A escala tipográfica ajuda a lidar com títulos, corpo do texto e a relação entre eles
  • Manchetes em peso forte contrastam com tipografias menores, garantindo clareza, consistência e uma hierarquia forte

Digital (Digital)

  • Como a principal hierarquia tipográfica para a expressão digital da marca Suécia, aplica um ritmo estruturado em unidades de 6px como linha de base
    • Oferece uma correlação equilibrada ao transitar entre diferentes tamanhos e combinações, mantendo a expressão geral
  • Rótulos devem ser usados com moderação junto a manchetes associadas a ofertas ou categorias específicas
    • Ajudam os usuários a classificar rapidamente as informações e conectá-las diretamente a categorias ou ofertas
    • São usados principalmente em cards no espaço hero para descrever projetos selecionados, valores centrais e conteúdos editoriais principais
  • Todos os estilos podem ser usados em branco sobre fundos escuros, com exceção dos links

Espaçamento (Spacing)

  • Para um fluxo tipográfico racional e contínuo em toda a plataforma, todos os entrelinhamentos são definidos pela grade de linha de base (uma linha a cada 6px)
  • Todos os espaçamentos são definidos opticamente alinhados à linha de base para equilibrar diferentes entrelinhamentos
    • Regra geral: quanto maior a manchete, maior o espaçamento entre a manchete e o parágrafo

Escrita (Writing)

  • Em todos os contextos, use sentence case ou minúsculas sempre que possível
    • A marca busca uma expressão que fale com o público, sem gritar
  • Use maiúsculas apenas quando necessário, limitando a no máximo 1 a 3 caracteres (por exemplo, rótulos de categoria em um site)

Leitura da direita para a esquerda (Right to left hand reading)

  • Quando sublogos e conteúdos forem baseados em texto em árabe, siga os exemplos apresentados

Alinhamento (Alignment)

  • O texto deve estar sempre alinhado à esquerda
  • O Sender system também deve estar sempre alinhado à esquerda
  • O logotipo dentro do Sender system deve ser alinhado ao centro

Aplicações (Applications)

  • São fornecidos exemplos de uso da família Sweden Sans
    • Semibold no logotipo
    • Sweden Sans Bold em manchetes
    • Sweden Sans Book no corpo do texto

Leituras relacionadas

1 comentários

 
GN⁺ 2023-07-19
Opiniões do Hacker News

  • Sou fascinado por tipografia e design de páginas, e gosto de ler textos sobre o assunto, mas não sei bem como se mantém esse nível de detalhismo quase obsessivo
    Muitas vezes, a documentação e o cuidado com detalhes dedicados à fonte e às condições de uso parecem muito maiores do que o tempo gasto na operação do site, na documentação da API ou nas funcionalidades básicas do app
    É como cultivar um carvalho por 100 anos, tirar uma lâmina de madeira com uma faca artesanal, deixá-la de molho em óleo de coco por um ano e depois colá-la num painel alveolar de polpa da IKEA

    • Documentos de tipografia geralmente são feitos para designers, mas, quando usados corretamente, podem ajudar todo mundo. Se o designer cria um design consistente, o desenvolvedor consegue criar um design system com comportamentos-padrão corretos e, chegando a esse ponto, o sistema reduz a carga sobre o desenvolvedor em vez de aumentá-la
      Já criei, em escala considerável na área de educação, uma interpretação de design system baseado em Tailwind, em que o design e o tailwind-config vinham da mesma especificação. Ao reduzir opções e possibilidades, eliminamos áreas em que o engenheiro precisaria ficar decidindo, e valores como padding, peso da fonte, entrelinha e cores ficam todos consistentes
      Um mockup que foge da entrelinha, do padding, do peso, das cores etc. é um mockup errado, e os valores configurados expõem isso ao desenvolvedor. Código que foge da especificação também é código errado. É preciso um bom fluxo de comunicação entre engenharia e UX, mas funciona de verdade
      Em um sistema que funciona bem, só de olhar você passa a conhecer os padrões, o que reduz a carga. E o objetivo de todo o backend de um app é, no fim, servir o frontend. Mesmo que as práticas de backend sejam excelentes, se você não atender ao design ou à especificação, isso vira uma falha visível para o cliente
    • As pessoas que criam esse tipo de guia de design e as que cuidam da documentação de API ou de outras funcionalidades básicas em geral têm papéis diferentes. Por isso, criar um guia de design e trabalhar em requisitos técnicos não é necessariamente um jogo de soma zero; na prática, muitas vezes são esforços totalmente separados
      Design, especialmente tipografia, está diretamente ligado à acessibilidade, então merece esse cuidado com detalhes. Definir contraste e hierarquia visual afeta muito o quanto um design é acessível
      Neste exemplo, chama atenção especialmente a parte que recomenda usar muito menos texto em maiúsculas daqui para frente. Maiúsculas são um item sobre o qual já briguei com designers por questões de acessibilidade, e a Microsoft também teve problemas públicos sérios com o design inicial “Metro”, pediu desculpas e depois voltou atrás no design “Fluent”
      As pessoas leem mais a forma das palavras do que letras individuais, e as maiúsculas criam muitos retângulos parecidos, reduzindo a velocidade de leitura como lombadas na estrada até para leitores sem dislexia. Para leitores com dislexia, isso pode parecer não uma lombada, mas uma parede, tornando textos inteiros em maiúsculas praticamente inacessíveis
      Já vi muitos designs usando tudo em maiúsculas porque “fica bonito”, mas uma forma que para um designer parece organizada e limpa pode ser, para outra pessoa, um enorme bug de acessibilidade
    • É surpreendente que tanto esforço seja colocado nisso, mas o motivo parece simples. Há muita gente que gosta de ser obcecada por tipografia; elas querem ser obcecadas, então criam um propósito para essa obsessão
      Pessoalmente, acho bom, e acho que essas pessoas deveriam ser pagas por isso
    • Diretrizes assim podem ser muito úteis de várias maneiras. Como pessoas com diferentes níveis de experiência e treinamento tentam exercer criatividade até à custa de grandes campanhas de marca, a equipe de design de marca precisa encontrar formas de controlar esse entusiasmo
      O acesso técnico dessas pessoas costuma ser bem limitado, mas o acesso à expressão de marca de fato por meio de representação gráfica é muito mais amplo
      Se houver diferença em relação à documentação técnica, essa diferença deve ser tratada como um problema separado; não é o caso de chamar o guia de design de picuinha só porque alguma outra coisa é menos planejada ou menos documentada
    • Isto não é uma diretriz para apps ou sites, mas um guia sobre como o Ministério das Relações Exteriores, o Ministério da Empresa e Inovação, o Ministério da Cultura, o Swedish Institute, a Business Sweden, a Visit Sweden e as várias organizações que eles usam devem empregar tipografia ao representar a Suécia no exterior
      Não acho que a seção de fontes seja excepcionalmente grande. Trabalhei por dois anos em uma empresa que fazia apenas manuais de design, e um manual bem feito geralmente tem essa cara

  • Recentemente também conheci a Finlandica, da Finlândia, e ela é bem boa: https://toolbox.finland.fi/brand-identity-and-guidelines/fin...

    • Não gosto do elemento acima do A maiúsculo. Quando usado raramente, como em títulos, pode ficar legal, mas vê-lo em todos os A distrai
    • É realmente bonita. Parece quase uma fonte monoespaçada e, com alguns ajustes, poderia virar uma ótima fonte para programação
    • #, &, @ não me agradam. O A e o G também são estranhos, parecendo duas letras com ornamentos dentro de uma fonte sem serifa. O i e o j também, de certa forma
      Por outro lado, o I foi desenhado para se distinguir do l, o que não acontece em muitas fontes

  • Por mais cuidado que se tenha com fontes e design, não adianta muito se a forma de receber o visitante é um irritante “tem certeza de que não quer cookies de rastreamento?”. É preciso clicar em duas caixinhas, e ao lado de um “permitir apenas itens selecionados” esmaecido há um botão em negrito, hostil ao usuário, de “permitir tudo”
    Se querem mesmo melhorar a UX, uma dessas coisas merece mais atenção

  • Foi criado pela agência de design de Estocolmo Söderhavet. Mais detalhes aqui: https://soderhavet.com/work/sweden/

  • Nos EUA existe a Public Sans: https://public-sans.digital.gov/

  • https://archive.is/7ytlz
    Parece que foi derrubado pelo tráfego do HN

    • É meio decepcionante que o sweden.se não consiga aguentar nem alguns milhares de visitantes em pouco tempo
    • Sei que o HN não é fórum de suporte, mas fico curioso se sou só eu que vejo “Safari couldn’t establish a secure connection” em sites archive.xx. Isso acontece comigo há bastante tempo

  • Parece ser um site focado em promover a imagem da Suécia para estrangeiros. Morando na Suécia, acho que nunca vi essa fonte ser usada na comunicação comum de órgãos públicos suecos
    Se dá para chamar isso de linguagem de design da Swedish Tax Agency, eu gosto. Não parece que usem Sweden Sans, mas não sei exatamente o que usam

    • Esse site é operado pelo Swedish Institute
      “O Swedish Institute é uma agência pública que constrói interesse e confiança na Suécia pelo mundo. Trabalhamos com promoção da Suécia, cooperação na região do Mar Báltico e desenvolvimento global. […] As operações do SI são financiadas principalmente por alocações diretas via orçamento nacional. O SI dispõe de cerca de 470 milhões de SEK em recursos do governo sueco em quatro áreas: cooperação internacional, ajuda internacional, educação e pesquisa universitária, e negócios.”
      [1] https://si.se/en/about-si/our-mission/
    • Pelo que sei, a Sweden Sans é usada como fonte de títulos nos documentos de identidade nacionais e passaportes mais recentes
    • É realmente interessante ver que hoje em dia os países fazem o próprio marketing. E funciona. Quando se pensa em um país nórdico, há uma boa chance de a Suécia ser o primeiro que vem à cabeça
    • Eu também pensei que fosse um site para promover a imagem da Suécia. Há espaços agradáveis e paisagens rurais, e, se você tiver uma moto, não demora muito para percorrer a Suécia
      https://www.youtube.com/watch?v=qXiIJ32kaZU
      Alguém na Suécia disse que a polícia precisa pegar no mesmo dia para provar quem era o motorista, mas eu pretendo continuar nas Autobahns alemãs. Tem menos alces soltos por lá
      ghost rider patrik fürstenhoff

  • O nome é Sweden Sans, mas algumas letras, como o i e o l minúsculos, parecem ter serifas. Não sei se estou entendendo errado o que é serifa ou se estou entendendo errado o que “sans” quer dizer aqui

    • Há bastante margem para isso. Como o design de fontes também é uma arte emocional, às vezes o designer enfia discretamente uma serifa, ou pode haver um motivo específico nas especificações do projeto
      Quando eu ensinava tipografia nos anos 2000, os alunos costumavam apontar coisas assim. Em aulas para iniciantes, havia exemplos de pessoas usando uma fonte sem examiná-la direito e só depois tropeçando em algum detalhe
      É estranho, mas a maioria das pessoas escolhe fontes sem pensar muito na fonte em si. Nem chegam a olhar com atenção, muito menos ler o nome. Pensam apenas no próprio design, nas ideias e emoções, na mensagem, em oportunidades de criar um design legal
      Designers experientes precisam ser treinados a considerar se não estão, na prática, alucinando o propósito da fonte. Muitas vezes, em poucos segundos de observação, o propósito original fica muito claro. Quando você aprende como isso funciona, também fica evidente por que aquela serifa slab foi incluída
    • Não é uma categoria tão rígida assim. Está mais para um indicador de qual linhagem o designer considera que a fonte pertence
      Muitas fontes sem serifa também incluem um pouco de serifa, especialmente em caracteres fáceis de confundir, como o l. Isso vale ainda mais se forem usadas em contexto técnico ou, como esta fonte, em todo lugar
    • Os pesos regular e bold talvez sejam mais próximos de slab serif, mas o peso “book” é uma verdadeira sem serifa. A forma mais fácil de ver provavelmente é baixar a fonte e olhar os arquivos OTF
    • De fato, parece que há um pouco de serifa slab. Sendo generoso, dá para dizer que serifadas e sem serifa são um espectro com extremos
      Se a chamassem de serifada, as pessoas esperariam uma fonte muito mais serifada, então talvez seja mais simples chamá-la de sem serifa
    • O termo correto provavelmente é Slab Serif

  • A França também tem seu próprio sistema de design e a fonte Marianne: https://www.systeme-de-design.gouv.fr/elements-d-interface/f...

  • Não quero desmerecer a Suécia, mas a Estônia também tem algo parecido: https://brand.estonia.ee/guidelines/typography/?lang=en

    • Beleza está nos olhos de quem vê, mas o trabalho sueco, em geral, é bem bonito e fácil de ler, enquanto as diretrizes da Estônia parecem um ótimo exemplo do que acontece quando um designer pode fazer o que quiser, ou quando o cliente é complacente demais e quer ser diferente
      Na introdução, a personalidade da marca Estonia é descrita como “nordic, surprising, smart”, mas, em especial, a fonte Aino parece ter se concentrado demais em surprising, até ao ponto de sacrificar a legibilidade, e por isso a expressão do elemento smart fica claramente enfraquecida