Fontes monospace em branding: tech, editorial e retro

As fontes monospace dão a todos os caracteres a mesma largura, por isso um i ocupa tanto espaço como um m e o texto alinha-se em colunas certinhas. Esse ritmo mecânico é a razão pela qual as marcas as usam: numa identidade tecnológica a monospace lê-se como precisa e bem engendrada, em design editorial como direta e documental, e em trabalho retro lembra máquinas de escrever, talões e terminais de ecrã verde. Bons tipos gratuitos incluem JetBrains Mono, IBM Plex Mono, Space Mono, DM Mono e Courier Prime, todos no Google Fonts.

Porque é que a tipografia monospace transmite o que transmite

As fontes normais são proporcionais: letras estreitas ocupam caixas estreitas, letras largas caixas largas. A monospace obriga todas as letras a uma só caixa. As letras estreitas ganham serifas ou barras para encher o espaço, as largas são apertadas, e o resultado tem uma grelha visível. As pessoas associam essa grelha às máquinas que a produziram: máquinas de escrever, editores de código, terminais, bilhetes de avião e etiquetas de envio. Essas associações são o valor da marca e, ao mesmo tempo, o risco.

Fontes monospace gratuitas, por estilo

Algumas histórias ajudam na escolha. A IBM Plex Mono faz parte da família corporativa da própria IBM, por isso traz uma calma séria e institucional. A Space Mono foi desenhada pela Colophon para o Google Design e tem um aspeto geométrico distintivo que aguenta como título. A Courier Prime foi feita como uma Courier mais refinada para argumentos de cinema. A VT323 baseia-se nas letras de um terminal DEC dos anos 1980, por isso lê-se de imediato como retro.

Monospace no branding tecnológico

Para ferramentas de programação e produtos técnicos, um tipo mono sinaliza que a marca fala a língua do utilizador. A armadilha é usá-lo em todo o lado. Um site inteiro em monospace cansa a leitura e parece um editor de código e não um produto. O padrão mais forte é uma sem serifa limpa para títulos e texto, com monospace para os pormenores genuinamente técnicos: números de versão, comandos, etiquetas, preços em tabelas, pequenos sobretítulos.

Monospace no design editorial

Revistas, newsletters e estúdios usam monospace para metadados: datas, legendas, créditos, números de edição e cabeçalhos correntes. Ao lado de uma serifa ou de uma sem serifa refinada, acrescenta uma nota de honestidade, como o caderno de um repórter ou uma etiqueta de arquivo. Funciona porque é usada com parcimónia e em tamanho pequeno, em maiúsculas ou minúsculas com um pouco de espaçamento entre letras. Os fundamentos de tipografia e a combinação de fontes explicam como construir esse contraste.

Monospace no design retro

A monospace retro vem em dois dialetos. Os tipos de máquina de escrever trazem papel, tinta e o escritório dos anos 1960; os tipos de terminal trazem ecrãs luminosos e a informática dos primórdios. A cor faz metade do trabalho: um tipo de máquina de escrever sobre branco quente quebrado, um tipo de terminal em verde fósforo ou âmbar sobre quase preto. As fontes retro cobrem a gama mais vasta de estilos nostálgicos.

Usar bem a monospace

Às vezes o que realmente queres são números que se alinhem, e não uma voz mecânica. Muitas fontes proporcionais incluem algarismos tabulares, dígitos que partilham todos a mesma largura, que podes ativar em CSS. Isso mantém preços e tabelas arrumados sem mudar o ambiente de todo o design.

/* A monospace accent for technical labels */
.label {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Aligned numbers without switching to monospace */
.price-table td {
  font-variant-numeric: tabular-nums;
}

A monospace combina bem com fundos de gradiente e de materiais, porque a sua textura plana e uniforme contrasta com a cor suave. No Gradiently, um Mark mantém as etiquetas pequenas legíveis ao mover a sua região mais calma para trás das palavras e ao escolher tinta clara ou escura por linha, e com o Pro o kit de marca guarda as tuas fontes de título e de texto, incluindo ficheiros de fonte carregados. Para uma visão mais ampla da tipografia de marca, vê as fontes da marca e as fontes modernas.